feat(badge): s2 styling and render (#5718)

* feat(badge): s2 styling and render brought in from Spectrum CSS

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',
@@ -38,6 +41,11 @@ export const BADGE_VARIANTS = [
     'cyan',
     'blue',
 ] 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 = [
     'inline-start',
@@ -49,8 +57,9 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 
 /**
  * @element sp-badge-base
- * @slot - The text label to display in the badge.
- * @slot icon - The icon to display in the badge.
+ * @attribute {ElementSize} size - The size of the badge.
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
@@ -61,27 +70,12 @@ export abstract class BadgeBase extends SizedMixin(
     @property({ type: String, reflect: true })
     public variant: BadgeVariant = 'informative';
 
-    @property({ reflect: true })
-    public get fixed(): FixedValues | undefined {
-        return this._fixed;
-    }
-
-    public set fixed(fixed: FixedValues | undefined) {
-        if (fixed === this.fixed) {
-            return;
-        }
-        const oldValue = this.fixed;
-        this._fixed = fixed;
-        if (fixed) {
-            this.setAttribute('fixed', fixed);
-        } else {
-            this.removeAttribute('fixed');
-        }
-        this.requestUpdate('fixed', oldValue);
-    }
-
-    private _fixed?: FixedValues;
+    @property({ type: String, reflect: true })
+    public fixed?: FixedValues;
 
+    /**
+     * @internal Used for rendering gap when the badge has an icon.
+     */
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;
     }

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

@@ -10,15 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, nothing, TemplateResult } from 'lit';
+import { CSSResultArray, html, PropertyValues, 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.
@@ -28,14 +53,16 @@ export type { BadgeVariant, FixedValues } from '@swc/core/components/badge';
  * @since 1.0.0
  * @status stable
  * @github https://github.com/adobe/spectrum-web-components/tree/main/...
- * @figma https://www.figma.com/design/...
+ * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551
+ *
+ * @attribute {BadgeVariant} variant - The variant of the badge.
+ * @attribute {boolean} subtle - Whether the badge is subtle.
+ * @attribute {boolean} outline - Whether the badge is outlined.
+ * @attribute {FixedValues} fixed - The fixed position of the badge.
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  *
- * @csspart label - The text content area of the badge
- * @csspart icon - The icon area of the badge (when present)
- *
  * @example
  * <swc-badge variant="positive">New</swc-badge>
  *
@@ -46,23 +73,68 @@ 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];
     }
 
     protected override render(): TemplateResult {
         return html`
-            ${this.hasIcon
-                ? html`
-                      <slot
-                          name="icon"
-                          ?icon-only=${!this.slotHasContent}
-                      ></slot>
-                  `
-                : nothing}
-            <div class="label">
-                <slot></slot>
+            <div
+                class=${classMap({
+                    ['spectrum-Badge']: true,
+                    [`spectrum-Badge--size${this.size?.toUpperCase()}`]:
+                        typeof this.size !== 'undefined',
+                    [`spectrum-Badge--${this.variant}`]:
+                        typeof this.variant !== 'undefined',
+                    [`spectrum-Badge--subtle`]: this.subtle,
+                    [`spectrum-Badge--outline`]: this.outline,
+                    [`spectrum-Badge--fixed-${this.fixed}`]:
+                        typeof this.fixed !== 'undefined',
+                })}
+            >
+                ${when(
+                    this.hasIcon,
+                    () => html`
+                        <div
+                            class=${classMap({
+                                [`spectrum-Badge-icon`]: true,
+                                [`spectrum-Badge-icon--no-label`]:
+                                    !this.slotHasContent,
+                            })}
+                        >
+                            <slot name="icon"></slot>
+                        </div>
+                    `
+                )}
+                <div class="spectrum-Badge-label">
+                    <slot></slot>
+                </div>
             </div>
         `;
     }
+
+    protected override update(changedProperties: PropertyValues): void {
+        super.update(changedProperties);
+        if (window.__swc?.DEBUG) {
+            if (
+                this.outline &&
+                !BADGE_VARIANTS_SEMANTIC.includes(this.variant)
+            ) {
+                window.__swc.warn(
+                    this,
+                    `<${this.localName}> element only supports the outline styling if the variant is a semantic color variant.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
+                    {
+                        issues: [...BADGE_VARIANTS_SEMANTIC],
+                    }
+                );
+            }
+        }
+    }
 }