-
Notifications
You must be signed in to change notification settings - Fork 659
BorderBox and related (breaking) changes #761
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
d128721
Add FLEX to Box and make Flex display:flex
BinaryMuse fb27355
Add Dropdown.Button to FilteredSearch example
BinaryMuse 688e1b6
Split BorderBox default props
BinaryMuse 3db413f
Shadow Doctocat components that use the old BorderBox styles
BinaryMuse 80774f4
Update components for new BorderBox API
BinaryMuse d6dba25
Update tests for new BorderBox API
BinaryMuse a31d019
Update BorderBoxProps TS interface
BinaryMuse 5b37a2a
Add usage note to BorderBox docs
BinaryMuse 88aa3e7
Deprecate Flex.Item
BinaryMuse 4d3d974
Use COMMON instead of space and color for Box system props
BinaryMuse 30ff26e
Update system props tests for Box and BorderBox
BinaryMuse 286582f
Update snapshots
BinaryMuse 9c823f4
Update some more propTypes
BinaryMuse 0eb814d
Remove Flex.Item :fire:
BinaryMuse ab8ff2f
Remove Flex.Item tests
BinaryMuse 9983054
Clean up BorderProps
BinaryMuse 0d4f730
Remove unused union
BinaryMuse f57c5f9
Use COMMON for Box propTypes
BinaryMuse 791e828
Update border styles across package
BinaryMuse 241b40b
Add all border colors from Primer CSS
BinaryMuse 1e1cbc2
Update snapshots
BinaryMuse File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import {Absolute, BorderBox, Relative, Text} from '@primer/components' | ||
| import Highlight, {defaultProps} from 'prism-react-renderer' | ||
| import githubTheme from 'prism-react-renderer/themes/github' | ||
| import React from 'react' | ||
| import ClipboardCopy from '@primer/gatsby-theme-doctocat/src/components/clipboard-copy' | ||
| import LiveCode from '@primer/gatsby-theme-doctocat/src/components/live-code' | ||
|
|
||
| function Code({className, children, live, noinline}) { | ||
| const language = className ? className.replace(/language-/, '') : '' | ||
| const code = children.trim() | ||
|
|
||
| if (live) { | ||
| return <LiveCode code={code} language={language} noinline={noinline} /> | ||
| } | ||
|
|
||
| return ( | ||
| <Relative> | ||
| <Absolute top={0} right={0} p={2}> | ||
| <ClipboardCopy value={code} /> | ||
| </Absolute> | ||
| <Highlight {...defaultProps} code={code} language={language} theme={githubTheme}> | ||
| {({className, style, tokens, getLineProps, getTokenProps}) => ( | ||
| <BorderBox | ||
| as="pre" | ||
| className={className} | ||
| mt={0} | ||
| mb={3} | ||
| p={3} | ||
| borderWidth={0} | ||
| style={{...style, overflow: 'auto'}} | ||
| > | ||
| {tokens.map((line, i) => ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <div key={i} {...getLineProps({line, key: i})}> | ||
| {line.map((token, key) => ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <Text key={key} fontFamily="mono" fontSize={1} {...getTokenProps({token, key})} /> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </BorderBox> | ||
| )} | ||
| </Highlight> | ||
| </Relative> | ||
| ) | ||
| } | ||
|
|
||
| export default Code |
88 changes: 88 additions & 0 deletions
88
docs/src/@primer/gatsby-theme-doctocat/components/layout.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import {BorderBox, Box, Flex, Grid, Heading, Position, Text, Details, StyledOcticon} from '@primer/components' | ||
| import {ChevronDown, ChevronRight} from '@primer/octicons-react' | ||
| import React from 'react' | ||
| import Head from '@primer/gatsby-theme-doctocat/src/components/head' | ||
| import Header, {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header' | ||
| import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer' | ||
| import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar' | ||
| import SourceLink from '@primer/gatsby-theme-doctocat/src/components/source-link' | ||
| import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label' | ||
| import TableOfContents from '@primer/gatsby-theme-doctocat/src/components/table-of-contents' | ||
|
|
||
| function Layout({children, pageContext}) { | ||
| const {title, description, status, source, additionalContributors = []} = pageContext.frontmatter | ||
|
|
||
| return ( | ||
| <Flex flexDirection="column" minHeight="100vh"> | ||
| <Head title={title} description={description} /> | ||
| <Header /> | ||
| <Flex flex="1 1 auto" flexDirection="row" css={{zIndex: 0}}> | ||
| <Box display={['none', null, null, 'block']}> | ||
| <Sidebar /> | ||
| </Box> | ||
| <Grid | ||
| id="skip-nav" | ||
| maxWidth="100%" | ||
| gridTemplateColumns={['100%', null, 'minmax(0, 65ch) 220px']} | ||
| gridTemplateAreas={['"heading" "content"', null, '"heading ." "content table-of-contents"']} | ||
| gridColumnGap={[null, null, 6, 7]} | ||
| gridRowGap={3} | ||
| mx="auto" | ||
| p={[5, 6, null, 7]} | ||
| css={{alignItems: 'start', alignSelf: 'start'}} | ||
| > | ||
| <BorderBox css={{gridArea: 'heading'}} borderWidth={0} borderBottomWidth={1} borderRadius={0} pb={2}> | ||
| <Heading>{title}</Heading> | ||
| </BorderBox> | ||
| {pageContext.tableOfContents.items ? ( | ||
| <Position | ||
| display={['none', null, 'block']} | ||
| css={{gridArea: 'table-of-contents', overflow: 'auto'}} | ||
| position="sticky" | ||
| top={HEADER_HEIGHT + 24} | ||
| maxHeight={`calc(100vh - ${HEADER_HEIGHT}px - 24px)`} | ||
| > | ||
| <Text display="inline-block" fontWeight="bold" mb={1}> | ||
| Table of contents | ||
| </Text> | ||
| <TableOfContents items={pageContext.tableOfContents.items} /> | ||
| </Position> | ||
| ) : null} | ||
| <Box css={{gridArea: 'content'}}> | ||
| {status || source ? ( | ||
| <Flex mb={3} alignItems="center"> | ||
| {status ? <StatusLabel status={status} /> : null} | ||
| <Box mx="auto" /> | ||
| {source ? <SourceLink href={source} /> : null} | ||
| </Flex> | ||
| ) : null} | ||
| {pageContext.tableOfContents.items ? ( | ||
| <Box display={['block', null, 'none']} mb={3}> | ||
| <Details> | ||
| {({open}) => ( | ||
| <> | ||
| <Text as="summary" fontWeight="bold"> | ||
| <StyledOcticon icon={open ? ChevronDown : ChevronRight} mr={2} /> | ||
| Table of contents | ||
| </Text> | ||
| <Box pt={1}> | ||
| <TableOfContents items={pageContext.tableOfContents.items} /> | ||
| </Box> | ||
| </> | ||
| )} | ||
| </Details> | ||
| </Box> | ||
| ) : null} | ||
| {children} | ||
| <PageFooter | ||
| editUrl={pageContext.editUrl} | ||
| contributors={pageContext.contributors.concat(additionalContributors.map(login => ({login})))} | ||
| /> | ||
| </Box> | ||
| </Grid> | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default Layout |
131 changes: 131 additions & 0 deletions
131
docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| /* eslint-disable jsx-a11y/click-events-have-key-events */ | ||
| /* eslint-disable jsx-a11y/no-static-element-interactions */ | ||
| // | ||
| // ^- these area here because Doctocat has eslint errors that are not reported | ||
| // in Doctocat but are in this project. Since the error exists in an area | ||
| // of JSX code where the disable-line comment does not work, we must disable | ||
| // it for the whole file until the problem is fixed upstream. | ||
| import {BorderBox, Flex, Link, StyledOcticon, Text} from '@primer/components' | ||
| import {ChevronDown, ChevronUp, X} from '@primer/octicons-react' | ||
| import {Link as GatsbyLink} from 'gatsby' | ||
| import debounce from 'lodash.debounce' | ||
| import React from 'react' | ||
| import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml' | ||
| import primerNavItems from '@primer/gatsby-theme-doctocat/src/primer-nav.yml' | ||
| import useSiteMetadata from '@primer/gatsby-theme-doctocat/src/use-site-metadata' | ||
| import DarkButton from '@primer/gatsby-theme-doctocat/src/components/dark-button' | ||
| import Details from '@primer/gatsby-theme-doctocat/src/components/details' | ||
| import Drawer from '@primer/gatsby-theme-doctocat/src/components/drawer' | ||
| import NavItems from '@primer/gatsby-theme-doctocat/src/components/nav-items' | ||
|
|
||
| export function useNavDrawerState(breakpoint) { | ||
| // Handle string values from themes with units at the end | ||
| if (typeof breakpoint === 'string') { | ||
| breakpoint = parseInt(breakpoint, 10) | ||
| } | ||
| const [isOpen, setOpen] = React.useState(false) | ||
|
|
||
| const onResize = React.useCallback(() => { | ||
| if (window.innerWidth >= breakpoint) { | ||
| setOpen(false) | ||
| } | ||
| }, [setOpen, breakpoint]) | ||
|
|
||
| const debouncedOnResize = React.useCallback(debounce(onResize, 250), [onResize]) | ||
|
|
||
| React.useEffect(() => { | ||
| if (isOpen) { | ||
| window.addEventListener('resize', debouncedOnResize) | ||
| return () => { | ||
| // cancel any debounced invocation of the resize handler | ||
| debouncedOnResize.cancel() | ||
| window.removeEventListener('resize', debouncedOnResize) | ||
| } | ||
| } | ||
| }, [isOpen, debouncedOnResize]) | ||
|
|
||
| return [isOpen, setOpen] | ||
| } | ||
|
|
||
| function NavDrawer({isOpen, onDismiss}) { | ||
| const siteMetadata = useSiteMetadata() | ||
| return ( | ||
| <Drawer isOpen={isOpen} onDismiss={onDismiss}> | ||
| <Flex | ||
| flexDirection="column" | ||
| height="100%" | ||
| bg="gray.9" | ||
| style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}} | ||
| > | ||
| <Flex flexDirection="column" flex="1 0 auto" color="blue.2" bg="gray.9"> | ||
| <BorderBox borderWidth={0} borderRadius={0} borderBottom={1} borderColor="gray.7"> | ||
| <Flex py={3} pl={4} pr={3} alignItems="center" justifyContent="space-between"> | ||
| <Link href="https://primer.style" fontFamily="mono" color="inherit"> | ||
| Primer | ||
| </Link> | ||
| <DarkButton aria-label="Close" onClick={onDismiss}> | ||
| <StyledOcticon icon={X} /> | ||
| </DarkButton> | ||
| </Flex> | ||
| </BorderBox> | ||
| <Flex flexDirection="column"> | ||
| <PrimerNavItems items={primerNavItems} /> | ||
| </Flex> | ||
| </Flex> | ||
| {navItems.length > 0 ? ( | ||
| <Flex flexDirection="column" flex="1 0 auto" color="gray.7" bg="gray.0"> | ||
| <Link as={GatsbyLink} to="/" display="inline-block" color="inherit" fontFamily="mono" mx={4} my={4}> | ||
| {siteMetadata.title} | ||
| </Link> | ||
| <NavItems items={navItems} /> | ||
| </Flex> | ||
| ) : null} | ||
| </Flex> | ||
| </Drawer> | ||
| ) | ||
| } | ||
|
|
||
| function PrimerNavItems({items}) { | ||
| return items.map((item, index) => { | ||
| return ( | ||
| <BorderBox | ||
| key={item.title} | ||
| borderWidth={0} | ||
| borderRadius={0} | ||
| borderTop={index !== 0 ? 1 : 0} | ||
| borderColor="gray.7" | ||
| p={4} | ||
| > | ||
| {item.children ? ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <Details key={index}> | ||
| {({open, toggle}) => ( | ||
| <> | ||
| <summary onClick={toggle} style={{cursor: 'pointer'}}> | ||
| <Flex alignItems="center" justifyContent="space-between"> | ||
| <Text>{item.title}</Text> | ||
| <StyledOcticon icon={open ? ChevronUp : ChevronDown} /> | ||
| </Flex> | ||
| </summary> | ||
| <Flex flexDirection="column" mt={2}> | ||
| {item.children.map(child => ( | ||
| <Link key={child.title} href={child.url} py={1} mt={2} fontSize={1} color="inherit"> | ||
| {child.title} | ||
| </Link> | ||
| ))} | ||
| </Flex> | ||
| </> | ||
| )} | ||
| </Details> | ||
| ) : ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <Link key={index} href={item.url} color="inherit" display="block"> | ||
| {item.title} | ||
| </Link> | ||
| )} | ||
| </BorderBox> | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| export default NavDrawer |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.