From 13c4ec984fd6880ccc8dde9dd23f22d6b4337969 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Mon, 13 Oct 2025 12:34:30 -0400 Subject: [PATCH 1/2] feat(statuslight): add missing first-gen variants - added missing cyan and accent to variant list that were identified in the component analysis - correct the existing accent and cyan variant selectors - add example to docs page - create changeset --- .changeset/short-pans-know.md | 5 +++++ packages/status-light/README.md | 9 +++------ packages/status-light/src/StatusLight.ts | 4 +++- packages/status-light/src/spectrum-status-light.css | 7 +++++-- packages/status-light/stories/status-light.stories.ts | 8 ++++++++ 5 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 .changeset/short-pans-know.md diff --git a/.changeset/short-pans-know.md b/.changeset/short-pans-know.md new file mode 100644 index 0000000000..0cd4f20419 --- /dev/null +++ b/.changeset/short-pans-know.md @@ -0,0 +1,5 @@ +--- +'@spectrum-web-components/status-light': patch +--- + +**Fixed**: Added missing `accent` and `cyan` variant to status light. diff --git a/packages/status-light/README.md b/packages/status-light/README.md index 908364552a..49a75fe728 100644 --- a/packages/status-light/README.md +++ b/packages/status-light/README.md @@ -80,15 +80,11 @@ Status lights come in various semantic and non-semantic variants to convey diffe ```html - - use for default state - +use for default state use for success or approval - - use for error or rejection - +use for error or rejection use for warning or attention needed @@ -110,6 +106,7 @@ Status lights come in various semantic and non-semantic variants to convey diffe magenta status celery status purple status +cyan status ``` diff --git a/packages/status-light/src/StatusLight.ts b/packages/status-light/src/StatusLight.ts index 1d45663530..7850be41b5 100644 --- a/packages/status-light/src/StatusLight.ts +++ b/packages/status-light/src/StatusLight.ts @@ -44,6 +44,7 @@ export class StatusLight extends SizedMixin(SpectrumElement, { */ @property({ reflect: true }) public variant: + | 'accent' | 'negative' | 'notice' | 'positive' @@ -56,7 +57,8 @@ export class StatusLight extends SizedMixin(SpectrumElement, { | 'chartreuse' | 'magenta' | 'celery' - | 'purple' = 'info'; + | 'purple' + | 'cyan' = 'info'; protected override render(): TemplateResult { return html` diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 7a37b8242b..f8555b3189 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -79,6 +79,7 @@ --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height)); box-sizing: border-box; font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); @@ -102,6 +103,7 @@ :host:before { --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); + content: ""; inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); @@ -122,7 +124,7 @@ background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); } -.spectrum-StatusLight--accent:before { +:host([variant="accent"]):before { background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color)); } @@ -174,7 +176,7 @@ background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color)); } -.spectrum-StatusLight--cyan:before { +:host([variant="cyan"]):before { background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color)); } @@ -202,6 +204,7 @@ :host([dir]) { --highcontrast-statuslight-content-color-default: CanvasText; --highcontrast-statuslight-subdued-content-color-default: CanvasText; + forced-color-adjust: none; } diff --git a/packages/status-light/stories/status-light.stories.ts b/packages/status-light/stories/status-light.stories.ts index e41c437cad..3120012fdc 100644 --- a/packages/status-light/stories/status-light.stories.ts +++ b/packages/status-light/stories/status-light.stories.ts @@ -19,6 +19,7 @@ export default { }; export const s = (): TemplateResult => html` + accent positive negative notice @@ -32,9 +33,11 @@ export const s = (): TemplateResult => html` magenta celery purple + cyan `; export const m = (): TemplateResult => html` + accent positive negative notice @@ -48,9 +51,11 @@ export const m = (): TemplateResult => html` magenta celery purple + cyan `; export const l = (): TemplateResult => html` + accent positive negative notice @@ -64,9 +69,11 @@ export const l = (): TemplateResult => html` magenta celery purple + cyan `; export const XL = (): TemplateResult => html` + accent positive negative notice @@ -80,6 +87,7 @@ export const XL = (): TemplateResult => html` magenta celery purple + cyan `; export const disabledTrue = (): TemplateResult => html` From 473585a8ae11a1b2f786d1cac57d50911abb457d Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt Date: Wed, 22 Oct 2025 17:26:48 -0400 Subject: [PATCH 2/2] chore: update golden hash --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 672af66d47..a28e8dc036 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -22,7 +22,7 @@ parameters: # 3. Commit this change to the PR branch where the changes exist. current_golden_images_hash: type: string - default: 1bd7e9973de8f318233aa41b5b8a97a2956cd44d + default: 13c4ec984fd6880ccc8dde9dd23f22d6b4337969 wireit_cache_name: type: string default: wireit