From 85a0d46e73207c3f2441181a18bb1701eec13ebe Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Fri, 8 Nov 2024 19:00:09 +0000 Subject: [PATCH 1/9] Migrate container and remove button to CSS modules --- .../src/Token/_RemoveTokenButton.module.css | 52 +++++++ .../react/src/Token/_RemoveTokenButton.tsx | 131 +++++++++++------- .../src/Token/_TokenTextContainer.module.css | 46 ++++++ .../react/src/Token/_TokenTextContainer.tsx | 101 ++++++++------ 4 files changed, 243 insertions(+), 87 deletions(-) create mode 100644 packages/react/src/Token/_RemoveTokenButton.module.css create mode 100644 packages/react/src/Token/_TokenTextContainer.module.css diff --git a/packages/react/src/Token/_RemoveTokenButton.module.css b/packages/react/src/Token/_RemoveTokenButton.module.css new file mode 100644 index 00000000000..e096d4cc429 --- /dev/null +++ b/packages/react/src/Token/_RemoveTokenButton.module.css @@ -0,0 +1,52 @@ +.TokenButton { + display: inline-flex; + padding: 0; + margin-left: var(--base-size-4); + font-family: inherit; + color: currentColor; + text-decoration: none; + cursor: pointer; + user-select: none; + background-color: transparent; + border: 0; + border-radius: var(--borderRadius-full); + justify-content: center; + align-items: center; + appearance: none; + align-self: baseline; +} + +.TokenButton[data-size='small'] { + width: 16px; + height: 16px; +} + +.TokenButton[data-size='medium'] { + width: 20px; + height: 20px; +} + +.TokenButton[data-size='large'] { + width: 24px; + height: 24px; +} + +.TokenButton[data-size='xlarge'] { + width: 32px; + height: 32px; +} + +.Bigger { + margin-left: var(--base-size-8); +} + +.TokenButton:hover, +.TokenButton:focus { + /* TODO: choose a better functional color variable for this */ + background-color: var(--bgColor-neutral-muted); +} + +.TokenButton:active { + /* TODO: choose a better functional color variable for this */ + background-color: var(--bgColor-neutral-muted); +} \ No newline at end of file diff --git a/packages/react/src/Token/_RemoveTokenButton.tsx b/packages/react/src/Token/_RemoveTokenButton.tsx index d5d5784957d..b868dcbb62f 100644 --- a/packages/react/src/Token/_RemoveTokenButton.tsx +++ b/packages/react/src/Token/_RemoveTokenButton.tsx @@ -2,19 +2,24 @@ import React from 'react' import {XIcon} from '@primer/octicons-react' import styled, {css} 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 {ComponentProps} from '../utils/types' +import sx, {type SxProp} from '../sx' import type {TokenSizeKeys} from './TokenBase' import {tokenSizes, defaultTokenSize} from './TokenBase' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' -interface TokenButtonProps { +import classes from './_RemoveTokenButton.module.css' + +interface TokenButtonProps extends SxProp { borderOffset?: number size?: TokenSizeKeys isParentInteractive?: boolean } +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + const variants = variant<{height: string; width: string}, TokenSizeKeys>({ prop: 'size', variants: { @@ -39,66 +44,88 @@ const variants = variant<{height: string; width: string}, TokenSizeKeys>({ const getTokenButtonIconSize = (size?: TokenSizeKeys) => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75 -const StyledTokenButton = styled.span` - background-color: transparent; - font-family: inherit; - color: currentColor; - cursor: pointer; - display: inline-flex; - justify-content: center; - align-items: center; - user-select: none; - appearance: none; - text-decoration: none; - padding: 0; - transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`}; - align-self: baseline; - border: 0; - border-radius: 999px; - - ${props => { - switch (props.size) { - case 'large': - case 'xlarge': - return css` - margin-left: ${get('space.2')}; - ` - default: - return css` - margin-left: ${get('space.1')}; - ` +const StyledTokenButton = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + background-color: transparent; + font-family: inherit; + color: currentColor; + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + user-select: none; + appearance: none; + text-decoration: none; + padding: 0; + transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`}; + align-self: baseline; + border: 0; + border-radius: 999px; + + ${props => { + switch (props.size) { + case 'large': + case 'xlarge': + return css` + margin-left: ${get('space.2')}; + ` + default: + return css` + margin-left: ${get('space.1')}; + ` + } + }} + + &:hover, + &:focus { + // TODO: choose a better functional color variable for this + background-color: ${get('colors.neutral.muted')}; } - }} - &:hover, - &:focus { - // TODO: choose a better functional color variable for this - background-color: ${get('colors.neutral.muted')}; - } + &:active { + // TODO: choose a better functional color variable for this + background-color: ${get('colors.neutral.subtle')}; + } - &:active { - // TODO: choose a better functional color variable for this - background-color: ${get('colors.neutral.subtle')}; - } + ${variants} + ${sx} + `, +) - ${variants} - ${sx} -` +type RemoveTokenButtonProps = TokenButtonProps & Omit, 'size'> -const RemoveTokenButton: React.FC>> = ({ +const RemoveTokenButton = ({ 'aria-label': ariaLabel, isParentInteractive, size = defaultTokenSize, + className, ...rest -}) => { +}: React.PropsWithChildren) => { delete rest.children + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( @@ -106,4 +133,14 @@ const RemoveTokenButton: React.FC or