Skip to content

Commit 3287a71

Browse files
cdransfcdransf
committed
chore(icons): repoint ui icon consumers
1 parent 018f8a9 commit 3287a71

10 files changed

Lines changed: 317 additions & 100 deletions

File tree

‎2nd-gen/packages/swc/.storybook/helpers/icon-for-size.ts‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎2nd-gen/packages/swc/.storybook/helpers/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
export { createPermutations } from './create-permutations.js';
1414
export type { ComponentPermutations } from './create-permutations.js';
1515
export { formatTitle } from './format-title.js';
16-
export { iconForSize } from './icon-for-size.js';
1716
export { forcePseudoState } from './pseudo-state.js';
1817
export type { ForcedPseudoState } from './pseudo-state.js';
1918
export {

‎2nd-gen/packages/swc/components/badge/stories/badge.stories.ts‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,11 @@ import {
3030
import '@adobe/spectrum-wc/components/badge/swc-badge.js';
3131
import '@adobe/spectrum-wc/components/icon/swc-icon.js';
3232

33-
import { iconForSize } from '../../../.storybook/helpers/index.js';
34-
import * as Icons from '../../icon/elements/index.js';
33+
import {
34+
AlertIcon,
35+
Checkmark100Icon,
36+
Cross100Icon,
37+
} from '../../icon/elements/index.js';
3538

3639
// ────────────────
3740
// METADATA
@@ -75,9 +78,8 @@ argTypes['icon-slot'] = {
7578
options: [undefined, 'Checkmark', 'Cross', 'Alert'],
7679
description:
7780
'Select a named icon to display in the icon slot. The control maps each name to ' +
78-
'the correct size-paired icon element via the shared `iconForSize` helper. Only ' +
79-
'UI icons currently available in 2nd-gen are offered. The full workflow icon set ' +
80-
'is not yet ported.',
81+
'an inline demo SVG wrapped in `<swc-icon>`, standing in for the workflow icon ' +
82+
'package, which is not yet ported.',
8183
};
8284

8385
argTypes.outline = {
@@ -128,6 +130,17 @@ export default meta;
128130
// HELPERS
129131
// ────────────────────
130132

133+
// Demo icons standing in for the (not yet ported) workflow icon package. Reuse
134+
// the medium-step art from icon/elements (single source of truth for this
135+
// path data) but render it as one asset scaled to the `<swc-icon>` size box,
136+
// matching how a real workflow icon behaves (icon-rfc.md, section 7) rather
137+
// than swapping discrete per-step assets.
138+
const BADGE_DEMO_ICONS = {
139+
Checkmark: Checkmark100Icon(),
140+
Cross: Cross100Icon(),
141+
Alert: AlertIcon(),
142+
};
143+
131144
const sizeLabels = {
132145
s: 'Small',
133146
m: 'Medium',
@@ -194,10 +207,10 @@ export const Playground: Story = {
194207
?outline=${args.outline}
195208
fixed=${args.fixed ?? nothing}
196209
>
197-
${iconKey
210+
${iconKey && iconKey in BADGE_DEMO_ICONS
198211
? html`
199212
<swc-icon size=${size} slot="icon" aria-hidden="true">
200-
${iconForSize(Icons, iconKey, size)}
213+
${BADGE_DEMO_ICONS[iconKey as keyof typeof BADGE_DEMO_ICONS]}
201214
</swc-icon>
202215
`
203216
: nothing}
@@ -242,12 +255,12 @@ export const Anatomy: Story = {
242255
aria-label="Checkmark"
243256
>
244257
<swc-icon size=${size} slot="icon">
245-
${iconForSize(Icons, 'Checkmark', size)}
258+
${BADGE_DEMO_ICONS.Checkmark}
246259
</swc-icon>
247260
</swc-badge>
248261
<swc-badge variant=${args.variant} size=${size}>
249262
<swc-icon size=${size} slot="icon">
250-
${iconForSize(Icons, 'Checkmark', size)}
263+
${BADGE_DEMO_ICONS.Checkmark}
251264
</swc-icon>
252265
Icon and label
253266
</swc-badge>
@@ -272,7 +285,7 @@ export const Sizes: Story = {
272285
(size) => html`
273286
<swc-badge variant=${args.variant} size=${size}>
274287
<swc-icon size=${size} slot="icon">
275-
${iconForSize(Icons, 'Checkmark', size)}
288+
${BADGE_DEMO_ICONS.Checkmark}
276289
</swc-icon>
277290
${sizeLabels[size]}
278291
</swc-badge>
@@ -302,7 +315,7 @@ export const Sizes: Story = {
302315
aria-label=${sizeLabels[size]}
303316
>
304317
<swc-icon size=${size} slot="icon">
305-
${iconForSize(Icons, 'Checkmark', size)}
318+
${BADGE_DEMO_ICONS.Checkmark}
306319
</swc-icon>
307320
</swc-badge>
308321
`
@@ -489,7 +502,7 @@ export const Accessibility: Story = {
489502
<!-- Icon + text: icon is decorative, aria-hidden="true" hides it from assistive technology -->
490503
<swc-badge variant="positive" size=${args.size}>
491504
<swc-icon size=${args.size} slot="icon" aria-hidden="true">
492-
${iconForSize(Icons, 'Checkmark', args.size)}
505+
${BADGE_DEMO_ICONS.Checkmark}
493506
</swc-icon>
494507
Approved
495508
</swc-badge>
@@ -502,7 +515,7 @@ export const Accessibility: Story = {
502515
aria-label="Approved"
503516
>
504517
<swc-icon size=${args.size} slot="icon">
505-
${iconForSize(Icons, 'Checkmark', args.size)}
518+
${BADGE_DEMO_ICONS.Checkmark}
506519
</swc-icon>
507520
</swc-badge>
508521
`,

‎2nd-gen/packages/swc/components/close-button/CloseButton.ts‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,13 @@ import { ifDefined } from 'lit/directives/if-defined.js';
1717
import {
1818
BUTTON_STATIC_COLORS,
1919
ButtonBase,
20-
type ButtonSize,
2120
type ButtonStaticColor,
2221
} from '@adobe/spectrum-wc-core/components/button';
2322

24-
import {
25-
Cross200Icon,
26-
Cross300Icon,
27-
Cross400Icon,
28-
Cross500Icon,
29-
} from '../icon/elements/index.js';
23+
import '../ui-icons/swc-ui-icon.js';
3024

3125
import styles from './close-button.css';
3226

33-
const crossIconBySize: Record<ButtonSize, () => TemplateResult> = {
34-
s: Cross200Icon,
35-
m: Cross300Icon,
36-
l: Cross400Icon,
37-
xl: Cross500Icon,
38-
};
39-
4027
/**
4128
* A compact dismiss control for dialogs, banners, toasts, and similar chrome.
4229
*
@@ -109,7 +96,7 @@ export class CloseButton extends ButtonBase {
10996
aria-label=${ifDefined(this.accessibleLabel ?? undefined)}
11097
>
11198
<span class="swc-CloseButton-icon" aria-hidden="true">
112-
${crossIconBySize[this.size as ButtonSize]()}
99+
<swc-ui-icon icon="cross" size=${this.size}></swc-ui-icon>
113100
</span>
114101
</button>
115102
`;

‎2nd-gen/packages/swc/components/close-button/close-button.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,10 @@
7979
block-size: var(--swc-close-button-icon-size, token("ui-icon-large"));
8080
}
8181

82-
.swc-CloseButton-icon svg {
82+
.swc-CloseButton-icon swc-ui-icon {
8383
display: block;
8484
inline-size: 100%;
8585
block-size: 100%;
86-
fill: currentcolor;
8786
}
8887

8988
:host([size="s"]) {

‎2nd-gen/packages/swc/components/close-button/test/vrt/close-button-custom-properties.vrt.ts‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/**
2+
* Copyright 2026 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import { html, nothing } from 'lit';
14+
import type { Meta, StoryObj as Story } from '@storybook/web-components';
15+
16+
import '@adobe/spectrum-wc/components/close-button/swc-close-button.js';
17+
18+
import type {
19+
CustomPropertyCase,
20+
ForcedPseudoState,
21+
} from '../../../../.storybook/helpers/index.js';
22+
import {
23+
coveredCustomProperties,
24+
customPropertyRows,
25+
forcePseudoStates,
26+
theme,
27+
verifyCustomPropertyCoverage,
28+
vrtParameters,
29+
} from '../../../../.storybook/helpers/index.js';
30+
import customElementsManifest from '../../../../dist/custom-elements.json';
31+
32+
// Metadata
33+
34+
const meta: Meta = {
35+
title: 'Close Button/Close Button VRT',
36+
component: 'swc-close-button',
37+
tags: ['dev'],
38+
};
39+
40+
export default meta;
41+
42+
// Helpers
43+
44+
const forceCloseButtonStates = forcePseudoStates(
45+
'swc-close-button[data-force-state]',
46+
'.swc-CloseButton'
47+
);
48+
49+
// Every `--swc-close-button-*` custom property is a public contract:
50+
// consumers override these directly, so a future CSS refactor that quietly
51+
// drops one would be a breaking change. One row per property: a reference
52+
// close button next to the same button with that one property overridden to
53+
// an obviously different value, so a real difference confirms the override
54+
// still works.
55+
type ModPropertyCase = CustomPropertyCase<`--swc-close-button-${string}`> & {
56+
forceState?: ForcedPseudoState;
57+
disabled?: boolean;
58+
};
59+
60+
const MOD_PROPERTY_CASES: readonly ModPropertyCase[] = [
61+
{ property: '--swc-close-button-size', value: '64px' },
62+
{ property: '--swc-close-button-icon-size', value: '40px' },
63+
{ property: '--swc-close-button-icon-color-default', value: 'magenta' },
64+
{
65+
property: '--swc-close-button-icon-color-hover',
66+
value: 'magenta',
67+
forceState: 'hover',
68+
},
69+
{
70+
property: '--swc-close-button-icon-color-down',
71+
value: 'magenta',
72+
forceState: 'active',
73+
},
74+
{
75+
property: '--swc-close-button-icon-color-focus',
76+
value: 'magenta',
77+
forceState: 'focus-visible',
78+
},
79+
{
80+
property: '--swc-close-button-icon-color-disabled',
81+
value: 'magenta',
82+
disabled: true,
83+
},
84+
{ property: '--swc-close-button-background-color-default', value: 'magenta' },
85+
{
86+
property: '--swc-close-button-background-color-hover',
87+
value: 'magenta',
88+
forceState: 'hover',
89+
},
90+
{
91+
property: '--swc-close-button-background-color-down',
92+
value: 'magenta',
93+
forceState: 'active',
94+
},
95+
{
96+
property: '--swc-close-button-background-color-focus',
97+
value: 'magenta',
98+
forceState: 'focus-visible',
99+
},
100+
{
101+
property: '--swc-close-button-focus-indicator-color',
102+
value: 'magenta',
103+
forceState: 'focus-visible',
104+
},
105+
];
106+
107+
const modPropertyCloseButton = (
108+
{ forceState, disabled }: ModPropertyCase,
109+
style?: string
110+
) => html`
111+
<swc-close-button
112+
accessible-label="Close"
113+
?disabled=${disabled}
114+
data-force-state=${forceState ?? nothing}
115+
style=${style ?? nothing}
116+
></swc-close-button>
117+
`;
118+
119+
const modPropertiesContent = () =>
120+
customPropertyRows(MOD_PROPERTY_CASES, modPropertyCloseButton);
121+
122+
const coveredCloseButtonCustomProperties =
123+
coveredCustomProperties(MOD_PROPERTY_CASES);
124+
125+
const forceStatesAndVerifyCoverage = async (
126+
context: Parameters<ReturnType<typeof forcePseudoStates>>[0]
127+
) => {
128+
await forceCloseButtonStates(context);
129+
await verifyCustomPropertyCoverage({
130+
customElementsManifest,
131+
modulePath: 'components/close-button/CloseButton.ts',
132+
declarationName: 'CloseButton',
133+
coveredProperties: coveredCloseButtonCustomProperties,
134+
});
135+
};
136+
137+
// VRT stories
138+
139+
export const CustomProperties: Story = {
140+
render: () => theme(modPropertiesContent(), 'light', 'ltr'),
141+
parameters: vrtParameters,
142+
play: forceStatesAndVerifyCoverage,
143+
};

0 commit comments

Comments
 (0)