feat(Flash): remove support for sx

.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

@@ -133,6 +133,8 @@ const UnderlineNav = Object.assign(UnderlineNavImpl, {
  Item: UnderlineNavItem,
 })
 
+export {Flash} from './components/Flash'
+
 export {
  LinkButton,
  type LinkButtonProps,
@@ -156,7 +158,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'