Revert "Remove sx props and Box from Truncate (#6632)" (#6683)

Author: joshblack

.changeset/lucky-facts-obey.md

@@ -61,6 +61,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
+        sx={sx}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"

packages/react/src/ActionList/Description.tsx

@@ -21,7 +21,7 @@
   "props": [
     {
       "name": "maxWidth",
-      "type": "number | string | (number | string)[]",
+      "type": "number",
       "defaultValue": "125",
       "description": "Sets the max-width of the text."
     },
@@ -41,6 +41,11 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "'div'"
+    },
+    {
+      "name": "sx",
+      "type": "SystemStyleObject",
+      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/Truncate/Truncate.docs.json

@@ -41,6 +41,12 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
   theme: {
     controls: false,
     table: {

packages/react/src/Truncate/Truncate.stories.tsx

@@ -1,23 +1,27 @@
 import React from 'react'
 import {clsx} from 'clsx'
+import type {MaxWidthProps} from 'styled-system'
+import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Truncate.module.css'
 
 type TruncateProps = React.HTMLAttributes<HTMLElement> & {
   title: string
   inline?: boolean
   expandable?: boolean
-  maxWidth?: number | string | (number | string)[]
-}
+} & MaxWidthProps &
+  SxProp
 
 const Truncate = React.forwardRef(function Truncate(
-  {as: Component = 'div', children, className, title, inline, expandable, maxWidth = 125, style, ...rest},
+  {as, children, className, title, inline, expandable, maxWidth = 125, style, sx, ...rest},
   ref,
 ) {
   return (
-    <Component
+    <BoxWithFallback
       {...rest}
       ref={ref}
+      as={as}
       className={clsx(className, classes.Truncate)}
       data-expandable={expandable}
       data-inline={inline}
@@ -29,9 +33,10 @@ const Truncate = React.forwardRef(function Truncate(
             typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined,
         } as React.CSSProperties
       }
+      sx={sx}
     >
       {children}
-    </Component>
+    </BoxWithFallback>
   )
 }) as PolymorphicForwardRefComponent<'div', TruncateProps>
 

packages/react/src/Truncate/Truncate.tsx

@@ -4,7 +4,6 @@ exports[`@primer/styled-react exports 1`] = `
 [
   "RadioGroup",
   "ToggleSwitch",
-  "Truncate",
   "ActionList",
   "ActionMenu",
   "Autocomplete",
@@ -50,6 +49,7 @@ exports[`@primer/styled-react exports 1`] = `
   "Timeline",
   "Token",
   "Tooltip",
+  "Truncate",
   "UnderlineNav",
   "Box",
   "sx",

packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -1,14 +1,9 @@
-import {
-  RadioGroup as PrimerRadioGroup,
-  Truncate as PrimerTruncate,
-  ToggleSwitch as PrimerToggleSwitch,
-} from '@primer/react'
+import {RadioGroup as PrimerRadioGroup, ToggleSwitch as PrimerToggleSwitch} from '@primer/react'
 import {createStyledComponent} from './utils/createStyledComponent'
 
 const RadioGroup: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerRadioGroup)
-const Truncate: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerTruncate)
 const ToggleSwitch: ReturnType<typeof createStyledComponent> = /*#__PURE__*/ createStyledComponent(PrimerToggleSwitch)
-export {RadioGroup, ToggleSwitch, Truncate}
+export {RadioGroup, ToggleSwitch}
 
 export {
   ActionList,
@@ -56,6 +51,7 @@ export {
   Timeline,
   Token,
   Tooltip,
+  Truncate,
   UnderlineNav,
 
   // styled-components components or types