diff --git a/.changeset/metal-deer-refuse.md b/.changeset/metal-deer-refuse.md new file mode 100644 index 00000000000..3bdef214521 --- /dev/null +++ b/.changeset/metal-deer-refuse.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove the `sx` prop from `Flash` diff --git a/packages/react/src/Flash/Flash.docs.json b/packages/react/src/Flash/Flash.docs.json index 1164558d461..5b154bce1ee 100644 --- a/packages/react/src/Flash/Flash.docs.json +++ b/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": [] diff --git a/packages/react/src/Flash/Flash.features.stories.module.css b/packages/react/src/Flash/Flash.features.stories.module.css index c5bc932ffa1..306f5e99bb3 100644 --- a/packages/react/src/Flash/Flash.features.stories.module.css +++ b/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'; + } } diff --git a/packages/react/src/Flash/Flash.features.stories.tsx b/packages/react/src/Flash/Flash.features.stories.tsx index b37bac97fc4..19e19123cdf 100644 --- a/packages/react/src/Flash/Flash.features.stories.tsx +++ b/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 = () => (
- +
Success
@@ -30,14 +29,14 @@ export const Success = () => ( export const Danger = () => (
- +
Danger
@@ -46,14 +45,14 @@ export const Danger = () => ( export const Warning = () => (
- +
Warning
@@ -62,38 +61,23 @@ export const Warning = () => ( export const Full = () => (
- +
Full
) export const WithIconAndAction = () => ( - +
- +
This is a flash message with an icon and an action. @@ -106,24 +90,9 @@ export const WithIconAndAction = () => ( ) export const WithIconActionDismiss = () => ( - +
- +
This is a flash message with an icon and an action. @@ -133,7 +102,7 @@ export const WithIconActionDismiss = () => (
- +
) diff --git a/packages/react/src/Flash/Flash.tsx b/packages/react/src/Flash/Flash.tsx index 557f0e33cce..6f95ca311c1 100644 --- a/packages/react/src/Flash/Flash.tsx +++ b/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 ( - ) }) as PolymorphicForwardRefComponent<'div', FlashProps> diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx index 26f5e1f05f8..0d81ff12f76 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx @@ -745,7 +745,7 @@ export const NestedSelection = () => { <>

Nested selection

- + This story is not fully accessible, do not copy it without review! @@ -1065,7 +1065,7 @@ const CreateNewLabelDialog = ({ {type: 'submit', buttonType: 'primary', content: 'Save', onClick: () => formSubmitRef.current?.click()}, ]} > - + Note this Dialog is not accessible. Do not copy this.
diff --git a/packages/styled-react/src/components/Flash.tsx b/packages/styled-react/src/components/Flash.tsx new file mode 100644 index 00000000000..c4ae4624e96 --- /dev/null +++ b/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({ + shouldForwardProp: prop => prop !== 'sx', +})` + ${sx} +` + +export {Flash} +export type {FlashProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 23411aec0c1..8c07e2d11db 100644 --- a/packages/styled-react/src/index.tsx +++ b/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, diff --git a/packages/styled-react/src/sx.ts b/packages/styled-react/src/sx.ts new file mode 100644 index 00000000000..e706676100f --- /dev/null +++ b/packages/styled-react/src/sx.ts @@ -0,0 +1 @@ +export {sx, type SxProp} from '@primer/react'