feat(badge): use core tokens

adobe · Nov 4, 2022 · 83e566c · 83e566c
1 parent 47b0165
commit 83e566c
Show file tree

Hide file tree

Showing 14 changed files with 622 additions and 435 deletions.
diff --git a/packages/badge/README.md b/packages/badge/README.md
@@ -102,13 +102,81 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants
 
 ### Non-Semantic
 
+Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the `variant` attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.
+
 ```html demo
 <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
-    <sp-badge variant="fuchsia">Fuchsia</sp-badge>
-    <sp-badge variant="indigo">Indigo</sp-badge>
-    <sp-badge variant="magenta">Magenta</sp-badge>
-    <sp-badge variant="purple">Purple</sp-badge>
-    <sp-badge variant="seafoam">Seafoam</sp-badge>
-    <sp-badge variant="yellow">Yellow</sp-badge>
+    <sp-badge
+        variant="seafoam"
+        style="--mod-badge-background-color-default: var(--spectrum-global-color-static-seafoam-600)"
+    >
+        Seafoam
+    </sp-badge>
+    <sp-badge
+        variant="indigo"
+        style="--mod-badge-background-color-default: var(--spectrum-global-color-static-indigo-600)"
+    >
+        Indigo
+    </sp-badge>
+    <sp-badge
+        variant="purple"
+        style="--mod-badge-background-color-default: var(--spectrum-global-color-static-purple-600)"
+    >
+        Purple
+    </sp-badge>
+    <sp-badge
+        variant="fuchsia"
+        style="--mod-badge-background-color-default: var(--spectrum-global-color-static-fuchsia-600)"
+    >
+        Fuchsia
+    </sp-badge>
+    <sp-badge
+        variant="magenta"
+        style="--mod-badge-background-color-default: var(--spectrum-global-color-static-magenta-600)"
+    >
+        Magenta
+    </sp-badge>
+    <sp-badge
+        variant="yellow"
+        style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default); --mod-badge-label-icon-color-white: var(--spectrum-global-color-static-black);"
+    >
+        Yellow
+    </sp-badge>
+</div>
+```
+
+## Fixed
+
+When you'd like to have the `<sp-badge>` display as if "fixed" to the edge of a UI, the `fixed` attribute/property can be leveraged to alter the border rounding based on the position you would like to achieve:
+
+```html
+<div
+    style="position: relative; width: 400px; height: 200px; background: #eee; max-width: 100%"
+>
+    <sp-badge>None</sp-badge>
+    <sp-badge
+        fixed="block-start"
+        style="position: absolute; top: 0; left: 200px;"
+    >
+        block-start
+    </sp-badge>
+    <sp-badge
+        fixed="inline-end"
+        style="position: absolute; right: 0; top: 100px;"
+    >
+        inline-end
+    </sp-badge>
+    <sp-badge
+        fixed="block-end"
+        style="position: absolute; bottom: 0; left: 200px;"
+    >
+        block-end
+    </sp-badge>
+    <sp-badge
+        fixed="inline-start"
+        style="position: absolute; left: 0; top: 100px;"
+    >
+        inline-start
+    </sp-badge>
 </div>
 ```
