Skip to content

Commit 4ab4846

Browse files
caseyisonitcaseyisonit
committed
chore: minor clean up across components
1 parent 71f2b4e commit 4ab4846

10 files changed

Lines changed: 98 additions & 64 deletions

File tree

‎2nd-gen/packages/core/components/asset/Asset.base.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export abstract class AssetBase extends SpectrumElement {
4444
/**
4545
* Accessible label for the asset’s file or folder variant.
4646
*/
47-
@property()
47+
@property({ type: String })
4848
public label = '';
4949

5050
// ──────────────────────

‎2nd-gen/packages/core/components/icon/Icon.base.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export abstract class IconBase extends SizedMixin(SpectrumElement, {
3333
/**
3434
* Accessible label for the icon.
3535
*/
36-
@property()
36+
@property({ type: String })
3737
public label = '';
3838

3939
@queryAssignedElements({ flatten: true })

‎2nd-gen/packages/core/components/status-light/StatusLight.base.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { SpectrumElement } from '@spectrum-web-components/core/element/index.js'
1616
import { SizedMixin } from '@spectrum-web-components/core/mixins/index.js';
1717

1818
import {
19-
STATUSLIGHT_VALID_SIZES,
19+
STATUS_LIGHT_VALID_SIZES,
2020
type StatusLightVariant,
2121
} from './StatusLight.types.js';
2222

@@ -27,7 +27,7 @@ import {
2727
* @attribute {ElementSize} size - The size of the status light.
2828
*/
2929
export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
30-
validSizes: STATUSLIGHT_VALID_SIZES,
30+
validSizes: STATUS_LIGHT_VALID_SIZES,
3131
noDefaultSize: true,
3232
}) {
3333
// ─────────────────────────

‎2nd-gen/packages/core/components/status-light/StatusLight.types.ts‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,24 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
/**
14-
* @todo Rename STATUSLIGHT_ prefix to STATUS_LIGHT_ to align with type prefix
15-
* naming convention (use underscore separators for multi-word names).
16-
*/
1713
import type { ElementSize } from '@spectrum-web-components/core/mixins/index.js';
1814

19-
export const STATUSLIGHT_VALID_SIZES = [
15+
export const STATUS_LIGHT_VALID_SIZES = [
2016
's',
2117
'm',
2218
'l',
2319
'xl',
2420
] as const satisfies readonly ElementSize[];
2521

26-
export const STATUSLIGHT_VARIANTS_SEMANTIC = [
22+
export const STATUS_LIGHT_VARIANTS_SEMANTIC = [
2723
'neutral',
2824
'info',
2925
'positive',
3026
'negative',
3127
'notice',
3228
] as const;
3329

34-
export const STATUSLIGHT_VARIANTS_COLOR = [
30+
export const STATUS_LIGHT_VARIANTS_COLOR = [
3531
'fuchsia',
3632
'indigo',
3733
'magenta',
@@ -48,15 +44,15 @@ export const STATUSLIGHT_VARIANTS_COLOR = [
4844
'silver',
4945
] as const;
5046

51-
export const STATUSLIGHT_VARIANTS = [
52-
...STATUSLIGHT_VARIANTS_SEMANTIC,
53-
...STATUSLIGHT_VARIANTS_COLOR,
47+
export const STATUS_LIGHT_VARIANTS = [
48+
...STATUS_LIGHT_VARIANTS_SEMANTIC,
49+
...STATUS_LIGHT_VARIANTS_COLOR,
5450
] as const;
5551

5652
export type StatusLightSemanticVariant =
57-
(typeof STATUSLIGHT_VARIANTS_SEMANTIC)[number];
53+
(typeof STATUS_LIGHT_VARIANTS_SEMANTIC)[number];
5854

5955
export type StatusLightColorVariant =
60-
(typeof STATUSLIGHT_VARIANTS_COLOR)[number];
56+
(typeof STATUS_LIGHT_VARIANTS_COLOR)[number];
6157

62-
export type StatusLightVariant = (typeof STATUSLIGHT_VARIANTS)[number];
58+
export type StatusLightVariant = (typeof STATUS_LIGHT_VARIANTS)[number];

‎2nd-gen/packages/swc/components/avatar/Avatar.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ import styles from './avatar.css';
3636
* <swc-avatar src="/path/to/image.jpg" alt="Jane Doe" outline></swc-avatar>
3737
*/
3838
export class Avatar extends AvatarBase {
39+
// ──────────────────────────────
40+
// RENDERING & STYLING
41+
// ──────────────────────────────
42+
3943
public static override get styles(): CSSResultArray {
4044
return [styles];
4145
}

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

Lines changed: 67 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,9 @@ export default {
108108
excludeStories: ['meta'],
109109
} as Meta;
110110

111-
// ────────────────
112-
// STORIES
113-
// ────────────────
111+
// ────────────────────
112+
// HELPERS
113+
// ────────────────────
114114

115115
const PLACEHOLDER_SRC = 'https://picsum.photos/id/64/500/500';
116116

@@ -121,18 +121,18 @@ const PLACEHOLDER_SRC = 'https://picsum.photos/id/64/500/500';
121121
// alt ?? '' guards against undefined produced by Storybook controls when
122122
// the user clears the alt field. Explicit stories use typed args that are always defined.
123123
export const Playground: Story = {
124-
render: ({ src, alt, size, outline, disabled }) => html`
124+
render: (args) => html`
125125
<div
126-
style=${outline
126+
style=${args.outline
127127
? 'padding:16px;background:linear-gradient(to right,rgb(15,23,42),rgb(51,65,85));border-radius:8px;'
128128
: ''}
129129
>
130130
<swc-avatar
131-
src=${src}
132-
alt=${alt ?? ''}
133-
size=${size}
134-
?outline=${outline}
135-
?disabled=${disabled}
131+
src=${args.src}
132+
alt=${args.alt ?? ''}
133+
size=${args.size}
134+
?outline=${args.outline}
135+
?disabled=${args.disabled}
136136
></swc-avatar>
137137
</div>
138138
`,
@@ -147,13 +147,11 @@ export const Playground: Story = {
147147
};
148148

149149
// ──────────────────────────
150-
// OVERVIEW STORY
150+
// OVERVIEW STORIES
151151
// ──────────────────────────
152152

153153
export const Overview: Story = {
154-
render: ({ src, alt, size }) => html`
155-
<swc-avatar src=${src} alt=${alt} size=${size}></swc-avatar>
156-
`,
154+
render: (args) => template({ ...args }),
157155
tags: ['overview'],
158156
args: {
159157
src: PLACEHOLDER_SRC,
@@ -178,9 +176,14 @@ export const Overview: Story = {
178176
* - `size`: Numeric size token (50–1500). Defaults to `500` (40 px).
179177
*/
180178
export const Anatomy: Story = {
181-
render: () => html`
182-
<swc-avatar src=${PLACEHOLDER_SRC} alt="Jane Doe" size="500"></swc-avatar>
179+
render: (args) => html`
180+
<swc-avatar src=${args.src} alt=${args.alt} size=${args.size}></swc-avatar>
183181
`,
182+
args: {
183+
src: PLACEHOLDER_SRC,
184+
alt: 'Jane Doe',
185+
size: '500',
186+
},
184187
tags: ['anatomy'],
185188
};
186189

@@ -195,17 +198,20 @@ export const Anatomy: Story = {
195198
* The default size is `500` (40 px).
196199
*/
197200
export const Sizes: Story = {
198-
render: () => html`
201+
render: (args) => html`
199202
${AVATAR_VALID_SIZES.map(
200203
(size) => html`
201204
<swc-avatar
202-
src=${PLACEHOLDER_SRC}
205+
src=${args.src}
203206
alt="Jane Doe, size ${size}"
204207
size=${size}
205208
></swc-avatar>
206209
`
207210
)}
208211
`,
212+
args: {
213+
src: PLACEHOLDER_SRC,
214+
},
209215
parameters: {
210216
flexLayout: 'row-wrap',
211217
'section-order': 1,
@@ -221,15 +227,19 @@ export const Sizes: Story = {
221227
* (e.g., their name appears next to the avatar).
222228
*/
223229
export const Decorative: Story = {
224-
render: () => html`
230+
render: (args) => html`
225231
<swc-avatar
226-
src=${PLACEHOLDER_SRC}
232+
src=${args.src}
227233
alt=""
228-
size="500"
234+
size=${args.size}
229235
decorative
230236
></swc-avatar>
231237
Jane Doe
232238
`,
239+
args: {
240+
src: PLACEHOLDER_SRC,
241+
size: '500',
242+
},
233243
parameters: { 'section-order': 2 },
234244
tags: ['options'],
235245
};
@@ -246,15 +256,24 @@ export const Decorative: Story = {
246256
* migrated to 2nd-gen.
247257
*/
248258
export const InActionButton: Story = {
249-
render: () => html`
259+
render: (args) => html`
250260
<button
251261
type="button"
252262
style="display:inline-flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;"
253263
>
254-
<swc-avatar src=${PLACEHOLDER_SRC} alt="Jane Doe" size="100"></swc-avatar>
264+
<swc-avatar
265+
src=${args.src}
266+
alt=${args.alt}
267+
size=${args.size}
268+
></swc-avatar>
255269
Jane Doe
256270
</button>
257271
`,
272+
args: {
273+
src: PLACEHOLDER_SRC,
274+
alt: 'Jane Doe',
275+
size: '100',
276+
},
258277
tags: ['behaviors'],
259278
};
260279

@@ -267,24 +286,28 @@ export const InActionButton: Story = {
267286
* defaults to `true` to visually separate stacked avatars.
268287
*/
269288
export const Outline: Story = {
270-
render: () => html`
289+
render: (args) => html`
271290
<div
272291
style="display:inline-flex;gap:8px;align-items:center;padding:16px;background:linear-gradient(to right,rgb(15,23,42),rgb(51,65,85));border-radius:8px;"
273292
>
274293
<swc-avatar
275-
src=${PLACEHOLDER_SRC}
276-
alt="Jane Doe"
294+
src=${args.src}
295+
alt=${args.alt}
277296
size="500"
278297
outline
279298
></swc-avatar>
280299
<swc-avatar
281-
src=${PLACEHOLDER_SRC}
282-
alt="Jane Doe"
300+
src=${args.src}
301+
alt=${args.alt}
283302
size="1000"
284303
outline
285304
></swc-avatar>
286305
</div>
287306
`,
307+
args: {
308+
src: PLACEHOLDER_SRC,
309+
alt: 'Jane Doe',
310+
},
288311
parameters: { 'section-order': 3 },
289312
tags: ['options'],
290313
};
@@ -296,14 +319,19 @@ export const Outline: Story = {
296319
* accessibility tree — `disabled` is purely visual.
297320
*/
298321
export const Disabled: Story = {
299-
render: () => html`
322+
render: (args) => html`
300323
<swc-avatar
301-
src=${PLACEHOLDER_SRC}
302-
alt="Jane Doe"
303-
size="500"
324+
src=${args.src}
325+
alt=${args.alt}
326+
size=${args.size}
304327
disabled
305328
></swc-avatar>
306329
`,
330+
args: {
331+
src: PLACEHOLDER_SRC,
332+
alt: 'Jane Doe',
333+
size: '500',
334+
},
307335
parameters: { 'section-order': 4 },
308336
tags: ['options'],
309337
};
@@ -329,9 +357,13 @@ export const Disabled: Story = {
329357
* - Keep alt text short and descriptive: prefer `"Jane Doe"` over `"Profile photo of Jane Doe"`
330358
*/
331359
export const Accessibility: Story = {
332-
render: () => html`
333-
<swc-avatar src=${PLACEHOLDER_SRC} alt="Jane Doe" size="500"></swc-avatar>
334-
<swc-avatar src=${PLACEHOLDER_SRC} alt="" size="500"></swc-avatar>
360+
render: (args) => html`
361+
<swc-avatar src=${args.src} alt="Jane Doe" size=${args.size}></swc-avatar>
362+
<swc-avatar src=${args.src} alt="" size=${args.size}></swc-avatar>
335363
`,
364+
args: {
365+
src: PLACEHOLDER_SRC,
366+
size: '500',
367+
},
336368
tags: ['a11y'],
337369
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,7 @@ export const TextWrapping: Story = {
444444
`,
445445
tags: ['behaviors'],
446446
};
447+
447448
// ────────────────────────────────
448449
// ACCESSIBILITY STORIES
449450
// ────────────────────────────────

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const meta: Meta = {
6060
subtitle: `Internal icon renderer for shared SVG templates.`,
6161
},
6262
},
63+
tags: ['migrated'],
6364
};
6465

6566
export default meta;

‎2nd-gen/packages/swc/components/status-light/StatusLight.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import { property } from 'lit/decorators.js';
1515
import { classMap } from 'lit/directives/class-map.js';
1616

1717
import {
18-
STATUSLIGHT_VARIANTS,
19-
STATUSLIGHT_VARIANTS_COLOR,
20-
STATUSLIGHT_VARIANTS_SEMANTIC,
18+
STATUS_LIGHT_VARIANTS,
19+
STATUS_LIGHT_VARIANTS_COLOR,
20+
STATUS_LIGHT_VARIANTS_SEMANTIC,
2121
StatusLightBase,
2222
type StatusLightVariant,
2323
} from '@spectrum-web-components/core/components/status-light';
@@ -47,17 +47,17 @@ export class StatusLight extends StatusLightBase {
4747
/**
4848
* @internal
4949
*/
50-
static override readonly VARIANTS_COLOR = STATUSLIGHT_VARIANTS_COLOR;
50+
static override readonly VARIANTS_COLOR = STATUS_LIGHT_VARIANTS_COLOR;
5151

5252
/**
5353
* @internal
5454
*/
55-
static override readonly VARIANTS_SEMANTIC = STATUSLIGHT_VARIANTS_SEMANTIC;
55+
static override readonly VARIANTS_SEMANTIC = STATUS_LIGHT_VARIANTS_SEMANTIC;
5656

5757
/**
5858
* @internal
5959
*/
60-
static override readonly VARIANTS = STATUSLIGHT_VARIANTS;
60+
static override readonly VARIANTS = STATUS_LIGHT_VARIANTS;
6161

6262
/**
6363
* Changes the color of the status dot. The variant list includes both semantic and non-semantic options.

0 commit comments

Comments
 (0)