feat(badge): s2 styling and render brought in

Author: castastrophe

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

@@ -37,6 +37,11 @@ export const BADGE_VARIANTS = [
     'green',
     'cyan',
     'blue',
+    'pink',
+    'turquoise',
+    'brown',
+    'cinnamon',
+    'silver',
 ] as const;
 export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 export const FIXED_VALUES = [
@@ -49,8 +54,11 @@ 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.
+ * @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.
  */
 export abstract class BadgeBase extends SizedMixin(
     ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
@@ -61,26 +69,14 @@ 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;
-    }
+    @property({ type: Boolean, reflect: true })
+    public subtle: boolean = false;
 
-    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);
-    }
+    @property({ type: Boolean, reflect: true })
+    public outline: boolean = false;
 
-    private _fixed?: FixedValues;
+    @property({ type: String, reflect: true })
+    public fixed?: FixedValues;
 
     protected get hasIcon(): boolean {
         return this.slotContentIsPresent;

second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts

@@ -34,10 +34,11 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
 
     /**
      * Static color variant for use on different backgrounds.
-     * When set to 'white', the component uses white styling for dark backgrounds.
+     * When set to 'white', the component uses white styling for images with a dark tinted background.
+     * When set to 'black', the component uses black styling for images with a light tinted background.
      */
     @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
+    public staticColor?: 'white' | 'black';
 
     /**
      * Progress value from 0 to 100.
@@ -46,6 +47,24 @@ export abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {
     @property({ type: Number })
     public progress = 0;
 
+    /**
+     * Stroke width for the progress circle.
+     */
+    @property({ type: Number, reflect: false })
+    public get strokeWidth(): number {
+        return this._strokeWidth;
+    }
+
+    public set strokeWidth(customWidth: unknown) {
+        if (customWidth && customWidth instanceof Number) {
+            this._strokeWidth = customWidth as number;
+        }
+
+        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
+    }
+
+    private _strokeWidth: number = 2;
+
     @query('slot')
     private slotEl!: HTMLSlotElement;
 

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

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, nothing, TemplateResult } from 'lit';
+import { CSSResultArray, html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
 
 import { BadgeBase } from '@swc/core/components/badge';
 
@@ -28,7 +30,7 @@ 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
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
@@ -52,16 +54,36 @@ export class Badge extends BadgeBase {
 
     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>
         `;
     }