fix(badge): separate S1/S2 API in alternate approach

Author: castastrophe

second-gen/packages/core/components/badge/Badge.base.ts

@@ -16,13 +16,16 @@ import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
 import { ObserveSlotPresence } from '@swc/core/shared/observe-slot-presence';
 import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';
 
-export const BADGE_VARIANTS = [
+export const BADGE_VARIANTS_SEMANTIC = [
     'accent',
     'neutral',
     'informative',
     'positive',
     'negative',
     'notice',
+] as const;
+
+export const BADGE_VARIANTS_COLOR = [
     'fuchsia',
     'indigo',
     'magenta',
@@ -37,11 +40,11 @@ export const BADGE_VARIANTS = [
     'green',
     'cyan',
     'blue',
-    'pink',
-    'turquoise',
-    'brown',
-    'cinnamon',
-    'silver',
+] as const;
+
+export const BADGE_VARIANTS = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR,
 ] as const;
 export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 export const FIXED_VALUES = [
@@ -55,8 +58,6 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 /**
  * @element sp-badge-base
  * @property {BadgeVariant} variant - The variant of the badge.
- * @property {boolean} subtle - Whether the badge is subtle.
- * @property {boolean} outline - Whether the badge is outlined.
  * @property {FixedValues} fixed - The fixed position of the badge.
  * @property {string[]} customStyles - The custom styles of the badge.
  */
@@ -69,12 +70,6 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public variant: BadgeVariant = 'informative';
 
-    @property({ type: Boolean, reflect: true })
-    public subtle: boolean = false;
-
-    @property({ type: Boolean, reflect: true })
-    public outline: boolean = false;
-
     @property({ type: String, reflect: true })
     public fixed?: FixedValues;
 

second-gen/packages/swc/components/badge/Badge.ts

@@ -11,16 +11,39 @@
  */
 
 import { CSSResultArray, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 
-import { BadgeBase } from '@swc/core/components/badge';
+import {
+    BADGE_VARIANTS_COLOR as BADGE_VARIANTS_COLOR_BASE,
+    BADGE_VARIANTS_SEMANTIC,
+    BadgeBase,
+} from '@swc/core/components/badge';
+
+export const BADGE_VARIANTS_COLOR = [
+    ...BADGE_VARIANTS_COLOR_BASE,
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
+] as const;
+
+export const BADGE_VARIANTS = [
+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR,
+] as const;
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 
 import styles from './badge.css';
 
 // Export types and values to avoid breaking changes
-export { BADGE_VARIANTS, FIXED_VALUES } from '@swc/core/components/badge';
-export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
+export {
+    BADGE_VARIANTS_SEMANTIC,
+    FIXED_VALUES,
+} from '@swc/core/components/badge';
+export type { FixedValues } from '@swc/core/components/badge';
 
 /**
  * A badge component that displays short, descriptive information about an element.
@@ -32,6 +55,12 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
  * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
  *
+ * @property {BadgeVariant} variant - The variant of the badge.
+ * @property {boolean} subtle - Whether the badge is subtle.
+ * @property {boolean} outline - Whether the badge is outlined.
+ * @property {FixedValues} fixed - The fixed position of the badge.
+ * @property {string[]} customStyles - The custom styles of the badge.
+ *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  *
@@ -48,6 +77,12 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * </swc-badge>
  */
 export class Badge extends BadgeBase {
+    @property({ type: Boolean, reflect: true })
+    public subtle: boolean = false;
+
+    @property({ type: Boolean, reflect: true })
+    public outline: boolean = false;
+
     public static override get styles(): CSSResultArray {
         return [styles];
     }

second-gen/packages/swc/components/badge/stories/badge.stories.ts

@@ -13,7 +13,12 @@
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { BADGE_VARIANTS, FIXED_VALUES } from '@swc/components/badge';
+import {
+    BADGE_VARIANTS,
+    BADGE_VARIANTS_COLOR,
+    BADGE_VARIANTS_SEMANTIC,
+    FIXED_VALUES,
+} from '@swc/components/badge';
 
 import '@swc/components/badge';
 
@@ -33,9 +38,17 @@ const meta: Meta = {
             control: { type: 'select' },
             options: ['s', 'm', 'l', 'xl'],
         },
+        subtle: {
+            control: { type: 'boolean' },
+        },
+        outline: {
+            control: { type: 'boolean' },
+        },
     },
     args: {
         variant: 'informative',
+        subtle: false,
+        outline: false,
     },
 };
 
@@ -57,10 +70,22 @@ export const Default: Story = {
     `,
 };
 
-export const Variants: Story = {
+export const SemanticVariants: Story = {
     render: () => html`
         <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-            ${BADGE_VARIANTS.map(
+            ${BADGE_VARIANTS_SEMANTIC.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}">${variant}</swc-badge>
+                `
+            )}
+        </div>
+    `,
+};
+
+export const ColorVariants: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS_COLOR.map(
                 (variant) => html`
                     <swc-badge variant="${variant}">${variant}</swc-badge>
                 `
@@ -88,3 +113,31 @@ export const WithIcon: Story = {
         </swc-badge>
     `,
 };
+
+export const Subtle: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}" subtle>
+                        ${variant}
+                    </swc-badge>
+                `
+            )}
+        </div>
+    `,
+};
+
+export const Outline: Story = {
+    render: () => html`
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            ${BADGE_VARIANTS_SEMANTIC.map(
+                (variant) => html`
+                    <swc-badge variant="${variant}" outline>
+                        ${variant}
+                    </swc-badge>
+                `
+            )}
+        </div>
+    `,
+};