diff --git a/.changeset/seven-coats-hang.md b/.changeset/seven-coats-hang.md new file mode 100644 index 00000000000..ea7e6ec209e --- /dev/null +++ b/.changeset/seven-coats-hang.md @@ -0,0 +1,6 @@ + +--- +'@primer/react': major +--- + +Update LabelGroup component to no longer support sx diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx index 65b5d257635..54b3d184c42 100644 --- a/packages/react/src/LabelGroup/LabelGroup.tsx +++ b/packages/react/src/LabelGroup/LabelGroup.tsx @@ -5,11 +5,8 @@ import {getFocusableChild} from '@primer/behaviors/utils' import {get} from '../constants' import VisuallyHidden from '../_VisuallyHidden' import {AnchoredOverlay} from '../AnchoredOverlay' -import Box from '../Box' import {Button, IconButton} from '../Button' import {useTheme} from '../ThemeProvider' -import type {SxProp} from '../sx' -import sx from '../sx' export type LabelGroupProps = { /** Customize the element type of the rendered container */ @@ -19,9 +16,9 @@ export type LabelGroupProps = { /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */ visibleChildCount?: 'auto' | number className?: string -} & SxProp +} -const StyledLabelGroupContainer = styled.div` +const StyledLabelGroupContainer = styled.div` display: flex; flex-wrap: nowrap; gap: ${get('space.1')}; @@ -39,8 +36,6 @@ const StyledLabelGroupContainer = styled.div` margin-block-end: 0; list-style-type: none; } - - ${sx}; ` const ItemWrapper = styled.div` @@ -137,18 +132,16 @@ const OverlayToggle: React.FC< )} focusZoneSettings={{disabled: true}} > - - - {children} - +
+
{children}
- +
) : null @@ -157,7 +150,6 @@ const LabelGroup: React.FC> = ({ children, visibleChildCount, overflowStyle = 'overlay', - sx: sxProp, as = 'ul', className, }) => { @@ -338,7 +330,6 @@ const LabelGroup: React.FC> = ({ ref={containerRef} data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined} data-list={isList || undefined} - sx={sxProp} className={className} as={as} > @@ -381,13 +372,7 @@ const LabelGroup: React.FC> = ({ ) : ( - + {isList ? React.Children.map(children, (child, index) => { return
  • {child}