From 428e70eee1d2d19a1b3fb791fe1eacfd3152a4a8 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 5 Dec 2024 18:30:13 -0500 Subject: [PATCH 1/6] Revert "feat(Token): Migrate to CSS modules behind feature flag Pt 2 (#5271)" This reverts commit 05db651698af5a713cf0a5624016a2f86ab13a90. --- .changeset/slow-spoons-peel.md | 5 -- .../react/src/Token/AvatarToken.module.css | 36 ---------- packages/react/src/Token/AvatarToken.tsx | 46 +++---------- .../src/Token/IssueLabelToken.module.css | 8 --- packages/react/src/Token/IssueLabelToken.tsx | 39 ----------- packages/react/src/Token/Token.module.css | 21 ------ packages/react/src/Token/Token.tsx | 58 ++-------------- packages/react/src/Token/TokenBase.module.css | 60 ---------------- packages/react/src/Token/TokenBase.tsx | 69 +++++-------------- 9 files changed, 32 insertions(+), 310 deletions(-) delete mode 100644 .changeset/slow-spoons-peel.md delete mode 100644 packages/react/src/Token/AvatarToken.module.css delete mode 100644 packages/react/src/Token/IssueLabelToken.module.css delete mode 100644 packages/react/src/Token/Token.module.css delete mode 100644 packages/react/src/Token/TokenBase.module.css diff --git a/.changeset/slow-spoons-peel.md b/.changeset/slow-spoons-peel.md deleted file mode 100644 index 83dcb2f5943..00000000000 --- a/.changeset/slow-spoons-peel.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Update `Token`, `IssueLabelToken`, `AvatarToken` components to use CSS Modules diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css deleted file mode 100644 index 02850e1d52e..00000000000 --- a/packages/react/src/Token/AvatarToken.module.css +++ /dev/null @@ -1,36 +0,0 @@ -:root { - --spacing: calc(var(--base-size-4) * 2); -} - -.AvatarContainer { - display: block; -} - -.Avatar { - width: 100%; - height: 100%; -} - -.Token { - padding-left: var(--base-size-4) !important; -} - -.AvatarContainer:where([data-size='small']) { - width: calc(16px - var(--spacing)); - height: calc(16px - var(--spacing)); -} - -.AvatarContainer:where([data-size='medium']) { - width: calc(20px - var(--spacing)); - height: calc(20px - var(--spacing)); -} - -.AvatarContainer:where([data-size='large']) { - width: calc(24px - var(--spacing)); - height: calc(24px - var(--spacing)); -} - -.AvatarContainer:where([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 c6b70005639..b03a1059356 100644 --- a/packages/react/src/Token/AvatarToken.tsx +++ b/packages/react/src/Token/AvatarToken.tsx @@ -6,51 +6,23 @@ 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' -import {clsx} from 'clsx' // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change export interface AvatarTokenProps extends TokenBaseProps { avatarSrc: string } -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' +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 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, className, ...rest}, forwardedRef) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - if (enabled) { - return ( - ( - - - - )} - size={size} - id={id?.toString()} - className={clsx(classes.Token, className)} - {...rest} - ref={forwardedRef} - /> - ) - } + 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) => { return ( ( diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css deleted file mode 100644 index 5543c107480..00000000000 --- a/packages/react/src/Token/IssueLabelToken.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.IssueLabel:where([data-has-remove-button='true']) { - padding-right: 0; -} - -.RemoveButton:where([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 a8b1f409d67..54b0b89ba53 100644 --- a/packages/react/src/Token/IssueLabelToken.tsx +++ b/packages/react/src/Token/IssueLabelToken.tsx @@ -8,9 +8,6 @@ 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 { /** @@ -19,7 +16,6 @@ export interface IssueLabelTokenProps extends TokenBaseProps { fillColor?: string } -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' const tokenBorderWidthPx = 1 const lightModeStyles = { @@ -47,8 +43,6 @@ const darkModeStyles = { } const IssueLabelToken = forwardRef((props, forwardedRef) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - const { as, fillColor = '#999', @@ -60,7 +54,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { hideRemoveButton, href, onClick, - className, ...rest } = props const interactiveTokenProps = { @@ -68,7 +61,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { href, onClick, } - const {resolvedColorScheme} = useTheme() const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton const onRemoveClick: MouseEventHandler = e => { @@ -141,37 +133,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { } }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props]) - if (enabled) { - return ( - - {text} - {!hideRemoveButton && onRemove ? ( - - ) : null} - - ) - } - return ( >> = ({children, size}) => ( @@ -40,8 +35,6 @@ const LeadingVisualContainer: React.FC { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - const { as, onRemove, @@ -53,8 +46,6 @@ const Token = forwardRef((props, forwardedRef) => { href, onClick, sx: sxProp = defaultSxProp, - className, - style, ...rest } = props const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton @@ -67,8 +58,7 @@ const Token = forwardRef((props, forwardedRef) => { href, onClick, } - - const mergedSx = merge( + const sx = merge( { backgroundColor: 'neutral.subtle', borderColor: props.isSelected ? 'fg.default' : 'border.subtle', @@ -90,56 +80,16 @@ const Token = forwardRef((props, forwardedRef) => { sxProp, ) - if (enabled) { - return ( - - {LeadingVisual ? ( - - - - ) : null} - - {text} - {onRemove && (press backspace or delete to remove)} - - - {!hideRemoveButton && onRemove ? ( - - ) : null} - - ) - } - return ( {LeadingVisual ? ( diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css deleted file mode 100644 index d8da3654770..00000000000 --- a/packages/react/src/Token/TokenBase.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.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:where([data-cursor-is-interactive='true']) { - cursor: pointer; -} - -.TokenBase:where([data-cursor-is-interactive='false']) { - cursor: auto; -} - -.TokenBase:where([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:where([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 89b3b28219a..43b314367e8 100644 --- a/packages/react/src/Token/TokenBase.tsx +++ b/packages/react/src/Token/TokenBase.tsx @@ -2,14 +2,10 @@ 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' @@ -116,54 +112,26 @@ const variants = variant< }, }) -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 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 TokenBase = React.forwardRef( - ({onRemove, onKeyDown, id, className, size = defaultTokenSize, ...rest}, forwardedRef) => { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - - if (enabled) { - return ( - ) => { - onKeyDown && onKeyDown(event) - - if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) { - onRemove() - } - }} - className={clsx(classes.TokenBase, className)} - data-cursor-is-interactive={isTokenInteractive(rest)} - data-size={size} - id={id?.toString()} - {...rest} - ref={forwardedRef} - /> - ) - } - + ({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => { return ( ) => { @@ -176,6 +144,7 @@ const TokenBase = React.forwardRef ) From f998a8dba1844bfe666d3abf4676fff69c0c4a72 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 11:11:46 -0500 Subject: [PATCH 2/6] test --- .changeset/slow-spoons-peel.md | 5 ++ .../react/src/Token/AvatarToken.module.css | 36 +++++++++++ .../src/Token/IssueLabelToken.module.css | 8 +++ packages/react/src/Token/Token.module.css | 21 +++++++ packages/react/src/Token/TokenBase.module.css | 60 +++++++++++++++++++ 5 files changed, 130 insertions(+) create mode 100644 .changeset/slow-spoons-peel.md create mode 100644 packages/react/src/Token/AvatarToken.module.css create mode 100644 packages/react/src/Token/IssueLabelToken.module.css create mode 100644 packages/react/src/Token/Token.module.css create mode 100644 packages/react/src/Token/TokenBase.module.css diff --git a/.changeset/slow-spoons-peel.md b/.changeset/slow-spoons-peel.md new file mode 100644 index 00000000000..07ed2d393fc --- /dev/null +++ b/.changeset/slow-spoons-peel.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `Token`, `IssueLabelToken`, `AvatarToken` components to use CSS Modules \ No newline at end of file diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css new file mode 100644 index 00000000000..c594f8e51d8 --- /dev/null +++ b/packages/react/src/Token/AvatarToken.module.css @@ -0,0 +1,36 @@ +:root { + --spacing: calc(var(--base-size-4) * 2); + } + + .AvatarContainer { + display: block; + } + + .Avatar { + width: 100%; + height: 100%; + } + + .Token { + padding-left: var(--base-size-4) !important; + } + + .AvatarContainer:where([data-size='small']) { + width: calc(16px - var(--spacing)); + height: calc(16px - var(--spacing)); + } + + .AvatarContainer:where([data-size='medium']) { + width: calc(20px - var(--spacing)); + height: calc(20px - var(--spacing)); + } + + .AvatarContainer:where([data-size='large']) { + width: calc(24px - var(--spacing)); + height: calc(24px - var(--spacing)); + } + + .AvatarContainer:where([data-size='xlarge']) { + width: calc(32px - var(--spacing)); + height: calc(32px - var(--spacing)); + } \ No newline at end of file diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css new file mode 100644 index 00000000000..d1fffd6fdb1 --- /dev/null +++ b/packages/react/src/Token/IssueLabelToken.module.css @@ -0,0 +1,8 @@ +.IssueLabel:where([data-has-remove-button='true']) { + padding-right: 0; + } + + .RemoveButton:where([data-has-multiple-action-targets='true']) { + position: relative; + z-index: 1; + } \ No newline at end of file diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css new file mode 100644 index 00000000000..46430cfffe9 --- /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:where([data-interactive='true']):hover { + color: var(--fgColor-default); + background-color: var(--bgColor-neutral-muted); + box-shadow: var(--shadow-resting-medium); + } + + .Token:where([data-is-selected='true']) { + color: var(--fgColor-default); + } + + .Token[data-is-remove-btn='true'] { + padding-right: 0; + } \ No newline at end of file diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css new file mode 100644 index 00000000000..b2775c6c552 --- /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:where([data-cursor-is-interactive='true']) { + cursor: pointer; + } + + .TokenBase:where([data-cursor-is-interactive='false']) { + cursor: auto; + } + + .TokenBase:where([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:where([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; + } \ No newline at end of file From db470ce4f50e6b9696e1e295ae756b3d936ef3eb Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 11:12:59 -0500 Subject: [PATCH 3/6] test --- packages/react/src/Token/AvatarToken.module.css | 3 ++- packages/react/src/Token/IssueLabelToken.module.css | 3 ++- packages/react/src/Token/Token.module.css | 3 ++- packages/react/src/Token/TokenBase.module.css | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css index c594f8e51d8..f3f6ed36fbc 100644 --- a/packages/react/src/Token/AvatarToken.module.css +++ b/packages/react/src/Token/AvatarToken.module.css @@ -33,4 +33,5 @@ .AvatarContainer:where([data-size='xlarge']) { width: calc(32px - var(--spacing)); height: calc(32px - var(--spacing)); - } \ No newline at end of file + } + \ No newline at end of file diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css index d1fffd6fdb1..750e286b2b8 100644 --- a/packages/react/src/Token/IssueLabelToken.module.css +++ b/packages/react/src/Token/IssueLabelToken.module.css @@ -5,4 +5,5 @@ .RemoveButton:where([data-has-multiple-action-targets='true']) { position: relative; z-index: 1; - } \ No newline at end of file + } + \ No newline at end of file diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css index 46430cfffe9..25f9c5cb9cf 100644 --- a/packages/react/src/Token/Token.module.css +++ b/packages/react/src/Token/Token.module.css @@ -18,4 +18,5 @@ .Token[data-is-remove-btn='true'] { padding-right: 0; - } \ No newline at end of file + } + \ No newline at end of file diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css index b2775c6c552..c5314b9e988 100644 --- a/packages/react/src/Token/TokenBase.module.css +++ b/packages/react/src/Token/TokenBase.module.css @@ -57,4 +57,5 @@ font-size: var(--text-body-size-medium); /* stylelint-disable-next-line primer/typography */ line-height: 32px; - } \ No newline at end of file + } + \ No newline at end of file From 55f39adb9a56ff325a403184a45dd1bbdf92a1e5 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 11:18:17 -0500 Subject: [PATCH 4/6] test --- .../react/src/Token/AvatarToken.module.css | 71 ++++++----- .../src/Token/IssueLabelToken.module.css | 15 ++- packages/react/src/Token/Token.module.css | 41 +++--- packages/react/src/Token/TokenBase.module.css | 119 +++++++++--------- 4 files changed, 121 insertions(+), 125 deletions(-) diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css index f3f6ed36fbc..02850e1d52e 100644 --- a/packages/react/src/Token/AvatarToken.module.css +++ b/packages/react/src/Token/AvatarToken.module.css @@ -1,37 +1,36 @@ :root { - --spacing: calc(var(--base-size-4) * 2); - } - - .AvatarContainer { - display: block; - } - - .Avatar { - width: 100%; - height: 100%; - } - - .Token { - padding-left: var(--base-size-4) !important; - } - - .AvatarContainer:where([data-size='small']) { - width: calc(16px - var(--spacing)); - height: calc(16px - var(--spacing)); - } - - .AvatarContainer:where([data-size='medium']) { - width: calc(20px - var(--spacing)); - height: calc(20px - var(--spacing)); - } - - .AvatarContainer:where([data-size='large']) { - width: calc(24px - var(--spacing)); - height: calc(24px - var(--spacing)); - } - - .AvatarContainer:where([data-size='xlarge']) { - width: calc(32px - var(--spacing)); - height: calc(32px - var(--spacing)); - } - \ No newline at end of file + --spacing: calc(var(--base-size-4) * 2); +} + +.AvatarContainer { + display: block; +} + +.Avatar { + width: 100%; + height: 100%; +} + +.Token { + padding-left: var(--base-size-4) !important; +} + +.AvatarContainer:where([data-size='small']) { + width: calc(16px - var(--spacing)); + height: calc(16px - var(--spacing)); +} + +.AvatarContainer:where([data-size='medium']) { + width: calc(20px - var(--spacing)); + height: calc(20px - var(--spacing)); +} + +.AvatarContainer:where([data-size='large']) { + width: calc(24px - var(--spacing)); + height: calc(24px - var(--spacing)); +} + +.AvatarContainer:where([data-size='xlarge']) { + width: calc(32px - var(--spacing)); + height: calc(32px - var(--spacing)); +} diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css index 750e286b2b8..5543c107480 100644 --- a/packages/react/src/Token/IssueLabelToken.module.css +++ b/packages/react/src/Token/IssueLabelToken.module.css @@ -1,9 +1,8 @@ .IssueLabel:where([data-has-remove-button='true']) { - padding-right: 0; - } - - .RemoveButton:where([data-has-multiple-action-targets='true']) { - position: relative; - z-index: 1; - } - \ No newline at end of file + padding-right: 0; +} + +.RemoveButton:where([data-has-multiple-action-targets='true']) { + position: relative; + z-index: 1; +} diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css index 25f9c5cb9cf..0e3299eef08 100644 --- a/packages/react/src/Token/Token.module.css +++ b/packages/react/src/Token/Token.module.css @@ -1,22 +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:where([data-interactive='true']):hover { - color: var(--fgColor-default); - background-color: var(--bgColor-neutral-muted); - box-shadow: var(--shadow-resting-medium); - } - - .Token:where([data-is-selected='true']) { - color: var(--fgColor-default); - } - - .Token[data-is-remove-btn='true'] { - padding-right: 0; - } - \ No newline at end of file + max-width: 100%; + color: var(--fgColor-muted); + background-color: var(--bgColor-neutral-muted); + border-color: var(--borderColor-muted); + border-style: solid; +} + +.Token:where([data-interactive='true']):hover { + color: var(--fgColor-default); + background-color: var(--bgColor-neutral-muted); + box-shadow: var(--shadow-resting-medium); +} + +.Token:where([data-is-selected='true']) { + color: var(--fgColor-default); +} + +.Token[data-is-remove-btn='true'] { + padding-right: 0; +} diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css index c5314b9e988..d8da3654770 100644 --- a/packages/react/src/Token/TokenBase.module.css +++ b/packages/react/src/Token/TokenBase.module.css @@ -1,61 +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:where([data-cursor-is-interactive='true']) { - cursor: pointer; - } - - .TokenBase:where([data-cursor-is-interactive='false']) { - cursor: auto; - } - - .TokenBase:where([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:where([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; - } - \ No newline at end of file + 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:where([data-cursor-is-interactive='true']) { + cursor: pointer; +} + +.TokenBase:where([data-cursor-is-interactive='false']) { + cursor: auto; +} + +.TokenBase:where([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:where([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; +} From 5f0b4f1e296b7378e2d8730e8333623a7a5b4e4b Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 11:48:58 -0500 Subject: [PATCH 5/6] test --- .../react/src/Token/AvatarToken.module.css | 36 ----------- packages/react/src/Token/TokenBase.module.css | 60 ------------------- 2 files changed, 96 deletions(-) delete mode 100644 packages/react/src/Token/AvatarToken.module.css delete mode 100644 packages/react/src/Token/TokenBase.module.css diff --git a/packages/react/src/Token/AvatarToken.module.css b/packages/react/src/Token/AvatarToken.module.css deleted file mode 100644 index 02850e1d52e..00000000000 --- a/packages/react/src/Token/AvatarToken.module.css +++ /dev/null @@ -1,36 +0,0 @@ -:root { - --spacing: calc(var(--base-size-4) * 2); -} - -.AvatarContainer { - display: block; -} - -.Avatar { - width: 100%; - height: 100%; -} - -.Token { - padding-left: var(--base-size-4) !important; -} - -.AvatarContainer:where([data-size='small']) { - width: calc(16px - var(--spacing)); - height: calc(16px - var(--spacing)); -} - -.AvatarContainer:where([data-size='medium']) { - width: calc(20px - var(--spacing)); - height: calc(20px - var(--spacing)); -} - -.AvatarContainer:where([data-size='large']) { - width: calc(24px - var(--spacing)); - height: calc(24px - var(--spacing)); -} - -.AvatarContainer:where([data-size='xlarge']) { - width: calc(32px - var(--spacing)); - height: calc(32px - var(--spacing)); -} diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css deleted file mode 100644 index d8da3654770..00000000000 --- a/packages/react/src/Token/TokenBase.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.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:where([data-cursor-is-interactive='true']) { - cursor: pointer; -} - -.TokenBase:where([data-cursor-is-interactive='false']) { - cursor: auto; -} - -.TokenBase:where([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:where([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; -} From f5bb431c413941c486115fc1431bdafc121a679a Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 6 Dec 2024 12:20:59 -0500 Subject: [PATCH 6/6] test --- packages/react/src/Token/Token.module.css | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 packages/react/src/Token/Token.module.css diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css deleted file mode 100644 index 0e3299eef08..00000000000 --- a/packages/react/src/Token/Token.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.Token { - max-width: 100%; - color: var(--fgColor-muted); - background-color: var(--bgColor-neutral-muted); - border-color: var(--borderColor-muted); - border-style: solid; -} - -.Token:where([data-interactive='true']):hover { - color: var(--fgColor-default); - background-color: var(--bgColor-neutral-muted); - box-shadow: var(--shadow-resting-medium); -} - -.Token:where([data-is-selected='true']) { - color: var(--fgColor-default); -} - -.Token[data-is-remove-btn='true'] { - padding-right: 0; -}