From 4889b0b0c7f725aa52c2b1ef55e6c603745cd380 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 20 Jul 2021 12:23:32 -0500 Subject: [PATCH 01/14] deprecate system props --- codemods/__tests__/removeSystemProps.js | 99 +++++++++ codemods/lib/prettify.js | 2 +- codemods/removeSystemProps.js | 280 ++++++++++++++++++++++++ docs/content/AvatarStack.mdx | 43 ++-- docs/content/BranchName.md | 4 - docs/content/Breadcrumbs.md | 12 +- docs/content/Buttons.md | 15 +- docs/content/CircleBadge.md | 29 +-- docs/content/CircleOcticon.md | 6 +- docs/content/CounterLabel.md | 2 + docs/content/Details.md | 35 ++- docs/content/Dialog.md | 46 ++-- docs/content/Dialog2.mdx | 8 +- docs/content/Dropdown.md | 29 ++- docs/content/FilterList.md | 2 + docs/content/FilteredSearch.md | 5 +- docs/content/Flash.md | 12 +- docs/content/FormGroup.md | 10 +- docs/content/Header.md | 31 +-- docs/content/Label.md | 18 +- docs/content/LabelGroup.md | 8 +- docs/content/Link.md | 4 +- docs/content/Overlay.mdx | 24 +- docs/content/Pagehead.md | 2 + docs/content/Pagination.md | 57 ++--- docs/content/PointerBox.md | 2 +- docs/content/Popover.md | 71 ++++-- docs/content/ProgressBar.mdx | 6 +- docs/content/SelectMenu.md | 159 ++++++++------ docs/content/SideNav.md | 8 +- docs/content/Spinner.md | 6 +- docs/content/StateLabel.md | 11 +- docs/content/StyledOcticon.md | 6 + docs/content/SubNav.md | 4 +- docs/content/TabNav.md | 2 + docs/content/Text.md | 2 + docs/content/TextInput.md | 27 ++- docs/content/Timeline.md | 22 +- docs/content/Tooltip.md | 2 + docs/content/Truncate.md | 2 + docs/content/UnderlineNav.md | 2 + 41 files changed, 791 insertions(+), 324 deletions(-) create mode 100644 codemods/__tests__/removeSystemProps.js create mode 100644 codemods/removeSystemProps.js diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js new file mode 100644 index 00000000000..c2ae5c4bb2c --- /dev/null +++ b/codemods/__tests__/removeSystemProps.js @@ -0,0 +1,99 @@ +import {defineInlineTest} from 'jscodeshift/dist/testUtils' +import removeSystemProps from '../removeSystemProps' + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Button, StyledOcticon} from '@primer/components' +import {CheckIcon, ClippyIcon} from '@primer/octicons-react' + +const ClipboardCopy = ({value}) => + +`.trim(), + ` +import {Button, StyledOcticon} from '@primer/components' +import {CheckIcon, ClippyIcon} from '@primer/octicons-react' + +const ClipboardCopy = ({value}) => ( + +)`.trim(), + 'removeSystemProps' +) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Link} from '@primer/components' +const siteMetadata = {shortName: 'inline-block'} + +const link = + Primer + +`.trim(), + ` +import {Link} from '@primer/components' +const siteMetadata = {shortName: 'inline-block'} + +const link = ( + + Primer + +)`.trim(), + 'removeSystemProps' +) diff --git a/codemods/lib/prettify.js b/codemods/lib/prettify.js index 9142d259f19..463e849e8f5 100644 --- a/codemods/lib/prettify.js +++ b/codemods/lib/prettify.js @@ -7,7 +7,7 @@ module.exports = function prettify(ast, file) { source, Object.assign( { - parser: 'babylon', + parser: 'typescript', filepath: file.path }, config diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js new file mode 100644 index 00000000000..81f50b69a4f --- /dev/null +++ b/codemods/removeSystemProps.js @@ -0,0 +1,280 @@ +const prettify = require('./lib/prettify') + +const COMMON = [ + 'margin', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'marginX', + 'marginY', + 'm', + 'mt', + 'mr', + 'mb', + 'ml', + 'mx', + 'my', + 'padding', + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + 'paddingX', + 'paddingY', + 'p', + 'pt', + 'pr', + 'pb', + 'pl', + 'px', + 'py', + 'color', + 'backgroundColor', + 'opacity', + 'bg', + 'display' +] + +const TYPOGRAPHY = [ + 'fontFamily', + 'fontSize', + 'fontWeight', + 'lineHeight', + 'letterSpacing', + 'textAlign', + 'fontStyle', + 'whiteSpace' +] + +const BORDER = [ + 'border', + 'borderWidth', + 'borderStyle', + 'borderColor', + 'borderRadius', + 'borderTop', + 'borderTopLeftRadius', + 'borderTopRightRadius', + 'borderRight', + 'borderBottom', + 'borderBottomLeftRadius', + 'borderBottomRightRadius', + 'borderLeft', + 'borderX', + 'borderY', + 'borderTopWidth', + 'borderTopColor', + 'borderTopStyle', + 'borderBottomWidth', + 'borderBottomColor', + 'borderBottomStyle', + 'borderLeftWidth', + 'borderLeftColor', + 'borderLeftStyle', + 'borderRightWidth', + 'borderRightColor', + 'borderRightStyle', + 'boxShadow', + 'textShadow' +] + +const LAYOUT = [ + 'width', + 'height', + 'minWidth', + 'minHeight', + 'maxWidth', + 'maxHeight', + 'size', + 'overflow', + 'overflowX', + 'overflowY', + 'display', + 'verticalAlign' +] + +const POSITION = ['position', 'zIndex', 'top', 'right', 'bottom', 'left'] + +const FLEX = [ + 'alignItems', + 'alignContent', + 'justifyItems', + 'justifyContent', + 'flexWrap', + 'flexDirection', + 'flex', + 'flexGrow', + 'flexShrink', + 'flexBasis', + 'justifySelf', + 'alignSelf', + 'order' +] + +// const GRID = [ +// 'gridGap', +// 'gridColumnGap', +// 'gridRowGap', +// 'gridColumn', +// 'gridRow', +// 'gridAutoFlow', +// 'gridAutoColumns', +// 'gridAutoRows', +// 'gridTemplateColumns', +// 'gridTemplateRows', +// 'gridTemplateAreas', +// 'gridArea' +// ] + +const stylePropsMap = { + Avatar: [...COMMON], + AvatarStack: [...COMMON], + BranchName: [...COMMON], + Breadcrumb: [...COMMON, ...FLEX], + Button: [...COMMON, ...LAYOUT, ...TYPOGRAPHY], + ButtonBase: [...COMMON, ...LAYOUT], + ButtonClose: [...COMMON, ...LAYOUT], + ButtonTableList: [...COMMON, ...TYPOGRAPHY, ...LAYOUT], + CircleBadge: [...COMMON], + CounterLabel: [...COMMON], + Details: [...COMMON], + Dialog: [...LAYOUT, ...COMMON, ...POSITION], + Dropdown: [...COMMON], + FilteredSearch: [...COMMON], + FilterList: [...COMMON], + Flash: [...COMMON], + FormGroup: [...COMMON], + FormGroupLabel: [...COMMON, ...TYPOGRAPHY], + Header: [...COMMON, ...BORDER], + HeaderItem: [...COMMON, ...BORDER], + Label: [...COMMON, ...BORDER], + LabelGroup: [...COMMON], + Link: [...COMMON, ...TYPOGRAPHY], + Overlay: [...COMMON], + Pagehead: [...COMMON], + Pagination: [...COMMON], + Popover: [...COMMON, ...LAYOUT, ...POSITION], + PopoverContent: [...COMMON, ...LAYOUT, ...POSITION, ...FLEX], + SelectMenu: [...COMMON], + SelectMenuDivider: [...COMMON], + SelectMenuFilter: [...COMMON], + SelectMenuFooter: [...COMMON], + SelectMenuHeader: [...COMMON, ...TYPOGRAPHY], + SelectMenuItem: [...COMMON], + SelectMenuList: [...COMMON], + SelectMenuLoadingAnimation: [...COMMON], + SelectMenuModal: [...COMMON], + SelectMenuTab: [...COMMON], + SelectMenuTabPanel: [...COMMON], + SelectMenuTabs: [...COMMON], + SideNav: [...COMMON], + Spinner: [...COMMON], + StateLabel: [...COMMON], + StyledOcticon: [...COMMON], + SubNav: [...COMMON, ...FLEX], + TabNav: [...COMMON], + TabNavLink: [...COMMON, ...TYPOGRAPHY], + TextInput: [...COMMON], + Timeline: [...COMMON], + Tooltip: [...COMMON], + Truncate: [...TYPOGRAPHY, ...COMMON], + UnderlineNav: [...COMMON] +} + +const expressionToString = expression => { + if (expression.type === 'Literal') { + const expressionValue = expression.value + return typeof expressionValue === 'string' ? `"${expressionValue}"` : expressionValue + } else if (expression.type === 'Identifier') { + return expression.name + } else if (expression.type === 'Identifier') { + return expression.name + } else if (['null', 'undefined'].includes(expression.raw)) { + return expression.raw + } else { + const start = expression.start + const end = expression.end + const toks = expression.loc.tokens.filter(token => { + return token.type !== 'CommentLine' && token.start >= start && token.end <= end + }) + const vals = toks.map(tok => { + return tok.type.label === 'string' ? `"${tok.value}"` : tok.value + }) + return vals.join('') + } +} + +const objectToString = object => { + const values = Object.values(object) + const keys = Object.keys(object) + const duples = keys.map(function (key, i) { + return [key, values[i]] + }) + const accumulator = (string, duple) => { + const expression = duple[1] + const expressionString = expressionToString(expression) + return `${string} ${duple[0]}: ${expressionString},` + } + const objString = duples.reduce(accumulator, '') + return `{${objString}}` +} + +module.exports = (file, api) => { + const j = api.jscodeshift + const ast = j(file.source) + + const importsByName = {} + + ast + .find(j.ImportDeclaration, decl => decl.source.value.includes('@primer/components')) + .forEach(decl => { + j(decl) + .find(j.ImportSpecifier) + .forEach(spec => { + importsByName[spec.node.imported.name] = spec.node.local.name + }) + }) + + ast + .find(j.JSXElement, { + openingElement: { + name: { + name: name => { + return name in stylePropsMap + } + } + } + }) + .forEach(el => { + const sx = {} + const elementName = el.value?.openingElement?.name?.name + const elementNameScrubbed = elementName.replace('.', '') + const systemProps = stylePropsMap[elementNameScrubbed] + const attrNodes = j(el).find(j.JSXAttribute, { + name: name => { + const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end + return systemProps && systemProps.includes(name.name) && isInElement + } + }) + + attrNodes.forEach((attr, index) => { + const key = attr?.value?.name?.name + const literal = attr?.value?.value + const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal + if (key && val) { + sx[key] = val + } + if (index + 1 !== attrNodes.length) { + attr.prune() + } else { + const keys = Object.keys(sx) + if (keys.length > 0) { + j(attr).replaceWith(`sx={${objectToString(sx)}}`) + } + } + }) + }) + + return prettify(ast, file) +} diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx index 61bc65aedd5..d2729ba57a8 100644 --- a/docs/content/AvatarStack.mdx +++ b/docs/content/AvatarStack.mdx @@ -5,32 +5,35 @@ title: AvatarStack AvatarStack is used to display more than one Avatar in an inline stack. ### Default example + ```jsx live - - - - - - - ``` - - ### Right aligned + + + + + + +``` + +### Right aligned + ```jsx live - - - - - - - ``` + + + + + + +``` ## System props -AvatarStack components get `COMMON` system props, AvatarStack.Item components do not get any system props. Read our [System Props](/system-props) doc page for a full list of available props. +**Note: System props for components other than `Box` are deprecated and will be removed soon.** +AvatarStack components get `COMMON` system props, AvatarStack.Item components do not get any system props. Read our [System Props](/system-props) doc page for a full list of available props. ## AvatarStack Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| alignRight | Boolean | | Creates right aligned AvatarStack | \ No newline at end of file +| Name | Type | Default | Description | +| :--------- | :------ | :-----: | :-------------------------------- | +| alignRight | Boolean | | Creates right aligned AvatarStack | diff --git a/docs/content/BranchName.md b/docs/content/BranchName.md index 1badc1882a2..be80991dd1b 100644 --- a/docs/content/BranchName.md +++ b/docs/content/BranchName.md @@ -10,10 +10,6 @@ BranchName is a label-type component rendered as an `` tag by default with mo a_new_feature_branch ``` -## System props - -BranchName components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ## Component props | Name | Type | Default | Description | diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.md index db6ed9df52e..90e1cc2ba06 100644 --- a/docs/content/Breadcrumbs.md +++ b/docs/content/Breadcrumbs.md @@ -27,6 +27,8 @@ This ensures that the NavLink gets `activeClassName='selected'` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props @@ -37,8 +39,8 @@ The `Breadcrumb` component does not receive any additional props besides `COMMON ### Breadcrumb.Item -| Prop name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | `a` | Sets the HTML tag for the component | -| href | String | | URL to be used for the Link | -| selected | Boolean | false | Used to style the link as selected or unselected | +| Prop name | Type | Default | Description | +| :-------- | :------ | :-----: | :----------------------------------------------- | +| as | String | `a` | Sets the HTML tag for the component | +| href | String | | URL to be used for the Link | +| selected | Boolean | false | Used to style the link as selected or unselected | diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md index d576ed76801..dbe0d5018be 100644 --- a/docs/content/Buttons.md +++ b/docs/content/Buttons.md @@ -2,7 +2,6 @@ title: Buttons --- - `Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another. In special cases where you'd like to use a `` styled like a Button, use ` - setIsOpen(false)} aria-labelledby="header-id"> + + setIsOpen(false)} + aria-labelledby="header-id" + > Title Some content @@ -40,7 +48,6 @@ If you're running into z-index issues or are rendering the component inside of a ``` - You can also pass any non-text content into the header: ```jsx live @@ -49,15 +56,24 @@ You can also pass any non-text content into the header: const returnFocusRef = React.useRef(null) return ( <> - - setIsOpen(false)} aria-labelledby="label"> + + setIsOpen(false)} + aria-labelledby="label" + > - Are you sure you'd like to delete this issue? + + Are you sure you'd like to delete this issue? + - + Delete @@ -70,17 +86,19 @@ You can also pass any non-text content into the header: ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + `Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -| Prop name | Type | Description | -| :- | :- | :- | -| isOpen | Boolean | Set whether or not the dialog is shown | -| onDismiss | Function | A user-provided function that should close the dialog | -| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed | +| Prop name | Type | Description | +| :-------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | Boolean | Set whether or not the dialog is shown | +| onDismiss | Function | A user-provided function that should close the dialog | +| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed | | initialFocusRef | React ref | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. | -| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. | -| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. | +| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. | +| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. | `Dialog.Header` does not take any non-system props. diff --git a/docs/content/Dialog2.mdx b/docs/content/Dialog2.mdx index 49d8103892a..9699b3e1490 100644 --- a/docs/content/Dialog2.mdx +++ b/docs/content/Dialog2.mdx @@ -71,10 +71,6 @@ By default, the Dialog component implements the design and interactions defined ``` -## System props - -`Dialog`, `Dialog.Header`, `Dialog.Title`, `Dialog.Subtitle`, `Dialog.Body`, and `Dialog.Footer` 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 ### DialogProps @@ -89,8 +85,8 @@ By default, the Dialog component implements the design and interactions defined | footerButtons | `DialogButtonProps[]` | | Optional. Specify buttons that will be rendered in the footer of the dialog. | | onClose | `(gesture: 'close-button' │ 'escape') => void` | | Required. This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the "X" in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape'). | | role | `"dialog" │ "alertdialog"` | `"dialog"` | The ARIA role given to the dialog element. More info: [dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), [alertdialog](https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog) | -| width | `"small" │ "medium" │ "large" │ "xlarge"` | `"xlarge"` | The fixed width of the dialog. | -| height | `"small" │ "large" │ "auto"` | `"auto"` | The fixed height of the dialog, or, auto to adjust the height based on its contents. | +| width | `"small" │ "medium" │ "large" │ "xlarge"` | `"xlarge"` | The fixed width of the dialog. | +| height | `"small" │ "large" │ "auto"` | `"auto"` | The fixed height of the dialog, or, auto to adjust the height based on its contents. | ### DialogHeaderProps diff --git a/docs/content/Dropdown.md b/docs/content/Dropdown.md index 48adbd83f85..f14ec81ba9e 100644 --- a/docs/content/Dropdown.md +++ b/docs/content/Dropdown.md @@ -1,6 +1,7 @@ --- title: Dropdown --- + The Dropdown component is a lightweight context menu for housing navigation and actions. Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` element if you would like. **You must use a `summary` tag in order for the dropdown to behave properly!**. You should also add `aria-haspopup="true"` to custom dropdown triggers for accessibility purposes. You can use the `Dropdown.Caret` component to add a caret to a custom dropdown trigger. @@ -8,10 +9,11 @@ Use `Dropdown.Button` as the trigger for the dropdown, or use a custom `summary` Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to this component to position the menu in relation to the Dropdown.Button. ## Default example + ```jsx live Dropdown - + Item 1 Item 2 Item 3 @@ -20,13 +22,14 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ``` ## With custom button + ```jsx live Dropdown - + - + Item 1 Item 2 Item 3 @@ -34,28 +37,32 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ``` - ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props The Dropdown component is extended from the [`Details`](/Details) component and gets all props that the [`Details`](/Details) component gets. - #### Dropdown.Menu -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' | + +| Name | Type | Default | Description | +| :-------- | :----- | :-----: | :------------------------------------------------------------------------------------ | +| direction | String | 'sw' | Sets the direction of the dropdown menu. Pick from 'ne', 'e', 'se', 's', 'sw', or 'w' | #### Dropdown.Button -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| onClick | Function | none | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. | + +| Name | Type | Default | Description | +| :------ | :------- | :-----: | :----------------------------------------------------------------------------------------------------------- | +| onClick | Function | none | Use the `onClick` handler to add additional functionality when the button is clicked, such as fetching data. | #### Dropdown.Caret + No additional props. #### Dropdown.Item + No additional props. diff --git a/docs/content/FilterList.md b/docs/content/FilterList.md index 51a9cf81cdf..3ef0b734e95 100644 --- a/docs/content/FilterList.md +++ b/docs/content/FilterList.md @@ -20,6 +20,8 @@ The FilterList component is a menu with filter options that filter the main cont ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + FilterList components get `COMMON` 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 97bd4f9fffc..5e54eed225e 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -4,7 +4,8 @@ title: FilteredSearch The FilteredSearch component helps style a Dropdown and a TextInput side-by-side. -**Note:** You *must* use a `TextInput` and `Dropdown` (or native `
` and ``) in order for this component to work properly. +**Note:** You _must_ use a `TextInput` and `Dropdown` (or native `
` and ``) in order for this component to work properly. + ## Default example ```jsx live @@ -23,6 +24,8 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + FilteredSearch gets `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Flash.md b/docs/content/Flash.md index 220efc528b6..e59e58208b5 100644 --- a/docs/content/Flash.md +++ b/docs/content/Flash.md @@ -19,18 +19,20 @@ Flash components with icons inside of them will automatically set the correct co ```jsx live - + Success! ``` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| full | Boolean | | Creates a full width Flash component| -| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | +| Name | Type | Default | Description | +| :------ | :------ | :-----: | :----------------------------------------------------------------------------------------------------------------------- | +| full | Boolean | | Creates a full width Flash component | +| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component | diff --git a/docs/content/FormGroup.md b/docs/content/FormGroup.md index 5a5e7d70e9a..d2e306f1c8e 100644 --- a/docs/content/FormGroup.md +++ b/docs/content/FormGroup.md @@ -20,6 +20,8 @@ Adds styles for multiple form elements used together. ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + FormGroup components get `COMMON` system props. FormGroup.Label components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props @@ -32,7 +34,7 @@ FormGroup components get `COMMON` system props. FormGroup.Label components get ` ### FormGroup.Label -| Name | Type | Default | Description | -| :--- | :----- | :-----: | :---------------------------------- | -| as | String | `label` | Sets the HTML tag for the component | -| htmlFor | String | | The value of `htmlFor` needs to be the same as the `id` of the input it labels | +| Name | Type | Default | Description | +| :------ | :----- | :-----: | :----------------------------------------------------------------------------- | +| as | String | `label` | Sets the HTML tag for the component | +| htmlFor | String | | The value of `htmlFor` needs to be the same as the `id` of the input it labels | diff --git a/docs/content/Header.md b/docs/content/Header.md index 8a9244e2582..d36ab450bd4 100644 --- a/docs/content/Header.md +++ b/docs/content/Header.md @@ -20,26 +20,17 @@ All items directly under the Header component should be a `Header.Item` componen Menu - + ``` -## Header with full-size item example +## Header with full-size item example ```jsx live
Item 1 - + Item 2 Item 3 @@ -64,19 +55,21 @@ All items directly under the Header component should be a `Header.Item` componen ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + `Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props ### Header.Item -| Prop name | Type | Description | -| :--------- | :------ | :------------------------------------------------------------------------------------- | -| full | Boolean | stretches item to fill the available space | +| Prop name | Type | Description | +| :-------- | :------ | :----------------------------------------- | +| full | Boolean | stretches item to fill the available space | ### Header.Link -| Prop name | Type | Description | -| :--------- | :------ | :------------------------------------------------------------------------------------- | -| as | String | sets the HTML tag for the component | -| href | String | URL to be used for the Link | \ No newline at end of file +| Prop name | Type | Description | +| :-------- | :----- | :---------------------------------- | +| as | String | sets the HTML tag for the component | +| href | String | URL to be used for the Link | diff --git a/docs/content/Label.md b/docs/content/Label.md index 40375d4d484..719674d5f39 100644 --- a/docs/content/Label.md +++ b/docs/content/Label.md @@ -7,21 +7,23 @@ The Label component is used to add contextual metadata to a design. Visually it ## Default example ```jsx live - - - + + + - - - - - + + + + + ``` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/LabelGroup.md b/docs/content/LabelGroup.md index 8f3e62766c9..0e2e571933d 100644 --- a/docs/content/LabelGroup.md +++ b/docs/content/LabelGroup.md @@ -9,15 +9,19 @@ The LabelGroup component is used to add commonly used margins and wrapping for g ```jsx live - + ``` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + LabelGroup components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -LabelGroup does not get any additional props other than the `COMMON` system props. +LabelGroup does not get any additional props. diff --git a/docs/content/Link.md b/docs/content/Link.md index 106fda6d2e8..91bada061a7 100644 --- a/docs/content/Link.md +++ b/docs/content/Link.md @@ -11,13 +11,15 @@ In special cases where you'd like a ` @@ -39,20 +39,25 @@ function PopoverDemo(props) { return ( - Caret Position + + Caret Position + - Popover Visibility + + Popover Visibility + - {pos} caret + + {pos} caret + Message about this particular piece of UI. @@ -64,15 +69,31 @@ function PopoverDemo(props) { function CaretSelector(props) { const choices = [ - 'top', 'bottom', 'left', 'right', - 'left-bottom', 'left-top', 'right-bottom', 'right-top', - 'top-left', 'bottom-left', 'top-right', 'bottom-right' - ].map((dir) => ( + 'top', + 'bottom', + 'left', + 'right', + 'left-bottom', + 'left-top', + 'right-bottom', + 'right-top', + 'top-left', + 'bottom-left', + 'top-right', + 'bottom-right' + ].map(dir => ( -)) + )) return ( @@ -86,18 +107,20 @@ render() ## System 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. +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + +ProgressBar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props ### Popover -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | 'div' | Sets the HTML tag for the component. | -| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. | -| open | Boolean | false | Controls the visibility of the popover. | -| relative | Boolean | false | Set to true to render the popover using relative positioning. | +| Name | Type | Default | Description | +| :------- | :------ | :-----: | :----------------------------------------------------------------------------- | +| as | String | 'div' | Sets the HTML tag for the component. | +| caret | String | 'top' | Controls the position of the caret. See below for the list of caret positions. | +| open | Boolean | false | Controls the visibility of the popover. | +| relative | Boolean | false | Set to true to render the popover using relative positioning. | #### Caret Positions @@ -105,6 +128,6 @@ The `caret` prop can be one of the following values: `top`, `bottom`, `left`, `r ### Popover.Content -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| as | String | 'div' | Sets the HTML tag for the component. | +| Name | Type | Default | Description | +| :--- | :----- | :-----: | :----------------------------------- | +| as | String | 'div' | Sets the HTML tag for the component. | diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx index d7ec53f061f..a9e9c46b0e2 100644 --- a/docs/content/ProgressBar.mdx +++ b/docs/content/ProgressBar.mdx @@ -15,14 +15,10 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s ```jsx live <> 5 of 10 - + ``` -## System props - -ProgressBar components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ## Component props | Name | Type | Default | Description | diff --git a/docs/content/SelectMenu.md b/docs/content/SelectMenu.md index 650bf772652..21ad6604969 100644 --- a/docs/content/SelectMenu.md +++ b/docs/content/SelectMenu.md @@ -7,6 +7,7 @@ The `SelectMenu` components are a suite of components which can be combined toge Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`. ## Basic Example + ```jsx live @@ -23,38 +24,36 @@ Several additional components exist to provide even more functionality: `SelectM ``` ## SelectMenu + Main wrapper component for select menu. ```jsx - - {/* all other sub components are wrapped here*/} - +{/* all other sub components are wrapped here*/} ``` -### System props - -SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ### Component Props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. | -| ref | React ref | | ref to pass down to SelectMenu component | + +| Name | Type | Default | Description | +| :--------- | :-------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------- | +| initialTab | String | | If using the `SelectMenu.Tabs` component, you can use this prop to change the tab shown on open. By default, the first tab will be used. | +| ref | React ref | | ref to pass down to SelectMenu component | ## SelectMenu.MenuContext -SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). + +SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.html#reactcreatecontext) that exposes some helpful state values to be used via [`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext) in consuming applications. SelectMenu.MenuContext can only be used in components that are already wrapped in a `SelectMenu` as `SelectMenu` contains the [context provider](https://reactjs.org/docs/context.html#contextprovider). ### Values available on MenuContext -| Name | Type | Description | -| :- | :- | :- | -| selectedTab | string | The currently selected tab | -| setSelectedTab | function | Used to update the currently selected tab state | -| open | boolean | State for open/closed status of the menu modal | -| setOpen | function | Used to update the `open` state | -| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | +| Name | Type | Description | +| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | +| selectedTab | string | The currently selected tab | +| setSelectedTab | function | Used to update the currently selected tab state | +| open | boolean | State for open/closed status of the menu modal | +| setOpen | function | Used to update the `open` state | +| initialTab | string | Mostly used internally to pass down which tab should be set to open by default. To change this value use the `initialTab` prop on `SelectMenu`. | ### Example Usage + ```jsx import {SelectMenu, Button} from `@primer/components` import React, {useContext} from 'react' @@ -79,6 +78,7 @@ const MyButton = () => { ``` ## SelectMenu.Modal + Used to wrap the content in a `SelectMenu`. ```jsx @@ -108,35 +108,24 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl ``` -### System Props - -SelectMenu.Modal 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 | Default | Description | -| :-------- | :----- | :------ | ------------------------------------------------- | -| align | String | 'left' | Use `right` to align the select menu to the right | -| width | String or Number | 300px | Sets the modal width | - +| Prop name | Type | Default | Description | +| :-------- | :--------------- | :------ | ------------------------------------------------- | +| align | String | 'left' | Use `right` to align the select menu to the right | +| width | String or Number | 300px | Sets the modal width | ## SelectMenu.List -Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. +Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessbility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. ```jsx - - {/* all menu list items are wrapped in the list*/} - +{/* all menu list items are wrapped in the list*/} ``` -### System Props - -SelectMenu.List components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ### Component Props -SelectMenu.List components do not get any additional props besides system props. +SelectMenu.List components do not get any additional props besides system props. ## SelectMenu.Item @@ -150,17 +139,21 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t ``` -### System Props +### System props + +**Note: System props for components other than `Box` are deprecated and will be removed soon.** -SelectMenu.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +SelectMenu components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| selected | boolean | | Used to apply styles to the selected items in the list. | -| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. | + +| Name | Type | Default | Description | +| :------- | :------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| selected | boolean | | Used to apply styles to the selected items in the list. | +| onClick | function | | Function called when item is clicked. By default we also close the menu when items are clicked. If you would like the menu to stay open, pass an `e.preventDefault()` to your onClick handler. | ## SelectMenu.Filter + Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. ```jsx live @@ -168,7 +161,7 @@ Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expe Filter by Project - + Primer React bugs Primer React roadmap @@ -180,19 +173,16 @@ Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expe ``` - -### System Props -SelectMenu.Filter components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ### Component Props -SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets. -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application | +SelectMenu.Filter components receive all the props that the [TextInput](/TextInput) component gets. +| Name | Type | Default | Description | +| :---- | :----- | :-----: | :------------------------------------------------------------------------------------------------------------- | +| value | String | | Users of this component must provide a value for the filter input that is managed in the consuming application | ## SelectMenu.Tabs + Use `SelectMenu.Tabs` to wrap the the tab navigation and `SelectMenu.Tab` for each tab in the navigation. `SelectMenu.TabPanel` should wrap each corresponding panel for each of the tabs. The `tabName` prop for each `SelectMenu.TabPanel` must match the name provided in the `tabName` prop on `SelectMenu.Tab`. @@ -209,8 +199,8 @@ If you need access to the selected tab state, you can find it in the MenuContext Projects - - + + Primer React bugs @@ -226,14 +216,12 @@ If you need access to the selected tab state, you can find it in the MenuContext ``` -### System Props - -SelectMenu.Tabs components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. - ### Component Props + SelectMenu.Tabs components do not get any additional props besides system props. ## SelectMenu.Tab + Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the `index` prop to correspond to the order the tab is in. The `tabName` prop should correspond to the `tabName` set on the `SelectMenu.TabPanel`. The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. @@ -244,35 +232,43 @@ The `onClick` prop is optional and can be used for any events or data fetching y ``` ### System Props + +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.Tab components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | -| index | Number | | The index at which the tab is in the list of tabs | -| onClick | Function | | Function to be called when the tab is clicked. Optional. | + +| Name | Type | Default | Description | +| :------ | :------- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | +| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | +| index | Number | | The index at which the tab is in the list of tabs | +| onClick | Function | | Function to be called when the tab is clicked. Optional. | ## SelectMenu.TabPanel + Wraps the content for each tab. Make sure to use the `tabName` prop to identify each tab panel with the correct tab in the tab navigation. **Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. ```jsx - - {/* Wraps content for each tab */} - +{/* Wraps content for each tab */} ``` ### System Props + +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.TabPanel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. + +| Name | Type | Default | Description | +| :------ | :----- | :-----: | :------------------------------------------------------------------------------------------------------------------------- | +| tabName | String | | Used to identify the corresponding tab. Must match the string used in the `tabs` array in the `SelectMenu.Tabs` component. | ## SelectMenu.Divider + Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. ```jsx live @@ -293,12 +289,16 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis ### System Props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.Divder components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props + SelectMenu.Divider components do not get any additional props besides system props. ## SelectMenu.Footer + Use a `SelectMenu.Footer` to add content to the bottom of the select menu. ```jsx live @@ -319,12 +319,16 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu. ### System Props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.Footer components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props + SelectMenu.Footer components do not get any additional props besides system props. ## SelectMenu.Header + Use a `SelectMenu.Header` to add a header to the top of the select menu content. ```jsx live @@ -345,23 +349,29 @@ Use a `SelectMenu.Header` to add a header to the top of the select menu content. ### System Props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.Header components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props + SelectMenu.Header components do not get any additional props besides system props. ## SelectMenu.LoadingAnimation + Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the SelectMenu. -**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. +**Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. ```jsx live Projects - - {true ? : + + {true ? ( + + ) : ( Primer React bugs Primer React roadmap @@ -369,14 +379,17 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel Project 4 Use ⌥ + click/return to exclude labels. - } + )} ``` ### System Props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SelectMenu.LoadingAnimation components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ### Component Props + SelectMenu.LoadingAnimation components do not get any additional props besides system props. diff --git a/docs/content/SideNav.md b/docs/content/SideNav.md index 7752dbfc6c3..7e54b247b00 100644 --- a/docs/content/SideNav.md +++ b/docs/content/SideNav.md @@ -39,12 +39,12 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros With an avatar - + With an Octicon With a status icon - + With a label @@ -55,7 +55,7 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros 16 - + A heading and some more content @@ -133,6 +133,8 @@ If using React Router, you can use the `as` prop to render the element as a `Nav ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + `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/content/Spinner.md b/docs/content/Spinner.md index 8c8a48d7120..87f7d5bb93b 100644 --- a/docs/content/Spinner.md +++ b/docs/content/Spinner.md @@ -16,17 +16,19 @@ Use Spinner to let users know that content is being loaded. ### Small ```jsx live - + ``` ### Large ```jsx live - + ``` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Spinner components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/StateLabel.md b/docs/content/StateLabel.md index 19b0a6d68c0..5f0d63006b8 100644 --- a/docs/content/StateLabel.md +++ b/docs/content/StateLabel.md @@ -1,6 +1,7 @@ --- title: StateLabel --- + Use StateLabel components to show the status of an issue or pull request. ## Default example @@ -16,11 +17,13 @@ Use StateLabel components to show the status of an issue or pull request. ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + StateLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. | -| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. +| Name | Type | Default | Description | +| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------ | +| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel. | +| status | String | | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. | diff --git a/docs/content/StyledOcticon.md b/docs/content/StyledOcticon.md index 36285795443..73b72a3db3d 100644 --- a/docs/content/StyledOcticon.md +++ b/docs/content/StyledOcticon.md @@ -16,6 +16,12 @@ StyledOcticon renders an [Octicon](https://octicons.github.com) with common syst StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. +## System props + +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + +StyledOcticon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. + ## Component props StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including: diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md index 5e53ebf065d..7c58c7c74c7 100644 --- a/docs/content/SubNav.md +++ b/docs/content/SubNav.md @@ -37,7 +37,7 @@ This ensures that the NavLink gets `activeClassName='selected'` Support - + ``` @@ -74,6 +74,8 @@ This ensures that the NavLink gets `activeClassName='selected'` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + SubNav and SubNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/TabNav.md b/docs/content/TabNav.md index 71c0a1e173a..83a1836d3fa 100644 --- a/docs/content/TabNav.md +++ b/docs/content/TabNav.md @@ -25,6 +25,8 @@ This ensures that the NavLink gets `activeClassName='selected'` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + TabNav and TabNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Text.md b/docs/content/Text.md index a3984b2b54a..cb4ee6c50ff 100644 --- a/docs/content/Text.md +++ b/docs/content/Text.md @@ -14,6 +14,8 @@ The Text component is a wrapper component that will apply typography styles to t ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + 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 diff --git a/docs/content/TextInput.md b/docs/content/TextInput.md index 254784df865..8f52bd0fcfd 100644 --- a/docs/content/TextInput.md +++ b/docs/content/TextInput.md @@ -5,31 +5,34 @@ title: TextInput TextInput is a form component to add default styling to the native text input. **Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users. + ## Default example ```jsx live - + - + ``` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + TextInput components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props Native `` attributes are forwarded to the underlying React `input` component and are not listed below. -| Name | Type | Default | Description | -| :- | :- | :-: | :- | -| aria-label | String | | Required. Allows input to be accessible. | -| block | Boolean | | Adds `display: block` to element | -| contrast | Boolean | | Changes background color to a higher contrast color | -| variant | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. -| width | String or Number | | Set the width of the input | -| maxWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input | -| minWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input | -| icon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. | +| Name | Type | Default | Description | +| :--------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ | +| aria-label | String | | Required. Allows input to be accessible. | +| block | Boolean | | Adds `display: block` to element | +| contrast | Boolean | | Changes background color to a higher contrast color | +| variant | String | | Can be either `small` or `large`. Creates a smaller or larger input than the default. | +| width | String or Number | | Set the width of the input | +| maxWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the maximum width of the input | +| minWidth | String or Number or [Array](https://styled-system.com/guides/array-props) | | Set the minimum width of the input | +| icon | Node (pass Octicon react component) | | Icon to be used inside of input. Positioned on the left edge. | diff --git a/docs/content/Timeline.md b/docs/content/Timeline.md index a0b141148b9..9561ad7a60c 100644 --- a/docs/content/Timeline.md +++ b/docs/content/Timeline.md @@ -13,10 +13,10 @@ The Timeline.Item component is used to display items on a vertical timeline, con - + Monalisa - created one + created one hot potato @@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary. ```jsx live - - + + Background used when closed events occur - + Background when opened or passed events occur - - + + Background used when pull requests are merged @@ -98,15 +98,15 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo ```jsx live - + Background used when closed events occur - - + + Background when opened or passed events occur @@ -115,6 +115,8 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Tooltip.md b/docs/content/Tooltip.md index 629f8605af9..62c11435467 100644 --- a/docs/content/Tooltip.md +++ b/docs/content/Tooltip.md @@ -22,6 +22,8 @@ Before adding a tooltip, please consider: Is this information essential and nece ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Tooltip components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/Truncate.md b/docs/content/Truncate.md index 8e52b5a9469..9805e52d139 100644 --- a/docs/content/Truncate.md +++ b/docs/content/Truncate.md @@ -47,6 +47,8 @@ You can use the `expandable` boolean prop to display the truncated text on hover ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + Truncate components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props diff --git a/docs/content/UnderlineNav.md b/docs/content/UnderlineNav.md index 6d71b211752..27f79521f27 100644 --- a/docs/content/UnderlineNav.md +++ b/docs/content/UnderlineNav.md @@ -25,6 +25,8 @@ This ensures that the NavLink gets `activeClassName='selected'` ## System props +**Note: System props for components other than `Box` are deprecated and will be removed soon.** + UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. ## Component props From f94b3e7e65429e33724f6a00bcb84167f478b262 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 20 Jul 2021 15:28:27 -0500 Subject: [PATCH 02/14] failing spec to combine sx props --- codemods/__tests__/removeSystemProps.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index c2ae5c4bb2c..34432ff4f96 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -97,3 +97,27 @@ const link = ( )`.trim(), 'removeSystemProps' ) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) From 5836445761cce6add72796c57bbd595fe647838f Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 16:54:01 -0500 Subject: [PATCH 03/14] combine sx props when there is an existing sx prop in code mod --- codemods/__tests__/removeSystemProps.js | 24 ++++++++++++++++++++++++ codemods/removeSystemProps.js | 18 +++++++++++++++++- jest.config.js | 2 +- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index 34432ff4f96..5a4cffe450c 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -121,3 +121,27 @@ export default () => ( `.trim(), 'removeSystemProps' ) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index 81f50b69a4f..0eb8c9387c1 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -258,6 +258,21 @@ module.exports = (file, api) => { } }) + const sxNodes = j(el).find(j.JSXAttribute, { + name: name => { + const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end + return name.name === 'sx' && isInElement + } + }) + + const existingSx = {} + const sxNodesArray = sxNodes.nodes() || [] + const existingSxProps = sxNodesArray[0]?.value?.expression?.properties + existingSxProps && + existingSxProps.forEach(p => { + existingSx[p.key.name] = p.value + }) + attrNodes.forEach((attr, index) => { const key = attr?.value?.name?.name const literal = attr?.value?.value @@ -270,7 +285,8 @@ module.exports = (file, api) => { } else { const keys = Object.keys(sx) if (keys.length > 0) { - j(attr).replaceWith(`sx={${objectToString(sx)}}`) + sxNodes.forEach(node => node.prune()) + j(attr).replaceWith(`sx={${objectToString({...existingSx, ...sx})}}`) } } }) diff --git a/jest.config.js b/jest.config.js index 119f24e2909..e1fcbe2f19d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,5 +5,5 @@ module.exports = { collectCoverage: true, collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'], setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'], - testRegex: '/src/__tests__/.*\\.[jt]sx?$' + testRegex: '/*/__tests__/.*\\.[jt]sx?$' } From ecea577c5c942b6d87ae776a87d46841c2f77447 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 17:25:04 -0500 Subject: [PATCH 04/14] respect spreads in system prop codemod --- codemods/__tests__/removeSystemProps.js | 28 +++++++++++++++++++++++++ codemods/removeSystemProps.js | 15 +++++++++---- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index 5a4cffe450c..3ab969d6f3c 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -145,3 +145,31 @@ export default () => ( `.trim(), 'removeSystemProps' ) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +const colorProps = {backgroundColor: 'red'} +const borderProps = {borderColor: 'red'} +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +const colorProps = {backgroundColor: 'red'} +const borderProps = {borderColor: 'red'} +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index 0eb8c9387c1..d3e013d3f5c 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -205,7 +205,7 @@ const expressionToString = expression => { } } -const objectToString = object => { +const objectToString = (object, spreads = []) => { const values = Object.values(object) const keys = Object.keys(object) const duples = keys.map(function (key, i) { @@ -217,7 +217,8 @@ const objectToString = object => { return `${string} ${duple[0]}: ${expressionString},` } const objString = duples.reduce(accumulator, '') - return `{${objString}}` + const spreadsString = spreads.map(s => `...${s},`).join('') + return `{${spreadsString}${objString}}` } module.exports = (file, api) => { @@ -270,8 +271,14 @@ module.exports = (file, api) => { const existingSxProps = sxNodesArray[0]?.value?.expression?.properties existingSxProps && existingSxProps.forEach(p => { - existingSx[p.key.name] = p.value + const keyName = p?.key?.name + if (!keyName) { + return + } + existingSx[keyName] = p.value }) + const spreads = + existingSxProps && existingSxProps.filter(p => p.type === 'SpreadElement').map(s => s?.argument?.name) attrNodes.forEach((attr, index) => { const key = attr?.value?.name?.name @@ -286,7 +293,7 @@ module.exports = (file, api) => { const keys = Object.keys(sx) if (keys.length > 0) { sxNodes.forEach(node => node.prune()) - j(attr).replaceWith(`sx={${objectToString({...existingSx, ...sx})}}`) + j(attr).replaceWith(`sx={${objectToString({...existingSx, ...sx}, spreads)}}`) } } }) From 5225b81ca8a84e8029e310c188c7c750ab273522 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 17:31:56 -0500 Subject: [PATCH 05/14] run tests in codemods and in src --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index e1fcbe2f19d..15b0dbfef92 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,5 +5,5 @@ module.exports = { collectCoverage: true, collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'], setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'], - testRegex: '/*/__tests__/.*\\.[jt]sx?$' + testRegex: '/(src|codemods)/__tests__/.*\\.[jt]sx?$' } From 93f68038a6f16ec165f4f9f937822e1b7d5e9e09 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 17:41:15 -0500 Subject: [PATCH 06/14] changeset with codemod documentation --- .changeset/tasty-laws-bathe.md | 74 ++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 .changeset/tasty-laws-bathe.md diff --git a/.changeset/tasty-laws-bathe.md b/.changeset/tasty-laws-bathe.md new file mode 100644 index 00000000000..2f5f38987dd --- /dev/null +++ b/.changeset/tasty-laws-bathe.md @@ -0,0 +1,74 @@ +--- +'@primer/components': patch +--- + +Deprecate system props from components that are not `Box` + +The following components will be have system props removed: + +Avatar +AvatarStack +BranchName +Breadcrumb +Button +ButtonBase +ButtonClose +ButtonTableList +CircleBadge +CounterLabel +Details +Dialog +Dropdown +FilteredSearch +FilterList +Flash +FormGroup +FormGroupLabel +Header +HeaderItem +Label +LabelGroup +Link +Overlay +Pagehead +Pagination +Popover +PopoverContent +SelectMenu +SelectMenuDivider +SelectMenuFilter +SelectMenuFooter +SelectMenuHeader +SelectMenuItem +SelectMenuList +SelectMenuLoadingAnimation +SelectMenuModal +SelectMenuTab +SelectMenuTabPanel +SelectMenuTabs +SideNav +Spinner +StateLabel +StyledOcticon +SubNav +TabNav +TabNavLink +TextInput +Timeline +Tooltip +Truncate +UnderlineNav + +In place of these components, you should now put any system prop assignments in the `sx` prop. There is a codemod available to effectively handle this migration. + +First, install jscodeshift: + +`npm install -g jscodeshift` + +Then, run the codemod using the appropriate command (examples given from the primer/components root directory) + +typescript example: +`jscodeshift -t codemods/removeSystemProps.js --parser=tsx path/to/workspace/src/*.tsx` + +babel example: +`jscodeshift -t codemods/removeSystemProps.js --parser=babel path/to/workspace/src/*.jsx` From bd4ada32b3575849cf9ba6783673769a3f142c73 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 18:02:30 -0500 Subject: [PATCH 07/14] respect string literal keys --- codemods/__tests__/removeSystemProps.js | 24 ++++++++++++++++++++++++ codemods/removeSystemProps.js | 5 +++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index 3ab969d6f3c..c56733b5d45 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -173,3 +173,27 @@ export default () => ( `.trim(), 'removeSystemProps' ) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index d3e013d3f5c..8ea63aaadab 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -272,10 +272,11 @@ module.exports = (file, api) => { existingSxProps && existingSxProps.forEach(p => { const keyName = p?.key?.name - if (!keyName) { + const keyValue = p?.key?.raw + if (!keyName && !keyValue) { return } - existingSx[keyName] = p.value + existingSx[keyName || keyValue] = p.value }) const spreads = existingSxProps && existingSxProps.filter(p => p.type === 'SpreadElement').map(s => s?.argument?.name) From a9f0e8e8b26d8cf496dfa5ba67b27c855589d065 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Wed, 21 Jul 2021 18:17:35 -0500 Subject: [PATCH 08/14] respect object accessors with spreads --- codemods/__tests__/removeSystemProps.js | 26 +++++++++++++++++++++++++ codemods/removeSystemProps.js | 10 +++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js index c56733b5d45..40307079fa7 100644 --- a/codemods/__tests__/removeSystemProps.js +++ b/codemods/__tests__/removeSystemProps.js @@ -197,3 +197,29 @@ export default () => ( `.trim(), 'removeSystemProps' ) + +defineInlineTest( + removeSystemProps, + {}, + ` +import {Label} from '@primer/components' +const leftMargin = 2 +const colorProps = {dark: {backgroundColor: 'red'}} +export default () => ( + +) +`.trim(), + ` +import {Label} from '@primer/components' +const leftMargin = 2 +const colorProps = {dark: {backgroundColor: 'red'}} +export default () => ( + +) +`.trim(), + 'removeSystemProps' +) diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js index 8ea63aaadab..919c2c9447f 100644 --- a/codemods/removeSystemProps.js +++ b/codemods/removeSystemProps.js @@ -279,7 +279,15 @@ module.exports = (file, api) => { existingSx[keyName || keyValue] = p.value }) const spreads = - existingSxProps && existingSxProps.filter(p => p.type === 'SpreadElement').map(s => s?.argument?.name) + existingSxProps && + existingSxProps + .filter(p => p.type === 'SpreadElement') + .map(s => { + const argName = s?.argument?.name + const propName = s?.argument?.property?.name + const objectName = s?.argument?.object?.name + return argName || `${objectName}.${propName}` + }) attrNodes.forEach((attr, index) => { const key = attr?.value?.name?.name From 26fe9735e77a26bffae7272d41bf2816314f2664 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Thu, 22 Jul 2021 14:46:33 -0500 Subject: [PATCH 09/14] update documentations in changeset --- .changeset/tasty-laws-bathe.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/.changeset/tasty-laws-bathe.md b/.changeset/tasty-laws-bathe.md index 2f5f38987dd..1d840bbde79 100644 --- a/.changeset/tasty-laws-bathe.md +++ b/.changeset/tasty-laws-bathe.md @@ -61,14 +61,18 @@ UnderlineNav In place of these components, you should now put any system prop assignments in the `sx` prop. There is a codemod available to effectively handle this migration. -First, install jscodeshift: +There is a codemod available to upgrade these components: -`npm install -g jscodeshift` +- TypeScript example: -Then, run the codemod using the appropriate command (examples given from the primer/components root directory) + ```shell + npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js + --parser=tsx path/to/workspace/src/*.tsx + ``` -typescript example: -`jscodeshift -t codemods/removeSystemProps.js --parser=tsx path/to/workspace/src/*.tsx` +- Babel example: -babel example: -`jscodeshift -t codemods/removeSystemProps.js --parser=babel path/to/workspace/src/*.jsx` + ```shell + npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js + --parser=babel path/to/workspace/src/*.tsx + ``` From bdf1ca1a4903e8f45f8bc043583df31db8f9d463 Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Thu, 22 Jul 2021 15:03:19 -0500 Subject: [PATCH 10/14] update documentations in changeset --- .changeset/tasty-laws-bathe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tasty-laws-bathe.md b/.changeset/tasty-laws-bathe.md index 1d840bbde79..6ad279289d4 100644 --- a/.changeset/tasty-laws-bathe.md +++ b/.changeset/tasty-laws-bathe.md @@ -74,5 +74,5 @@ There is a codemod available to upgrade these components: ```shell npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js - --parser=babel path/to/workspace/src/*.tsx + --parser=babel path/to/workspace/src/*.jsx ``` From 21c0ea794e610218003d2418e38d0cc58d8e5dd6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 22 Jul 2021 14:05:58 -0700 Subject: [PATCH 11/14] Update deprecation warning --- docs/content/AvatarStack.mdx | 6 ++++- docs/content/Breadcrumbs.md | 6 ++++- docs/content/Buttons.md | 6 ++++- docs/content/CircleBadge.md | 6 ++++- docs/content/CounterLabel.md | 6 ++++- docs/content/Details.md | 6 ++++- docs/content/Dialog.md | 6 ++++- docs/content/Dropdown.md | 6 ++++- docs/content/FilterList.md | 6 ++++- docs/content/FilteredSearch.md | 6 ++++- docs/content/Flash.md | 6 ++++- docs/content/FormGroup.md | 6 ++++- docs/content/Header.md | 6 ++++- docs/content/Label.md | 6 ++++- docs/content/LabelGroup.md | 6 ++++- docs/content/Link.md | 6 ++++- docs/content/Overlay.mdx | 6 ++++- docs/content/Pagehead.md | 6 ++++- docs/content/Pagination.md | 6 ++++- docs/content/Popover.md | 6 ++++- docs/content/SelectMenu.md | 48 ++++++++++++++++++++++++++++------ docs/content/SideNav.md | 6 ++++- docs/content/Spinner.md | 6 ++++- docs/content/StateLabel.md | 6 ++++- docs/content/StyledOcticon.md | 6 ++++- docs/content/SubNav.md | 6 ++++- docs/content/TabNav.md | 6 ++++- docs/content/Text.md | 6 ++++- docs/content/TextInput.md | 6 ++++- docs/content/Timeline.md | 6 ++++- docs/content/Tooltip.md | 6 ++++- docs/content/Truncate.md | 6 ++++- docs/content/UnderlineNav.md | 6 ++++- 33 files changed, 200 insertions(+), 40 deletions(-) diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx index d2729ba57a8..1b1ee21728d 100644 --- a/docs/content/AvatarStack.mdx +++ b/docs/content/AvatarStack.mdx @@ -28,7 +28,11 @@ AvatarStack is used to display more than one Avatar in an inline stack. ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + AvatarStack components get `COMMON` system props, AvatarStack.Item components do not get any system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Breadcrumbs.md b/docs/content/Breadcrumbs.md index 90e1cc2ba06..d9d4a89728a 100644 --- a/docs/content/Breadcrumbs.md +++ b/docs/content/Breadcrumbs.md @@ -27,7 +27,11 @@ This ensures that the NavLink gets `activeClassName='selected'` ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + Breadcrumb and Breadcrumb.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md index dbe0d5018be..4d6d225c72a 100644 --- a/docs/content/Buttons.md +++ b/docs/content/Buttons.md @@ -29,7 +29,11 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. ` ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + `Button` and `ButtonGroup` components get `COMMON` and `LAYOUT` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/CircleBadge.md b/docs/content/CircleBadge.md index 43e1531cd6c..117ea61dd04 100644 --- a/docs/content/CircleBadge.md +++ b/docs/content/CircleBadge.md @@ -14,7 +14,11 @@ Use CircleBadge to visually connect logos of third party services like in market ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + CircleBadge and CircleBadge.Icon components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/CounterLabel.md b/docs/content/CounterLabel.md index 1a5ca8f2679..3fc9a48607e 100644 --- a/docs/content/CounterLabel.md +++ b/docs/content/CounterLabel.md @@ -15,7 +15,11 @@ Use the CounterLabel component to add a count to navigational elements and butto ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + CounterLabel components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Details.md b/docs/content/Details.md index 193f929b949..42e4f70a118 100644 --- a/docs/content/Details.md +++ b/docs/content/Details.md @@ -80,7 +80,11 @@ In previous versions of Primer React Components, we allowed users to pass in a c ## `Details` System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + Details components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Dialog.md b/docs/content/Dialog.md index d3cc407be41..fb89a80dacb 100644 --- a/docs/content/Dialog.md +++ b/docs/content/Dialog.md @@ -86,7 +86,11 @@ You can also pass any non-text content into the header: ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + `Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Dropdown.md b/docs/content/Dropdown.md index f14ec81ba9e..b5c6f06a93c 100644 --- a/docs/content/Dropdown.md +++ b/docs/content/Dropdown.md @@ -39,7 +39,11 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + Dropdown, Dropdown.Menu, Dropdown.Button, Dropdown.Caret, and Dropdown.Item all get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/FilterList.md b/docs/content/FilterList.md index 3ef0b734e95..5430cc7e10f 100644 --- a/docs/content/FilterList.md +++ b/docs/content/FilterList.md @@ -20,7 +20,11 @@ The FilterList component is a menu with filter options that filter the main cont ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + FilterList components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md index 5e54eed225e..b7d88646abf 100644 --- a/docs/content/FilteredSearch.md +++ b/docs/content/FilteredSearch.md @@ -24,7 +24,11 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + FilteredSearch gets `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Flash.md b/docs/content/Flash.md index e59e58208b5..3233f24c68e 100644 --- a/docs/content/Flash.md +++ b/docs/content/Flash.md @@ -26,7 +26,11 @@ Flash components with icons inside of them will automatically set the correct co ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + Flash components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/FormGroup.md b/docs/content/FormGroup.md index d2e306f1c8e..8779fce01a4 100644 --- a/docs/content/FormGroup.md +++ b/docs/content/FormGroup.md @@ -20,7 +20,11 @@ Adds styles for multiple form elements used together. ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + FormGroup components get `COMMON` system props. FormGroup.Label components get `COMMON` and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Header.md b/docs/content/Header.md index d36ab450bd4..26548ad3fb3 100644 --- a/docs/content/Header.md +++ b/docs/content/Header.md @@ -55,7 +55,11 @@ All items directly under the Header component should be a `Header.Item` componen ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + `Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Label.md b/docs/content/Label.md index 719674d5f39..fa22787397c 100644 --- a/docs/content/Label.md +++ b/docs/content/Label.md @@ -22,7 +22,11 @@ The Label component is used to add contextual metadata to a design. Visually it ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + Label components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/LabelGroup.md b/docs/content/LabelGroup.md index 0e2e571933d..3fdcafc9a5a 100644 --- a/docs/content/LabelGroup.md +++ b/docs/content/LabelGroup.md @@ -18,7 +18,11 @@ The LabelGroup component is used to add commonly used margins and wrapping for g ## System props -**Note: System props for components other than `Box` are deprecated and will be removed soon.** + + +System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. + + LabelGroup components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props. diff --git a/docs/content/Link.md b/docs/content/Link.md index 91bada061a7..4ec7fc339bb 100644 --- a/docs/content/Link.md +++ b/docs/content/Link.md @@ -18,7 +18,11 @@ In special cases where you'd like a ` ++ +``` -Avatar -AvatarStack -BranchName -Breadcrumb -Button -ButtonBase -ButtonClose -ButtonTableList -CircleBadge -CounterLabel -Details -Dialog -Dropdown -FilteredSearch -FilterList -Flash -FormGroup -FormGroupLabel -Header -HeaderItem -Label -LabelGroup -Link -Overlay -Pagehead -Pagination -Popover -PopoverContent -SelectMenu -SelectMenuDivider -SelectMenuFilter -SelectMenuFooter -SelectMenuHeader -SelectMenuItem -SelectMenuList -SelectMenuLoadingAnimation -SelectMenuModal -SelectMenuTab -SelectMenuTabPanel -SelectMenuTabs -SideNav -Spinner -StateLabel -StyledOcticon -SubNav -TabNav -TabNavLink -TextInput -Timeline -Tooltip -Truncate -UnderlineNav - -In place of these components, you should now put any system prop assignments in the `sx` prop. There is a codemod available to effectively handle this migration. - -There is a codemod available to upgrade these components: +There is a codemod available to migrate from system props to the `sx` prop: - TypeScript example: @@ -74,5 +22,5 @@ There is a codemod available to upgrade these components: ```shell npx jscodeshift -t node_modules/@primer/components/codemods/removeSystemProps.js - --parser=babel path/to/workspace/src/*.jsx + --parser=babel path/to/workspace/src/*.tsx ```