Truncate no longer accepts styled system props (#1578)

Author: jfuchs

.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.

docs/content/Truncate.md

@@ -44,21 +44,12 @@ You can use the `expandable` boolean prop to display the truncated text on hover
 </Truncate>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-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                         |

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<StyledTruncateProps>`
-  ${TYPOGRAPHY}
-  ${COMMON}
   display: ${props => (props.inline ? 'inline-block' : 'inherit')};
   overflow: hidden;
   text-overflow: ellipsis;

src/__tests__/Truncate.types.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Truncate from '../Truncate'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Truncate title="Hello" />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Truncate title="Hello" backgroundColor="indigo" />
+}