diff --git a/.changeset/rotten-apricots-float.md b/.changeset/rotten-apricots-float.md new file mode 100644 index 00000000000..9b7d118f988 --- /dev/null +++ b/.changeset/rotten-apricots-float.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +Label no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal. diff --git a/docs/content/Label.md b/docs/content/Label.md index c5a1db44ea4..64e1f06e034 100644 --- a/docs/content/Label.md +++ b/docs/content/Label.md @@ -8,35 +8,42 @@ The Label component is used to add contextual metadata to a design. Visually it ```jsx live <> - - - + + + - - - - - - + + + + + + ``` -## System props - - - -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. - ## Component props -| Name | Type | Default | Description | -| :--------- | :------ | :--------------------: | :----------------------------------------------------------------------------- | -| outline | Boolean | | Creates an outline style label | -| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . | -| dropshadow | Boolean | | Adds a dropshadow to the label | -| bg | String | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. | +| Name | Type | Default | Description | +| :--------- | :---------------- | :--------------------: | :----------------------------------------------------------------------------- | +| outline | Boolean | | Creates an outline style label | +| variant | String | 'medium' | Can be one of `small`, `medium` (default), `large` or `xl` . | +| dropshadow | Boolean | | Adds a dropshadow to the label | +| bg | String | 'label.primary.border' | Part of the `COMMON` system props, used to change the background of the label. | +| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/src/Label.tsx b/src/Label.tsx index 04816a5e3c0..8f356d1aa61 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -1,6 +1,6 @@ import styled, {css} from 'styled-components' import {borderColor, BorderColorProps, variant} from 'styled-system' -import {COMMON, get, SystemCommonProps} from './constants' +import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' @@ -11,7 +11,6 @@ const outlineStyles = css` border: ${get('borderWidths.1')} solid ${get('colors.border.default')}; box-shadow: none; ${borderColor}; - ${COMMON}; background-color: transparent; ` @@ -47,27 +46,25 @@ const Label = styled.span< dropshadow?: boolean outline?: boolean } & BorderColorProps & - SystemCommonProps & SxProp >` display: inline-block; font-weight: ${get('fontWeights.semibold')}; color: ${get('colors.fg.onEmphasis')}; border-radius: ${get('radii.3')}; + background-color: ${get('colors.neutral.emphasis')}; &:hover { text-decoration: none; } ${sizeVariant} - ${COMMON} ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')} ${props => (props.outline ? outlineStyles : '')} // must be last to override other values ${sx} ` Label.defaultProps = { - bg: 'neutral.emphasis', variant: 'medium' } diff --git a/src/__tests__/Label.types.test.tsx b/src/__tests__/Label.types.test.tsx new file mode 100644 index 00000000000..96fe2613bff --- /dev/null +++ b/src/__tests__/Label.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Label from '../Label' + +export function shouldAcceptCallWithNoProps() { + return