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' - ); - }) - ); - }, -};