diff --git a/.changeset/beige-dots-buy.md b/.changeset/beige-dots-buy.md new file mode 100644 index 00000000000..0bea1978ff6 --- /dev/null +++ b/.changeset/beige-dots-buy.md @@ -0,0 +1,5 @@ +--- +'@primer/components': major +--- + +Truncate 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/Truncate.md b/docs/content/Truncate.md index 9d398b930b1..1325f27e598 100644 --- a/docs/content/Truncate.md +++ b/docs/content/Truncate.md @@ -44,21 +44,12 @@ You can use the `expandable` boolean prop to display the truncated text on hover ``` -## System props - - - -System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead. - - - -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 -| Name | Type | Default | Description | -| :--------- | :------ | :-----: | :----------------------------------------------------------- | -| as | String | `div` | Sets the HTML tag for the component | -| maxWidth | Number | 125 | Sets the max-width of the text | -| inline | Boolean | false | displays text as inline block and vertical aligns to the top | -| expandable | Boolean | false | allows the truncated text to be displayed on hover | +| Name | Type | Default | Description | +| :--------- | :---------------- | :-----: | :----------------------------------------------------------- | +| as | String | `div` | Sets the HTML tag for the component | +| maxWidth | Number | 125 | Sets the max-width of the text | +| inline | Boolean | false | displays text as inline block and vertical aligns to the top | +| expandable | Boolean | false | allows the truncated text to be displayed on hover | +| sx | SystemStyleObject | {} | Style to be applied to the component | diff --git a/src/Truncate.tsx b/src/Truncate.tsx index 043956b1310..f49df8044b8 100644 --- a/src/Truncate.tsx +++ b/src/Truncate.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components' import {maxWidth, MaxWidthProps} from 'styled-system' -import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' @@ -9,13 +8,9 @@ type StyledTruncateProps = { inline?: boolean expandable?: boolean } & MaxWidthProps & - SystemTypographyProps & - SystemCommonProps & SxProp const Truncate = styled.div` - ${TYPOGRAPHY} - ${COMMON} display: ${props => (props.inline ? 'inline-block' : 'inherit')}; overflow: hidden; text-overflow: ellipsis; diff --git a/src/__tests__/Truncate.types.test.tsx b/src/__tests__/Truncate.types.test.tsx new file mode 100644 index 00000000000..59e92ff650f --- /dev/null +++ b/src/__tests__/Truncate.types.test.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import Truncate from '../Truncate' + +export function shouldAcceptCallWithNoProps() { + return +} + +export function shouldNotAcceptSystemProps() { + // @ts-expect-error system props should not be accepted + return +}