Skip to content

Commit 52b7700

Browse files
shawnbotshawnbot
authored
Merge pull request #310 from primer/q3-pink-robots
Q3 Pink Robots Tracking PR
2 parents a8a1411 + 7028875 commit 52b7700

36 files changed

Lines changed: 484 additions & 531 deletions

‎.travis.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,3 @@ script:
1717
- npm run build
1818
# make sure that the package includes and excludes all the right stuff
1919
- npm pack
20-
21-
notifications:
22-
slack: github:4OisIoqZYyMlWcw3hFtZgbmh

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/components",
3-
"version": "3.0.3-beta",
3+
"version": "4.0.0-beta",
44
"description": "Primer react components",
55
"main": "dist/index.umd.js",
66
"module": "dist/index.esm.js",

‎pages/_app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import * as primerComponents from '..'
66
import * as docComponents from './doc-components'
77
import Index from './index.mdx'
88

9-
const {BaseStyles, Box, FlexContainer, Link} = primerComponents
9+
const {BaseStyles, Box, Flex, Link} = primerComponents
1010
const {SideNav, Header, IndexHero, customTheme} = docComponents
1111

1212
const iconComponents = Object.keys(iconsByName).reduce((map, key) => {
@@ -46,15 +46,15 @@ export default class MyApp extends App {
4646
<Container>
4747
<Layout components={components} routes={[]} theme={customTheme}>
4848
<Header />
49-
<FlexContainer display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
49+
<Flex display={['block', 'block', 'flex', 'flex']} flexDirection="row-reverse">
5050
<Box width="100%">
5151
{isIndex && <IndexHero />}
5252
<Box color="gray.9" maxWidth={1012} width={'100%'} my={6} mx={'auto'} px={6} className="markdown-body">
5353
{isIndex ? <Index /> : <Component {...page} />}
5454
</Box>
5555
</Box>
5656
<SideNav />
57-
</FlexContainer>
57+
</Flex>
5858
</Layout>
5959
</Container>
6060
</BaseStyles>

‎pages/components/docs/FilterList.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ The FilterList component is a menu with filter options that filter the main cont
66

77
```.jsx
88
<FilterList>
9-
<FilterListItem selected count='32' href='#foo'>First Filter</FilterListItem>
10-
<FilterListItem count='2' href='#bar'>Second Filter</FilterListItem>
11-
<FilterListItem href='#baz'>Third Filter</FilterListItem>
9+
<FilterList.Item selected count='32' href='#foo'>First Filter</FilterList.Item>
10+
<FilterList.Item count='2' href='#bar'>Second Filter</FilterList.Item>
11+
<FilterList.Item href='#baz'>Third Filter</FilterList.Item>
1212
</FilterList>
1313
```
1414

‎pages/components/docs/Flex.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
# FlexContainer and FlexItem
1+
# Flex and Flex.Item
22

3-
FlexContainer and FlexItem are wrapping components that will give the content flexbox properties.
3+
Flex and Flex.Item are wrapping components that will give the content flexbox properties. Flex.Item is included in the export for Flex.
44

55
## Default example
66

77
```.jsx
88
<BorderBox width={300} height={300} borderRadius={0}>
9-
<FlexContainer flexWrap="nowrap">
10-
<FlexItem>
9+
<Flex flexWrap="nowrap">
10+
<Flex.Item>
1111
<Box p={3} bg="blue.5">
1212
Item 1
1313
</Box>
14-
</FlexItem>
15-
<FlexItem>
14+
</Flex.Item>
15+
<Flex.Item>
1616
<Box p={3} bg="green.5">
1717
Item 2
1818
</Box>
19-
</FlexItem>
20-
<FlexItem>
19+
</Flex.Item>
20+
<Flex.Item>
2121
<Box p={3} bg="yellow.5">
2222
Item 3
2323
</Box>
24-
</FlexItem>
25-
</FlexContainer>
24+
</Flex.Item>
25+
</Flex>
2626
</BorderBox>
2727
```
2828

2929
## System props
3030

31-
FlexContainer components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props.
31+
Flex components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props.
3232

33-
FlexItem components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
33+
Flex.Item components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props.
3434

3535
Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
3636

3737
## Component props
3838

39-
FlexContainer and FlexItem do not get any additional props other than the system props mentioned above.
39+
Flex and Flex.Item do not get any additional props other than the system props mentioned above.
4040

4141
export const meta = {displayName: 'Flex'}

‎pages/components/docs/Label.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Label components get `COMMON` system props. Read our [System Props](/components/
1919
| Name | Type | Default | Description |
2020
| :- | :- | :-: | :- |
2121
| outline | Boolean | | Creates an outline style label |
22-
| scheme | String | | Can be one of `gray`, `gray-darker`, `orange` or `green` - sets the background color and text color of the Label component
22+
| size | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` .
23+
| dropshadow | Boolean | | Adds a dropshadow to the label |
2324

2425
export const meta = {displayName: 'Label'}

‎pages/components/docs/StateLabel.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Use StateLabel components to show the status of an issue or pull request.
55
## Default example
66

77
```.jsx
8-
<StateLabel state="open">Open</StateLabel>
8+
<StateLabel scheme="issueOpened">Open</StateLabel>
99
```
1010

1111
## System props
@@ -16,8 +16,7 @@ StateLabel components get `COMMON` system props. Read our [System Props](/compon
1616

1717
| Name | Type | Default | Description |
1818
| :- | :- | :-: | :- |
19-
| icon | Node or Boolean | | Provide a component for the Icon or set to `true` to match the icon to the `state` prop |
2019
| small | Boolean | | Used to create a smaller version of the default StateLabel |
21-
| state | String | | Can be one of `open`, `reopened`, `closed`, or `merged`. Used to set background color and Octicon.
20+
| scheme | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed` or `pullMerged`.
2221

2322
export const meta = {displayName: 'StateLabel'}

‎pages/components/docs/UnderlineNav.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ This ensures that the NavLink gets ```activeClassName='selected'```
1111

1212
```.jsx
1313
<ExampleHeading>
14-
Using <Text fontFamily="mono">{'<UnderlineNavLink>'}</Text>
14+
Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
1515
</ExampleHeading>
1616
<UnderlineNav>
17-
<UnderlineNavLink href="#foo" selected>
17+
<UnderlineNav.Link href="#foo" selected>
1818
Selected
19-
</UnderlineNavLink>
20-
<UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
21-
<UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
19+
</UnderlineNav.Link>
20+
<UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
21+
<UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
2222
</UnderlineNav>
2323
```
2424

2525
## System props
2626

27-
UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
27+
UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
2828

2929

3030
## Component props
@@ -37,7 +37,7 @@ UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our
3737
| full | Boolean | Used to make navigation fill the width of the container. |
3838
| label | String | Used to set the `aria-label` on the top level `<nav>` element. |
3939

40-
### UnderlineNavLink
40+
### UnderlineNav.Link
4141
| Prop name | Type | Description |
4242
| :- | :- | :- |
4343
| is | String | sets the HTML tag for the component|

‎pages/doc-components/Header.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import {withRouter} from 'next/router'
33
import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
44
import NextLink from 'next/link'
55
import BoxShadow from './BoxShadow'
6-
import {Text, FlexContainer, Link, Sticky, Box} from '../..'
6+
import {Text, Flex, Link, Sticky, Box} from '../..'
77

88
const Header = ({router}) => (
99
<Sticky zIndex={100}>
1010
<BoxShadow py={3} bg="gray.9" color="white">
11-
<FlexContainer className="p-responsive" alignItems="center" justifyContent="space-between">
11+
<Flex className="p-responsive" alignItems="center" justifyContent="space-between">
1212
<NextLink href="/components">
1313
<Link ml={3} color="white" href="/components">
14-
<FlexContainer alignItems="center" justifyContent="center">
14+
<Flex alignItems="center" justifyContent="center">
1515
<Octicon icon={MarkGithub} size="medium" />
1616
<Text ml={3}>Primer Components</Text>
17-
</FlexContainer>
17+
</Flex>
1818
</Link>
1919
</NextLink>
2020
<Box display={['none', 'none', 'block']}>
@@ -57,7 +57,7 @@ const Header = ({router}) => (
5757
</Box>
5858
</Link>
5959
</Box>
60-
</FlexContainer>
60+
</Flex>
6161
</BoxShadow>
6262
</Sticky>
6363
)

0 commit comments

Comments
 (0)