diff --git a/packages/badge/package.json b/packages/badge/package.json
@@ -61,7 +61,7 @@
         "@spectrum-web-components/shared": "^0.15.1"
     },
     "devDependencies": {
-        "@spectrum-css/badge": "^1.0.20"
+        "@spectrum-css/badge": "^2.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
@@ -20,9 +20,11 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 import styles from './badge.css.js';
 
 export const BADGE_VARIANTS = [
+    'accent',
     'neutral',
     'informative',
     'positive',
@@ -35,21 +37,68 @@ export const BADGE_VARIANTS = [
     'yellow',
 ] as const;
 export type BadgeVariant = typeof BADGE_VARIANTS[number];
+export const FIXED_VALUES_DEPRECATED = ['top', 'bottom', 'left', 'right'];
+export const FIXED_VALUES = [
+    'inline-start',
+    'inline-end',
+    'block-start',
+    'block-end',
+] as const;
+export type FixedValues =
+    | typeof FIXED_VALUES[number]
+    | typeof FIXED_VALUES_DEPRECATED[number];
 
 /**
  * @element sp-badge
  *
  * @slot - Text label of the badge
  * @slot icon - Optional icon that appears to the left of the label
  */
-export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
+export class Badge extends SizedMixin(
+    ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), '')
+) {
     public static override get styles(): CSSResultArray {
         return [styles];
     }
 
+    @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;
+        if (window.__swc.DEBUG) {
+            if (fixed && FIXED_VALUES_DEPRECATED.includes(fixed)) {
+                window.__swc.warn(
+                    this,
+                    `The following values for "fixed" in <${this.localName}> have been deprecated. They will be removed in a future release.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#fixed',
+                    {
+                        issues: [...FIXED_VALUES_DEPRECATED],
+                    }
+                );
+            }
+        }
+        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 variant: BadgeVariant = 'informative';
 
+    protected get hasIcon(): boolean {
+        return this.slotContentIsPresent;
+    }
+
     protected override render(): TemplateResult {
         if (window.__swc.DEBUG) {
             if (!BADGE_VARIANTS.includes(this.variant)) {
@@ -58,14 +107,21 @@ export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
                     `<${this.localName}> element expect the "variant" attribute to be one of the following:`,
                     'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
                     {
-                        issues: [...BADGE_VARIANTS]
-                    },
+                        issues: [...BADGE_VARIANTS],
+                    }
                 );
             }
         }
         return html`
-            <slot name="icon" ?icon-only=${!this.slotHasContent}></slot>
-            <div id="label">
+            ${this.hasIcon
+                ? html`
+                      <slot
+                          name="icon"
+                          ?icon-only=${!this.slotHasContent}
+                      ></slot>
+                  `
+                : html``}
+            <div class="label">
                 <slot></slot>
             </div>
         `;

diff --git a/packages/badge/src/badge.css b/packages/badge/src/badge.css
@@ -15,30 +15,29 @@ governing permissions and limitations under the License.
 /* center align icons and text */
 
 :host {
-    display: inline-flex;
     align-items: center;
 }
 
-/* implement fixed placement styling until Spectrum CSS adds it upstream */
+/* Marked as deprecated, remove in a future release */
 
-:host([fixed='top']) {
-    --spectrum-badge-neutral-textonly-border-top-left-radius: 0;
-    --spectrum-badge-neutral-textonly-border-top-right-radius: 0;
+:host([fixed='left']) {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0; /* .spectrum-Badge--fixed-inline-start */
 }
 
 :host([fixed='right']) {
-    --spectrum-badge-neutral-textonly-border-top-right-radius: 0;
-    --spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0; /* .spectrum-Badge--fixed-inline-end */
 }
 
-:host([fixed='bottom']) {
-    --spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
-    --spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
+:host([fixed='top']) {
+    border-start-end-radius: 0;
+    border-start-start-radius: 0; /* .spectrum-Badge--fixed-block-start */
 }
 
-:host([fixed='left']) {
-    --spectrum-badge-neutral-textonly-border-top-left-radius: 0;
-    --spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
+:host([fixed='bottom']) {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0; /* .spectrum-Badge--fixed-block-end */
 }
 
 /* cascade badge's size to its icon */
@@ -107,26 +106,18 @@ governing permissions and limitations under the License.
 
 ::slotted([slot='icon']) {
     flex-shrink: 0;
-    margin-right: calc(var(--spectrum-badge-neutral-textonly-padding-left) / 2);
-}
-
-slot[icon-only]::slotted([slot='icon']) {
-    margin-right: calc(
-        var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
-            var(--spectrum-badge-neutral-textonly-padding-left)
-    );
-    margin-left: calc(
-        var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
-            var(--spectrum-badge-neutral-textonly-padding-left)
-    );
 }
 
 /* limit badge size to two lines */
 
-#label {
+.label slot {
+    display: block;
     max-height: calc(
-        var(--spectrum-badge-neutral-textonly-text-line-height) *
-            var(--spectrum-badge-neutral-textonly-text-size) * 2
+        var(--spectrum-badge-line-height) * var(--spectrum-badge-font-size) * 2
     );
     overflow: hidden;
 }
+
+[icon-only] + .label {
+    display: none;
+}