diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-colorblind-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-dimmed-linux.png deleted file mode 100644 index 1fd26a1e4f1..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-high-contrast-linux.png deleted file mode 100644 index 96bb3a24e79..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-tritanopia-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-colorblind-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-high-contrast-linux.png deleted file mode 100644 index 99f7fa8376a..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-tritanopia-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Dev-Sx-Prop-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png deleted file mode 100644 index 1fd26a1e4f1..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png deleted file mode 100644 index 96bb3a24e79..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png deleted file mode 100644 index 57aa4d25ef0..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png deleted file mode 100644 index 99f7fa8376a..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png deleted file mode 100644 index 1136e949782..00000000000 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png deleted file mode 100644 index c1aa5490e02..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png deleted file mode 100644 index bcf4048a588..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png deleted file mode 100644 index 2359588a9c5..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png and /dev/null differ diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index b48c0475612..22eab45b1ca 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -75,10 +75,6 @@ const stories = [ title: 'Dev Invisible Variants', id: 'components-button-dev--invisible-variants', }, - { - title: 'Dev Sx Prop', - id: 'components-button-dev--test-sx-prop', - }, { title: 'Aria Expanded Buttons', id: 'components-button-features--expanded-button', diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 90be6469460..c04362139d7 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -23,10 +23,6 @@ const stories = [ title: 'Overrides', id: 'components-buttongroup-dev--link-button-with-icon-buttons', }, - { - title: 'SX Prop', - id: 'components-buttongroup-dev--sx-prop', - }, ] as const test.describe('ButtonGroup', () => { diff --git a/packages/react/src/Button/Button.dev.stories.tsx b/packages/react/src/Button/Button.dev.stories.tsx index 977b86a74f5..4c94f9f85e4 100644 --- a/packages/react/src/Button/Button.dev.stories.tsx +++ b/packages/react/src/Button/Button.dev.stories.tsx @@ -32,69 +32,6 @@ export const InvisibleVariants = () => { ) } -export const TestSxProp = () => { - const count = 4 - return ( -
- - - - - - - -
- ) -} - export const DisabledButtonVariants = () => { return ( diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json index c1b59a42c56..91707c4c7bd 100644 --- a/packages/react/src/Button/Button.docs.json +++ b/packages/react/src/Button/Button.docs.json @@ -151,11 +151,6 @@ "type": "'small'\n| 'medium'\n| 'large'", "defaultValue": "'medium'" }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - }, { "name": "trailingIcon", "type": "React.ComponentType", diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx index fddc8f84aab..85c3663d8ad 100644 --- a/packages/react/src/Button/Button.tsx +++ b/packages/react/src/Button/Button.tsx @@ -2,92 +2,15 @@ import {forwardRef} from 'react' import type {ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {defaultSxProp} from '../utils/defaultSxProp' -import type {BetterSystemStyleObject, CSSCustomProperties} from '../sx' - -const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => { - const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = props - let sxStyles = sxProp - const style: CSSCustomProperties = {} - - if (sxProp !== null && Object.keys(sxProp).length > 0) { - sxStyles = generateCustomSxProp({block, size, leadingVisual, trailingVisual, trailingAction}, sxProp) - - // @ts-ignore sxProp can have color attribute - const {color} = sxProp - if (color) style['--button-color'] = color - } +const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => { return ( - + {children} ) }) as PolymorphicForwardRefComponent<'button', ButtonProps> -// This function is used to generate a custom cssSelector for the sxProp - -// The usual sx prop can like this: -// sx={{ -// [`@media (max-width: 768px)`]: { -// '& > ul': { -// backgroundColor: 'deeppink', -// }, -// '&:hover': { -// backgroundColor: 'yellow', -// }, -// }, -// '&:hover': { -// backgroundColor: 'yellow', -// }, -// '&': { -// width : 320px -// } -// }} -//* -/* What we want for Button styles is this: -sx={{ -// [`@media (max-width: 768px)`]: { -// '&[data-attribute="something"] > ul': { -// backgroundColor: 'deeppink', -// }, -// '&[data-attribute="something"]:hover': { -// backgroundColor: 'yellow', -// }, -// }, -// '&[data-attribute="something"]:hover': { -// backgroundColor: 'yellow', -// }, -// '&[data-attribute="something"]': { -// width : 320px -// } -// }} - -// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"] -*/ -export function generateCustomSxProp( - props: Partial>, - providedSx: BetterSystemStyleObject, -) { - // Possible data attributes: data-size, data-block, data-no-visuals - const size = `[data-size="${props.size}"]` - const block = props.block ? `[data-block="block"]` : '' - const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]' - - // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]]) - const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals] - - const customSxProp: { - [key: string]: BetterSystemStyleObject - } = {} - - if (!providedSx) return customSxProp - else { - customSxProp[cssSelector] = providedSx - return customSxProp - } -} - ButtonComponent.displayName = 'Button' export {ButtonComponent} diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index e60b9b9460d..62575d8bb8e 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -1,10 +1,7 @@ import React, {forwardRef} from 'react' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import Box from '../Box' import type {ButtonProps} from './types' -import {getAlignContentSize} from './styles' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' -import {defaultSxProp} from '../utils/defaultSxProp' import {VisuallyHidden} from '../VisuallyHidden' import Spinner from '../Spinner' import CounterLabel from '../CounterLabel' @@ -29,295 +26,169 @@ const renderModuleVisual = ( ) -const ButtonBase = forwardRef( - ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => { - const { - leadingVisual: LeadingVisual, - trailingVisual: TrailingVisual, - trailingAction: TrailingAction, - ['aria-describedby']: ariaDescribedBy, - ['aria-labelledby']: ariaLabelledBy, - count, - icon: Icon, - id, - variant = 'default', - size = 'medium', - alignContent = 'center', - block = false, - loading, - loadingAnnouncement = 'Loading', - inactive, - onClick, - labelWrap, - className, - ...rest - } = props +const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, forwardedRef): JSX.Element => { + const { + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, + trailingAction: TrailingAction, + ['aria-describedby']: ariaDescribedBy, + ['aria-labelledby']: ariaLabelledBy, + count, + icon: Icon, + id, + variant = 'default', + size = 'medium', + alignContent = 'center', + block = false, + loading, + loadingAnnouncement = 'Loading', + inactive, + onClick, + labelWrap, + className, + ...rest + } = props - const innerRef = React.useRef(null) - useRefObjectAsForwardedRef(forwardedRef, innerRef) + const innerRef = React.useRef(null) + useRefObjectAsForwardedRef(forwardedRef, innerRef) - const uuid = useId(id) - const loadingAnnouncementID = `${uuid}-loading-announcement` + const uuid = useId(id) + const loadingAnnouncementID = `${uuid}-loading-announcement` - if (__DEV__) { - /** - * The Linter yells because it thinks this conditionally calls an effect, - * but since this is a compile-time flag and not a runtime conditional - * this is safe, and ensures the entire effect is kept out of prod builds - * shaving precious bytes from the output, and avoiding mounting a noop effect - */ - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(() => { - if ( - innerRef.current && - !(innerRef.current instanceof HTMLButtonElement) && - !((innerRef.current as unknown) instanceof HTMLAnchorElement) && - !((innerRef.current as HTMLElement).tagName === 'SUMMARY') - ) { - // eslint-disable-next-line no-console - console.warn('This component should be an instanceof a semantic button or anchor') - } - }, [innerRef]) - } + if (__DEV__) { + /** + * The Linter yells because it thinks this conditionally calls an effect, + * but since this is a compile-time flag and not a runtime conditional + * this is safe, and ensures the entire effect is kept out of prod builds + * shaving precious bytes from the output, and avoiding mounting a noop effect + */ + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + if ( + innerRef.current && + !(innerRef.current instanceof HTMLButtonElement) && + !((innerRef.current as unknown) instanceof HTMLAnchorElement) && + !((innerRef.current as HTMLElement).tagName === 'SUMMARY') + ) { + // eslint-disable-next-line no-console + console.warn('This component should be an instanceof a semantic button or anchor') + } + }, [innerRef]) + } - if (sxProp !== defaultSxProp) { - return ( - - Boolean(descriptionID)) - .join(' ')} - // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state. - // We only set it when the button is in a loading state because it will supersede the aria-label when the screen - // reader announces the button name. - aria-labelledby={ - loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy - } - id={id} - onClick={loading ? undefined : onClick} - > - {Icon ? ( - loading ? ( - - ) : isElement(Icon) ? ( - Icon - ) : ( - - ) - ) : ( - <> - - { - /* If there are no leading/trailing visuals/actions to replace with a loading spinner, - render a loading spiner in place of the button content. */ - loading && - !LeadingVisual && - !TrailingVisual && - !TrailingAction && - count === undefined && - renderModuleVisual(Spinner, loading, 'loadingSpinner', false) - } - { - /* Render a leading visual unless the button is in a loading state. - Then replace the leading visual with a loading spinner. */ - LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) - } - {children && ( - - {children} - - )} - { - /* If there is a count, render a counter label unless there is a trailing visual. - Then render the counter label as a trailing visual. - Replace the counter label or the trailing visual with a loading spinner if: - - the button is in a loading state - - there is no leading visual to replace with a loading spinner - */ - count !== undefined && !TrailingVisual - ? renderModuleVisual( - () => ( - - {count} - - ), - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - true, - ) - : TrailingVisual - ? renderModuleVisual( - TrailingVisual, - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - false, - ) - : null - } - - { - /* If there is a trailing action, render it unless the button is in a loading state - and there is no leading or trailing visual to replace with a loading spinner. */ - TrailingAction && - renderModuleVisual( - TrailingAction, - Boolean(loading) && !LeadingVisual && !TrailingVisual, - 'trailingAction', - false, - ) - } - - )} - - {loading && ( - - {loadingAnnouncement} - - )} - - ) - } - return ( - + Boolean(descriptionID)) + .join(' ')} + // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state. + // We only set it when the button is in a loading state because it will supersede the aria-label when the screen + // reader announces the button name. + aria-labelledby={ + loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy + } + id={id} + // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent + onClick={loading ? undefined : onClick} > - Boolean(descriptionID)) - .join(' ')} - // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state. - // We only set it when the button is in a loading state because it will supersede the aria-label when the screen - // reader announces the button name. - aria-labelledby={ - loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy - } - id={id} - // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent - onClick={loading ? undefined : onClick} - > - {Icon ? ( - loading ? ( - - ) : isElement(Icon) ? ( - Icon - ) : ( - - ) + {Icon ? ( + loading ? ( + + ) : isElement(Icon) ? ( + Icon ) : ( - <> - - { - /* If there are no leading/trailing visuals/actions to replace with a loading spinner, + + ) + ) : ( + <> + + { + /* If there are no leading/trailing visuals/actions to replace with a loading spinner, render a loading spiner in place of the button content. */ - loading && - !LeadingVisual && - !TrailingVisual && - !TrailingAction && - count === undefined && - renderModuleVisual(Spinner, loading, 'loadingSpinner', false) - } - { - /* Render a leading visual unless the button is in a loading state. + loading && + !LeadingVisual && + !TrailingVisual && + !TrailingAction && + count === undefined && + renderModuleVisual(Spinner, loading, 'loadingSpinner', false) + } + { + /* Render a leading visual unless the button is in a loading state. Then replace the leading visual with a loading spinner. */ - LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) - } - {children && ( - - {children} - - )} - { - /* If there is a count, render a counter label unless there is a trailing visual. + LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) + } + {children && ( + + {children} + + )} + { + /* If there is a count, render a counter label unless there is a trailing visual. Then render the counter label as a trailing visual. Replace the counter label or the trailing visual with a loading spinner if: - the button is in a loading state - there is no leading visual to replace with a loading spinner */ - count !== undefined && !TrailingVisual - ? renderModuleVisual( - () => ( - - {count} - - ), - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - true, - ) - : TrailingVisual - ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) - : null - } - - { - /* If there is a trailing action, render it unless the button is in a loading state - and there is no leading or trailing visual to replace with a loading spinner. */ - TrailingAction && - renderModuleVisual( - TrailingAction, - Boolean(loading) && !LeadingVisual && !TrailingVisual, - 'trailingAction', - false, - ) + count !== undefined && !TrailingVisual + ? renderModuleVisual( + () => ( + + {count} + + ), + Boolean(loading) && !LeadingVisual, + 'trailingVisual', + true, + ) + : TrailingVisual + ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) + : null } - - )} - - {loading && ( - - {loadingAnnouncement} - + + { + /* If there is a trailing action, render it unless the button is in a loading state + and there is no leading or trailing visual to replace with a loading spinner. */ + TrailingAction && + renderModuleVisual( + TrailingAction, + Boolean(loading) && !LeadingVisual && !TrailingVisual, + 'trailingAction', + false, + ) + } + )} - - ) - }, -) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> + + {loading && ( + + {loadingAnnouncement} + + )} + + ) +}) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps> export {ButtonBase} diff --git a/packages/react/src/Button/IconButton.docs.json b/packages/react/src/Button/IconButton.docs.json index aea91b2869e..8e5929fa90f 100644 --- a/packages/react/src/Button/IconButton.docs.json +++ b/packages/react/src/Button/IconButton.docs.json @@ -126,11 +126,6 @@ "required": false, "description": "If `description` is provided, we will use a Tooltip to describe the button. Then `aria-label` is used to label the button.", "defaultValue": "" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true } ], "subcomponents": [] diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index 4b86ea1bd48..7c439047429 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -2,8 +2,6 @@ import React, {forwardRef} from 'react' import type {IconButtonProps} from './types' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import {ButtonBase} from './ButtonBase' -import {defaultSxProp} from '../utils/defaultSxProp' -import {generateCustomSxProp} from './Button' import {TooltipContext, Tooltip} from '../TooltipV2/Tooltip' import {TooltipContext as TooltipContextV1} from '../Tooltip/Tooltip' import classes from './ButtonBase.module.css' @@ -12,7 +10,6 @@ import {clsx} from 'clsx' const IconButton = forwardRef( ( { - sx: sxProp = defaultSxProp, icon: Icon, 'aria-label': ariaLabel, description, @@ -27,14 +24,6 @@ const IconButton = forwardRef( }, forwardedRef, ): JSX.Element => { - let sxStyles = sxProp - // grap the button props that have associated data attributes in the styles - const {size = 'medium'} = props - - if (sxProp !== null && Object.keys(sxProp).length > 0) { - sxStyles = generateCustomSxProp({size}, sxProp) - } - // If the icon button is already wrapped in a tooltip, do not add one. const {tooltipId} = React.useContext(TooltipContext) // Tooltip v2 const {tooltipId: tooltipIdV1} = React.useContext(TooltipContextV1) // Tooltip v1 @@ -49,7 +38,6 @@ const IconButton = forwardRef( icon={Icon} className={clsx(className, classes.IconButton)} data-component="IconButton" - sx={sxStyles} type="button" aria-label={ariaLabel} disabled={disabled} @@ -72,7 +60,6 @@ const IconButton = forwardRef( icon={Icon} className={clsx(className, classes.IconButton)} data-component="IconButton" - sx={sxStyles} type="button" aria-keyshortcuts={keyshortcuts ?? undefined} // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button. diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx index 7cc5eb20b61..111eef509d3 100644 --- a/packages/react/src/Button/LinkButton.tsx +++ b/packages/react/src/Button/LinkButton.tsx @@ -2,18 +2,16 @@ import {forwardRef} from 'react' import type {LinkButtonProps, ButtonProps} from './types' import {ButtonBase} from './ButtonBase' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {defaultSxProp} from '../utils/defaultSxProp' type MyProps = LinkButtonProps & ButtonProps -const LinkButton = forwardRef( - ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => { - return ( - - {children} - - ) - }, -) as PolymorphicForwardRefComponent<'a', MyProps> +const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => { + return ( + + {children} + + ) +}) as PolymorphicForwardRefComponent<'a', MyProps> export {LinkButton} +export type {MyProps as LinkButtonProps} diff --git a/packages/react/src/Button/index.ts b/packages/react/src/Button/index.ts index d831b306ce5..a182f435923 100644 --- a/packages/react/src/Button/index.ts +++ b/packages/react/src/Button/index.ts @@ -1,6 +1,8 @@ import {IconButton} from './IconButton' import {LinkButton} from './LinkButton' +import type {LinkButtonProps} from './LinkButton' export type {ButtonProps, IconButtonProps, ButtonBaseProps} from './types' +export type {LinkButtonProps} export {IconButton, LinkButton} export {ButtonComponent as Button} from './Button' export {ButtonBase} from './ButtonBase' diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts deleted file mode 100644 index dafe8a8050a..00000000000 --- a/packages/react/src/Button/styles.ts +++ /dev/null @@ -1,423 +0,0 @@ -import type {VariantType, AlignContent} from './types' -import type {Theme} from '../ThemeProvider' - -export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => { - const style = { - default: { - color: 'btn.text', - backgroundColor: 'btn.bg', - boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`, - '&:hover:not([disabled]):not([data-inactive])': { - backgroundColor: 'btn.hoverBg', - borderColor: `var(--button-default-borderColor-hover, ${theme?.colors.btn.hoverBorder})`, - }, - '&:active:not([disabled]):not([data-inactive])': { - backgroundColor: 'btn.activeBg', - borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.activeBorder})`, - }, - '&:disabled': { - color: 'primer.fg.disabled', - borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`, - backgroundColor: `var(--button-default-bgColor-disabled, ${theme?.colors.input.disabledBg})`, - '[data-component=ButtonCounter]': { - color: 'inherit', - }, - }, - '&[aria-expanded=true]': { - backgroundColor: 'btn.activeBg', - borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.activeBorder})`, - }, - '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': { - color: `var(--button-color, ${theme?.colors.fg.muted})`, - }, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.counterBg', - }, - '&[data-component="IconButton"][data-no-visuals]:not(:disabled)': { - color: 'fg.muted', - }, - }, - primary: { - color: 'btn.primary.text', - backgroundColor: 'btn.primary.bg', - borderColor: 'btn.primary.border', - boxShadow: `${theme?.shadows.btn.primary.shadow}`, - '&:hover:not([disabled]):not([data-inactive])': { - color: 'btn.primary.hoverText', - backgroundColor: 'btn.primary.hoverBg', - }, - '&:focus:not([disabled])': { - boxShadow: 'inset 0 0 0 3px', - }, - '&:focus-visible:not([disabled])': { - boxShadow: 'inset 0 0 0 3px', - }, - '&:active:not([disabled]):not([data-inactive])': { - backgroundColor: 'btn.primary.selectedBg', - boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, - }, - '&:disabled': { - color: 'btn.primary.disabledText', - backgroundColor: 'btn.primary.disabledBg', - borderColor: 'btn.primary.disabledBorder', - '[data-component=ButtonCounter]': { - color: 'inherit', - }, - }, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.primary.counterBg', - color: 'btn.primary.text', - }, - '&[aria-expanded=true]': { - backgroundColor: 'btn.primary.selectedBg', - boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`, - }, - }, - danger: { - color: 'btn.danger.text', - backgroundColor: 'btn.bg', - boxShadow: `${theme?.shadows.btn.shadow}`, - '&:hover:not([disabled]):not([data-inactive])': { - color: 'btn.danger.hoverText', - backgroundColor: 'btn.danger.hoverBg', - borderColor: 'btn.danger.hoverBorder', - boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.danger.hoverCounterBg', - color: 'btn.danger.hoverCounterFg', - }, - }, - '&:active:not([disabled]):not([data-inactive])': { - color: 'btn.danger.selectedText', - backgroundColor: 'btn.danger.selectedBg', - boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, - borderColor: 'btn.danger.selectedBorder', - }, - '&:disabled': { - color: 'btn.danger.disabledText', - backgroundColor: 'btn.danger.disabledBg', - borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`, - '[data-component=ButtonCounter]': { - color: 'btn.danger.disabledCounterFg', - backgroundColor: 'btn.danger.disabledCounterBg', - }, - }, - '[data-component=ButtonCounter]': { - color: 'btn.danger.counterFg', - backgroundColor: 'btn.danger.counterBg', - }, - '&[aria-expanded=true]': { - color: 'btn.danger.selectedText', - backgroundColor: 'btn.danger.selectedBg', - boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`, - borderColor: 'btn.danger.selectedBorder', - }, - }, - invisible: { - color: `var(--button-invisible-fgColor-rest, ${theme?.colors.btn.text})`, - backgroundColor: 'transparent', - borderColor: 'transparent', - boxShadow: 'none', - '&:hover:not([disabled])': { - backgroundColor: 'actionListItem.default.hoverBg', - }, - '&:active:not([disabled])': { - backgroundColor: 'actionListItem.default.activeBg', - }, - '&:disabled': { - color: 'primer.fg.disabled', - backgroundColor: `var(--button-invisible-bgColor-disabled, transparent)`, - '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': { - color: 'inherit', - }, - }, - '&[aria-expanded=true]': { - backgroundColor: 'actionListItem.default.selectedBg', - }, - '&[data-component="IconButton"][data-no-visuals]': { - color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`, - }, - '[data-component="trailingAction"]': { - color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`, - }, - '[data-component="leadingVisual"]': { - color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`, - }, - '[data-component="trailingVisual"]': { - color: `var(--button-invisible-iconColor-rest, ${theme?.colors.fg.muted})`, - }, - '&[data-no-visuals]': { - color: `var(--button-invisible-fgColor-rest, ${theme?.colors.btn.text})`, - }, - '&:has([data-component="ButtonCounter"])': { - color: `var(--button-invisible-fgColor-rest, ${theme?.colors.btn.text})`, - }, - '&:disabled[data-no-visuals]': { - color: 'primer.fg.disabled', - '[data-component=ButtonCounter]': { - color: 'inherit', - }, - }, - }, - outline: { - color: 'btn.outline.text', - boxShadow: `${theme?.shadows.btn.shadow}`, - borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`, - backgroundColor: 'btn.bg', - - '&:hover:not([disabled]):not([data-inactive])': { - color: 'btn.outline.hoverText', - backgroundColor: 'btn.outline.hoverBg', - borderColor: `${theme?.colors.btn.outline.hoverBorder}`, - boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.hoverCounterBg', - color: 'btn.outline.hoverCounterFg', - }, - }, - '&:active:not([disabled]):not([data-inactive])': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: `${theme?.colors.btn.outline.selectedBorder}`, - }, - - '&:disabled': { - color: 'btn.outline.disabledText', - backgroundColor: 'btn.outline.disabledBg', - borderColor: 'btn.border', - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.disabledCounterBg', - color: 'btn.outline.disabledCounterFg', - }, - }, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.counterBg', - color: 'btn.outline.counterFg', - }, - '&[aria-expanded=true]': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: `var(--button-default-borderColor-active, ${theme?.colors.btn.outline.selectedBorder})`, - }, - }, - link: { - color: 'var(--fgColor-link)', - display: 'inline-block', - fontSize: 'inherit', - border: 'none', - height: 'unset', - padding: '0', - minWidth: 'fit-content', - backgroundColor: 'transparent', - - '&:hover:not([disabled]):not([data-inactive])': { - textDecoration: 'underline', - }, - - '&:focus-visible:not([disabled])': { - outlineOffset: '2px', - }, - - '&:disabled': { - color: 'primer.fg.disabled', - '[data-component=ButtonCounter], [data-component="leadingVisual"], [data-component="trailingAction"]': { - color: 'inherit', - }, - }, - - '[data-component="text"]': { - whiteSpace: 'unset', - }, - }, - } - - return style[variant] -} - -export const getBaseStyles = (theme?: Theme) => ({ - borderRadius: '2', - border: '1px solid', - borderColor: `var(--button-default-borderColor-rest, ${theme?.colors.btn.border})`, - fontFamily: 'inherit', - fontWeight: 'semibold', - fontSize: '1', - cursor: 'pointer', - appearance: 'none', - userSelect: 'none', - textDecoration: 'none', - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - height: '32px', - padding: '0 12px', - gap: '8px', - minWidth: 'max-content', - transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)', - transitionProperty: 'color, fill, background-color, border-color', - '&[href]': { - display: 'inline-flex', - '&:hover': { - textDecoration: 'none', - }, - }, - '&:hover': { - transitionDuration: '80ms', - }, - '&:active': { - transition: 'none', - }, - '&[data-inactive]': { - cursor: 'auto', - }, - '&:disabled': { - cursor: 'not-allowed', - boxShadow: 'none', - }, - '@media (forced-colors: active)': { - '&:focus': { - // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips - outline: 'solid 1px transparent', - }, - }, - '[data-component=ButtonCounter]': { - fontSize: '0', - }, - '&[data-component=IconButton]': { - display: 'inline-grid', - padding: 'unset', - placeContent: 'center', - width: '32px', - minWidth: 'unset', - }, - '&[data-size="small"]': { - padding: '0 8px', - height: '28px', - gap: '4px', - fontSize: '0', - - '[data-component="text"]': { - lineHeight: '1.6666667', - }, - - '[data-component=ButtonCounter]': { - fontSize: '0', - }, - - '[data-component="buttonContent"] > :not(:last-child)': { - mr: '4px', - }, - - '&[data-component=IconButton]': { - width: '28px', - padding: 'unset', - }, - }, - '&[data-size="large"]': { - padding: '0 16px', - height: '40px', - gap: '8px', - - '[data-component="buttonContent"] > :not(:last-child)': { - mr: '8px', - }, - - '&[data-component=IconButton]': { - width: '40px', - padding: 'unset', - }, - }, -}) - -export const getButtonStyles = (theme?: Theme) => { - const styles = { - ...getBaseStyles(theme), - '&[data-block="block"]': { - width: '100%', - }, - '&[data-label-wrap="true"]': { - minWidth: 'fit-content', - height: 'unset', - minHeight: 'var(--control-medium-size, 2rem)', - - '[data-component="buttonContent"]': { - flex: '1 1 auto', - alignSelf: 'stretch', - paddingBlock: 'calc(var(--control-medium-paddingBlock, 0.375rem) - 2px)', - }, - - '[data-component="text"]': { - whiteSpace: 'unset', - wordBreak: 'break-word', - }, - - '&[data-size="small"]': { - height: 'unset', - minHeight: 'var(--control-small-size, 1.75rem)', - - '[data-component="buttonContent"]': { - paddingBlock: 'calc(var(--control-small-paddingBlock, 0.25rem) - 2px)', - }, - }, - - '&[data-size="large"]': { - height: 'unset', - minHeight: 'var(--control-large-size, 2.5rem)', - paddingInline: 'var(--control-large-paddingInline-spacious, 1rem)', - - '[data-component="buttonContent"]': { - paddingBlock: 'calc(var(--control-large-paddingBlock, 0.625rem) - 2px)', - }, - }, - }, - '&[data-inactive]:not([disabled])': { - backgroundColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, - borderColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, - color: `var(--button-inactive-fgColor, ${theme?.colors.btn.inactive.text})`, - }, - '&[data-inactive]:not([disabled]):focus-visible': { - boxShadow: 'none', - }, - '[data-component="leadingVisual"]': { - gridArea: 'leadingVisual', - }, - '[data-component="text"]': { - gridArea: 'text', - lineHeight: '1.4285714', - whiteSpace: 'nowrap', - }, - '[data-component="trailingVisual"]': { - gridArea: 'trailingVisual', - }, - '[data-component="trailingAction"]': { - marginRight: '-4px', - }, - '[data-component="buttonContent"]': { - flex: '1 0 auto', - display: 'grid', - gridTemplateAreas: '"leadingVisual text trailingVisual"', - gridTemplateColumns: 'min-content minmax(0, auto) min-content', - alignItems: 'center', - alignContent: 'center', - }, - '[data-component="buttonContent"] > :not(:last-child)': { - mr: '8px', - }, - '[data-component="loadingSpinner"]': { - gridArea: 'text', - marginRight: '0px !important', - placeSelf: 'center', - color: 'fg.muted', - }, - '[data-component="loadingSpinner"] + [data-component="text"]': { - visibility: 'hidden', - }, - } - return styles -} - -export const getAlignContentSize = (alignContent: AlignContent = 'center') => ({ - justifyContent: alignContent === 'center' ? 'center' : 'flex-start', -}) diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index cc9c183bacb..1394f10962a 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -1,16 +1,7 @@ import type React from 'react' -import styled from 'styled-components' -import type {SxProp} from '../sx' -import sx from '../sx' -import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' import type {TooltipDirection} from '../TooltipV2' import type {IconProps} from '@primer/octicons-react' -export const StyledButton = styled.button` - ${getGlobalFocusStyles('-2px')}; - ${sx}; -` - export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'link' export type Size = 'small' | 'medium' | 'large' @@ -56,8 +47,7 @@ export type ButtonBaseProps = { * Whether the button label should wrap to multiple lines if it is longer than the button width */ labelWrap?: boolean -} & SxProp & - React.ButtonHTMLAttributes +} & React.ButtonHTMLAttributes export type ButtonProps = { /** diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx index 673c10ab0f5..63d427e3a3e 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -24,7 +24,7 @@ const meta: Meta = { export default meta export const LinkAndButtonWithTooltip2 = () => ( - + @@ -62,11 +62,3 @@ export const LinkButtonWithIconButtons = () => ( ) - -export const SxProp = () => ( - - - - - -) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.docs.json b/packages/react/src/ButtonGroup/ButtonGroup.docs.json index a27208f34c1..e43db4799db 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.docs.json +++ b/packages/react/src/ButtonGroup/ButtonGroup.docs.json @@ -22,11 +22,6 @@ ], "importPath": "@primer/react", "props": [ - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - }, { "name": "ref", "type": "React.RefObject" diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx index 27f02ba510e..4607e6c8aa8 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx @@ -11,7 +11,6 @@ export default { ref: {table: {disable: true}}, theme: {table: {disable: true}}, forwardedAs: {table: {disable: true}}, - sx: {table: {disable: true}}, }, } as Meta diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 3793d15df52..1fb0531566a 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -1,19 +1,16 @@ import React, {type PropsWithChildren} from 'react' -import {type SxProp} from '../sx' import classes from './ButtonGroup.module.css' import {clsx} from 'clsx' import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' import {useProvidedRefOrCreate} from '../hooks' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' -export type ButtonGroupProps = { +export type ButtonGroupProps = PropsWithChildren<{ /** The role of the group */ role?: string /** className passed in for styling */ className?: string -} & PropsWithChildren & - SxProp +}> const ButtonGroup = React.forwardRef(function ButtonGroup( {children, className, role, ...rest}, @@ -30,9 +27,9 @@ const ButtonGroup = React.forwardRef(function But }) return ( - +
{buttons} - +
) }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps> diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index bb1405345f0..ae1075ca7aa 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -3,6 +3,12 @@ import { Box, type BoxProps, type SxProp, + type ButtonProps as PrimerButtonProps, + Button as PrimerButton, + type IconButtonProps as PrimerIconButtonProps, + IconButton as PrimerIconButton, + type LinkButtonProps as PrimerLinkButtonProps, + LinkButton as PrimerLinkButton, StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps, SubNav as PrimerSubNav, @@ -24,6 +30,7 @@ import type { SpaceProps, TypographyProps, } from 'styled-system' +import type {ForwardRefComponent} from './polymorphic' type StyledProps = SxProp & SpaceProps & @@ -37,6 +44,26 @@ type StyledProps = SxProp & PositionProps & ShadowProps +type ButtonProps = PrimerButtonProps & SxProp + +const Button = forwardRef(function Button(props, ref) { + return +}) as ForwardRefComponent<'button', ButtonProps> + +type IconButtonProps = PrimerIconButtonProps & SxProp + +const IconButton = forwardRef(function IconButton(props, ref) { + // @ts-expect-error the `Box` component does not infer the types correctly + // here + return +}) as ForwardRefComponent<'button' | 'a', IconButtonProps> + +type LinkButtonProps = PrimerLinkButtonProps & SxProp + +const LinkButton = forwardRef(function LinkButton(props, ref) { + return +}) as ForwardRefComponent<'button', LinkButtonProps> + type StateLabelProps = PrimerStateLabelProps & SxProp const StateLabel = forwardRef(function StateLabel(props, ref) { @@ -65,7 +92,7 @@ const ToggleSwitch = forwardRef(function T return }) -export {StateLabel, SubNav, ToggleSwitch} +export {Button, IconButton, LinkButton, StateLabel, SubNav, ToggleSwitch} export { ActionList, @@ -73,7 +100,6 @@ export { Autocomplete, Avatar, Breadcrumbs, - Button, Checkbox, CheckboxGroup, CircleBadge, @@ -84,10 +110,8 @@ export { FormControl, Header, Heading, - IconButton, Label, Link, - LinkButton, NavList, Overlay, PageHeader,