From 7535420c390a4ca60eaa173dc2d00a23f8150094 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 15 Oct 2024 18:14:52 -0400 Subject: [PATCH 01/33] updates header nav content and layout --- .../components/header.js | 20 +++++ .../components/header.module.css | 46 ++++++++++ .../navigation/navigation.module.css | 87 ++++++++++++++++++ .../src/components/navigation/navigation.tsx | 88 +++++++++++++++++++ .../side-panel/side-panel.module.css | 8 ++ .../src/components/side-panel/side-panel.tsx | 63 +++++++++++++ 6 files changed, 312 insertions(+) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css create mode 100644 apps/docs/src/components/navigation/navigation.module.css create mode 100644 apps/docs/src/components/navigation/navigation.tsx create mode 100644 apps/docs/src/components/side-panel/side-panel.module.css create mode 100644 apps/docs/src/components/side-panel/side-panel.tsx diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js new file mode 100644 index 000000000..1801b740a --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js @@ -0,0 +1,20 @@ +import React from 'react' +import styles from './header.module.css' +import {MarkGithubIcon} from '@primer/octicons-react' +import {Navigation} from '../../../components/navigation/navigation' +import {SidePanel} from '../../../components/side-panel/side-panel' + +export default function Header() { + return ( +
+ + + Primer + + +
+ +
+
+ ) +} diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css new file mode 100644 index 000000000..be929af2d --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -0,0 +1,46 @@ +.PageHeader { + position: sticky; + top: 0; + width: 100%; + display: flex; + align-items: center; + padding: var(--base-size-16) var(--base-size-24) var(--base-size-16) + var(--base-size-24); + border-bottom: 1px solid var(--borderColor-default, #d1d9e0); + background: var(--brand-color-canvas-default); + z-index: 1; +} + +.SiteTitle { + display: flex; + gap: var(--base-size-8); + align-items: center; + text-decoration: none; +} + +.SiteTitle svg { + fill: var(--brand-color-text-default); +} + +.Title { + display: inline-block; + font-size: var(--text-body-size-large); + font-weight: var(--base-text-weight-semibold); + color: var(--fgColor-default, #1f2328); + font-family: var(--brand-fontStack-sansSerif); +} + +.SidePanel { + display: none; + margin-left: auto; +} + +@media (max-width: 768px) { + .PageHeader { + padding: var(--base-size-16); + } + + .SidePanel { + display: block; + } +} diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css new file mode 100644 index 000000000..6ecb53d82 --- /dev/null +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -0,0 +1,87 @@ +.Navigation { + display: flex; + align-items: center; + flex-grow: 1; +} + +.Separator { + color: var(--borderColor-default, #d1d9e0); + font-weight: var(--base-text-weight-light); + margin-left: var(--base-size-12); + margin-right: var(--base-size-12); + @media (max-width: 1012px) { + margin-right: 0; + } +} + +.HorizontalList { + display: flex; + list-style: none; + align-items: center; + flex-grow: 1; + margin: 0; + padding: 0; + gap: var(--base-size-2); + padding-right: var(--base-size-16); +} + +.HorizontalList:not(:has([data-active='true'])) { + justify-content: flex-end; +} + +.Link { + font-family: var(--brand-fontStack-sansSerif); + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--fgColor-muted, #59636e); + text-decoration: none; + font-size: var(--text-body-size-large, 1rem); + padding: 0 var(--base-size-12); + height: var(--base-size-32); + border: 1px solid transparent; + border-radius: var(--borderRadius-medium, 0.375rem); +} + +.DropdownLink { + font-family: var(--brand-fontStack-sansSerif); + color: var(--fgColor-muted, #59636e); + font-size: var(--text-body-size-large, 1rem); +} + +.Icon { + margin-bottom: 6px; +} + +.Link:hover { + background: var(--bgColor-muted, #f6f8fa); +} + +.Link:focus-visible { + outline: 2px solid var(--focus-outlineColor, #0969da); + outline-offset: -2px; +} + +.Link[data-active] { + color: var(--fgColor-default, #1f2328); + text-decoration: none; + font-weight: var(--base-text-weight-semibold); + padding: 0; +} + +.Dropdown { + display: none; +} + +@media (max-width: 1012px) { + .HorizontalList { + display: none; + } + .Dropdown { + display: block; + } +} + +.ActiveLink { + margin-right: auto; +} diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx new file mode 100644 index 000000000..70328dbc2 --- /dev/null +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -0,0 +1,88 @@ +import React from 'react' +import {ArrowUpRightIcon, TriangleDownIcon} from '@primer/octicons-react' +import styles from './navigation.module.css' +import {ActionList, ActionMenu, Button} from '@primer/react' + +const navItems = [ + {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site + {href: 'https://primer.style/octicons', label: 'Octicons'}, + {href: '/', label: 'Marketing UI'}, + {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true}, +] + +export function Navigation() { + const activeItem = navItems.find((item) => item.label === 'Marketing UI') + const otherItems = navItems.filter((item) => item.label !== 'Marketing UI') + const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems + + return ( + + ) +} diff --git a/apps/docs/src/components/side-panel/side-panel.module.css b/apps/docs/src/components/side-panel/side-panel.module.css new file mode 100644 index 000000000..dd19e47fb --- /dev/null +++ b/apps/docs/src/components/side-panel/side-panel.module.css @@ -0,0 +1,8 @@ +.SidePanel { + position: relative; +} + +.Header { + padding: var(--base-size-16); + border-bottom: 1px solid var(--borderColor-default, #d1d9e0); +} diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx new file mode 100644 index 000000000..c00d2340d --- /dev/null +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {useState, useRef} from 'react' +import {IconButton} from '@primer/react' +import {Dialog} from '@primer/react/experimental' +import {ThreeBarsIcon, XIcon} from '@primer/octicons-react' +import styles from './side-panel.module.css' +import {Sidebar} from '@primer/gatsby-theme-doctocat' + +export function SidePanel() { + const [isOpen, setIsOpen] = useState(false) + const closeButtonRef = useRef(null) + const openButtonRef = useRef(null) + + const openDialog = () => { + setIsOpen(true) + } + + const closeDialog = () => { + setIsOpen(false) + } + + const renderHeader = ({dialogLabelId}: {dialogLabelId: string}) => ( +
+ +
+ ) + + return ( +
+ + {isOpen && ( + + + + )} +
+ ) +} From de95bbc0b1a29f312a304a39a2b1c85384d81d67 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 15 Oct 2024 19:10:06 -0400 Subject: [PATCH 02/33] moves search input to sidebar and updates functionality --- .../components/header.js | 2 + .../components/nav-items.js | 57 ++++++++++ .../components/sidebar.js | 107 ++++++++++++++++++ .../src/components/side-panel/side-panel.tsx | 2 +- 4 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js index 1801b740a..a984a221f 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.js @@ -4,6 +4,8 @@ import {MarkGithubIcon} from '@primer/octicons-react' import {Navigation} from '../../../components/navigation/navigation' import {SidePanel} from '../../../components/side-panel/side-panel' +export const HEADER_HEIGHT = 56 + export default function Header() { return (
diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js new file mode 100644 index 000000000..d7330f7fa --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -0,0 +1,57 @@ +import {NavList} from '@primer/react/drafts' +import {useLocation} from '@reach/router' +import {Link as GatsbyLink, withPrefix} from 'gatsby' +import React from 'react' +import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden' + +function NavItem({href, children}) { + const location = useLocation() + const isCurrent = withPrefix(href) === location.pathname + return ( + + {children} + + ) +} + +function NavItems({items}) { + return ( + <> + +

Site navigation

+ + + {items.map((item) => ( + + {item.children ? ( + + {item.children.map((child) => ( + + {child.title} + {child.children ? ( + + {child.children.map((subChild) => ( + + {subChild.title} + + ))} + + ) : null} + + ))} + + ) : ( + {item.title} + )} + + ))} + + + ) +} + +export default NavItems diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js new file mode 100644 index 000000000..a93546dec --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -0,0 +1,107 @@ +import {Box, TextInput} from '@primer/react' +import {SearchIcon} from '@primer/octicons-react' +import React, {useState} from 'react' +import navItems from '../nav.yml' +import {HEADER_HEIGHT} from './header' +import NavItems from './nav-items' + +function usePersistentScroll(id) { + const ref = React.useRef() + + const handleScroll = React.useCallback( + // Save scroll position in session storage on every scroll change + (event) => window.sessionStorage.setItem(id, event.target.scrollTop), + [id], + ) + + React.useLayoutEffect(() => { + // Restore scroll position when component mounts + const scrollPosition = window.sessionStorage.getItem(id) + if (scrollPosition && ref.current) { + ref.current.scrollTop = scrollPosition + } + }, [id]) + + // Return props to spread onto the scroll container + return { + ref, + onScroll: handleScroll, + } +} + +function Sidebar({hideBorder}) { + const scrollContainerProps = usePersistentScroll('sidebar') + const [filter, setFilter] = useState('') + + const handleFilterChange = (e) => { + setFilter(e.target.value.toLowerCase()) + } + + const filterNavItems = (item) => { + if (item.title.toLowerCase().includes(filter)) { + return true + } + if (item.children) { + // Filter children that match the filter + const filteredChildren = item.children.filter((child) => + child.title.toLowerCase().includes(filter), + ) + // If there are any matching children, return a new item with filtered children + if (filteredChildren.length > 0) { + return { + ...item, + children: filteredChildren, + } + } + } + return false + } + + const filteredNavItems = navItems + .map((item) => { + if (filterNavItems(item)) { + return item.children + ? {...item, children: item.children.filter(filterNavItems)} + : item + } + return null + }) + .filter(Boolean) + + return ( + + + + + + + + + ) +} + +export default Sidebar diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx index c00d2340d..6e8946049 100644 --- a/apps/docs/src/components/side-panel/side-panel.tsx +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -55,7 +55,7 @@ export function SidePanel() { renderHeader={renderHeader} returnFocusRef={openButtonRef} > - + )} From 4155f7055d522039f8040e867f5d862e564fd357 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 16 Oct 2024 11:24:01 -0400 Subject: [PATCH 03/33] fixes dropdown text/icon color --- apps/docs/src/components/navigation/navigation.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index 6ecb53d82..6fe2e788b 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -73,6 +73,10 @@ display: none; } +.Dropdown button { + color: var(--fgColor-default, #1f2328); +} + @media (max-width: 1012px) { .HorizontalList { display: none; From 3f056c8bcc02de25653b89222c7a026a5a0b7221 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 13:28:28 -0400 Subject: [PATCH 04/33] updates site name to Primer Marketing UI --- apps/docs/content/index.mdx | 2 +- apps/docs/gatsby-config.js | 4 ++-- .../docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index 2b1bc726b..e7a3bc98e 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -12,7 +12,7 @@ import {LinkExternalIcon} from '@primer/octicons-react' mt: 5, }} > - Primer Brand + Primer Marketing UI Read the installation instructions to get started. - Primer Brand + Primer Marketing UI Date: Fri, 18 Oct 2024 14:58:36 -0400 Subject: [PATCH 05/33] updates site name to Primer Brand UI --- apps/docs/content/index.mdx | 2 +- apps/docs/gatsby-config.js | 4 ++-- .../docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index e7a3bc98e..c6bc38e02 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -12,7 +12,7 @@ import {LinkExternalIcon} from '@primer/octicons-react' mt: 5, }} > - Primer Marketing UI + Primer Brand UI Read the installation instructions to get started. - Primer Marketing UI + Primer Brand UI Date: Fri, 18 Oct 2024 15:32:17 -0400 Subject: [PATCH 06/33] update Marketing UI to Brand UI in header nav --- apps/docs/src/components/navigation/navigation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 70328dbc2..7de7a03a1 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -6,13 +6,13 @@ import {ActionList, ActionMenu, Button} from '@primer/react' const navItems = [ {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site {href: 'https://primer.style/octicons', label: 'Octicons'}, - {href: '/', label: 'Marketing UI'}, + {href: '/', label: 'Brand UI'}, {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true}, ] export function Navigation() { - const activeItem = navItems.find((item) => item.label === 'Marketing UI') - const otherItems = navItems.filter((item) => item.label !== 'Marketing UI') + const activeItem = navItems.find((item) => item.label === 'Brand UI') + const otherItems = navItems.filter((item) => item.label !== 'Brand UI') const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems return ( From d30c5bc3c20ebb8c5ecec1214bbfdeabca057dce Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 15:51:37 -0400 Subject: [PATCH 07/33] updates sidebar spacing to match primer-docs --- .../src/@primer/gatsby-theme-doctocat/components/sidebar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index a93546dec..9675b3384 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -87,7 +87,7 @@ function Sidebar({hideBorder}) { height: '100%', borderStyle: 'solid', borderColor: 'border.subtle', - p: 2, + padding: 'var(--base-size-24)', }} > @@ -97,7 +97,9 @@ function Sidebar({hideBorder}) { block onChange={handleFilterChange} /> - + + + From bf1bb1a783d1adcd35054afe3d38eadf52489464 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 18 Oct 2024 15:52:53 -0400 Subject: [PATCH 08/33] updates sidebar width to match primer-docs --- .../src/@primer/gatsby-theme-doctocat/components/sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 9675b3384..912c90e6d 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -74,7 +74,7 @@ function Sidebar({hideBorder}) { position: 'sticky', top: HEADER_HEIGHT, height: `calc(100vh - ${HEADER_HEIGHT}px)`, - width: 260, + width: 280, }} > Date: Tue, 22 Oct 2024 14:56:47 -0400 Subject: [PATCH 09/33] fix bug where Brand UI wasn't appearing in the header --- apps/docs/src/components/navigation/navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 7de7a03a1..8374c30fc 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -53,7 +53,7 @@ export function Navigation() {
    {sortedNavItems.map((item) => { - const active = item.label === 'Marketing UI' + const active = item.label === 'Brand UI' return (
  • Date: Tue, 22 Oct 2024 17:34:04 -0400 Subject: [PATCH 10/33] updates landing page to match primer-docs --- apps/docs/content/index.mdx | 6 +- .../docs/scripts/components-with-animation.js | 6 +- .../components/hero-layout.js | 41 +++++++++++++ .../components/hero-layout.module.css | 35 +++++++++++ .../gatsby-theme-doctocat/components/hero.js | 58 +++++++++---------- .../components/hero.module.css | 6 ++ 6 files changed, 114 insertions(+), 38 deletions(-) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.js create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css diff --git a/apps/docs/content/index.mdx b/apps/docs/content/index.mdx index c6bc38e02..06a66e80b 100644 --- a/apps/docs/content/index.mdx +++ b/apps/docs/content/index.mdx @@ -8,12 +8,12 @@ import {LinkExternalIcon} from '@primer/octicons-react' - Primer Brand UI - Read the installation instructions to get started. + + Read the installation instructions to get started. + + +
    +
    +
    + +
    +
    +
    + + + {children} + ({login})), + )} + /> + +
    +
    +
    + + ) +} + +export default HeroLayout diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css new file mode 100644 index 000000000..ba15fe724 --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -0,0 +1,35 @@ +.HeroPageWrapper { + flex-direction: column; + min-height: 100vh; + display: flex; +} + +.HeroLayoutWrapper { + display: flex; + flex: 1 1 auto; + flex-direction: row; +} + +.HeroLayoutSidebarWrapper { + display: block; + + @media screen and (max-width: 64rem) { + display: none; + } +} + +.HeroLayoutMain { + padding: var(--base-size-24); + padding-bottom: var(--base-size-16); + width: 100%; + @media screen and (max-width: 48rem) { + padding-bottom: 0; + } +} + +.LandingPageLayout { + padding: 0 var(--base-size-48); + @media screen and (max-width: 48rem) { + padding: 0 0; + } +} diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index ec1f95519..e975e048d 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -1,38 +1,32 @@ -import {Box as PRCBox, Heading, Text, ThemeProvider} from '@primer/react' import React from 'react' -import {Container} from '@primer/gatsby-theme-doctocat' -import heroIllustration from '../primer-components-hero.svg' -import {version} from '../../../../../../packages/react/package' +import {Heading, Stack, Text} from '@primer/react-brand' +import styles from './hero.module.css' export default function Hero() { return ( - - - - - Primer Brand UI - - - v{version} - - - - - + + + + Primer brand + + + Primer Brand is a GitHub's design system for creating React-based + marketing websites and digital experiences. + + +
    + Mona +
    +     ) } diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css new file mode 100644 index 000000000..23688f634 --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.module.css @@ -0,0 +1,6 @@ +.HeroImage { + flex-shrink: 0; + @media screen and (max-width: 64rem) { + display: none; + } +} From 35363c8892378197875edaf06c431cceab794769 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 23 Oct 2024 16:51:42 -0400 Subject: [PATCH 11/33] updates sidebar nav to use Mona Sans --- .../docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 912c90e6d..5786e1531 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -75,6 +75,7 @@ function Sidebar({hideBorder}) { top: HEADER_HEIGHT, height: `calc(100vh - ${HEADER_HEIGHT}px)`, width: 280, + fontFamily: 'var(--brand-fontStack-sansSerif)', }} > Date: Thu, 24 Oct 2024 11:25:12 -0400 Subject: [PATCH 12/33] adjusts layout for wide viewports --- .../components/hero-layout.module.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css index ba15fe724..304f972b7 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -8,6 +8,7 @@ display: flex; flex: 1 1 auto; flex-direction: row; + /* padding: var(--base-size-24); */ } .HeroLayoutSidebarWrapper { @@ -20,7 +21,6 @@ .HeroLayoutMain { padding: var(--base-size-24); - padding-bottom: var(--base-size-16); width: 100%; @media screen and (max-width: 48rem) { padding-bottom: 0; @@ -28,8 +28,7 @@ } .LandingPageLayout { - padding: 0 var(--base-size-48); - @media screen and (max-width: 48rem) { - padding: 0 0; - } + max-width: 1340px; + margin: 0 auto; + width: 100%; } From fd62a82de55997664a269c278e03ddc2fe46830b Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Oct 2024 11:25:47 -0400 Subject: [PATCH 13/33] rm commented CSS --- .../gatsby-theme-doctocat/components/hero-layout.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css index 304f972b7..5cad218bb 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -8,7 +8,6 @@ display: flex; flex: 1 1 auto; flex-direction: row; - /* padding: var(--base-size-24); */ } .HeroLayoutSidebarWrapper { From 007d305851660c53954768c7db83ba2929a2a3b1 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Oct 2024 11:29:10 -0400 Subject: [PATCH 14/33] updates hero header text --- apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index e975e048d..79879f8fa 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -13,7 +13,7 @@ export default function Hero() { > - Primer brand + Primer Brand UI Primer Brand is a GitHub's design system for creating React-based From ba21aa54df7baaf1faf16e6c243caffb1dd61a43 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 2 Dec 2024 19:37:02 -0500 Subject: [PATCH 15/33] revises to match latest primer-docs chrome --- .../components/nav-items.js | 55 ++++++++++--------- .../components/nav-items.module.css | 11 ++++ .../navigation/navigation.module.css | 44 +++++---------- 3 files changed, 53 insertions(+), 57 deletions(-) create mode 100644 apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js index d7330f7fa..ea4f81f1a 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -3,6 +3,7 @@ import {useLocation} from '@reach/router' import {Link as GatsbyLink, withPrefix} from 'gatsby' import React from 'react' import VisuallyHidden from '@primer/gatsby-theme-doctocat/src/components/visually-hidden' +import styles from './nav-items.module.css' function NavItem({href, children}) { const location = useLocation() @@ -24,32 +25,34 @@ function NavItems({items}) {

    Site navigation

     - - {items.map((item) => ( - - {item.children ? ( - - {item.children.map((child) => ( - - {child.title} - {child.children ? ( - - {child.children.map((subChild) => ( - - {subChild.title} - - ))} - - ) : null} - - ))} - - ) : ( - {item.title} - )} - - ))} - +
    + + {items.map((item) => ( + + {item.children ? ( + + {item.children.map((child) => ( + + {child.title} + {child.children ? ( + + {child.children.map((subChild) => ( + + {subChild.title} + + ))} + + ) : null} + + ))} + + ) : ( + {item.title} + )} + + ))} + +
    ) } diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css new file mode 100644 index 000000000..595f4336a --- /dev/null +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.module.css @@ -0,0 +1,11 @@ +/* NavList style overrides needed because NavList uses hard-coded pixel values instead of rem-based CSS variables */ +.NavList__Container li span { + font-size: var(--brand-text-size-100); +} + +.NavList__Container li a span, +.NavList__Container li button span { + font-size: var(--brand-text-size-200); + line-height: var(--brand-text-lineHeight-200); +} +/* END NavList overrides */ diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index 6fe2e788b..e754f4349 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -1,17 +1,13 @@ .Navigation { display: flex; + list-style: none; align-items: center; flex-grow: 1; } .Separator { - color: var(--borderColor-default, #d1d9e0); + color: var(--borderColor-default); font-weight: var(--base-text-weight-light); - margin-left: var(--base-size-12); - margin-right: var(--base-size-12); - @media (max-width: 1012px) { - margin-right: 0; - } } .HorizontalList { @@ -23,9 +19,6 @@ padding: 0; gap: var(--base-size-2); padding-right: var(--base-size-16); -} - -.HorizontalList:not(:has([data-active='true'])) { justify-content: flex-end; } @@ -34,19 +27,17 @@ display: inline-flex; align-items: center; justify-content: center; - color: var(--fgColor-muted, #59636e); + color: var(--fgColor-muted); text-decoration: none; - font-size: var(--text-body-size-large, 1rem); padding: 0 var(--base-size-12); height: var(--base-size-32); border: 1px solid transparent; - border-radius: var(--borderRadius-medium, 0.375rem); + border-radius: var(--borderRadius-medium); } .DropdownLink { font-family: var(--brand-fontStack-sansSerif); - color: var(--fgColor-muted, #59636e); - font-size: var(--text-body-size-large, 1rem); + color: var(--fgColor-muted); } .Icon { @@ -54,38 +45,29 @@ } .Link:hover { - background: var(--bgColor-muted, #f6f8fa); + background: var(--bgColor-muted); } .Link:focus-visible { - outline: 2px solid var(--focus-outlineColor, #0969da); + outline: 2px solid var(--focus-outlineColor); outline-offset: -2px; } .Link[data-active] { - color: var(--fgColor-default, #1f2328); - text-decoration: none; + color: var(--fgColor-default); font-weight: var(--base-text-weight-semibold); - padding: 0; } -.Dropdown { +.HorizontalList { display: none; } -.Dropdown button { - color: var(--fgColor-default, #1f2328); -} - -@media (max-width: 1012px) { +@media (min-width: 1012px) { .HorizontalList { - display: none; + display: flex; } + .Separator, .Dropdown { - display: block; + display: none; } } - -.ActiveLink { - margin-right: auto; -} From e1c1af4e809b663421f1eb18715c6a80554413fd Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:43:53 -0500 Subject: [PATCH 16/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index 79879f8fa..4ae94721d 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -16,8 +16,7 @@ export default function Hero() { Primer Brand UI - Primer Brand is a GitHub's design system for creating React-based - marketing websites and digital experiences. + Primer Brand is GitHub's design system for creating marketing websites and digital experiences.
    From 9bdf1233456675187e538bc5e416cabe4f6425a9 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:44:02 -0500 Subject: [PATCH 17/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- .../@primer/gatsby-theme-doctocat/components/header.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css index be929af2d..d49bb820f 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -6,7 +6,7 @@ align-items: center; padding: var(--base-size-16) var(--base-size-24) var(--base-size-16) var(--base-size-24); - border-bottom: 1px solid var(--borderColor-default, #d1d9e0); + border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); background: var(--brand-color-canvas-default); z-index: 1; } From e88e8bbadb49c0deaa76eb98b4b7cfcb2009a5b1 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:49:43 -0500 Subject: [PATCH 18/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index 4ae94721d..6b000c46a 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -12,7 +12,7 @@ export default function Hero() { justifyContent="space-between" > - + Primer Brand UI From eb84cdb0b151a9d5e3599c1aaf3676f3f2b8b80b Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:50:19 -0500 Subject: [PATCH 19/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js index 6b000c46a..c690d75bf 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero.js @@ -22,7 +22,7 @@ export default function Hero() {
    Mona
    From c04c96e0768cb113a794c14b14b4a6c7b0a6740c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:56:35 -0500 Subject: [PATCH 20/33] Update apps/docs/src/components/navigation/navigation.module.css Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/components/navigation/navigation.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index e754f4349..c8e6a67dc 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -37,7 +37,8 @@ .DropdownLink { font-family: var(--brand-fontStack-sansSerif); - color: var(--fgColor-muted); + color: var(--brand-color-text-muted); + font-size: var(--brand-text-size-400); } .Icon { From f581db89391d2dc626d30dfa0d6d68097c703d61 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:56:46 -0500 Subject: [PATCH 21/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- .../@primer/gatsby-theme-doctocat/components/header.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css index d49bb820f..943e4e966 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -28,6 +28,7 @@ font-weight: var(--base-text-weight-semibold); color: var(--fgColor-default, #1f2328); font-family: var(--brand-fontStack-sansSerif); + padding-inline-end: var(--base-size-12); } .SidePanel { From f3641b65306e91358e3915cc63c8278a026159ba Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:57:22 -0500 Subject: [PATCH 22/33] Update apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- .../@primer/gatsby-theme-doctocat/components/header.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css index 943e4e966..0a5425a84 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -24,7 +24,7 @@ .Title { display: inline-block; - font-size: var(--text-body-size-large); + font-size: var(--brand-text-size-400); font-weight: var(--base-text-weight-semibold); color: var(--fgColor-default, #1f2328); font-family: var(--brand-fontStack-sansSerif); From 3219e8b829cb410d68fefe7338cf240055e32b24 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 12:58:48 -0500 Subject: [PATCH 23/33] Update apps/docs/src/components/side-panel/side-panel.module.css Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/components/side-panel/side-panel.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/docs/src/components/side-panel/side-panel.module.css b/apps/docs/src/components/side-panel/side-panel.module.css index dd19e47fb..907d6225f 100644 --- a/apps/docs/src/components/side-panel/side-panel.module.css +++ b/apps/docs/src/components/side-panel/side-panel.module.css @@ -4,5 +4,7 @@ .Header { padding: var(--base-size-16); - border-bottom: 1px solid var(--borderColor-default, #d1d9e0); + border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); + display: flex; + justify-content: end; } From f7a171451ad7be4c9083dd2539a9be96e7e338e2 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 13:21:35 -0500 Subject: [PATCH 24/33] adds site name to sidebar, minor CSS var usage tweaks --- .../components/header.module.css | 6 ++-- .../components/sidebar.js | 28 +++++++++++-------- .../navigation/navigation.module.css | 4 +-- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css index 0a5425a84..fbb7f7dae 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -6,7 +6,8 @@ align-items: center; padding: var(--base-size-16) var(--base-size-24) var(--base-size-16) var(--base-size-24); - border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted); + border-bottom: var(--brand-borderWidth-thin) solid + var(--brand-color-border-muted); background: var(--brand-color-canvas-default); z-index: 1; } @@ -24,9 +25,8 @@ .Title { display: inline-block; - font-size: var(--brand-text-size-400); font-weight: var(--base-text-weight-semibold); - color: var(--fgColor-default, #1f2328); + color: var(--brand-color-text-default); font-family: var(--brand-fontStack-sansSerif); padding-inline-end: var(--base-size-12); } diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 5786e1531..058418233 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -1,4 +1,5 @@ import {Box, TextInput} from '@primer/react' +import {Text, Stack} from '@primer/react-brand' import {SearchIcon} from '@primer/octicons-react' import React, {useState} from 'react' import navItems from '../nav.yml' @@ -91,17 +92,22 @@ function Sidebar({hideBorder}) { padding: 'var(--base-size-24)', }} > - - - - - - + + + Brand UI + +
    + + + + +
    +     ) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index c8e6a67dc..e383e956b 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -27,7 +27,7 @@ display: inline-flex; align-items: center; justify-content: center; - color: var(--fgColor-muted); + color: var(--brand-color-text-muted); text-decoration: none; padding: 0 var(--base-size-12); height: var(--base-size-32); @@ -55,7 +55,7 @@ } .Link[data-active] { - color: var(--fgColor-default); + color: var(--brand-color-text-default); font-weight: var(--base-text-weight-semibold); } From 3150eb3f6b2fe497b743f21faa3be64663af2681 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 13:36:31 -0500 Subject: [PATCH 25/33] more tweaks --- .../src/components/navigation/navigation.module.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index e383e956b..5254c4d21 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -3,10 +3,11 @@ list-style: none; align-items: center; flex-grow: 1; + font-family: var(--brand-fontStack-sansSerif); } .Separator { - color: var(--borderColor-default); + color: var(--borderColor-default, #d0d7de); font-weight: var(--base-text-weight-light); } @@ -23,7 +24,6 @@ } .Link { - font-family: var(--brand-fontStack-sansSerif); display: inline-flex; align-items: center; justify-content: center; @@ -36,9 +36,11 @@ } .DropdownLink { - font-family: var(--brand-fontStack-sansSerif); color: var(--brand-color-text-muted); - font-size: var(--brand-text-size-400); +} + +.Dropdown svg { + color: var(--brand-color-text-default); } .Icon { From 5761af109cfce6bd6cd795c1b3ae7708d660de60 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 3 Dec 2024 16:32:42 -0500 Subject: [PATCH 26/33] manually style side sheet for narrow viewports --- .../components/header.module.css | 2 +- .../components/sidebar.js | 15 ++++++++----- .../src/components/side-panel/side-panel.tsx | 21 ++++++++++++++++++- 3 files changed, 31 insertions(+), 7 deletions(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css index fbb7f7dae..30f8d2179 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/header.module.css @@ -36,7 +36,7 @@ margin-left: auto; } -@media (max-width: 768px) { +@media (max-width: 1012px) { .PageHeader { padding: var(--base-size-16); } diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js index 058418233..2ed8ffb0f 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -30,7 +30,7 @@ function usePersistentScroll(id) { } } -function Sidebar({hideBorder}) { +function Sidebar({inSideSheetDialog}) { const scrollContainerProps = usePersistentScroll('sidebar') const [filter, setFilter] = useState('') @@ -75,21 +75,26 @@ function Sidebar({hideBorder}) { position: 'sticky', top: HEADER_HEIGHT, height: `calc(100vh - ${HEADER_HEIGHT}px)`, - width: 280, + width: inSideSheetDialog ? 'undefined' : 280, fontFamily: 'var(--brand-fontStack-sansSerif)', + margin: inSideSheetDialog + ? 'calc(var(--base-size-16) * -1)' + : undefined, }} > diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx index 6e8946049..22acbbf7e 100644 --- a/apps/docs/src/components/side-panel/side-panel.tsx +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -54,8 +54,27 @@ export function SidePanel() { position="right" renderHeader={renderHeader} returnFocusRef={openButtonRef} + // When we update to a version of `@primer/react` that supports the `position` prop, we can remove the custom styles below + sx={{ + height: '100dvh', + maxHeight: 'unset', + borderRadius: 'var(--borderRadius-large, 0.75rem)', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + position: 'fixed', + right: 0, + top: 0, + bottom: 0, + animation: + 'Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running', + '@keyframes Overlay--motion-slideInLeft': { + from: { + transform: 'translateX(100%)', + }, + }, + }} > - + )}
    From fe6cd798eb61f7236a85b0bdabc7521e8469a2cf Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 4 Dec 2024 10:29:19 -0500 Subject: [PATCH 27/33] fix dropdown font size --- apps/docs/src/components/navigation/navigation.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/docs/src/components/navigation/navigation.module.css b/apps/docs/src/components/navigation/navigation.module.css index 5254c4d21..28e1cb11d 100644 --- a/apps/docs/src/components/navigation/navigation.module.css +++ b/apps/docs/src/components/navigation/navigation.module.css @@ -37,6 +37,7 @@ .DropdownLink { color: var(--brand-color-text-muted); + font-size: var(--brand-text-size-200); } .Dropdown svg { From 055a50db42f95541bf9cc1dbe0f9516a16120e4a Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 4 Dec 2024 14:56:25 -0500 Subject: [PATCH 28/33] adjust width of main content container of landing page --- .../components/hero-layout.module.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css index 5cad218bb..802242c19 100644 --- a/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css +++ b/apps/docs/src/@primer/gatsby-theme-doctocat/components/hero-layout.module.css @@ -27,7 +27,12 @@ } .LandingPageLayout { - max-width: 1340px; + max-width: var(--breakpoint-xlarge, 80rem); margin: 0 auto; width: 100%; + padding: 0 var(--base-size-48); + + @media screen and (max-width: 64rem) { + padding: 0; + } } From 79f826adfef1127d43651e2a4e255614ad0789fe Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 4 Dec 2024 22:19:17 -0500 Subject: [PATCH 29/33] update top nav items to match --- apps/docs/src/components/navigation/navigation.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 8374c30fc..004a01166 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -5,8 +5,9 @@ import {ActionList, ActionMenu, Button} from '@primer/react' const navItems = [ {href: 'https://primer.style/', label: 'Product UI'}, // TODO: update to https://primer.style/product when we launch the new docs site - {href: 'https://primer.style/octicons', label: 'Octicons'}, {href: '/', label: 'Brand UI'}, + {href: 'https://primer.style/octicons', label: 'Octicons'}, + {href: 'https://primer.style/guides/accessibility', label: 'Accessibility'}, // TODO: update to https://primer.style/accessibility when we launch the new docs site {href: 'https://brand.github.com/', label: 'Brand Toolkit', external: true}, ] From 0eb9ead3b88bbdb0364199c059053983fb54fb01 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 5 Dec 2024 09:47:51 -0500 Subject: [PATCH 30/33] Update apps/docs/src/components/side-panel/side-panel.tsx Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/components/side-panel/side-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx index 22acbbf7e..fe86a8ce8 100644 --- a/apps/docs/src/components/side-panel/side-panel.tsx +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -58,7 +58,7 @@ export function SidePanel() { sx={{ height: '100dvh', maxHeight: 'unset', - borderRadius: 'var(--borderRadius-large, 0.75rem)', + borderRadius: 'var(--brand-borderRadius-large, 0.75rem)', borderTopRightRadius: 0, borderBottomRightRadius: 0, position: 'fixed', From fb971f0b22b819fb617caa3b8718f46c72ccf851 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 5 Dec 2024 09:48:12 -0500 Subject: [PATCH 31/33] Update apps/docs/src/components/side-panel/side-panel.tsx Co-authored-by: Rez <13340707+rezrah@users.noreply.github.com> --- apps/docs/src/components/side-panel/side-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/src/components/side-panel/side-panel.tsx b/apps/docs/src/components/side-panel/side-panel.tsx index fe86a8ce8..bddcd3b6e 100644 --- a/apps/docs/src/components/side-panel/side-panel.tsx +++ b/apps/docs/src/components/side-panel/side-panel.tsx @@ -66,7 +66,7 @@ export function SidePanel() { top: 0, bottom: 0, animation: - 'Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running', + 'Overlay--motion-slideInLeft var(--brand-animation-duration-faster) var(--brand-animation-easing-glide) 0s 1 normal none running', '@keyframes Overlay--motion-slideInLeft': { from: { transform: 'translateX(100%)', From 99be9e2019f8aa2627aaa32abfb29055f48c9191 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 5 Dec 2024 09:48:45 -0500 Subject: [PATCH 32/33] prevents top nav from sorting --- apps/docs/src/components/navigation/navigation.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/docs/src/components/navigation/navigation.tsx b/apps/docs/src/components/navigation/navigation.tsx index 004a01166..dce6b49f8 100644 --- a/apps/docs/src/components/navigation/navigation.tsx +++ b/apps/docs/src/components/navigation/navigation.tsx @@ -13,9 +13,6 @@ const navItems = [ export function Navigation() { const activeItem = navItems.find((item) => item.label === 'Brand UI') - const otherItems = navItems.filter((item) => item.label !== 'Brand UI') - const sortedNavItems = activeItem ? [activeItem, ...otherItems] : otherItems - return (