style(status-light): clean up code styles (#6157)

* refactor: rename STATUSLIGHT to STATUS_LIGHT type

* refactor: reorg types file

* refactor: standardized debug warnings

* refactor: update jsdoc comments

---------

Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>

Author: 2 people

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 {
-  STATUSLIGHT_VALID_SIZES,
+  STATUS_LIGHT_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: STATUSLIGHT_VALID_SIZES,
+  validSizes: STATUS_LIGHT_VALID_SIZES,
   noDefaultSize: true,
 }) {
   // ─────────────────────────
@@ -91,15 +91,14 @@ export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
   //     IMPLEMENTATION
   // ──────────────────────
 
-  protected override updated(changes: PropertyValues): void {
-    super.updated(changes);
+  protected override update(changedProperties: PropertyValues): void {
     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/components/status-light/#variants',
+          'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/components-status-light--docs',
           {
             issues: [...constructor.VARIANTS],
           }
@@ -110,12 +109,13 @@ export abstract class StatusLightBase extends SizedMixin(SpectrumElement, {
         window.__swc.warn(
           this,
           `<${this.localName}> element does not support the disabled state.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/status-light/#states',
+          '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);
   }
 }

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

@@ -10,40 +10,45 @@
  * 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). This
- * requires updating all imports in 1st-gen and 2nd-gen that reference these
- * constants.
  */
+
 import type { ElementSize } from '@spectrum-web-components/core/mixins/index.js';
 
-export const STATUSLIGHT_VALID_SIZES = [
+// ──────────────────
+//     SHARED
+// ──────────────────
+
+export const STATUS_LIGHT_VALID_SIZES = [
   's',
   'm',
   'l',
   'xl',
 ] as const satisfies readonly ElementSize[];
 
-export const STATUSLIGHT_VARIANTS_SEMANTIC = [
+export const STATUS_LIGHT_VARIANTS_SEMANTIC = [
   'neutral',
   'info',
   'positive',
   'negative',
   'notice',
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_SEMANTIC_S1 = [
-  ...STATUSLIGHT_VARIANTS_SEMANTIC,
-  'accent',
+export const STATUS_LIGHT_VARIANTS_SEMANTIC_S2 = [
+  ...STATUS_LIGHT_VARIANTS_SEMANTIC,
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_SEMANTIC_S2 = [
-  ...STATUSLIGHT_VARIANTS_SEMANTIC,
+// ──────────────────────────────────────────
+//     S1-ONLY (remove with 1st-gen)
+// ──────────────────────────────────────────
+
+export const STATUS_LIGHT_VARIANTS_SEMANTIC_S1 = [
+  ...STATUS_LIGHT_VARIANTS_SEMANTIC,
+  'accent',
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_COLOR_S1 = [
+export const STATUS_LIGHT_VARIANTS_COLOR_S1 = [
   'fuchsia',
   'indigo',
   'magenta',
@@ -55,43 +60,54 @@ export const STATUSLIGHT_VARIANTS_COLOR_S1 = [
   'cyan',
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_COLOR_S2 = [
-  ...STATUSLIGHT_VARIANTS_COLOR_S1,
+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',
   'cinnamon',
   'silver',
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_S1 = [
-  ...STATUSLIGHT_VARIANTS_SEMANTIC_S1,
-  ...STATUSLIGHT_VARIANTS_COLOR_S1,
+export const STATUS_LIGHT_VARIANTS_S2 = [
+  ...STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
+  ...STATUS_LIGHT_VARIANTS_COLOR_S2,
 ] as const;
 
-export const STATUSLIGHT_VARIANTS_S2 = [
-  ...STATUSLIGHT_VARIANTS_SEMANTIC_S2,
-  ...STATUSLIGHT_VARIANTS_COLOR_S2,
-] as const;
+// ──────────────────
+//     TYPES
+// ──────────────────
 
+// S1-only (remove with 1st-gen)
 export type StatusLightSemanticVariantS1 =
-  (typeof STATUSLIGHT_VARIANTS_SEMANTIC_S1)[number];
+  (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 STATUSLIGHT_VARIANTS_SEMANTIC_S2)[number];
+  (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;
-
-export type StatusLightColorVariantS1 =
-  (typeof STATUSLIGHT_VARIANTS_COLOR_S1)[number];
-export type StatusLightColorVariantS2 =
-  (typeof STATUSLIGHT_VARIANTS_COLOR_S2)[number];
 export type StatusLightColorVariant =
   | StatusLightColorVariantS1
   | StatusLightColorVariantS2;
-
-export type StatusLightVariantS1 = (typeof STATUSLIGHT_VARIANTS_S1)[number];
-export type StatusLightVariantS2 = (typeof STATUSLIGHT_VARIANTS_S2)[number];
 export type StatusLightVariant = StatusLightVariantS1 | StatusLightVariantS2;
 
-export type StatusLightSize = (typeof STATUSLIGHT_VALID_SIZES)[number];
+export type StatusLightSize = (typeof STATUS_LIGHT_VALID_SIZES)[number];

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

@@ -15,9 +15,9 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import {
-  STATUSLIGHT_VARIANTS_COLOR_S2,
-  STATUSLIGHT_VARIANTS_S2,
-  STATUSLIGHT_VARIANTS_SEMANTIC_S2,
+  STATUS_LIGHT_VARIANTS_COLOR_S2,
+  STATUS_LIGHT_VARIANTS_S2,
+  STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
   StatusLightBase,
   type StatusLightVariantS2 as StatusLightVariant,
 } from '@spectrum-web-components/core/components/status-light';
@@ -31,6 +31,9 @@ import styles from './status-light.css';
  * @status preview
  * @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
  * <swc-status-light variant="positive">Approved</swc-status-light>
  *
@@ -45,17 +48,18 @@ export class StatusLight extends StatusLightBase {
   /**
    * @internal
    */
-  static override readonly VARIANTS_COLOR = STATUSLIGHT_VARIANTS_COLOR_S2;
+  static override readonly VARIANTS_COLOR = STATUS_LIGHT_VARIANTS_COLOR_S2;
 
   /**
    * @internal
    */
-  static override readonly VARIANTS_SEMANTIC = STATUSLIGHT_VARIANTS_SEMANTIC_S2;
+  static override readonly VARIANTS_SEMANTIC =
+    STATUS_LIGHT_VARIANTS_SEMANTIC_S2;
 
   /**
    * @internal
    */
-  static override readonly VARIANTS = STATUSLIGHT_VARIANTS_S2;
+  static override readonly VARIANTS = STATUS_LIGHT_VARIANTS_S2;
 
   /**
    * Changes the color of the status dot. The variant list includes both semantic and non-semantic options.

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

@@ -16,9 +16,9 @@ import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 
 import { StatusLight } from '@adobe/spectrum-wc/status-light';
 import {
-  STATUSLIGHT_VALID_SIZES,
-  STATUSLIGHT_VARIANTS_COLOR_S2,
-  STATUSLIGHT_VARIANTS_SEMANTIC_S2,
+  STATUS_LIGHT_VALID_SIZES,
+  STATUS_LIGHT_VARIANTS_COLOR_S2,
+  STATUS_LIGHT_VARIANTS_SEMANTIC_S2,
   StatusLightColorVariantS2,
   StatusLightSemanticVariantS2,
   type StatusLightSize,
@@ -190,7 +190,7 @@ export const Anatomy: Story = {
  */
 export const Sizes: Story = {
   render: (args) => html`
-    ${STATUSLIGHT_VALID_SIZES.map((size) =>
+    ${STATUS_LIGHT_VALID_SIZES.map((size) =>
       template({
         ...args,
         size,
@@ -215,7 +215,7 @@ export const Sizes: Story = {
  */
 export const SemanticVariants: Story = {
   render: (args) => html`
-    ${STATUSLIGHT_VARIANTS_SEMANTIC_S2.map(
+    ${STATUS_LIGHT_VARIANTS_SEMANTIC_S2.map(
       (variant: StatusLightSemanticVariantS2) =>
         template({
           ...args,
@@ -249,7 +249,7 @@ export const SemanticVariants: Story = {
  */
 export const NonSemanticVariants: Story = {
   render: (args) => html`
-    ${STATUSLIGHT_VARIANTS_COLOR_S2.map((variant: StatusLightColorVariantS2) =>
+    ${STATUS_LIGHT_VARIANTS_COLOR_S2.map((variant: StatusLightColorVariantS2) =>
       template({
         ...args,
         variant,