From 917fa562f08270cb2bf34f76d91221e526a1d06f Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 15 Jun 2026 17:20:28 +0200 Subject: [PATCH 1/7] chore: Apply OneTheme styling for tokens --- src/token/dismiss-button.tsx | 7 +++++-- src/token/interfaces.ts | 2 ++ src/token/internal.tsx | 20 ++++++++++++++++--- src/token/mixins.scss | 8 ++++---- src/token/styles.scss | 4 ++++ style-dictionary/classic/borders.ts | 1 + style-dictionary/one-theme/borders.ts | 1 + style-dictionary/utils/token-names.ts | 3 ++- style-dictionary/visual-refresh/borders.ts | 1 + .../visual-refresh/metadata/borders.ts | 5 +++++ 10 files changed, 42 insertions(+), 10 deletions(-) diff --git a/src/token/dismiss-button.tsx b/src/token/dismiss-button.tsx index cc68a85943..a65e78de0e 100644 --- a/src/token/dismiss-button.tsx +++ b/src/token/dismiss-button.tsx @@ -3,6 +3,7 @@ import React, { forwardRef, Ref } from 'react'; import clsx from 'clsx'; +import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal'; import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata'; import InternalIcon from '../icon/internal'; @@ -27,6 +28,7 @@ function DismissButton( { disabled, dismissLabel, onDismiss, readOnly, inline }: DismissButtonProps, ref: Ref ) { + const isOneTheme = isThemeActive(Theme.OneTheme); const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = { action: 'dismiss', detail: { @@ -41,7 +43,8 @@ function DismissButton( styles['dismiss-button'], legacyTestingStyles['dismiss-button'], testUtilStyles['dismiss-button'], - inline && styles['dismiss-button-inline'] + inline && styles['dismiss-button-inline'], + isOneTheme && styles['one-theme'] )} aria-disabled={disabled || readOnly ? true : undefined} onClick={() => { @@ -54,7 +57,7 @@ function DismissButton( aria-label={dismissLabel} {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))} > - + ); } diff --git a/src/token/interfaces.ts b/src/token/interfaces.ts index e768651da6..a6ed154aa4 100644 --- a/src/token/interfaces.ts +++ b/src/token/interfaces.ts @@ -33,6 +33,8 @@ export interface TokenProps extends BaseComponentProps { * When `variant="normal"`, if a description or tags are set, icon size should be `normal`. * * When `variant="inline"`, icon size should be `small`. + * + * For the OneTheme with `variant="inline"`, the icon size will automatically be overridden to `x-small`. */ icon?: React.ReactNode; diff --git a/src/token/internal.tsx b/src/token/internal.tsx index 62aca483af..3a75984352 100644 --- a/src/token/internal.tsx +++ b/src/token/internal.tsx @@ -4,7 +4,13 @@ import React, { useRef, useState } from 'react'; import clsx from 'clsx'; -import { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal'; +import { + isThemeActive, + Theme, + useResizeObserver, + useUniqueId, + warnOnce, +} from '@cloudscape-design/component-toolkit/internal'; import { getBaseProps } from '../internal/base-component'; import Option from '../internal/components/option'; @@ -57,6 +63,7 @@ function InternalToken({ const [showTooltip, setShowTooltip] = useState(false); const [isEllipsisActive, setIsEllipsisActive] = useState(false); const isInline = variant === 'inline'; + const isOneTheme = isThemeActive(Theme.OneTheme); const ariaLabelledbyId = useUniqueId(); const isLabelOverflowing = () => { @@ -74,6 +81,13 @@ function InternalToken({ } }); + const sizedIcon = (iconNode: React.ReactNode) => { + if (isInline && isOneTheme && React.isValidElement(iconNode)) { + return React.cloneElement(iconNode as React.ReactElement<{ size?: string }>, { size: 'x-small' }); + } + return iconNode; + }; + const buildOptionDefinition = () => { const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number'; const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label }; @@ -86,7 +100,7 @@ function InternalToken({ return { ...labelObject, disabled, - __customIcon: icon && {icon}, + __customIcon: icon && {sizedIcon(icon)}, }; } else { return { @@ -95,7 +109,7 @@ function InternalToken({ labelTag, description, tags, - __customIcon: icon && {icon}, + __customIcon: icon && {sizedIcon(icon)}, }; } }; diff --git a/src/token/mixins.scss b/src/token/mixins.scss index 5241de747d..f9c7868a26 100644 --- a/src/token/mixins.scss +++ b/src/token/mixins.scss @@ -42,10 +42,10 @@ display: flex; align-items: center; background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background); - border-start-start-radius: awsui.$space-scaled-xxs; - border-start-end-radius: awsui.$space-scaled-xxs; - border-end-start-radius: awsui.$space-scaled-xxs; - border-end-end-radius: awsui.$space-scaled-xxs; + border-start-start-radius: awsui.$border-radius-token-inline; + border-start-end-radius: awsui.$border-radius-token-inline; + border-end-start-radius: awsui.$border-radius-token-inline; + border-end-end-radius: awsui.$border-radius-token-inline; color: awsui.$color-text-body-default; box-sizing: border-box; max-inline-size: 100%; diff --git a/src/token/styles.scss b/src/token/styles.scss index 17a3d0e544..05811ff339 100644 --- a/src/token/styles.scss +++ b/src/token/styles.scss @@ -54,6 +54,10 @@ align-items: center; align-self: center; } + + &:not(&-inline).one-theme { + padding-block-start: 1px; + } } .icon { diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts index a9e679387d..c6c1ca17b8 100644 --- a/style-dictionary/classic/borders.ts +++ b/style-dictionary/classic/borders.ts @@ -46,6 +46,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderWidthToken: '1px', borderRadiusActionCardDefault: '{borderRadiusCardDefault}', borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}', + borderRadiusTokenInline: '{borderRadiusToken}', borderWidthActionCardDefault: '1px', borderWidthActionCardHover: '1px', borderWidthActionCardActive: '1px', diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts index 400d24818d..33a3e1dd6c 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -37,6 +37,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderRadiusPopover: '4px', borderRadiusTabsFocusRing: '4px', borderRadiusToken: '2px', + borderRadiusTokenInline: '{borderRadiusToken}', borderRadiusTutorialPanelItem: '4px', borderRadiusStatusIndicator: '2px', }; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 428c43a201..d00eeed2ab 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1006,7 +1006,8 @@ export type BordersTokenName = | 'borderWidthActionCardHover' | 'borderWidthActionCardActive' | 'borderWidthActionCardDisabled' - | 'borderWidthBadge'; + | 'borderWidthBadge' + | 'borderRadiusTokenInline'; export type MotionTokenName = | 'motionDurationExtraFast' | 'motionDurationExtraSlow' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 6b80018bff..3544f174fa 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -47,6 +47,7 @@ export const tokens: StyleDictionary.BordersDictionary = { borderRadiusTabsFocusRing: '20px', borderRadiusTiles: '{borderRadiusInput}', borderRadiusToken: '{borderRadiusInput}', + borderRadiusTokenInline: '4px', borderRadiusTutorialPanelItem: '{borderRadiusInput}', borderTableStickyWidth: '1px', borderWidthActionCardActive: '{borderWidthCard}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index b99c8081ae..a26ee2a01b 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -109,6 +109,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderRadiusTokenInline: { + description: 'The border radius of inline tokens. For example: multiselect component.', + public: true, + themeable: true, + }, borderRadiusChatBubble: { description: 'The border radius of chat bubbles.', public: true, From 696123a1ef965c9217ed5faf73159f225796e903 Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 15 Jun 2026 17:20:59 +0200 Subject: [PATCH 2/7] chore: Update snapshots --- .../__snapshots__/themes.test.ts.snap | 8 +++ .../__snapshots__/design-tokens.test.ts.snap | 64 +++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 273312f821..74295a0a58 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -47,6 +47,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", + "border-radius-token-inline": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", "border-width-action-card-active": "1px", @@ -941,6 +942,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", + "border-radius-token-inline": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", "border-width-action-card-active": "1px", @@ -1835,6 +1837,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", + "border-radius-token-inline": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", "border-width-action-card-active": "1px", @@ -2729,6 +2732,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", + "border-radius-token-inline": "2px", "border-radius-tutorial-panel-item": "2px", "border-table-sticky-width": "0px", "border-width-action-card-active": "1px", @@ -3623,6 +3627,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", + "border-radius-token-inline": "4px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", "border-width-action-card-active": "1px", @@ -4517,6 +4522,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", + "border-radius-token-inline": "4px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", "border-width-action-card-active": "1px", @@ -5411,6 +5417,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", + "border-radius-token-inline": "4px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", "border-width-action-card-active": "1px", @@ -6305,6 +6312,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", + "border-radius-token-inline": "4px", "border-radius-tutorial-panel-item": "8px", "border-table-sticky-width": "1px", "border-width-action-card-active": "1px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 4d51a42a90..ea6333a77f 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -89,6 +89,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -3487,6 +3491,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -6885,6 +6893,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -10283,6 +10295,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -13681,6 +13697,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -17079,6 +17099,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -20477,6 +20501,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "2px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "2px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "2px", @@ -23880,6 +23908,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -27278,6 +27310,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -30676,6 +30712,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -34074,6 +34114,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -37472,6 +37516,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -40870,6 +40918,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -44268,6 +44320,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -47666,6 +47722,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", @@ -51064,6 +51124,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.", "$value": "8px", }, + "border-radius-token-inline": { + "$description": "The border radius of inline tokens. For example: multiselect component.", + "$value": "4px", + }, "border-radius-tutorial-panel-item": { "$description": "The border radius of tutorials inside a tutorial panel.", "$value": "8px", From b1521154e607bad897236bd5d96eab8445c90dcf Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 15 Jun 2026 17:55:17 +0200 Subject: [PATCH 3/7] chore: Update documenter test --- .../snapshot-tests/__snapshots__/documenter.test.ts.snap | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index b0666e38ef..9958f935ff 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -32132,7 +32132,9 @@ Defaults to \`normal\` if not specified.", When \`variant="normal"\`, if a description or tags are set, icon size should be \`normal\`. -When \`variant="inline"\`, icon size should be \`small\`.", +When \`variant="inline"\`, icon size should be \`small\`. + +For the OneTheme with \`variant="inline"\`, the icon size will automatically be overridden to \`x-small\`.", "isDefault": false, "name": "icon", }, From b48345810922e3833e9ac928b584ba3e5bc1d8a9 Mon Sep 17 00:00:00 2001 From: at-susie Date: Mon, 15 Jun 2026 19:33:08 +0200 Subject: [PATCH 4/7] chore: Add OneTheme icon size override test for inline variant --- src/token/__tests__/token.test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/token/__tests__/token.test.tsx b/src/token/__tests__/token.test.tsx index 5ca085fe94..97bdb9cd1b 100644 --- a/src/token/__tests__/token.test.tsx +++ b/src/token/__tests__/token.test.tsx @@ -8,6 +8,7 @@ import createWrapper from '../../../lib/components/test-utils/dom'; import Token, { TokenProps } from '../../../lib/components/token'; import InternalToken from '../../../lib/components/token/internal'; +import iconStyles from '../../../lib/components/icon/styles.selectors.js'; import styles from '../../../lib/components/token/styles.selectors.js'; function renderToken(props: TokenProps) { @@ -152,6 +153,22 @@ describe('Token', () => { expect(inlineIcon).toHaveClass(styles.icon); expect(inlineIcon).toHaveClass(styles['icon-inline']); }); + + test('overrides icon size to x-small for inline variant in OneTheme', () => { + document.body.classList.add('awsui-one-theme'); + try { + renderToken({ + label: 'Test token', + variant: 'inline', + icon: , + }); + const iconElement = screen.getByTestId('one-theme-inline-icon'); + expect(iconElement).toHaveClass(iconStyles['size-x-small']); + expect(iconElement).not.toHaveClass(iconStyles['size-normal']); + } finally { + document.body.classList.remove('awsui-one-theme'); + } + }); }); describe('Error handling for inline variants', () => { From c0916185a2362eeca6da9fdb1a0a282e883283e2 Mon Sep 17 00:00:00 2001 From: at-susie Date: Tue, 16 Jun 2026 10:52:48 +0200 Subject: [PATCH 5/7] chore: Refactor One theme icon size override test structure --- src/token/__tests__/token.test.tsx | 31 +++++++++++++++++------------- src/token/interfaces.ts | 2 -- src/token/internal.tsx | 5 +++-- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/token/__tests__/token.test.tsx b/src/token/__tests__/token.test.tsx index 97bdb9cd1b..53d6069da3 100644 --- a/src/token/__tests__/token.test.tsx +++ b/src/token/__tests__/token.test.tsx @@ -153,21 +153,26 @@ describe('Token', () => { expect(inlineIcon).toHaveClass(styles.icon); expect(inlineIcon).toHaveClass(styles['icon-inline']); }); + }); - test('overrides icon size to x-small for inline variant in OneTheme', () => { + describe('One theme', () => { + beforeEach(() => { document.body.classList.add('awsui-one-theme'); - try { - renderToken({ - label: 'Test token', - variant: 'inline', - icon: , - }); - const iconElement = screen.getByTestId('one-theme-inline-icon'); - expect(iconElement).toHaveClass(iconStyles['size-x-small']); - expect(iconElement).not.toHaveClass(iconStyles['size-normal']); - } finally { - document.body.classList.remove('awsui-one-theme'); - } + }); + + afterEach(() => { + document.body.classList.remove('awsui-one-theme'); + }); + + test('overrides icon size to x-small for inline variant in OneTheme', () => { + renderToken({ + label: 'Test token', + variant: 'inline', + icon: , + }); + const iconElement = screen.getByTestId('one-theme-inline-icon'); + expect(iconElement).toHaveClass(iconStyles['size-x-small']); + expect(iconElement).not.toHaveClass(iconStyles['size-normal']); }); }); diff --git a/src/token/interfaces.ts b/src/token/interfaces.ts index a6ed154aa4..e768651da6 100644 --- a/src/token/interfaces.ts +++ b/src/token/interfaces.ts @@ -33,8 +33,6 @@ export interface TokenProps extends BaseComponentProps { * When `variant="normal"`, if a description or tags are set, icon size should be `normal`. * * When `variant="inline"`, icon size should be `small`. - * - * For the OneTheme with `variant="inline"`, the icon size will automatically be overridden to `x-small`. */ icon?: React.ReactNode; diff --git a/src/token/internal.tsx b/src/token/internal.tsx index 3a75984352..8d7bede72e 100644 --- a/src/token/internal.tsx +++ b/src/token/internal.tsx @@ -12,6 +12,7 @@ import { warnOnce, } from '@cloudscape-design/component-toolkit/internal'; +import InternalIcon from '../icon/internal'; import { getBaseProps } from '../internal/base-component'; import Option from '../internal/components/option'; import { TokenInlineContext } from '../internal/context/token-inline-context'; @@ -82,8 +83,8 @@ function InternalToken({ }); const sizedIcon = (iconNode: React.ReactNode) => { - if (isInline && isOneTheme && React.isValidElement(iconNode)) { - return React.cloneElement(iconNode as React.ReactElement<{ size?: string }>, { size: 'x-small' }); + if (isInline && isOneTheme && React.isValidElement(iconNode) && iconNode.type === InternalIcon) { + return React.cloneElement(iconNode, { size: 'x-small' }); } return iconNode; }; From 62764ec32b2a42ecaa1bc6f6862025ab14265a74 Mon Sep 17 00:00:00 2001 From: at-susie Date: Tue, 16 Jun 2026 11:58:17 +0200 Subject: [PATCH 6/7] chore: Update documenter test --- .../snapshot-tests/__snapshots__/documenter.test.ts.snap | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 9958f935ff..b0666e38ef 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -32132,9 +32132,7 @@ Defaults to \`normal\` if not specified.", When \`variant="normal"\`, if a description or tags are set, icon size should be \`normal\`. -When \`variant="inline"\`, icon size should be \`small\`. - -For the OneTheme with \`variant="inline"\`, the icon size will automatically be overridden to \`x-small\`.", +When \`variant="inline"\`, icon size should be \`small\`.", "isDefault": false, "name": "icon", }, From 19452a85a2445ca7401c1d00f2ca5faf318c0366 Mon Sep 17 00:00:00 2001 From: at-susie Date: Tue, 16 Jun 2026 14:32:13 +0200 Subject: [PATCH 7/7] chore: Add one-theme-only mixin for scoped theme styling --- src/internal/styles/utils/theming.scss | 6 ++++++ src/token/dismiss-button.tsx | 3 +-- src/token/styles.scss | 7 +++++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/internal/styles/utils/theming.scss b/src/internal/styles/utils/theming.scss index 661b6ed42c..3f09728125 100644 --- a/src/internal/styles/utils/theming.scss +++ b/src/internal/styles/utils/theming.scss @@ -11,3 +11,9 @@ } } } + +@mixin one-theme-only($selector: '') { + :global(#{$selector}.awsui-one-theme) & { + @content; + } +} diff --git a/src/token/dismiss-button.tsx b/src/token/dismiss-button.tsx index a65e78de0e..708420890f 100644 --- a/src/token/dismiss-button.tsx +++ b/src/token/dismiss-button.tsx @@ -43,8 +43,7 @@ function DismissButton( styles['dismiss-button'], legacyTestingStyles['dismiss-button'], testUtilStyles['dismiss-button'], - inline && styles['dismiss-button-inline'], - isOneTheme && styles['one-theme'] + inline && styles['dismiss-button-inline'] )} aria-disabled={disabled || readOnly ? true : undefined} onClick={() => { diff --git a/src/token/styles.scss b/src/token/styles.scss index 05811ff339..93f189d319 100644 --- a/src/token/styles.scss +++ b/src/token/styles.scss @@ -10,6 +10,7 @@ @use '../internal/generated/custom-css-properties/index.scss' as custom-props; @use './constants' as constants; @use './mixins.scss' as mixins; +@use '../internal/styles/utils/theming' as theming; .root { @include styles.styles-reset; @@ -55,8 +56,10 @@ align-self: center; } - &:not(&-inline).one-theme { - padding-block-start: 1px; + &:not(&-inline) { + @include theming.one-theme-only { + padding-block-start: 1px; + } } }