diff --git a/2nd-gen/packages/core/components/alert-banner/AlertBanner.types.ts b/2nd-gen/packages/core/components/alert-banner/AlertBanner.types.ts
index 43c94a553e9..865a30e0184 100644
--- a/2nd-gen/packages/core/components/alert-banner/AlertBanner.types.ts
+++ b/2nd-gen/packages/core/components/alert-banner/AlertBanner.types.ts
@@ -19,9 +19,3 @@ export const ALERT_BANNER_VALID_VARIANTS = [
export type AlertBannerVariant =
| (typeof ALERT_BANNER_VALID_VARIANTS)[number]
| '';
-
-/**
- * @deprecated Use `AlertBannerVariant` instead.
- * Kept as `string` for backward compatibility with 1st-gen.
- */
-export type AlertBannerVariants = string;
diff --git a/2nd-gen/packages/core/components/badge/Badge.base.ts b/2nd-gen/packages/core/components/badge/Badge.base.ts
index f6287ed1a0b..d63c1122fee 100644
--- a/2nd-gen/packages/core/components/badge/Badge.base.ts
+++ b/2nd-gen/packages/core/components/badge/Badge.base.ts
@@ -106,6 +106,20 @@ export abstract class BadgeBase extends SizedMixin(
@property({ type: String, reflect: true })
public fixed?: FixedValues;
+ /**
+ * Whether the badge is subtle.
+ */
+ @property({ type: Boolean, reflect: true })
+ public subtle: boolean = false;
+
+ /**
+ * Whether the badge is outlined.
+ *
+ * Can only be used with semantic variants.
+ */
+ @property({ type: Boolean, reflect: true })
+ public outline: boolean = false;
+
// ──────────────────────
// IMPLEMENTATION
// ──────────────────────
diff --git a/2nd-gen/packages/core/components/badge/Badge.types.ts b/2nd-gen/packages/core/components/badge/Badge.types.ts
index 9d6b3af36a2..a334f603778 100644
--- a/2nd-gen/packages/core/components/badge/Badge.types.ts
+++ b/2nd-gen/packages/core/components/badge/Badge.types.ts
@@ -10,10 +10,6 @@
* governing permissions and limitations under the License.
*/
-/*
- * @todo The S1 types can be removed once we are no longer maintaining 1st-gen.
- */
-
import type { ElementSize } from '@spectrum-web-components/core/mixins/index.js';
// ──────────────────
@@ -65,32 +61,6 @@ export const FIXED_VALUES = [
'inline-end',
] as const;
-// ──────────────────────────────────────────
-// S1-ONLY (remove with 1st-gen)
-// ──────────────────────────────────────────
-
-export const BADGE_VARIANTS_COLOR_S1 = [
- 'fuchsia',
- 'indigo',
- 'magenta',
- 'purple',
- 'seafoam',
- 'yellow',
- 'gray',
- 'red',
- 'orange',
- 'chartreuse',
- 'celery',
- 'green',
- 'cyan',
- 'blue',
-] as const satisfies readonly BadgeColorVariant[];
-
-export const BADGE_VARIANTS_S1 = [
- ...BADGE_VARIANTS_SEMANTIC,
- ...BADGE_VARIANTS_COLOR_S1,
-] as const;
-
// ──────────────────
// CANONICAL
// ──────────────────
@@ -109,10 +79,6 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
export type BadgeSize = (typeof BADGE_VALID_SIZES)[number];
export type BadgeSemanticVariant = (typeof BADGE_VARIANTS_SEMANTIC)[number];
-// S1-only (remove with 1st-gen)
-export type BadgeColorVariantS1 = (typeof BADGE_VARIANTS_COLOR_S1)[number]; // remove with 1st-gen
-export type BadgeVariantS1 = (typeof BADGE_VARIANTS_S1)[number]; // remove with 1st-gen
-
// Canonical
export type BadgeColorVariant = (typeof BADGE_VARIANTS_COLOR)[number];
export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
diff --git a/2nd-gen/packages/core/components/progress-circle/ProgressCircle.types.ts b/2nd-gen/packages/core/components/progress-circle/ProgressCircle.types.ts
index c54535523d5..03caa52603e 100644
--- a/2nd-gen/packages/core/components/progress-circle/ProgressCircle.types.ts
+++ b/2nd-gen/packages/core/components/progress-circle/ProgressCircle.types.ts
@@ -17,16 +17,7 @@ export const PROGRESS_CIRCLE_VALID_SIZES = [
'm',
'l',
] as const satisfies ElementSize[];
-export const PROGRESS_CIRCLE_STATIC_COLORS_S1 = ['white'] as const;
-export const PROGRESS_CIRCLE_STATIC_COLORS_S2 = [
- ...PROGRESS_CIRCLE_STATIC_COLORS_S1,
- 'black',
-] as const;
+export const PROGRESS_CIRCLE_STATIC_COLORS = ['white', 'black'] as const;
-export type ProgressCircleStaticColorS1 =
- (typeof PROGRESS_CIRCLE_STATIC_COLORS_S1)[number];
-export type ProgressCircleStaticColorS2 =
- (typeof PROGRESS_CIRCLE_STATIC_COLORS_S2)[number];
export type ProgressCircleStaticColor =
- | ProgressCircleStaticColorS1
- | ProgressCircleStaticColorS2;
+ (typeof PROGRESS_CIRCLE_STATIC_COLORS)[number];
diff --git a/2nd-gen/packages/core/components/status-light/StatusLight.base.ts b/2nd-gen/packages/core/components/status-light/StatusLight.base.ts
index 1a15dec2aaa..06be7399e1a 100644
--- a/2nd-gen/packages/core/components/status-light/StatusLight.base.ts
+++ b/2nd-gen/packages/core/components/status-light/StatusLight.base.ts
@@ -16,7 +16,7 @@ import { SpectrumElement } from '@spectrum-web-components/core/element/index.js'
import { SizedMixin } from '@spectrum-web-components/core/mixins/index.js';
import {
- STATUS_LIGHT_VALID_SIZES,
+ STATUSLIGHT_VALID_SIZES,
type StatusLightVariant,
} from './StatusLight.types.js';
@@ -27,7 +27,7 @@ import {
* @attribute {ElementSize} size - The size of the status light.
*/
export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
- validSizes: STATUS_LIGHT_VALID_SIZES,
+ validSizes: STATUSLIGHT_VALID_SIZES,
noDefaultSize: true,
}) {
// ─────────────────────────
@@ -91,31 +91,20 @@ export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
// IMPLEMENTATION
// ──────────────────────
- protected override update(changedProperties: PropertyValues): void {
+ protected override updated(changes: PropertyValues): void {
+ super.updated(changes);
if (window.__swc?.DEBUG) {
const constructor = this.constructor as typeof StatusLightBase;
if (!constructor.VARIANTS.includes(this.variant)) {
window.__swc.warn(
this,
`<${this.localName}> element expects the "variant" attribute to be one of the following:`,
- 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/components-status-light--docs',
+ 'https://opensource.adobe.com/spectrum-web-components/components/status-light/#variants',
{
issues: [...constructor.VARIANTS],
}
);
}
- // Check disabled property if it exists (S1 only)
- if (this.hasAttribute('disabled') && !('disabled' in this)) {
- window.__swc.warn(
- this,
- `<${this.localName}> element does not support the disabled state.`,
- 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/components-status-light--docs',
- {
- issues: ['disabled is not a supported property in Spectrum 2'],
- }
- );
- }
}
- super.update(changedProperties);
}
}
diff --git a/2nd-gen/packages/core/components/status-light/StatusLight.types.ts b/2nd-gen/packages/core/components/status-light/StatusLight.types.ts
index 13762f4502e..f41ebd4882a 100644
--- a/2nd-gen/packages/core/components/status-light/StatusLight.types.ts
+++ b/2nd-gen/packages/core/components/status-light/StatusLight.types.ts
@@ -10,24 +10,20 @@
* governing permissions and limitations under the License.
*/
-/*
- * @todo The S1 types can be removed once we are no longer maintaining 1st-gen.
+/**
+ * @todo Rename STATUSLIGHT_ prefix to STATUS_LIGHT_ to align with type prefix
+ * naming convention (use underscore separators for multi-word names).
*/
-
import type { ElementSize } from '@spectrum-web-components/core/mixins/index.js';
-// ──────────────────
-// SHARED
-// ──────────────────
-
-export const STATUS_LIGHT_VALID_SIZES = [
+export const STATUSLIGHT_VALID_SIZES = [
's',
'm',
'l',
'xl',
] as const satisfies readonly ElementSize[];
-export const STATUS_LIGHT_VARIANTS_SEMANTIC = [
+export const STATUSLIGHT_VARIANTS_SEMANTIC = [
'neutral',
'info',
'positive',
@@ -35,20 +31,7 @@ export const STATUS_LIGHT_VARIANTS_SEMANTIC = [
'notice',
] as const;
-export const STATUS_LIGHT_VARIANTS_SEMANTIC_S2 = [
- ...STATUS_LIGHT_VARIANTS_SEMANTIC,
-] as const;
-
-// ──────────────────────────────────────────
-// S1-ONLY (remove with 1st-gen)
-// ──────────────────────────────────────────
-
-export const STATUS_LIGHT_VARIANTS_SEMANTIC_S1 = [
- ...STATUS_LIGHT_VARIANTS_SEMANTIC,
- 'accent',
-] as const;
-
-export const STATUS_LIGHT_VARIANTS_COLOR_S1 = [
+export const STATUSLIGHT_VARIANTS_COLOR = [
'fuchsia',
'indigo',
'magenta',
@@ -58,19 +41,6 @@ export const STATUS_LIGHT_VARIANTS_COLOR_S1 = [
'chartreuse',
'celery',
'cyan',
-] as const;
-
-export const STATUS_LIGHT_VARIANTS_S1 = [
- ...STATUS_LIGHT_VARIANTS_SEMANTIC_S1,
- ...STATUS_LIGHT_VARIANTS_COLOR_S1,
-] as const;
-
-// ──────────────────
-// CANONICAL
-// ──────────────────
-
-export const STATUS_LIGHT_VARIANTS_COLOR_S2 = [
- ...STATUS_LIGHT_VARIANTS_COLOR_S1,
'pink',
'turquoise',
'brown',
@@ -78,36 +48,15 @@ export const STATUS_LIGHT_VARIANTS_COLOR_S2 = [
'silver',
] as const;
-export const STATUS_LIGHT_VARIANTS_S2 = [
- ...STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
- ...STATUS_LIGHT_VARIANTS_COLOR_S2,
+export const STATUSLIGHT_VARIANTS = [
+ ...STATUSLIGHT_VARIANTS_SEMANTIC,
+ ...STATUSLIGHT_VARIANTS_COLOR,
] as const;
-// ──────────────────
-// TYPES
-// ──────────────────
-
-// S1-only (remove with 1st-gen)
-export type StatusLightSemanticVariantS1 =
- (typeof STATUS_LIGHT_VARIANTS_SEMANTIC_S1)[number];
-export type StatusLightColorVariantS1 =
- (typeof STATUS_LIGHT_VARIANTS_COLOR_S1)[number];
-export type StatusLightVariantS1 = (typeof STATUS_LIGHT_VARIANTS_S1)[number];
-
-// Canonical (S2)
-export type StatusLightSemanticVariantS2 =
- (typeof STATUS_LIGHT_VARIANTS_SEMANTIC_S2)[number];
-export type StatusLightColorVariantS2 =
- (typeof STATUS_LIGHT_VARIANTS_COLOR_S2)[number];
-export type StatusLightVariantS2 = (typeof STATUS_LIGHT_VARIANTS_S2)[number];
-
-// Base class (S1 | S2)
export type StatusLightSemanticVariant =
- | StatusLightSemanticVariantS1
- | StatusLightSemanticVariantS2;
+ (typeof STATUSLIGHT_VARIANTS_SEMANTIC)[number];
+
export type StatusLightColorVariant =
- | StatusLightColorVariantS1
- | StatusLightColorVariantS2;
-export type StatusLightVariant = StatusLightVariantS1 | StatusLightVariantS2;
+ (typeof STATUSLIGHT_VARIANTS_COLOR)[number];
-export type StatusLightSize = (typeof STATUS_LIGHT_VALID_SIZES)[number];
+export type StatusLightVariant = (typeof STATUSLIGHT_VARIANTS)[number];
diff --git a/2nd-gen/packages/swc/components/badge/Badge.ts b/2nd-gen/packages/swc/components/badge/Badge.ts
index f8571763e36..db17eda6679 100644
--- a/2nd-gen/packages/swc/components/badge/Badge.ts
+++ b/2nd-gen/packages/swc/components/badge/Badge.ts
@@ -66,32 +66,11 @@ export class Badge extends BadgeBase {
* The variant of the badge.
*
* @todo - Implement new badge variants (notification, indicator) introduced in S2. Jira ticket: SWC-1831
+ * Implement as separate component based on React https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/NotificationBadge.tsx
*/
@property({ type: String, reflect: true })
public override variant: BadgeVariant = 'neutral';
- // ───────────────────
- // API ADDITIONS
- // ───────────────────
-
- /**
- * Whether the badge is subtle.
- *
- * @todo This can be moved to the base class once we are no longer maintaining 1st-gen.
- */
- @property({ type: Boolean, reflect: true })
- public subtle: boolean = false;
-
- /**
- * Whether the badge is outlined.
- *
- * Can only be used with semantic variants.
- *
- * @todo This can be moved to the base class once we are no longer maintaining 1st-gen.
- */
- @property({ type: Boolean, reflect: true })
- public outline: boolean = false;
-
// ──────────────────────────────
// RENDERING & STYLING
// ──────────────────────────────
diff --git a/2nd-gen/packages/swc/components/progress-circle/ProgressCircle.ts b/2nd-gen/packages/swc/components/progress-circle/ProgressCircle.ts
index 9c2b00c030a..94248de07ac 100644
--- a/2nd-gen/packages/swc/components/progress-circle/ProgressCircle.ts
+++ b/2nd-gen/packages/swc/components/progress-circle/ProgressCircle.ts
@@ -15,9 +15,9 @@ import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import {
- PROGRESS_CIRCLE_STATIC_COLORS_S2,
+ PROGRESS_CIRCLE_STATIC_COLORS,
ProgressCircleBase,
- type ProgressCircleStaticColorS2,
+ type ProgressCircleStaticColor,
} from '@spectrum-web-components/core/components/progress-circle';
import { capitalize } from '@spectrum-web-components/core/utils/index.js';
@@ -53,7 +53,7 @@ export class ProgressCircle extends ProgressCircleBase {
/**
* @internal
*/
- static override readonly STATIC_COLORS = PROGRESS_CIRCLE_STATIC_COLORS_S2;
+ static override readonly STATIC_COLORS = PROGRESS_CIRCLE_STATIC_COLORS;
/**
* Static color variant for use on different backgrounds.
@@ -63,7 +63,7 @@ export class ProgressCircle extends ProgressCircleBase {
* When set to 'black', the component uses black styling for images with a light tinted background.
*/
@property({ reflect: true, attribute: 'static-color' })
- public override staticColor?: ProgressCircleStaticColorS2;
+ public override staticColor?: ProgressCircleStaticColor;
// ──────────────────────────────
// RENDERING & STYLING
diff --git a/2nd-gen/packages/swc/components/status-light/StatusLight.ts b/2nd-gen/packages/swc/components/status-light/StatusLight.ts
index e0ef900feeb..f8412b7350a 100644
--- a/2nd-gen/packages/swc/components/status-light/StatusLight.ts
+++ b/2nd-gen/packages/swc/components/status-light/StatusLight.ts
@@ -15,11 +15,11 @@ import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import {
- STATUS_LIGHT_VARIANTS_COLOR_S2,
- STATUS_LIGHT_VARIANTS_S2,
- STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
+ STATUSLIGHT_VARIANTS,
+ STATUSLIGHT_VARIANTS_COLOR,
+ STATUSLIGHT_VARIANTS_SEMANTIC,
StatusLightBase,
- type StatusLightVariantS2 as StatusLightVariant,
+ type StatusLightVariant,
} from '@spectrum-web-components/core/components/status-light';
import styles from './status-light.css';
@@ -32,7 +32,6 @@ import styles from './status-light.css';
* @since 0.0.1
*
* @property {string} variant - Semantic or non-semantic color variant for the status dot.
- * @attribute {ElementSize} size - The size of the status light.
*
* @example
* Approved
@@ -48,18 +47,17 @@ export class StatusLight extends StatusLightBase {
/**
* @internal
*/
- static override readonly VARIANTS_COLOR = STATUS_LIGHT_VARIANTS_COLOR_S2;
+ static override readonly VARIANTS_COLOR = STATUSLIGHT_VARIANTS_COLOR;
/**
* @internal
*/
- static override readonly VARIANTS_SEMANTIC =
- STATUS_LIGHT_VARIANTS_SEMANTIC_S2;
+ static override readonly VARIANTS_SEMANTIC = STATUSLIGHT_VARIANTS_SEMANTIC;
/**
* @internal
*/
- static override readonly VARIANTS = STATUS_LIGHT_VARIANTS_S2;
+ static override readonly VARIANTS = STATUSLIGHT_VARIANTS;
/**
* Changes the color of the status dot. The variant list includes both semantic and non-semantic options.
diff --git a/2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts b/2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts
index 7b44a8cda92..82ca157bf0b 100644
--- a/2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts
+++ b/2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts
@@ -16,12 +16,10 @@ import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
import { StatusLight } from '@adobe/spectrum-wc/status-light';
import {
- STATUS_LIGHT_VALID_SIZES,
- STATUS_LIGHT_VARIANTS_COLOR_S2,
- STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
- StatusLightColorVariantS2,
- StatusLightSemanticVariantS2,
- type StatusLightSize,
+ STATUSLIGHT_VARIANTS_COLOR,
+ STATUSLIGHT_VARIANTS_SEMANTIC,
+ StatusLightColorVariant,
+ StatusLightSemanticVariant,
} from '@spectrum-web-components/core/components/status-light';
import '@adobe/spectrum-wc/status-light';
@@ -40,29 +38,20 @@ argTypes.variant = {
...argTypes.variant,
control: { type: 'select' },
options: StatusLight.VARIANTS,
- table: {
- category: 'attributes',
- defaultValue: {
- summary: 'info',
- },
- },
};
argTypes.size = {
...argTypes.size,
control: { type: 'select' },
options: StatusLight.VALID_SIZES,
- table: {
- category: 'attributes',
- defaultValue: {
- summary: 'm',
- },
- },
};
/**
* Status lights describe the condition of an entity. Much like [badges](../?path=/docs/components-badge--readme), they can be used to convey semantic meaning, such as statuses and categories.
*/
+args['default-slot'] = 'Status light';
+args.size = 'm';
+
export const meta: Meta = {
title: 'Status light',
component: 'swc-status-light',
@@ -101,7 +90,7 @@ const semanticLabels = {
positive: 'Approved',
notice: 'Pending approval',
negative: 'Rejected',
-} as const satisfies Record;
+} as const satisfies Record;
const nonSemanticLabels = {
yellow: 'Operations',
@@ -118,14 +107,7 @@ const nonSemanticLabels = {
brown: 'Facilities',
cinnamon: 'Compliance',
silver: 'Version 1.2.10',
-} as const satisfies Record;
-
-const sizeLabels = {
- s: 'Small',
- m: 'Medium',
- l: 'Large',
- xl: 'Extra-large',
-} as const satisfies Record;
+} as const satisfies Record;
// ────────────────────
// AUTODOCS STORY
@@ -134,17 +116,21 @@ const sizeLabels = {
export const Playground: Story = {
tags: ['autodocs', 'dev'],
args: {
+ size: 'm',
+ variant: 'info',
'default-slot': 'Active',
},
};
// ────────────────────
-// OVERVIEW STORIES
+// OVERVIEW STORY
// ────────────────────
export const Overview: Story = {
tags: ['overview'],
args: {
+ size: 'm',
+ variant: 'info',
'default-slot': 'Active',
},
};
@@ -172,6 +158,9 @@ export const Anatomy: Story = {
})}
`,
tags: ['anatomy'],
+ args: {
+ size: 'm',
+ },
};
// ──────────────────────────
@@ -190,13 +179,10 @@ export const Anatomy: Story = {
*/
export const Sizes: Story = {
render: (args) => html`
- ${STATUS_LIGHT_VALID_SIZES.map((size) =>
- template({
- ...args,
- size,
- 'default-slot': sizeLabels[size],
- })
- )}
+ ${template({ ...args, size: 's', 'default-slot': 'Small' })}
+ ${template({ ...args, size: 'm', 'default-slot': 'Medium' })}
+ ${template({ ...args, size: 'l', 'default-slot': 'Large' })}
+ ${template({ ...args, size: 'xl', 'default-slot': 'Extra-large' })}
`,
parameters: { 'section-order': 1 },
tags: ['options'],
@@ -215,13 +201,12 @@ export const Sizes: Story = {
*/
export const SemanticVariants: Story = {
render: (args) => html`
- ${STATUS_LIGHT_VARIANTS_SEMANTIC_S2.map(
- (variant: StatusLightSemanticVariantS2) =>
- template({
- ...args,
- variant,
- 'default-slot': semanticLabels[variant],
- })
+ ${STATUSLIGHT_VARIANTS_SEMANTIC.map((variant: StatusLightSemanticVariant) =>
+ template({
+ ...args,
+ variant,
+ 'default-slot': semanticLabels[variant],
+ })
)}
`,
parameters: {
@@ -249,7 +234,7 @@ export const SemanticVariants: Story = {
*/
export const NonSemanticVariants: Story = {
render: (args) => html`
- ${STATUS_LIGHT_VARIANTS_COLOR_S2.map((variant: StatusLightColorVariantS2) =>
+ ${STATUSLIGHT_VARIANTS_COLOR.map((variant: StatusLightColorVariant) =>
template({
...args,
variant,
diff --git a/2nd-gen/packages/swc/components/status-light/test/status-light.test.ts b/2nd-gen/packages/swc/components/status-light/test/status-light.test.ts
index 5ef79a0a346..a54c2270afa 100644
--- a/2nd-gen/packages/swc/components/status-light/test/status-light.test.ts
+++ b/2nd-gen/packages/swc/components/status-light/test/status-light.test.ts
@@ -139,28 +139,3 @@ export const UnsupportedVariantWarningTest: Story = {
);
},
};
-
-export const DisabledAttributeWarningTest: Story = {
- render: () => html`
- Positive
- `,
- play: async ({ canvasElement, step }) => {
- await step('warns when disabled attribute is set', () =>
- withWarningSpy(async (warnCalls) => {
- const statusLight = await getComponent(
- canvasElement,
- 'swc-status-light'
- );
- statusLight.setAttribute('disabled', '');
- statusLight.requestUpdate();
- await statusLight.updateComplete;
-
- expect(warnCalls.length).toBeGreaterThan(0);
- expect(warnCalls[0][0]).toBe(statusLight);
- expect(warnCalls[0][1]).toContain(
- 'does not support the disabled state'
- );
- })
- );
- },
-};