diff --git a/pages/_app.js b/pages/_app.js index 71ddd54c213..828bdf05146 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -34,7 +34,7 @@ export default class MyApp extends App {
- + diff --git a/pages/components/docs/Avatar.md b/pages/components/docs/Avatar.md index decaac1b7f6..f6592e56755 100644 --- a/pages/components/docs/Avatar.md +++ b/pages/components/docs/Avatar.md @@ -1,10 +1,26 @@ # Avatar +Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder. + +## Default example + ```.jsx - + ``` +## System props + +Avatar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description +| :- | :- | :- | +| alt | String | Passed through to alt on img tag +| isChild | Boolean | adds the `avatar-child` class if present +| size | Number | default: 20, adds the `avatar-small` class if less than 24 +| src | String | The source url of the avatar image export const meta = { displayName: 'Avatar' diff --git a/pages/components/docs/BorderBox.md b/pages/components/docs/BorderBox.md index b8a74b07913..47c822b4121 100644 --- a/pages/components/docs/BorderBox.md +++ b/pages/components/docs/BorderBox.md @@ -1,12 +1,17 @@ # BorderBox +## Default example + ```.jsx This is a BorderBox -This is a BorderBox with padding. -This is a BorderBox with shadow. -This is a BorderBox with a medium shadow. -This is a BorderBox with a large shadow. -This is a BorderBox with an extra-large shadow. -This is a BorderBox with a green border. ``` + +## System props + +BorderBox components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +BorderBox does not get any additional props other than the system props mentioned above. + export const meta = { displayName: 'BorderBox'} diff --git a/pages/components/docs/Box.js b/pages/components/docs/Box.js deleted file mode 100644 index 511f788163d..00000000000 --- a/pages/components/docs/Box.js +++ /dev/null @@ -1,66 +0,0 @@ -/* eslint-disable import/no-named-as-default-member */ -import React from 'react' -import {theme, Box, Text} from '../../../src' - -const Mono = props => - -const colors = [...Object.entries(theme.colors)].reduce((keys, [key, value]) => { - if (key !== 'bg' && key !== 'border') { - if (Array.isArray(value)) { - return keys.concat(Object.keys(value).map(i => `${key}.${i}`)) - } else { - keys.push(key) - } - } - return keys -}, []) - -const textColors = ['white', 'gray.5', 'black'] - -export default function BoxExample() { - return ( -
- - - - - - - - - - {colors.map(color => ( - - - {textColors.map(fg => ( - - ))} - - - ))} - -
- color - - - bg= - {`{color}`} - - - borderColor -
- {color} - - - {fg} - - - - {color} - -
-
- ) -} - -export const meta = {displayName: 'Box'} diff --git a/pages/components/docs/Box.md b/pages/components/docs/Box.md new file mode 100644 index 00000000000..33763a84a33 --- /dev/null +++ b/pages/components/docs/Box.md @@ -0,0 +1,19 @@ +# Box + +## Default example + +```.jsx +This is a Box +``` + +## System props + +Box components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| is | String | Sets the HTML tag for the component | + +export const meta = {displayName: 'Box'} diff --git a/pages/components/docs/BranchName.md b/pages/components/docs/BranchName.md index 9c6db4c3276..450e4e0c06d 100644 --- a/pages/components/docs/BranchName.md +++ b/pages/components/docs/BranchName.md @@ -1,19 +1,20 @@ - # BranchName +## Default example + ```.jsx a_new_feature_branch +``` -BranchName with Octicon - - - a_new_feature_branch - +## System props -Linked BranchName - - a_new_feature_branch - -``` +BranchName components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| is | String | sets the HTML tag for the component | +| href | String | a URL to link the component to | export const meta = {displayName: 'BranchName'} diff --git a/pages/components/docs/Button.md b/pages/components/docs/Button.md new file mode 100644 index 00000000000..f696d4772c7 --- /dev/null +++ b/pages/components/docs/Button.md @@ -0,0 +1,28 @@ +# Buttons + +## Default examples + +```.jsx + +Button Danger +Button Link +Button Outline +Button Primary +``` + +## System props + +Button components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| is | String | sets the HTML tag for the component, defaults to `button` | +| block | Boolean | adds `display: block` to the component | +| disabled | Boolean | sets the `disabled` attribute on the Button | +| grouped | Boolean | allows you to use Button in a line of Buttons without duplicate borders | +| onClick | Function | function to be called when Button is clicked | +| size | String | use `sm` for a small Button, or `large` for a large Button + +export const meta = {displayName: 'Button'} diff --git a/pages/components/docs/Buttons.md b/pages/components/docs/Buttons.md deleted file mode 100644 index cfbd2f44760..00000000000 --- a/pages/components/docs/Buttons.md +++ /dev/null @@ -1,33 +0,0 @@ - -# Buttons - -```.jsx - - - - - - - - ButtonDanger - - ButtonPrimary - - ButtonOutline - - - - - This is an {''} styled as a button - - Octicon Buttons - - alert('edit')} mr={3} /> - - alert('close')} mr={3} /> - - alert('beep boop')} /> - -``` - -export const meta = {displayName: 'Buttons'} diff --git a/pages/components/docs/CircleBadge.md b/pages/components/docs/CircleBadge.md index a5b79fea09a..2165aac3da4 100644 --- a/pages/components/docs/CircleBadge.md +++ b/pages/components/docs/CircleBadge.md @@ -1,22 +1,25 @@ - # CircleBadge +## Default example + ```.jsx -Small, medium & large - - - + + + +``` -With custom width & height - +## System props + +CircleBadge components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| is | String | sets the HTML tag for the component, defaults to `div` | +| alt | String | alt tag | +| size | String or Number | Use `small`, `medium`, or `large` for default sizes, or provide a custom size | -{`With as a child & bg prop`} - -With Octicon as child - - - -``` export const meta = {displayName: 'CircleBadge'} diff --git a/pages/components/docs/CircleOcticon.md b/pages/components/docs/CircleOcticon.md index e21cf675555..f13a249134e 100644 --- a/pages/components/docs/CircleOcticon.md +++ b/pages/components/docs/CircleOcticon.md @@ -1,11 +1,22 @@ # CircleOcticon +## Default example + ```.jsx - - - - - + ``` + +## System props + +CircleOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| icon | Octicon | Octicon component used in the component | +| size | Number | used to set the width and height of the component | + + export const meta = {displayName: 'CircleOcticon'} diff --git a/pages/components/docs/CounterLabel.md b/pages/components/docs/CounterLabel.md index 78055d39029..ba0b8888cda 100644 --- a/pages/components/docs/CounterLabel.md +++ b/pages/components/docs/CounterLabel.md @@ -1,10 +1,21 @@ # CounterLabel +## Default example ```.jsx 12 13 13 ``` +## System props + +CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| scheme | String | Pass in 'gray' for a darker gray background and white text, or 'gray-light' for a lighter gray background and dark text. Omitting the scheme prop renders the default counter scheme | + export const meta = {displayName: 'CounterLabel'} diff --git a/pages/components/docs/Details.md b/pages/components/docs/Details.md index 1143ac9ae04..2bdb2e355c6 100644 --- a/pages/components/docs/Details.md +++ b/pages/components/docs/Details.md @@ -26,4 +26,16 @@ With render prop
'hi'} /> ``` + +## System props + +Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| open | Boolean | Sets the open/closed state of the Details component | +| render | Function | Optional render function, to allow you to handle toggling and open/closed state from a container component. + export const meta = {displayName: 'Details'} diff --git a/pages/components/docs/DonutChart.md b/pages/components/docs/DonutChart.md index 89930c37269..765d56b8270 100644 --- a/pages/components/docs/DonutChart.md +++ b/pages/components/docs/DonutChart.md @@ -1,67 +1,24 @@ # DonutChart +## Default example ```.jsx - - - With data prop - - - - - - - - - - - - With DonutSlice children - - - - - - - - - - - - - - - - - - + + + + + + +``` - - - - +## System props - - - - +DonutChart components get `space` system props. Read our [System Props](/system-props) doc page for a full list of available props. - - - - +## Component props - - - With DonutSlice children - +| Prop name | Type | Description | +| :- | :- | :- | +| data | Object | Use the keys `error`, `pending`, and `success` to set values used to generate slices in the chart | +| size | Number | Used to set the width and height of the component - - - - - - - - -``` export const meta = {displayName: 'DonutChart'} diff --git a/pages/components/docs/Dropdown.md b/pages/components/docs/Dropdown.md index 746e5251b2f..c8299f68902 100644 --- a/pages/components/docs/Dropdown.md +++ b/pages/components/docs/Dropdown.md @@ -1,39 +1,26 @@ # Dropdown +## Default example ```.jsx - - Dropdown Primary - - -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -     -     -     + + +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +     +     +``` - - Dropdown - - -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -     -     -     +## System props - - Dropdown with title - - -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -     -     -     -``` +Dropdown components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| scheme | String | Button scheme used to style the component, can be one of `danger`, `outline` or `primary` | +| title | String | Optional prop to set the text in the Dropdown button export const meta = {displayName: 'Dropdown'} diff --git a/pages/components/docs/FilterList.md b/pages/components/docs/FilterList.md index 346db5c4c18..31cfd83d467 100644 --- a/pages/components/docs/FilterList.md +++ b/pages/components/docs/FilterList.md @@ -1,18 +1,23 @@ # FilterList +## Default example + ```.jsx First Filter Second Filter Third Filter - -Small - - First Filter - Second Filter - Third Filter - ``` +## System props + +FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| small | Boolean | Used to create a smaller version of the standard FilterList| + export const meta = {displayName: 'FilterList'} diff --git a/pages/components/docs/Flash.md b/pages/components/docs/Flash.md index 8013b8d5265..a1daa9c2869 100644 --- a/pages/components/docs/Flash.md +++ b/pages/components/docs/Flash.md @@ -1,12 +1,21 @@ # Flash +## Default example + ```.jsx - Flash - Flash yellow - Flash red Flash green - Flash full ``` +## System props + +Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| full | Boolean | Creates a full width Flash component| +| scheme | String | Can be one of `green`, `yellow`, or `red` - sets the background color, border, and text color of the Flash component + export const meta = {displayName: 'Flash'} diff --git a/pages/components/docs/Flex.md b/pages/components/docs/Flex.md index 1489ef0d51f..bf86d3e0cf8 100644 --- a/pages/components/docs/Flex.md +++ b/pages/components/docs/Flex.md @@ -1,7 +1,8 @@ # FlexContainer and FlexItem +## Default example + ```.jsx -FlexContainer + FlexItems @@ -21,49 +22,18 @@ +``` +## System props -FlexContainer + FlexItems direction set to 'column' - - - - - Item 1 - - - - - Item 2 - - - - - Item 3 - - - - +FlexContainer components get `FLEX_CONTAINER`, `COMMON`, and `LAYOUT` system props. -FlexContainer + FlexItems using tag prop set to "p" - - - - - Item 1 - - - - - Item 2 - - - - - Item 3 - - - - -``` +FlexItem components get `FLEX_ITEM`, `COMMON`, and `LAYOUT` system props. + +Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +FlexContainer and FlexItem do not get any additional props other than the system props mentioned above. export const meta = {displayName: 'Flex'} diff --git a/pages/components/docs/Heading.md b/pages/components/docs/Heading.md index 0688a6b6180..09d32121c12 100644 --- a/pages/components/docs/Heading.md +++ b/pages/components/docs/Heading.md @@ -1,9 +1,16 @@ # Heading +## Default example ```.jsx With fontSize={1} -With fontSize={2} -With fontSize={3} ``` +## System props + +Heading components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +Heading does not get any additional props other than the system props mentioned above. + export const meta = {displayName: 'Heading'} diff --git a/pages/components/docs/Label.md b/pages/components/docs/Label.md index 21424a838fd..5a8446960b1 100644 --- a/pages/components/docs/Label.md +++ b/pages/components/docs/Label.md @@ -1,13 +1,22 @@ # Label +## Default example + ```.jsx - - - - - - - - + + + ``` + +## System props + +Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| outline | Boolean | Creates an outline style label | +| scheme | String | Can be one of `gray`, `gray-darker`, `orange` or `green` - sets the background color and text color of the Label component + export const meta = {displayName: 'Label'} diff --git a/pages/components/docs/Link.md b/pages/components/docs/Link.md index 88c066beecf..34c7d4e9e28 100644 --- a/pages/components/docs/Link.md +++ b/pages/components/docs/Link.md @@ -1,9 +1,22 @@ # Link +## Default example + ```.jsx Link -Link muted -Link gray -Link gray-dark ``` + +## System props + +Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| href | String | URL to be used for the Link | +| muted | Boolean | Applies a gray text color to the Link | +| nounderline | Boolean | Removes underline from the Link | +| scheme | String | Can be `gray` or `gray-dark`, sets the text color accordingly. | + export const meta = {displayName: 'Link'} diff --git a/pages/components/docs/MergeStatus.md b/pages/components/docs/MergeStatus.md index d82e1f826b1..743c123470e 100644 --- a/pages/components/docs/MergeStatus.md +++ b/pages/components/docs/MergeStatus.md @@ -1,12 +1,22 @@ # MergeStatus + +## Default example ```.jsx - - - - - - + + + + ``` +## System props + +MergeStatus components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| state | String | Can be one of `ready`, `invalid`, `merged`, or `pending`. Sets the appropriate background and text color on the component. | + export const meta = {displayName: 'MergeStatus'} diff --git a/pages/components/docs/PointerBox.md b/pages/components/docs/PointerBox.md index 1ddd82aa068..3458332878c 100644 --- a/pages/components/docs/PointerBox.md +++ b/pages/components/docs/PointerBox.md @@ -1,9 +1,21 @@ # PointerBox +## Default example + ```.jsx PointerBox ``` +## 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. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| caret | String | Sets the location of the caret. The format is `[edge]-[position on edge]`. For example, `right-top` will position the caret on the top of the right edge of the box. Use `top`, `right`, `bottom`, or `left` to position a caret in the center of that edge. | + export const meta = {displayName: 'PointerBox'} diff --git a/pages/components/docs/Position.md b/pages/components/docs/Position.md index 918c8486e6b..77c91cbf174 100644 --- a/pages/components/docs/Position.md +++ b/pages/components/docs/Position.md @@ -1,5 +1,7 @@ # Position Components +## Default examples + ```.jsx Relative + Absolute @@ -33,4 +35,12 @@ ``` +## System props + +Position components get `POSITION`, `LAYOUT` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +Position does not get any additional props other than the system props mentioned above. + export const meta = {displayName: 'Position'} diff --git a/pages/components/docs/StateLabel.md b/pages/components/docs/StateLabel.md index a9e5904eb45..e277445ee9b 100644 --- a/pages/components/docs/StateLabel.md +++ b/pages/components/docs/StateLabel.md @@ -1,81 +1,21 @@ # StateLabel +## Default example + ```.jsx - Open - - - Closed - - - Merged - +``` -By state (Octicons built in) - - Unknown - - - Open - - - Closed - - - Merged - - - Reopened - +## System props -By color - - Invalid - - - Green - - - Red - - - Purple - +StateLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. -Small, by state - - Unknown - - Open - - - Closed - - - Merged - - - Reopened - - +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| icon | Node or Boolean | Provide a component for the Icon or set to `true` to match the icon to the `state` prop | +| small | Boolean | Used to create a smaller version of the default StateLabel | +| state | String | Can be one of `open`, `reopened`, `closed`, or `merged`. Used to set background color and Octicon. -Small, by color - - - Invalid - - - Green - - - Red - - - Purple - - }> - Custom Octicon - - -``` export const meta = {displayName: 'StateLabel'} diff --git a/pages/components/docs/Text.md b/pages/components/docs/Text.md index d408b302bfd..6db4590ffb6 100644 --- a/pages/components/docs/Text.md +++ b/pages/components/docs/Text.md @@ -1,12 +1,16 @@ # Text +## Default example ```.jsx -Text -Text bold -Text green -Text lineHeight 'condensed' -Text fontSize 4 -Text padding 4 +Text ``` +## System props + +Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +Text does not get any additional props other than the system props mentioned above. + export const meta = {displayName: 'Text'} diff --git a/pages/components/docs/TextInput.md b/pages/components/docs/TextInput.md index 68a7d963119..9512d186714 100644 --- a/pages/components/docs/TextInput.md +++ b/pages/components/docs/TextInput.md @@ -1,14 +1,28 @@ # TextInput +## Default example + ```.jsx +``` -Text Input Sizes - - +## System props -Text Input - Block - -``` +TextInput components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| autocomplete | String | Allows user to set `autocomplete` attribute on input. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) for attribute documentation. | +| block | Boolean | Adds `display: block` to element | +| disabled | Boolean | Sets the `disabled` attribute on the element | +| id | String | Sets the `id` attribute on the element | +| name | String | Sets the `name` attribute on the element | +| onChange | Function | Function to be called when content in Input changes | +| placeholder | String | Sets the placeholder text | +| required | Boolean | Sets the `required` attribute on the element | +| size | String | Can be either `small` or `large`. Creates a smaller or larger input than the default. +| value | String | Current value of the Input. | export const meta = {displayName: 'TextInput'} diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md index a6f03586e5c..d5da4a912e7 100644 --- a/pages/components/docs/Tooltip.md +++ b/pages/components/docs/Tooltip.md @@ -1,49 +1,26 @@ # Tooltip +## Default example + ```.jsx -Basic Tooltip Text with a tooltip +``` -Directions -{Tooltip.directions.map(dir => ( - - - Tooltip direction="${dir}" - - -))} - - -Word wrap - - - Word wrapping tooltip - - +## System props + +Tooltip components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + +## Component props + +| Prop name | Type | Description | +| :- | :- | :- | +| align | String | Can be either `left` or `right`.| +| direction | String | Can be one of 'n', `ne`, `e`, `se`, `s`, `sw`, `w`, `nw` | Sets where the tooltip renders in relation to the target. | +| noDelay | Boolean | When set to `true`, tooltip appears without any delay | +| text | String | Text used in `aria-label` (for accessibility). +| wrap | Boolean | Use `true` to allow text within tooltip to wrap. -Alignment -{Tooltip.alignments.map(align => ( - - - Tooltip align="${align}" - - -))} - - -No Delay - - - Text with a tooltip - -` -``` export const meta = {displayName: 'Tooltip'} diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md index 40fac39b577..be743bb888d 100644 --- a/pages/components/docs/UnderlineNav.md +++ b/pages/components/docs/UnderlineNav.md @@ -1,5 +1,13 @@ # UnderlineNav + +To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or +[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass +```is={NavLink}``` and omit the ```selected``` prop. +This ensures that the NavLink gets ```activeClassName='selected'``` + +## Default example + ```.jsx Using {''} @@ -13,10 +21,25 @@ ``` - To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or - [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass - ```is={NavLink}``` and omit the ```selected``` prop. - This ensures that the NavLink gets ```activeClassName='selected'``` +## System props + +UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + + +## Component props + +### UnderlineNav +| Prop name | Type | Description | +| :- | :- | :- | +| actions | Node | Place another element, such as a button, to the opposite side of the navigation items.| +| align | String | Use `right` to have navigation items aligned right. | +| full | Boolean | Used to make navigation fill the width of the container. | +| label | String | Used to set the `aria-label` on the top level `