From 16e847e99db581230929ed03ea858304919e8e06 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 00:19:02 +0000 Subject: [PATCH 01/17] update token and token base to css modules --- packages/react/src/Token/Token.module.css | 21 +++++++ packages/react/src/Token/Token.tsx | 39 +++++------- packages/react/src/Token/TokenBase.module.css | 60 +++++++++++++++++++ packages/react/src/Token/TokenBase.tsx | 52 ++++++++++------ 4 files changed, 129 insertions(+), 43 deletions(-) create mode 100644 packages/react/src/Token/Token.module.css create mode 100644 packages/react/src/Token/TokenBase.module.css diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css new file mode 100644 index 00000000000..6c834f0eb7e --- /dev/null +++ b/packages/react/src/Token/Token.module.css @@ -0,0 +1,21 @@ +.Token { + max-width: 100%; + color: var(--fgColor-muted); + background-color: var(--bgColor-neutral-muted); + border-color: var(--borderColor-muted); + border-style: 'solid'; +} + +.Token[data-interactive='true']:hover { + color: var(--fgColor-default); + background-color: var(--bgColor-neutral-muted); + box-shadow: var(--shadow-resting-medium); +} + +.Token[data-is-selected='true'] { + color: var(--fgColor-default); +} + +.Token[data-is-remove-btn='true'] { + padding-right: 0; +} diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx index 71ef91143b1..ebe50281a49 100644 --- a/packages/react/src/Token/Token.tsx +++ b/packages/react/src/Token/Token.tsx @@ -1,8 +1,7 @@ import type {MouseEventHandler} from 'react' import React, {forwardRef} from 'react' import Box from '../Box' -import type {BetterSystemStyleObject, SxProp} from '../sx' -import {merge} from '../sx' +import type {SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import type {TokenBaseProps} from './TokenBase' import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase' @@ -10,6 +9,10 @@ import RemoveTokenButton from './_RemoveTokenButton' import TokenTextContainer from './_TokenTextContainer' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import VisuallyHidden from '../_VisuallyHidden' +import {useFeatureFlag} from '../FeatureFlags' + +import classes from './Token.module.css' +import {clsx} from 'clsx' // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't. // TODO: This is a temporary solution until we figure out why these methods are causing type errors. @@ -20,6 +23,8 @@ export interface TokenProps extends TokenBaseProps, SxProp { leadingVisual?: React.ElementType } +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + const tokenBorderWidthPx = 1 const LeadingVisualContainer: React.FC>> = ({children, size}) => ( @@ -35,6 +40,8 @@ const LeadingVisualContainer: React.FC { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const { as, onRemove, @@ -45,7 +52,8 @@ const Token = forwardRef((props, forwardedRef) => { hideRemoveButton, href, onClick, - sx: sxProp = defaultSxProp, + sx = defaultSxProp, + className, ...rest } = props const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton @@ -58,38 +66,21 @@ const Token = forwardRef((props, forwardedRef) => { href, onClick, } - const sx = merge( - { - backgroundColor: 'neutral.subtle', - borderColor: props.isSelected ? 'fg.default' : 'border.subtle', - borderStyle: 'solid', - borderWidth: `${tokenBorderWidthPx}px`, - color: props.isSelected ? 'fg.default' : 'fg.muted', - maxWidth: '100%', - paddingRight: !(hideRemoveButton || !onRemove) ? 0 : undefined, - ...(isTokenInteractive(props) - ? { - '&:hover': { - backgroundColor: 'neutral.muted', - boxShadow: 'shadow.medium', - color: 'fg.default', - }, - } - : {}), - }, - sxProp, - ) return ( {LeadingVisual ? ( diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css new file mode 100644 index 00000000000..e120ccb0609 --- /dev/null +++ b/packages/react/src/Token/TokenBase.module.css @@ -0,0 +1,60 @@ +.TokenBase { + position: relative; + display: inline-flex; + font-family: inherit; + font-weight: var(--base-text-weight-semibold); + text-decoration: none; + white-space: nowrap; + border-radius: var(--borderRadius-full); + align-items: center; +} + +.TokenBase[data-cursor-is-interactive='true'] { + cursor: pointer; +} + +.TokenBase[data-cursor-is-interactive='false'] { + cursor: auto; +} + +.TokenBase[data-size='small'] { + width: auto; + height: 16px; + padding-right: var(--base-size-4); + padding-left: var(--base-size-4); + font-size: var(--text-body-size-small); + /* stylelint-disable-next-line primer/typography */ + line-height: 16px; +} + +.TokenBase[data-size='medium'] { + width: auto; + height: 20px; + padding-right: var(--base-size-8); + padding-left: var(--base-size-8); + font-size: var(--text-body-size-small); + /* stylelint-disable-next-line primer/typography */ + line-height: 20px; +} + +.TokenBase[data-size='large'] { + width: auto; + height: 24px; + padding-right: var(--base-size-8); + padding-left: var(--base-size-8); + font-size: var(--text-body-size-small); + /* stylelint-disable-next-line primer/typography */ + line-height: 24px; +} + +.TokenBase[data-size='xlarge'] { + width: auto; + height: 32px; + padding-top: 0; + padding-right: var(--base-size-16); + padding-bottom: 0; + padding-left: var(--base-size-16); + font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ + line-height: 32px; +} diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx index 43b314367e8..2edf3ed819d 100644 --- a/packages/react/src/Token/TokenBase.tsx +++ b/packages/react/src/Token/TokenBase.tsx @@ -2,10 +2,14 @@ import type {ComponentProps, KeyboardEvent} from 'react' import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' +import {clsx} from 'clsx' import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './TokenBase.module.css' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge' @@ -112,26 +116,34 @@ const variants = variant< }, }) -const StyledTokenBase = styled.span< - { - size?: TokenSizeKeys - } & SxProp ->` - align-items: center; - border-radius: 999px; - cursor: ${props => (isTokenInteractive(props) ? 'pointer' : 'auto')}; - display: inline-flex; - font-weight: ${get('fontWeights.bold')}; - font-family: inherit; - text-decoration: none; - position: relative; - white-space: nowrap; - ${variants} - ${sx} -` +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + +const StyledTokenBase = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span< + { + size?: TokenSizeKeys + } & SxProp + >` + align-items: center; + border-radius: 999px; + cursor: ${props => (isTokenInteractive(props) ? 'pointer' : 'auto')}; + display: inline-flex; + font-weight: ${get('fontWeights.bold')}; + font-family: inherit; + text-decoration: none; + position: relative; + white-space: nowrap; + ${variants} + ${sx} + `, +) const TokenBase = React.forwardRef( - ({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => { + ({onRemove, onKeyDown, id, className, size = defaultTokenSize, ...rest}, forwardedRef) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( ) => { @@ -141,10 +153,12 @@ const TokenBase = React.forwardRef ) From 7f5e55c4678ae47077d1fa4acc6be320afb75511 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 00:36:35 +0000 Subject: [PATCH 02/17] add changeset and update snapshot --- .changeset/slow-spoons-peel.md | 5 + .../__snapshots__/Token.test.tsx.snap | 236 +- .../TextInputWithTokens.test.tsx.snap | 2171 +++++++++++++---- 3 files changed, 1856 insertions(+), 556 deletions(-) create mode 100644 .changeset/slow-spoons-peel.md diff --git a/.changeset/slow-spoons-peel.md b/.changeset/slow-spoons-peel.md new file mode 100644 index 00000000000..b91c1058cef --- /dev/null +++ b/.changeset/slow-spoons-peel.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `Token` component to use CSS Modules diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap index 31d7160ce05..d2759ffddad 100644 --- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap +++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap @@ -51,13 +51,6 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` line-height: 16px; padding-left: 4px; padding-right: 4px; - background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); - border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15))); - border-style: solid; - border-width: 1px; - color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); - max-width: 100%; - padding-right: 0; padding-left: 4px; } @@ -156,9 +149,17 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` }
@@ -1559,6 +1569,8 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` @@ -1733,6 +1745,8 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` @@ -1909,6 +1923,8 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` @@ -2083,6 +2099,8 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` @@ -2257,6 +2275,8 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` @@ -2399,6 +2419,8 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = ` @@ -2542,6 +2564,8 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` @@ -2620,13 +2644,6 @@ exports[`Token components Token renders all sizes 1`] = ` line-height: 16px; padding-left: 4px; padding-right: 4px; - background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); - border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15))); - border-style: solid; - border-width: 1px; - color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); - max-width: 100%; - padding-right: 0; } .c3 { @@ -2717,9 +2734,17 @@ exports[`Token components Token renders all sizes 1`] = ` }
Date: Wed, 13 Nov 2024 00:37:46 +0000 Subject: [PATCH 03/17] fix css --- packages/react/src/Token/Token.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css index 6c834f0eb7e..2c070a6de73 100644 --- a/packages/react/src/Token/Token.module.css +++ b/packages/react/src/Token/Token.module.css @@ -3,7 +3,7 @@ color: var(--fgColor-muted); background-color: var(--bgColor-neutral-muted); border-color: var(--borderColor-muted); - border-style: 'solid'; + border-style: solid; } .Token[data-interactive='true']:hover { From 6db120e088353c3e3e3aa2ad0aa89f9e584024fb Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 01:17:15 +0000 Subject: [PATCH 04/17] properly merge in style prop --- packages/react/src/Token/Token.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx index ebe50281a49..8bdd301ff1e 100644 --- a/packages/react/src/Token/Token.tsx +++ b/packages/react/src/Token/Token.tsx @@ -54,6 +54,7 @@ const Token = forwardRef((props, forwardedRef) => { onClick, sx = defaultSxProp, className, + style, ...rest } = props const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton @@ -80,7 +81,7 @@ const Token = forwardRef((props, forwardedRef) => { {...(!hasMultipleActionTargets ? interactiveTokenProps : {})} {...rest} ref={forwardedRef} - style={{borderWidth: `${tokenBorderWidthPx}px`}} + style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}} > {LeadingVisual ? ( From 3fc609f1a1f54a37fb28a085f20dc68c974accdd Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 15:38:58 +0000 Subject: [PATCH 05/17] key sx and style prop correctly off of feature flag --- packages/react/src/Token/Token.tsx | 32 +++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx index 8bdd301ff1e..56aa37acfaf 100644 --- a/packages/react/src/Token/Token.tsx +++ b/packages/react/src/Token/Token.tsx @@ -1,7 +1,7 @@ import type {MouseEventHandler} from 'react' import React, {forwardRef} from 'react' import Box from '../Box' -import type {SxProp} from '../sx' +import {merge, type BetterSystemStyleObject, type SxProp} from '../sx' import {defaultSxProp} from '../utils/defaultSxProp' import type {TokenBaseProps} from './TokenBase' import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase' @@ -52,7 +52,7 @@ const Token = forwardRef((props, forwardedRef) => { hideRemoveButton, href, onClick, - sx = defaultSxProp, + sx: sxProp = defaultSxProp, className, style, ...rest @@ -68,20 +68,42 @@ const Token = forwardRef((props, forwardedRef) => { onClick, } + const mergedSx = merge( + { + backgroundColor: 'neutral.subtle', + borderColor: props.isSelected ? 'fg.default' : 'border.subtle', + borderStyle: 'solid', + borderWidth: `${tokenBorderWidthPx}px`, + color: props.isSelected ? 'fg.default' : 'fg.muted', + maxWidth: '100%', + paddingRight: !(hideRemoveButton || !onRemove) ? 0 : undefined, + ...(isTokenInteractive(props) + ? { + '&:hover': { + backgroundColor: 'neutral.muted', + boxShadow: 'shadow.medium', + color: 'fg.default', + }, + } + : {}), + }, + sxProp, + ) + return ( {LeadingVisual ? ( From a8084b39ff3e524b89f7b0b4b69aad3619e9fb57 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 15:43:01 +0000 Subject: [PATCH 06/17] update snapshot --- .../__snapshots__/Token.test.tsx.snap | 192 +- .../TextInputWithTokens.test.tsx.snap | 1645 +++++++---------- 2 files changed, 739 insertions(+), 1098 deletions(-) diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap index d2759ffddad..90bca777f28 100644 --- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap +++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap @@ -51,6 +51,13 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` line-height: 16px; padding-left: 4px; padding-right: 4px; + background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); + border-color: var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15))); + border-style: solid; + border-width: 1px; + color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); + max-width: 100%; + padding-right: 0; padding-left: 4px; } @@ -149,17 +156,13 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` }
Date: Wed, 13 Nov 2024 15:56:08 +0000 Subject: [PATCH 07/17] update avatartoken --- .../react/src/Token/AvatarToken.module.css | 37 ++++++++++++++ packages/react/src/Token/AvatarToken.tsx | 50 +++++++++++-------- 2 files changed, 67 insertions(+), 20 deletions(-) create mode 100644 packages/react/src/Token/AvatarToken.module.css diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css new file mode 100644 index 00000000000..7c3a83ba023 --- /dev/null +++ b/packages/react/src/Token/AvatarToken.module.css @@ -0,0 +1,37 @@ +:root { + --spacing: calc(var(--base-size-4) * 2); +} + +.AvatarContainer { + display: block; +} + +/* TODO: Remove this once the avatar component is converted to CSS modules */ +.Avatar { + width: 100% !important; + height: 100% !important; +} + +.Token { + padding-left: var(--base-size-4) !important; +} + +.AvatarContainer[data-size='small'] { + width: calc(16px - var(--spacing)); + height: calc(16px - var(--spacing)); +} + +.AvatarContainer[data-size='medium'] { + width: calc(20px - var(--spacing)); + height: calc(20px - var(--spacing)); +} + +.AvatarContainer[data-size='large'] { + width: calc(24px - var(--spacing)); + height: calc(24px - var(--spacing)); +} + +.AvatarContainer[data-size='xlarge'] { + width: calc(32px - var(--spacing)); + height: calc(32px - var(--spacing)); +} diff --git a/packages/react/src/Token/AvatarToken.tsx b/packages/react/src/Token/AvatarToken.tsx index b03a1059356..060cea6f185 100644 --- a/packages/react/src/Token/AvatarToken.tsx +++ b/packages/react/src/Token/AvatarToken.tsx @@ -1,47 +1,57 @@ import React, {forwardRef} from 'react' import styled from 'styled-components' +import {clsx} from 'clsx' import {get} from '../constants' import type {TokenBaseProps, TokenSizeKeys} from './TokenBase' import {defaultTokenSize, tokenSizes} from './TokenBase' import Token from './Token' import Avatar from '../Avatar' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './AvatarToken.module.css' // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change export interface AvatarTokenProps extends TokenBaseProps { avatarSrc: string } -const AvatarContainer = styled.span<{avatarSize: TokenSizeKeys}>` - // 'space.1' is used because to match space from the left of the token to the left of the avatar - // '* 2' is done to account for the top and bottom - --spacing: calc(${get('space.1')} * 2); +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - display: block; - height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`}; - width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`}; -` +const AvatarContainer = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span<{avatarSize: TokenSizeKeys}>` + // 'space.1' is used because to match space from the left of the token to the left of the avatar + // '* 2' is done to account for the top and bottom + --spacing: calc(${get('space.1')} * 2); + + display: block; + height: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`}; + width: ${props => `calc(${tokenSizes[props.avatarSize]} - var(--spacing))`}; + `, +) const AvatarToken = forwardRef(({avatarSrc, id, size = defaultTokenSize, ...rest}, forwardedRef) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( ( - - + + )} size={size} id={id?.toString()} - sx={{ - paddingLeft: get('space.1'), - }} + className={clsx(enabled && classes.Token)} + sx={ + !enabled + ? { + paddingLeft: get('space.1'), + } + : {} + } {...rest} ref={forwardedRef} /> From 54afea0f870c900a40c36ac00121a57ec105ae06 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 13 Nov 2024 16:16:04 +0000 Subject: [PATCH 08/17] update IssueLabelToken to css modules --- .../src/Token/IssueLabelToken.module.css | 8 + packages/react/src/Token/IssueLabelToken.tsx | 22 +- .../__snapshots__/Token.test.tsx.snap | 215 ++++++++---------- .../TextInputWithTokens.test.tsx.snap | 42 +++- 4 files changed, 154 insertions(+), 133 deletions(-) create mode 100644 packages/react/src/Token/IssueLabelToken.module.css diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css new file mode 100644 index 00000000000..22e2e509613 --- /dev/null +++ b/packages/react/src/Token/IssueLabelToken.module.css @@ -0,0 +1,8 @@ +.IssueLabel[data-has-remove-button='true'] { + padding-right: 0; +} + +.RemoveButton[data-has-multiple-action-targets='true'] { + position: relative; + z-index: 1; +} diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx index 54b0b89ba53..ea837e8fac1 100644 --- a/packages/react/src/Token/IssueLabelToken.tsx +++ b/packages/react/src/Token/IssueLabelToken.tsx @@ -8,6 +8,9 @@ import {parseToHsla, parseToRgba} from 'color2k' import {useTheme} from '../ThemeProvider' import TokenTextContainer from './_TokenTextContainer' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' +import classes from './IssueLabelToken.module.css' +import {useFeatureFlag} from '../FeatureFlags' +import {clsx} from 'clsx' export interface IssueLabelTokenProps extends TokenBaseProps { /** @@ -16,6 +19,7 @@ export interface IssueLabelTokenProps extends TokenBaseProps { fillColor?: string } +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' const tokenBorderWidthPx = 1 const lightModeStyles = { @@ -43,6 +47,8 @@ const darkModeStyles = { } const IssueLabelToken = forwardRef((props, forwardedRef) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + const { as, fillColor = '#999', @@ -54,6 +60,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { hideRemoveButton, href, onClick, + className, ...rest } = props const interactiveTokenProps = { @@ -138,9 +145,12 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { onRemove={onRemove} id={id?.toString()} isSelected={isSelected} + className={clsx(enabled && classes.IssueLabel, className)} text={text} size={size} - sx={labelStyles} + sx={!enabled ? labelStyles : {}} + style={enabled ? labelStyles : {}} + data-has-remove-button={!hideRemoveButton || onRemove} {...(!hasMultipleActionTargets ? interactiveTokenProps : {})} {...rest} ref={forwardedRef} @@ -153,14 +163,8 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { size={size} aria-hidden={hasMultipleActionTargets ? 'true' : 'false'} isParentInteractive={isTokenInteractive(props)} - sx={ - hasMultipleActionTargets - ? { - position: 'relative', - zIndex: '1', - } - : {} - } + data-has-multiple-action-targets={hasMultipleActionTargets} + className={classes.RemoveButton} /> ) : null} diff --git a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap index 90bca777f28..bc0c1e5ea3d 100644 --- a/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap +++ b/packages/react/src/Token/__tests__/__snapshots__/Token.test.tsx.snap @@ -9,14 +9,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` margin-right: 4px; } -.c3 { - width: 16px; - height: 16px; - width: 100%; - height: 100%; -} - -.c5 { +.c4 { position: absolute; width: 1px; height: 1px; @@ -61,7 +54,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` padding-left: 4px; } -.c6 { +.c5 { background-color: transparent; font-family: inherit; color: currentColor; @@ -101,16 +94,16 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` width: 16px; } -.c6:hover, -.c6:focus { +.c5:hover, +.c5:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c6:active { +.c5:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c4 { +.c3 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -135,11 +128,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` text-decoration: none; } -.c4:is(a,button,[tabIndex='0']) { +.c3:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c4:is(a,button,[tabIndex='0']):after { +.c3:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -169,10 +162,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` > token (press backspace or delete to remove) @@ -198,7 +192,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `