diff --git a/docs/content/BorderBox.md b/docs/content/BorderBox.md index 287115e210f..2a72369a085 100644 --- a/docs/content/BorderBox.md +++ b/docs/content/BorderBox.md @@ -11,15 +11,18 @@ BorderBox is a Box component with a border. When no `borderColor` is present, th This is a BorderBox ``` +Note that `BorderBox` has default props set for `borderWidth`, `borderStyle`, and `borderColor`. This means that you cannot use `border={0} borderBottom={1}` or similar patterns; instead, use individual properties like `borderWidth={0} borderBottomWidth={1}`. + ## System props -BorderBox components get `COMMON`, `LAYOUT` and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props. +BorderBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props | Prop name | Type | Default | Description | | :- | :- | :-: | :- | -| border | String | 'borders.1' (from theme) | Sets the border, use theme values or provide your own. | +| borderWidth | String | '1px' | Sets the border, use theme values or provide your own. | +| borderStyle | String | 'solid' | Sets the border style, use theme values or provide your own. | | borderColor | String | 'gray.2' (from theme) | Sets the border color, use theme values or provide your own. | -| borderRadius | String or Number| 'radii.1' (from theme)| Sets the border radius, use theme values or provide your own. | +| borderRadius | String or Number| 2 (from theme)| Sets the border radius, use theme values or provide your own. | | boxShadow | String | | Sets box shadow, use theme values or provide your own. | diff --git a/docs/content/Box.md b/docs/content/Box.md index e101a340098..ec0d92d401b 100644 --- a/docs/content/Box.md +++ b/docs/content/Box.md @@ -18,7 +18,7 @@ The Box component serves as a wrapper component for most layout related needs. U ## System props -Box components get the `COMMON` and `LAYOUT` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props. +Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md index 471c706f36d..1eb8e3a81f9 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -9,7 +9,8 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side ```jsx live - + + Filter Item 1 Item 2 diff --git a/docs/content/Flex.md b/docs/content/Flex.md index a93087d9d88..245f917151a 100644 --- a/docs/content/Flex.md +++ b/docs/content/Flex.md @@ -2,9 +2,9 @@ title: Flex --- -Flex is a component that will allow you to use flexbox properties. +The `Flex` component behaves the same as the `Box` component except that it has `display: flex` set by default. -*Previously, `Flex.Item` was used for flex item specific properties - we've added all properties to the `Flex` component, but are keeping Flex.Item around for backwards compatibility.* +*Previously, a `Flex.Item` component was used for flex item specific properties; `Box` now contains all those properties and should be used in its place.* ## Default example @@ -28,7 +28,6 @@ Flex is a component that will allow you to use flexbox properties. Flex components get `FLEX`, `COMMON`, and `LAYOUT` system props. - Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/PointerBox.md b/docs/content/PointerBox.md index 1f0b4b9f7b2..070ccb4a5b0 100644 --- a/docs/content/PointerBox.md +++ b/docs/content/PointerBox.md @@ -14,7 +14,7 @@ PointerBox is a [BorderBox](./BorderBox) component with a caret added to it. ## System props -PointerBox components get `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +PointerBox components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Popover.md b/docs/content/Popover.md index 29f20a76ad2..2e412dcd1eb 100644 --- a/docs/content/Popover.md +++ b/docs/content/Popover.md @@ -86,7 +86,7 @@ render() ## System props -`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, and `BORDER` system props. Read our [System Props](/system-props) doc page for a full list of available props. +`Popover` components get `COMMON`, `LAYOUT`, and `POSITION` system props. `Popover.Content` components get `COMMON`, `LAYOUT`, `BORDER`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 61cc1994180..40dc70e461b 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -71,7 +71,7 @@ Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more ```jsx live - + Menu @@ -133,7 +133,7 @@ If using React Router, you can use the `as` prop to render the element as a `Nav ## System props -`SideNav` components get `COMMON`, `BORDER`, and `LAYOUT` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. +`SideNav` components get `COMMON`, `BORDER`, `LAYOUT`, and `FLEX` system props. `SideNav.Link` components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/code.js b/docs/src/@primer/gatsby-theme-doctocat/components/code.js new file mode 100644 index 00000000000..f9995e5036e --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/code.js @@ -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 + } + + return ( + + + + + + {({className, style, tokens, getLineProps, getTokenProps}) => ( + + {tokens.map((line, i) => ( + // eslint-disable-next-line react/no-array-index-key +
+ {line.map((token, key) => ( + // eslint-disable-next-line react/no-array-index-key + + ))} +
+ ))} + + )} + + + ) +} + +export default Code diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/layout.js b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js new file mode 100644 index 00000000000..18c4d1b9a02 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/layout.js @@ -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 ( + + +
+ + + + + + + {title} + + {pageContext.tableOfContents.items ? ( + + + Table of contents + + + + ) : null} + + {status || source ? ( + + {status ? : null} + + {source ? : null} + + ) : null} + {pageContext.tableOfContents.items ? ( + +
+ {({open}) => ( + <> + + + Table of contents + + + + + + )} +
+ + ) : null} + {children} + ({login})))} + /> + + + + + ) +} + +export default Layout diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js new file mode 100644 index 00000000000..5703f3685aa --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-drawer.js @@ -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 ( + + + + + + + Primer + + + + + + + + + + + {navItems.length > 0 ? ( + + + {siteMetadata.title} + + + + ) : null} + + + ) +} + +function PrimerNavItems({items}) { + return items.map((item, index) => { + return ( + + {item.children ? ( + // eslint-disable-next-line react/no-array-index-key +
+ {({open, toggle}) => ( + <> + + + {item.title} + + + + + {item.children.map(child => ( + + {child.title} + + ))} + + + )} +
+ ) : ( + // eslint-disable-next-line react/no-array-index-key + + {item.title} + + )} + + ) + }) +} + +export default NavDrawer diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js new file mode 100644 index 00000000000..bdf3fd9a788 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/nav-items.js @@ -0,0 +1,71 @@ +import {BorderBox, Flex, Link, StyledOcticon, themeGet} from '@primer/components' +import {LinkExternal} from '@primer/octicons-react' +import {Link as GatsbyLink} from 'gatsby' +import preval from 'preval.macro' +import React from 'react' +import styled from 'styled-components' + +// This code needs to run at build-time so it can access the file system. +const repositoryUrl = preval` + const readPkgUp = require('read-pkg-up') + const getPkgRepo = require('get-pkg-repo') + try { + const repo = getPkgRepo(readPkgUp.sync().package) + module.exports = \`https://github.com/\${repo.user}/\${repo.project}\` + } catch (error) { + module.exports = '' + } +` + +const NavLink = styled(Link)` + &.active { + font-weight: ${themeGet('fontWeights.bold')}; + color: ${themeGet('colors.gray.8')}; + } +` + +function NavItems({items}) { + return ( + <> + {items.map(item => ( + + + + {item.title} + + {item.children ? ( + + {item.children.map(child => ( + + {child.title} + + ))} + + ) : null} + + + ))} + {repositoryUrl ? ( + + + + GitHub + + + + + ) : null} + + ) +} + +export default NavItems diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js new file mode 100644 index 00000000000..5fc04e1997c --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/page-footer.js @@ -0,0 +1,27 @@ +import {BorderBox, Grid, Link, StyledOcticon} from '@primer/components' +import {Pencil} from '@primer/octicons-react' +import React from 'react' +import Contributors from '@primer/gatsby-theme-doctocat/src/components/contributors' + +function PageFooter({editUrl, contributors}) { + return editUrl || contributors.length > 0 ? ( + + + {editUrl ? ( + + + Edit this page on GitHub + + ) : null} + + {contributors.length > 0 ? : null} + + + ) : null +} + +PageFooter.defaultProps = { + contributors: [] +} + +export default PageFooter diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js b/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js new file mode 100644 index 00000000000..c6d6cc34680 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/sidebar.js @@ -0,0 +1,26 @@ +import {BorderBox, Flex, Position} from '@primer/components' +import React from 'react' +import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml' +import {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header' +import NavItems from '@primer/gatsby-theme-doctocat/src/components/nav-items' + +function Sidebar() { + return ( + + + + + + + + ) +} + +export default Sidebar diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp new file mode 100644 index 00000000000..49c1a4309c4 --- /dev/null +++ b/docs/src/@primer/gatsby-theme-doctocat/components/wrap-root-element.js.temp @@ -0,0 +1,45 @@ +import {MDXProvider} from '@mdx-js/react' +import {Link, theme} from '@primer/components' +import React from 'react' +import {ThemeProvider} from 'styled-components' +import Blockquote from '@primer/gatsby-theme-doctocat/src/components/blockquote' +import Code from './code' +import DescriptionList from '@primer/gatsby-theme-doctocat/src/components/description-list' +import {H1, H2, H3, H4, H5, H6} from '@primer/gatsby-theme-doctocat/src/components/heading' +import HorizontalRule from '@primer/gatsby-theme-doctocat/src/components/horizontal-rule' +import Image from '@primer/gatsby-theme-doctocat/src/components/image' +import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' +import List from '@primer/gatsby-theme-doctocat/src/components/list' +import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph' +import Table from '@primer/gatsby-theme-doctocat/src/components/table' + +const components = { + a: Link, + pre: props => props.children, + code: Code, + inlineCode: InlineCode, + table: Table, + img: Image, + p: Paragraph, + hr: HorizontalRule, + blockquote: Blockquote, + h1: H1, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, + ul: List, + ol: List.withComponent('ol'), + dl: DescriptionList +} + +function wrapRootElement({element}) { + return ( + + {element} + + ) +} + +export default wrapRootElement diff --git a/index.d.ts b/index.d.ts index 309e1b315b7..711c04bf6f9 100644 --- a/index.d.ts +++ b/index.d.ts @@ -22,11 +22,8 @@ declare module '@primer/components' { } interface BorderProps - extends BaseProps, - StyledSystem.BordersProps, - StyledSystem.BorderColorProps, - StyledSystem.BoxShadowProps, - StyledSystem.BorderRadiusProps {} + extends StyledSystem.BordersProps, + StyledSystem.BoxShadowProps {} interface PositionProps extends BaseProps, @@ -37,29 +34,19 @@ declare module '@primer/components' { StyledSystem.BottomProps, StyledSystem.LeftProps {} - interface FlexItemProps - extends BaseProps, - CommonProps, - LayoutProps, - StyledSystem.FlexProps, - StyledSystem.JustifySelfProps, - StyledSystem.AlignSelfProps, - StyledSystem.OrderProps {} - - interface FlexProps extends BaseProps, CommonProps, LayoutProps, StyledSystem.FlexboxProps, BoxProps {} - - export const Flex: React.FunctionComponent & { - Item: React.FunctionComponent - } - export interface BoxProps extends BaseProps, CommonProps, LayoutProps, + StyledSystem.FlexboxProps, Omit, 'color'> {} export const Box: React.FunctionComponent + interface FlexProps extends BoxProps {} + + export const Flex: React.FunctionComponent + export interface TextProps extends BaseProps, CommonProps, @@ -122,12 +109,7 @@ declare module '@primer/components' { export const BaseStyles: React.FunctionComponent - export interface BorderBoxProps extends CommonProps, LayoutProps, BorderProps, BoxProps { - border?: string - borderColor?: string - borderRadius?: string | number - boxShadow?: string - } + export interface BorderBoxProps extends BorderProps, BoxProps {} export const BorderBox: React.FunctionComponent @@ -349,7 +331,7 @@ declare module '@primer/components' { Header: React.FunctionComponent } - export interface SideNavProps extends CommonProps, BorderProps, Omit, 'color'> { + export interface SideNavProps extends CommonProps, BorderBoxProps, Omit, 'color'> { bordered?: boolean variant?: 'normal' | 'lightweight' } diff --git a/package.json b/package.json index cf2c2ac848a..b7805907fb3 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "details-element-polyfill": "2.4.0", "jest-axe": "3.2.0", "nanoid": "2.1.4", + "polished": "3.5.2", "primer-colors": "1.0.1", "primer-typography": "1.0.1", "react": "^16.10.2", diff --git a/src/AvatarStack.js b/src/AvatarStack.js index f737e2aad93..1a91360b2ae 100644 --- a/src/AvatarStack.js +++ b/src/AvatarStack.js @@ -1,41 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' -import styled from 'styled-components' +import styled, {css} from 'styled-components' import {get, COMMON} from './constants' import theme from './theme' -const alignRightStyles = theme => { - return ` - right: 0; - flex-direction: row-reverse; - - &:hover .AvatarItem { - margin-right: 0; - margin-left: 3px; - } - - .AvatarItem-more { - background: ${get('colors.gray.3')(theme)}; - - &::before { - width: 5px; - } - - &::after { - background: ${get('colors.gray.1')(theme)}; - width: 2px; - } - } - - .AvatarItem { - margin-right: 0; - margin-left: -11px; - border-right: 0; - border-left: ${get('borders.1')(theme)} ${get('colors.white')(theme)}; - } - ` -} - const transformChildren = children => { const count = children.length return React.Children.map(children, (child, index) => { @@ -85,7 +53,7 @@ const AvatarStackBody = styled.span` box-sizing: content-box; margin-right: -11px; background-color: ${get('colors.white')}; - border-right: ${get('borders.1')} ${get('colors.white')}; + border-right: ${get('borderWidths.1')} solid ${get('colors.white')}; border-radius: 2px; transition: margin 0.1s ease-in-out; @@ -122,7 +90,7 @@ const AvatarStackBody = styled.span` height: 20px; content: ''; border-radius: 2px; - outline: ${get('borders.1')} ${get('colors.white')}; + outline: ${get('borderWidths.1')} solid ${get('colors.white')}; } &::before { @@ -135,7 +103,38 @@ const AvatarStackBody = styled.span` background: ${get('colors.gray.3')}; } } - ${props => (props.alignRight ? alignRightStyles(props.theme) : '')} + + ${props => + props.alignRight && + css` + right: 0; + flex-direction: row-reverse; + + &:hover .AvatarItem { + margin-right: 0; + margin-left: 3px; + } + + .AvatarItem-more { + background: ${get('colors.gray.3')}; + + &::before { + width: 5px; + } + + &::after { + background: ${get('colors.gray.1')}; + width: 2px; + } + } + + .AvatarItem { + margin-right: 0; + margin-left: -11px; + border-right: 0; + border-left: ${get('borderWidths.1')} solid ${get('colors.white')}; + } + `} ` const AvatarStack = ({children = [], alignRight, ...rest}) => { return ( diff --git a/src/BorderBox.js b/src/BorderBox.js index 2cdde7b595d..f53ac7ad007 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -8,7 +8,8 @@ const BorderBox = styled(Box)(BORDER) BorderBox.defaultProps = { theme, - border: '1px solid', + borderWidth: '1px', + borderStyle: 'solid', borderColor: 'gray.2', borderRadius: 2 } diff --git a/src/Box.js b/src/Box.js index 82b53baf5eb..158564c07ff 100644 --- a/src/Box.js +++ b/src/Box.js @@ -1,22 +1,20 @@ import styled from 'styled-components' import PropTypes from 'prop-types' -import {space, color} from 'styled-system' -import systemPropTypes from '@styled-system/prop-types' -import {LAYOUT} from './constants' +import {COMMON, FLEX, LAYOUT} from './constants' import theme from './theme' const Box = styled.div` + ${COMMON} + ${FLEX} ${LAYOUT} - ${space} - ${color} ` Box.defaultProps = {theme} Box.propTypes = { + ...COMMON.propTypes, + ...FLEX.propTypes, ...LAYOUT.propTypes, - ...systemPropTypes.space, - ...systemPropTypes.color, theme: PropTypes.object } diff --git a/src/CircleOcticon.js b/src/CircleOcticon.js index e5bddbe059e..72eef37f19c 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.js @@ -9,7 +9,7 @@ function CircleOcticon(props) { const {size, as} = props const {icon, bg, as: asProp, ...rest} = props return ( - + diff --git a/src/Flex.js b/src/Flex.js index b21e7331f80..5f0a95f7c09 100644 --- a/src/Flex.js +++ b/src/Flex.js @@ -1,33 +1,16 @@ import styled from 'styled-components' -import PropTypes from 'prop-types' -import {FLEX} from './constants' import theme from './theme' import Box from './Box' -const Flex = styled(Box)` - ${FLEX}; -` - -// Keeping this around for backwards compatibility, but it's the same as `FLEX` -Flex.Item = styled(Box)` - ${FLEX}; -` +const Flex = styled(Box)`` Flex.defaultProps = { theme, display: 'flex' } -Flex.Item.defaultProps = { - theme -} -Flex.propTypes = { - ...Box.propTypes, - ...FLEX.propTypes -} -Flex.Item.propTypes = { - ...FLEX.propTypes, - theme: PropTypes.object +Flex.propTypes = { + ...Box.propTypes } export default Flex diff --git a/src/Label.js b/src/Label.js index 3e23ad361fd..628baad148a 100644 --- a/src/Label.js +++ b/src/Label.js @@ -8,7 +8,7 @@ const outlineStyles = css` margin-top: -1px; // offsets the 1px border margin-bottom: -1px; // offsets the 1px border color: ${get('colors.gray.6')}; - border: ${get('borders.1')} ${get('colors.blackfade15')}; + border: ${get('borderWidths.1')} solid ${get('colors.blackfade15')}; box-shadow: none; ${borderColor}; ${COMMON}; diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index 200f6788464..cc7b19da108 100644 --- a/src/Pagination/Pagination.js +++ b/src/Pagination/Pagination.js @@ -20,7 +20,7 @@ const Page = styled.a` cursor: pointer; user-select: none; background: ${get('pagination.colors.normal.bg')}; - border: ${get('borders.1')} ${get('pagination.colors.normal.border')}; + border: ${get('borderWidths.1')} solid ${get('pagination.colors.normal.border')}; text-decoration: none; &:first-child { diff --git a/src/SelectMenu/SelectMenuDivider.js b/src/SelectMenu/SelectMenuDivider.js index 7ecebf1c9ea..4b45477efa5 100644 --- a/src/SelectMenu/SelectMenuDivider.js +++ b/src/SelectMenu/SelectMenuDivider.js @@ -9,7 +9,7 @@ const dividerStyles = css` font-weight: ${get('fontWeights.bold')}; color: ${get('colors.text.grayLight')}; background-color: ${get('colors.bg.gray')}; - border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')}; ` const SelectMenuDivider = styled.div` diff --git a/src/SelectMenu/SelectMenuFilter.js b/src/SelectMenu/SelectMenuFilter.js index 085868b9127..6f2add13320 100644 --- a/src/SelectMenu/SelectMenuFilter.js +++ b/src/SelectMenu/SelectMenuFilter.js @@ -9,7 +9,7 @@ import {MenuContext} from './SelectMenuContext' const StyledForm = styled.form` padding: ${get('space.3')}; margin: 0; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; background-color: ${get('colors.white')}; ${COMMON}; diff --git a/src/SelectMenu/SelectMenuFooter.js b/src/SelectMenu/SelectMenuFooter.js index 4e107684879..a6d70ea15e5 100644 --- a/src/SelectMenu/SelectMenuFooter.js +++ b/src/SelectMenu/SelectMenuFooter.js @@ -8,7 +8,7 @@ const footerStyles = css` font-size: ${get('fontSizes.0')}; color: ${get('colors.text.grayLight')}; text-align: center; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; @media (min-width: ${get('breakpoints.0')}) { padding: ${get('space.1')} ${get('space.2')}; diff --git a/src/SelectMenu/SelectMenuItem.js b/src/SelectMenu/SelectMenuItem.js index cbd293bae71..2314cfee23a 100644 --- a/src/SelectMenu/SelectMenuItem.js +++ b/src/SelectMenu/SelectMenuItem.js @@ -16,7 +16,7 @@ export const listItemStyles = css` cursor: pointer; background-color: ${get('colors.white')}; border: 0; - border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')}; + border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.grayLight')}; color: ${get('colors.text.gray')}; text-decoration: none; diff --git a/src/SelectMenu/SelectMenuList.js b/src/SelectMenu/SelectMenuList.js index 5e57b049e26..323be791339 100644 --- a/src/SelectMenu/SelectMenuList.js +++ b/src/SelectMenu/SelectMenuList.js @@ -10,7 +10,7 @@ const listStyles = css` overflow-x: hidden; overflow-y: auto; background-color: ${get('colors.white')}; - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling @media (hover: hover) { diff --git a/src/SelectMenu/SelectMenuModal.js b/src/SelectMenu/SelectMenuModal.js index fc172c2cecf..ec5b2c5ed56 100644 --- a/src/SelectMenu/SelectMenuModal.js +++ b/src/SelectMenu/SelectMenuModal.js @@ -32,7 +32,7 @@ const modalStyles = css` max-height: 350px; margin: ${get('space.1')} 0 ${get('space.3')} 0; font-size: ${get('fontSizes.0')}; - border: ${get('borders.1')} ${get('colors.border.grayDark')}; + border: ${get('borderWidths.1')} solid ${get('colors.border.grayDark')}; border-radius: ${get('radii.2')}; box-shadow: 0 1px 5px ${get('colors.blackfade15')} !default; } diff --git a/src/SelectMenu/SelectMenuTab.js b/src/SelectMenu/SelectMenuTab.js index f1421db24d1..5f26b168b62 100644 --- a/src/SelectMenu/SelectMenuTab.js +++ b/src/SelectMenu/SelectMenuTab.js @@ -20,7 +20,7 @@ const tabStyles = css` @media (min-width: ${get('breakpoints.0')}) { flex: none; padding: ${get('space.1')} ${get('space.3')}; - border: ${get('borders.1')} transparent; + border: ${get('borderWidths.1')} solid transparent; border-bottom-width: 0; border-top-left-radius: ${get('radii.2')}; border-top-right-radius: ${get('radii.2')}; diff --git a/src/SelectMenu/SelectMenuTabs.js b/src/SelectMenu/SelectMenuTabs.js index 72ae1007446..a65172e3de4 100644 --- a/src/SelectMenu/SelectMenuTabs.js +++ b/src/SelectMenu/SelectMenuTabs.js @@ -7,7 +7,7 @@ const tabWrapperStyles = css` display: flex; flex-shrink: 0; margin-bottom: -1px; // hide border of element below - border-top: ${get('borders.1')} ${get('colors.border.gray')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.border.gray')}; -webkit-overflow-scrolling: touch; // Hide scrollbar so it doesn't cover the text diff --git a/src/SideNav.js b/src/SideNav.js index 517954d063f..7d681d34844 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -13,7 +13,7 @@ function SideNavBase({variant, className, bordered, children, ...props}) { const newClassName = classnames(className, `variant-${variantClassName}`) if (!bordered) { - props = {...props, border: 'none'} + props = {...props, borderWidth: 0} } return ( @@ -71,7 +71,7 @@ SideNav.Link = styled(Link).attrs(props => { color: ${get('colors.gray.6')}; padding: ${get('space.3')}; border: 0; - border-top: ${get('borders.1')} ${get('colors.gray.2')}; + border-top: ${get('borderWidths.1')} solid ${get('colors.gray.2')}; &:first-child { border-top: 0; diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index 67a2c3becc8..92daeb9ec1d 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -2,7 +2,7 @@ import React from 'react' import theme, {colors} from '../theme' import BorderBox from '../BorderBox' import {render} from '../utils/testing' -import {LAYOUT, COMMON} from '../constants' +import {LAYOUT, COMMON, BORDER, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' @@ -19,6 +19,8 @@ describe('BorderBox', () => { it('implements layout system props', () => { expect(BorderBox).toImplementSystemProps(LAYOUT) expect(BorderBox).toImplementSystemProps(COMMON) + expect(BorderBox).toImplementSystemProps(BORDER) + expect(BorderBox).toImplementSystemProps(FLEX) }) it('has default theme', () => { diff --git a/src/__tests__/Box.js b/src/__tests__/Box.js index 0cb4bb2820a..2f1d48f7553 100644 --- a/src/__tests__/Box.js +++ b/src/__tests__/Box.js @@ -2,7 +2,7 @@ import React from 'react' import Box from '../Box' import theme from '../theme' import {render} from '../utils/testing' -import {LAYOUT, COMMON} from '../constants' +import {LAYOUT, COMMON, FLEX} from '../constants' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' @@ -17,8 +17,9 @@ describe('Box', () => { }) it('implements system props', () => { - expect(Box).toImplementSystemProps(LAYOUT) expect(Box).toImplementSystemProps(COMMON) + expect(Box).toImplementSystemProps(LAYOUT) + expect(Box).toImplementSystemProps(FLEX) }) it('respects the "as" prop', () => { diff --git a/src/__tests__/FlexItem.js b/src/__tests__/FlexItem.js deleted file mode 100644 index 86330c88773..00000000000 --- a/src/__tests__/FlexItem.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import Flex from '../Flex' -import {FLEX} from '../constants' -import {render} from '../utils/testing' -import {render as HTMLRender, cleanup} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' -import 'babel-polyfill' -expect.extend(toHaveNoViolations) - -describe('Flex.Item', () => { - it('implements system props', () => { - expect(Flex.Item).toImplementSystemProps(FLEX) - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - cleanup() - }) - - it('has default theme', () => { - expect(Flex.Item).toSetDefaultTheme() - }) - - it('respects alignSelf', () => { - expect(render()).toMatchSnapshot() - }) - - it('renders as correct tag', () => { - const item = render( - - hi - - ) - expect(item.type).toEqual('button') - expect(item).toMatchSnapshot() - }) -}) diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.js.snap b/src/__tests__/Pagination/__snapshots__/Pagination.js.snap index 04172d2115d..a795623b994 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.js.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.js.snap @@ -3,6 +3,7 @@ exports[`Pagination matches snapshot 1`] = ` .c1 { display: inline-block; + display: inline-block; } .c2 { diff --git a/src/__tests__/Position.js b/src/__tests__/Position.js index f89bfd21958..cff834a7de8 100644 --- a/src/__tests__/Position.js +++ b/src/__tests__/Position.js @@ -35,7 +35,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'absolute') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) it('respects the "as" prop', () => { @@ -71,7 +72,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'fixed') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) @@ -103,7 +105,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'relative') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) @@ -132,7 +135,8 @@ describe('position components', () => { it('can render other components with the is prop', () => { const result = render() expect(result).toHaveStyleRule('position', 'sticky') - expect(result).toHaveStyleRule('border', '1px solid') + expect(result).toHaveStyleRule('border-width', '1px') + expect(result).toHaveStyleRule('border-style', 'solid') }) }) }) diff --git a/src/__tests__/__snapshots__/Box.js.snap b/src/__tests__/__snapshots__/Box.js.snap index fdc1decf0e6..19b36c03c10 100644 --- a/src/__tests__/__snapshots__/Box.js.snap +++ b/src/__tests__/__snapshots__/Box.js.snap @@ -141,6 +141,7 @@ exports[`Box renders without any props 1`] = ` exports[`Box respects display 1`] = ` .c0 { display: inline; + display: inline; }
@@ -57,7 +57,7 @@ exports[`Caret renders cardinal directions 2`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -89,7 +89,7 @@ exports[`Caret renders cardinal directions 3`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -120,7 +120,7 @@ exports[`Caret renders cardinal directions 4`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -152,7 +152,7 @@ exports[`Caret renders cardinal directions 5`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -184,7 +184,7 @@ exports[`Caret renders cardinal directions 6`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -216,7 +216,7 @@ exports[`Caret renders cardinal directions 7`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -248,7 +248,7 @@ exports[`Caret renders cardinal directions 8`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -279,7 +279,7 @@ exports[`Caret renders cardinal directions 9`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -310,7 +310,7 @@ exports[`Caret renders cardinal directions 10`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -341,7 +341,7 @@ exports[`Caret renders cardinal directions 11`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -372,7 +372,7 @@ exports[`Caret renders cardinal directions 12`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> diff --git a/src/__tests__/__snapshots__/Flex.js.snap b/src/__tests__/__snapshots__/Flex.js.snap index 5ceee15024e..704d142c559 100644 --- a/src/__tests__/__snapshots__/Flex.js.snap +++ b/src/__tests__/__snapshots__/Flex.js.snap @@ -9,6 +9,10 @@ exports[`Flex respects alignContent 1`] = ` -webkit-align-content: start; -ms-flex-line-pack: start; align-content: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; }
- hi - -`; - -exports[`Flex.Item respects alignSelf 1`] = ` -.c0 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -
-`; diff --git a/src/__tests__/__snapshots__/Grid.js.snap b/src/__tests__/__snapshots__/Grid.js.snap index 5bd262c9edb..064c5f676aa 100644 --- a/src/__tests__/__snapshots__/Grid.js.snap +++ b/src/__tests__/__snapshots__/Grid.js.snap @@ -2,6 +2,7 @@ exports[`Grid respects gridArea 1`] = ` .c0 { + display: grid; display: grid; grid-area: sidebar; } @@ -14,6 +15,7 @@ exports[`Grid respects gridArea 1`] = ` exports[`Grid respects gridAutoColumns 1`] = ` .c0 { + display: grid; display: grid; grid-auto-columns: 1fr; } @@ -26,6 +28,7 @@ exports[`Grid respects gridAutoColumns 1`] = ` exports[`Grid respects gridAutoFlow 1`] = ` .c0 { + display: grid; display: grid; grid-auto-flow: row; } @@ -38,6 +41,7 @@ exports[`Grid respects gridAutoFlow 1`] = ` exports[`Grid respects gridAutoRows 1`] = ` .c0 { + display: grid; display: grid; grid-auto-rows: 1fr; } @@ -50,6 +54,7 @@ exports[`Grid respects gridAutoRows 1`] = ` exports[`Grid respects gridColumn 1`] = ` .c0 { + display: grid; display: grid; grid-column: 1 / 2; } @@ -62,6 +67,7 @@ exports[`Grid respects gridColumn 1`] = ` exports[`Grid respects gridColumnGap 1`] = ` .c0 { + display: grid; display: grid; grid-column-gap: 8px; } @@ -74,6 +80,7 @@ exports[`Grid respects gridColumnGap 1`] = ` exports[`Grid respects gridGap 1`] = ` .c0 { + display: grid; display: grid; grid-gap: 4px; } @@ -86,6 +93,7 @@ exports[`Grid respects gridGap 1`] = ` exports[`Grid respects gridRow 1`] = ` .c0 { + display: grid; display: grid; grid-row: 1 / 2; } @@ -98,6 +106,7 @@ exports[`Grid respects gridRow 1`] = ` exports[`Grid respects gridRowGap 1`] = ` .c0 { + display: grid; display: grid; grid-row-gap: 8px; } @@ -110,6 +119,7 @@ exports[`Grid respects gridRowGap 1`] = ` exports[`Grid respects gridTemplateAreas 1`] = ` .c0 { + display: grid; display: grid; grid-template-areas: sidebar main; } @@ -122,6 +132,7 @@ exports[`Grid respects gridTemplateAreas 1`] = ` exports[`Grid respects gridTemplateColumns 1`] = ` .c0 { + display: grid; display: grid; grid-template-columns: 200px 1fr; } @@ -134,6 +145,7 @@ exports[`Grid respects gridTemplateColumns 1`] = ` exports[`Grid respects gridTemplateRows 1`] = ` .c0 { + display: grid; display: grid; grid-template-rows: 200px 1fr; } @@ -147,6 +159,13 @@ exports[`Grid respects gridTemplateRows 1`] = ` exports[`Grid respects responsive display 1`] = ` .c0 { display: grid; + display: grid; +} + +@media screen and (min-width:544px) { + .c0 { + display: inline-grid; + } } @media screen and (min-width:544px) { diff --git a/src/__tests__/__snapshots__/PointerBox.js.snap b/src/__tests__/__snapshots__/PointerBox.js.snap index c21a3131476..5f5e223ed14 100644 --- a/src/__tests__/__snapshots__/PointerBox.js.snap +++ b/src/__tests__/__snapshots__/PointerBox.js.snap @@ -3,7 +3,8 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` .c1 { background-color: #d73a49; - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } @@ -43,7 +44,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> @@ -54,7 +55,8 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` exports[`PointerBox passes the "borderColor" prop to both and 1`] = ` .c1 { border-color: #d73a49; - border: 1px solid; + border-width: 1px; + border-style: solid; border-radius: 6px; } @@ -93,7 +95,7 @@ exports[`PointerBox passes the "borderColor" prop to both and @@ -103,7 +105,8 @@ exports[`PointerBox passes the "borderColor" prop to both and in with relative positioning 1`] = ` .c1 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } @@ -143,7 +146,7 @@ exports[`PointerBox renders a in with relative positioning 1 d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" - strokeWidth={1} + strokeWidth="1px" /> diff --git a/src/__tests__/__snapshots__/Popover.js.snap b/src/__tests__/__snapshots__/Popover.js.snap index dfa98493cf5..197c744d023 100644 --- a/src/__tests__/__snapshots__/Popover.js.snap +++ b/src/__tests__/__snapshots__/Popover.js.snap @@ -8,7 +8,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -216,7 +217,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -424,7 +426,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of b } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -632,7 +635,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -840,7 +844,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1048,7 +1053,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of l } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1256,7 +1262,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1464,7 +1471,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1672,7 +1680,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of r } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -1880,7 +1889,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2088,7 +2098,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2296,7 +2307,8 @@ exports[`Popover and Popover.Content renders correctly for a caret position of t } .c2 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; @@ -2665,7 +2677,8 @@ exports[`Popover and Popover.Content renders with default props 1`] = ` exports[`Popover and Popover.Content renders with default props 2`] = ` .c0 { - border: 1px solid; + border-width: 1px; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; position: relative; diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap index ccd14ec95f5..3f4b424763e 100644 --- a/src/__tests__/__snapshots__/SideNav.js.snap +++ b/src/__tests__/__snapshots__/SideNav.js.snap @@ -2,7 +2,8 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = ` .c0 { - border: none; + border-width: 0; + border-style: solid; border-color: #e1e4e8; border-radius: 6px; } diff --git a/src/__tests__/__snapshots__/Timeline.js.snap b/src/__tests__/__snapshots__/Timeline.js.snap index adccf37419a..f2177ffd9a8 100644 --- a/src/__tests__/__snapshots__/Timeline.js.snap +++ b/src/__tests__/__snapshots__/Timeline.js.snap @@ -2,6 +2,10 @@ exports[`Timeline renders 1`] = ` .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -19,6 +23,10 @@ exports[`Timeline renders 1`] = ` exports[`Timeline renders with clipSidebar prop 1`] = ` .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -49,17 +57,14 @@ exports[`Timeline.Badge renders 1`] = ` } .c1 { - overflow: hidden; - width: 32px; - height: 32px; + color: #444d56; + background-color: #e1e4e8; + margin-right: 8px; + margin-left: -15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - margin-right: 8px; - margin-left: -15px; - color: #444d56; - background-color: #e1e4e8; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -71,6 +76,13 @@ exports[`Timeline.Badge renders 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + overflow: hidden; + width: 32px; + height: 32px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; border-radius: 50%; border: 2px solid #fff; } @@ -91,6 +103,10 @@ exports[`Timeline.Badge renders 1`] = ` exports[`Timeline.Item renders 1`] = ` .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -123,6 +139,10 @@ exports[`Timeline.Item renders 1`] = ` exports[`Timeline.Item renders with condensed prop 1`] = ` .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; diff --git a/src/theme.js b/src/theme.js index e0542dfa958..f381340caf6 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,6 @@ import {black, white, gray, blue, green, orange, purple, red, yellow} from 'primer-colors' import {lineHeights} from 'primer-typography' +import {lighten, rgba, desaturate} from 'polished' // General const colors = { @@ -28,10 +29,23 @@ const colors = { success: green[5], unknown: gray[4] }, + border: { - grayLight: '#eaecef', + blackFade: rgba(black, 0.15), + blue: blue[5], + blueLight: blue[2], + grayLight: lighten(0.03, gray[2]), gray: gray[2], - grayDark: '#d1d5da' + grayDark: gray[3], + grayDarker: gray[7], + green: green[4], + greenLight: desaturate(0.4, green[3]), + purple: purple[5], + red: red[5], + redLight: desaturate(0.6, red[3]), + white, + whiteFade: rgba(white, 0.15), + yellow: desaturate(0.6, yellow[3]) }, counter: { bg: 'rgba(27, 31, 35, 0.08)' @@ -77,7 +91,7 @@ const fontWeights = { bold: 600 } -const borders = [0, '1px solid'] +const borderWidths = [0, '1px'] const radii = ['0', '3px', '6px', '100px'] @@ -242,7 +256,7 @@ const pagination = { const theme = { // General - borders, + borderWidths, breakpoints, colors, fonts, diff --git a/yarn.lock b/yarn.lock index cec80e1527a..3e85481d5e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1706,6 +1706,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.8.7": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" + integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.4.0", "@babel/template@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" @@ -8516,6 +8523,13 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== +polished@3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.2.tgz#ca132b8cd68f7ffa95ae9d423f03e7a14fda1062" + integrity sha512-vWoRDg3gY5RQBtUfcj9MRN10VCIf4EkdUikGxyXItg2Hnwk+eIVtdBiLajN0ldFeT3Vq4r/QNbjrQdhqBKrTug== + dependencies: + "@babel/runtime" "^7.8.7" + portfinder@^1.0.25: version "1.0.25" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca" @@ -9184,6 +9198,11 @@ regenerator-runtime@^0.13.2: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== +regenerator-runtime@^0.13.4: + version "0.13.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" + integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA== + regenerator-transform@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"