Skip to content

Commit

Permalink
Upgrade tailwind version (#6550)
Browse files Browse the repository at this point in the history 
* Fix overflowing text content in footer link

Add an ellipsis to overflowing text in the footer section for navigating between different references.

* Add min and max width to nextlink class

* Add minwidth to tailwind config

* Wrap string beyond max width

* Remove title attribute from span element

* Upgrade tailwind to 3.4.1

* Remove manual width config from minWidth

* Remove minWidth from tailwind config and preserve default value of min-w-xs
  • Loading branch information
@prajwalkulkarni
prajwalkulkarni authored Jan 18, 2024
1 parent 7a15e96 commit 9c316b2
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 54 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
"retext": "^7.0.1",
"retext-smartypants": "^4.0.0",
"rss": "^1.2.2",
"tailwindcss": "^3.3.2",
"tailwindcss": "^3.4.1",
"typescript": "^4.0.2",
"unist-util-visit": "^2.0.3",
"webpack-bundle-analyzer": "^4.5.0"
Expand Down
8 changes: 4 additions & 4 deletions src/components/Layout/Feedback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,16 +63,16 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
return (
<div
className={cn(
'max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
'max-w-custom-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex',
{exit: isSubmitted}
)}>
<p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
<p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
</p>
{!isSubmitted && (
<button
aria-label="Yes"
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
onClick={() => {
setIsSubmitted(true);
onSubmit();
Expand All @@ -84,7 +84,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
{!isSubmitted && (
<button
aria-label="No"
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
onClick={() => {
setIsSubmitted(true);
onSubmit();
Expand Down
16 changes: 8 additions & 8 deletions src/components/Layout/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
)}>
{showSidebar && (
<div className="lg:-mt-16">
<div className="lg:pt-16 fixed lg:sticky top-0 start-0 end-0 py-0 shadow lg:shadow-none">
<div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
<SidebarNav
key={section}
routeTree={routeTree}
Expand All @@ -143,7 +143,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
<Suspense fallback={null}>
<main className="min-w-0 isolate">
<article
className="break-words font-normal text-primary dark:text-primary-dark"
className="font-normal break-words text-primary dark:text-primary-dark"
key={asPath}>
{content}
</article>
Expand All @@ -153,14 +153,14 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
)}>
{!isHomePage && (
<div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
<div className="w-full px-5 pt-10 mx-auto sm:px-12 md:px-12 md:pt-12 lg:pt-10">
{
<hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
<hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
}
{showSurvey && (
<>
<div className="flex flex-col items-center m-4 p-4">
<p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
<div className="flex flex-col items-center p-4 m-4">
<p className="mb-4 text-lg font-bold text-primary dark:text-primary-dark">
How do you like these docs?
</p>
<div>
Expand All @@ -178,7 +178,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
</ButtonLink>
</div>
</div>
<hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
<hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
</>
)}
</div>
Expand All @@ -193,7 +193,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
</div>
</main>
</Suspense>
<div className="-mt-16 hidden lg:max-w-xs 2xl:block">
<div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
{showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/SidebarNav/SidebarNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ export default function SidebarNav({
}}>
<aside
className={cn(
`lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
`lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-10 hidden lg:block`
)}>
<nav
role="navigation"
style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
className="w-full lg:h-auto grow pe-0 lg:pe-5 pt-6 lg:pb-16 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
className="w-full pt-6 scrolling-touch lg:h-auto grow pe-0 lg:pe-5 lg:pb-16 md:pt-4 lg:pt-4 scrolling-gpu">
{/* No fallback UI so need to be careful not to suspend directly inside. */}
<Suspense fallback={null}>
<SidebarRouteTree
Expand Down
30 changes: 15 additions & 15 deletions src/components/Layout/TopNav/TopNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ function Link({
return (
<NextLink
href={`${href}`}
className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
className="inline leading-normal transition duration-100 ease-in border-b border-opacity-0 text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-link hover:border-opacity-100"
{...props}>
{children}
</NextLink>
Expand Down Expand Up @@ -233,8 +233,8 @@ export default function TopNav({
'duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pe-5 lg:ps-4 z-50',
{'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
)}>
<div className="h-16 w-full gap-0 sm:gap-3 flex items-center justify-between">
<div className="3xl:flex-1 flex flex-row ">
<div className="flex items-center justify-between w-full h-16 gap-0 sm:gap-3">
<div className="flex flex-row 3xl:flex-1 ">
<button
type="button"
aria-label="Menu"
Expand All @@ -247,7 +247,7 @@ export default function TopNav({
)}>
{isOpen ? <IconClose /> : <IconHamburger />}
</button>
<div className="3xl:flex-1 flex align-center">
<div className="flex 3xl:flex-1 align-center">
<NextLink
href="/"
className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
Expand All @@ -260,16 +260,16 @@ export default function TopNav({
</NextLink>
</div>
</div>
<div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
<div className="items-center justify-center flex-1 hidden w-full md:flex 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
<button
type="button"
className={cn(
'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base'
)}
onClick={onOpenSearch}>
<IconSearch className="me-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
<IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
Search
<span className="ms-auto hidden sm:flex item-center me-1">
<span className="hidden ms-auto sm:flex item-center me-1">
<Kbd data-platform="mac">⌘</Kbd>
<Kbd data-platform="win" wide>
Ctrl
Expand Down Expand Up @@ -301,9 +301,9 @@ export default function TopNav({
<button
aria-label="Search"
type="button"
className="active:scale-95 transition-transform flex md:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 md:hidden hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"
onClick={onOpenSearch}>
<IconSearch className="align-middle w-5 h-5" />
<IconSearch className="w-5 h-5 align-middle" />
</button>
</div>
<div className="flex dark:hidden">
Expand All @@ -313,7 +313,7 @@ export default function TopNav({
onClick={() => {
window.__setPreferredTheme('dark');
}}
className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
{darkIcon}
</button>
</div>
Expand All @@ -324,7 +324,7 @@ export default function TopNav({
onClick={() => {
window.__setPreferredTheme('light');
}}
className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
{lightIcon}
</button>
</div>
Expand All @@ -334,7 +334,7 @@ export default function TopNav({
target="_blank"
rel="noreferrer noopener"
aria-label="Open on GitHub"
className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
className="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
{githubIcon}
</Link>
</div>
Expand All @@ -349,13 +349,13 @@ export default function TopNav({
className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
<aside
className={cn(
`lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
`lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-50`,
isOpen ? 'block z-40' : 'hidden lg:block'
)}>
<nav
role="navigation"
style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
className="w-full lg:h-auto grow pe-0 lg:pe-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
className="w-full pt-4 scrolling-touch lg:h-auto grow pe-0 lg:pe-5 lg:py-6 md:pt-4 lg:pt-4 scrolling-gpu">
{/* No fallback UI so need to be careful not to suspend directly inside. */}
<Suspense fallback={null}>
<div className="ps-3 xs:ps-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
Expand All @@ -378,7 +378,7 @@ export default function TopNav({
</div>
<div
role="separator"
className="ms-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
className="mt-4 mb-2 border-b ms-5 border-border dark:border-border-dark"
/>
<SidebarRouteTree
// Don't share state between the desktop and mobile versions.
Expand Down
6 changes: 1 addition & 5 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,7 @@ module.exports = {
},
maxWidth: {
...defaultTheme.maxWidth,
xs: '21rem',
},
minWidth:{
...defaultTheme.minWidth,
80: '20rem',
'custom-xs': '21rem',
},
outline: {
blue: ['1px auto ' + colors.link, '3px'],
Expand Down
37 changes: 18 additions & 19 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2601,21 +2601,21 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

fast-glob@^3.2.12:
version "3.3.0"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
fast-glob@^3.2.9:
version "3.2.11"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
glob-parent "^5.1.2"
merge2 "^1.3.0"
micromatch "^4.0.4"

fast-glob@^3.2.9:
version "3.2.11"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
fast-glob@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
Expand Down Expand Up @@ -3371,10 +3371,10 @@ isexe@^2.0.0:
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=

jiti@^1.18.2:
version "1.20.0"
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
jiti@^1.19.1:
version "1.21.0"
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==

"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
Expand Down Expand Up @@ -6103,20 +6103,20 @@ table@^6.0.9:
string-width "^4.2.3"
strip-ansi "^6.0.1"

tailwindcss@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
tailwindcss@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==
dependencies:
"@alloc/quick-lru" "^5.2.0"
arg "^5.0.2"
chokidar "^3.5.3"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.2.12"
fast-glob "^3.3.0"
glob-parent "^6.0.2"
is-glob "^4.0.3"
jiti "^1.18.2"
jiti "^1.19.1"
lilconfig "^2.1.0"
micromatch "^4.0.5"
normalize-path "^3.0.0"
Expand All @@ -6128,7 +6128,6 @@ tailwindcss@^3.3.2:
postcss-load-config "^4.0.1"
postcss-nested "^6.0.1"
postcss-selector-parser "^6.0.11"
postcss-value-parser "^4.2.0"
resolve "^1.22.2"
sucrase "^3.32.0"

Expand Down

0 comments on commit 9c316b2

Please sign in to comment.