feat(Flash): remove support for sx (#6834)

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: Marie Lucca <francinelucca@github.com>

Author: joshblack

.changeset/metal-deer-refuse.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove the `sx` prop from `Flash`

packages/react/src/Flash/Flash.docs.json

@@ -48,11 +48,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"div\""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/Flash/Flash.features.stories.module.css

@@ -31,4 +31,35 @@
 .Close {
   grid-area: close;
   margin-left: var(--base-size-8);
+
+  & svg {
+    margin: 0;
+    color: var(--fgColor-muted);
+  }
+}
+
+.WithIconAndAction {
+  display: grid;
+  grid-template-columns: min-content 1fr minmax(0, auto);
+  grid-template-rows: min-content;
+  grid-template-areas: 'visual message actions';
+
+  @media screen and (max-width: 543.98px) {
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content;
+    grid-template-areas: 'visual message' '. actions';
+  }
+}
+
+.WithIconActionDismiss {
+  display: grid;
+  grid-template-columns: min-content 1fr minmax(0, auto);
+  grid-template-rows: min-content;
+  grid-template-areas: 'visual message actions close';
+
+  @media screen and (max-width: 543.98px) {
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content;
+    grid-template-areas: 'visual message close' '. actions actions';
+  }
 }

packages/react/src/Flash/Flash.features.stories.tsx

@@ -1,6 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
 import Flash from './Flash'
-import Octicon from '../Octicon'
 import {AlertIcon, CheckCircleIcon, InfoIcon, XIcon} from '@primer/octicons-react'
 import {Button, IconButton} from '../Button'
 import Link from '../Link'
@@ -14,14 +13,14 @@ export default {
 export const Success = () => (
   <Flash
     variant="success"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={CheckCircleIcon} aria-label="Success" />
+      <CheckCircleIcon aria-label="Success" />
     </div>
     <div className={classes.Message}>Success</div>
   </Flash>
@@ -30,14 +29,14 @@ export const Success = () => (
 export const Danger = () => (
   <Flash
     variant="danger"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Danger" />
+      <InfoIcon aria-label="Danger" />
     </div>
     <div className={classes.Message}>Danger</div>
   </Flash>
@@ -46,14 +45,14 @@ export const Danger = () => (
 export const Warning = () => (
   <Flash
     variant="warning"
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={AlertIcon} aria-label="Warning" />
+      <AlertIcon aria-label="Warning" />
     </div>
     <div className={classes.Message}>Warning</div>
   </Flash>
@@ -62,38 +61,23 @@ export const Warning = () => (
 export const Full = () => (
   <Flash
     full
-    sx={{
+    style={{
       display: 'grid',
       gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
       gridTemplateAreas: `'visual message actions'`,
     }}
   >
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>Full</div>
   </Flash>
 )
 
 export const WithIconAndAction = () => (
-  <Flash
-    sx={{
-      display: 'grid',
-      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
-      gridTemplateRows: 'min-content',
-      gridTemplateAreas: `'visual message actions'`,
-      '@media screen and (max-width: 543.98px)': {
-        gridTemplateColumns: 'min-content 1fr',
-        gridTemplateRows: 'min-content min-content',
-        gridTemplateAreas: `
-        'visual message'
-        '.      actions'
-      `,
-      },
-    }}
-  >
+  <Flash className={classes.WithIconAndAction}>
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>
       This is a flash message with an icon and an action.
@@ -106,24 +90,9 @@ export const WithIconAndAction = () => (
 )
 
 export const WithIconActionDismiss = () => (
-  <Flash
-    sx={{
-      display: 'grid',
-      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
-      gridTemplateRows: 'min-content',
-      gridTemplateAreas: `'visual message actions close'`,
-      '@media screen and (max-width: 543.98px)': {
-        gridTemplateColumns: 'min-content 1fr',
-        gridTemplateRows: 'min-content min-content',
-        gridTemplateAreas: `
-        'visual message close'
-        '.      actions actions'
-      `,
-      },
-    }}
-  >
+  <Flash className={classes.WithIconActionDismiss}>
     <div className={classes.Visual}>
-      <Octicon icon={InfoIcon} aria-label="Info" />
+      <InfoIcon aria-label="Info" />
     </div>
     <div className={classes.Message}>
       This is a flash message with an icon and an action.
@@ -133,7 +102,7 @@ export const WithIconActionDismiss = () => (
       <Button>Join waitlist</Button>
     </div>
     <div className={classes.Close}>
-      <IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" sx={{svg: {margin: '0', color: 'fg.muted'}}} />
+      <IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" />
     </div>
   </Flash>
 )

packages/react/src/Flash/Flash.tsx

@@ -1,26 +1,25 @@
 import {clsx} from 'clsx'
 import React from 'react'
-import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Flash.module.css'
 
 export type FlashProps = React.ComponentPropsWithoutRef<'div'> & {
   className?: string
   variant?: 'default' | 'warning' | 'success' | 'danger'
   full?: boolean
-} & SxProp
+}
 
-const Flash = React.forwardRef(function Flash({as, className, variant = 'default', full, sx, ...rest}, ref) {
+const Flash = React.forwardRef(function Flash(
+  {as: BaseComponent = 'div', className, variant = 'default', full, ...rest},
+  ref,
+) {
   return (
-    <BoxWithFallback
+    <BaseComponent
       {...rest}
       ref={ref}
-      as={as}
       className={clsx(classes.Flash, className)}
       data-full={full ? '' : undefined}
       data-variant={variant}
-      sx={sx}
     />
   )
 }) as PolymorphicForwardRefComponent<'div', FlashProps>

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -745,7 +745,7 @@ export const NestedSelection = () => {
     <>
       <h1>Nested selection</h1>
 
-      <Flash variant="warning" sx={{mb: 2}}>
+      <Flash variant="warning" style={{marginBottom: '8px'}}>
         This story is not fully accessible, do not copy it without review!
       </Flash>
 
@@ -1065,7 +1065,7 @@ const CreateNewLabelDialog = ({
         {type: 'submit', buttonType: 'primary', content: 'Save', onClick: () => formSubmitRef.current?.click()},
       ]}
     >
-      <Flash sx={{marginBottom: 2}} variant="warning">
+      <Flash style={{marginBottom: '8px'}} variant="warning">
         Note this Dialog is not accessible. Do not copy this.
       </Flash>
       <form onSubmit={onSubmit}>

packages/styled-react/src/components/Flash.tsx

@@ -0,0 +1,15 @@
+import {type FlashProps as PrimerFlashProps, Flash as PrimerFlash} from '@primer/react'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+import type {ForwardRefComponent} from '../polymorphic'
+
+type FlashProps = PrimerFlashProps & SxProp
+
+const Flash: ForwardRefComponent<'div', FlashProps> = styled(PrimerFlash).withConfig<FlashProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+export {Flash}
+export type {FlashProps}

packages/styled-react/src/index.tsx

@@ -189,6 +189,8 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
   Item: UnderlineNavItem,
 })
 
+export {Flash} from './components/Flash'
+
 export {
   LinkButton,
   type LinkButtonProps,
@@ -214,7 +216,6 @@ export {
   CircleBadge,
   Details,
   Dialog,
-  Flash,
   FormControl,
   Header,
   Heading,

packages/styled-react/src/sx.ts

@@ -0,0 +1 @@
+export {sx, type SxProp} from '@primer/react'