feat: update badge API and styles (#3147)

* feat: update badge API and styles * add initial package version BREAKING CHANGE: fundamentally changes and breaks the badge component API and styles
microsoft · May 18, 2020 · 23eca38 · 23eca38
1 parent ee333e3
commit 23eca38
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 38 deletions.
diff --git a/packages/web-components/fast-components-msft/package.json b/packages/web-components/fast-components-msft/package.json
@@ -2,7 +2,7 @@
     "name": "@microsoft/fast-components-msft",
     "description": "A library of Web Components with Microsoft styles",
     "sideEffects": false,
-    "version": "0.0.0",
+    "version": "0.0.1",
     "author": {
       "name": "Microsoft",
       "url": "https://discord.gg/FcSNfg4"

diff --git a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts
@@ -3,9 +3,7 @@ import { display } from "@microsoft/fast-foundation";
 import {
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
-    accentForegroundRestBehavior,
-    neutralFillInputRestBehavior,
-    neutralFillToggleRestBehavior,
+    neutralFillRestBehavior,
     neutralForegroundRestBehavior,
 } from "../styles";
 
@@ -25,25 +23,23 @@ export const BadgeStyles = css`
     }
 
     :host(.lightweight) {
-        --badge-fill-lightweight: transparent;
-        --badge-color-value: var(--neutral-foreground-rest);
+        background: transparent;
+        color: var(--neutral-foreground-rest);
         font-weight: 600;
     }
 
     :host(.accent) {
-        --badge-fill-accent: var(--accent-fill-rest);
-        --badge-color-value: var(--accent-foreground-cut-rest);
+        background: var(--accent-fill-rest);
+        color: var(--accent-foreground-cut-rest);
     }
 
     :host(.neutral) {
-        --badge-fill-neutral: var(--neutral-fill-toggle-rest);
-        --badge-color-value: var(--neutral-fill-input-rest);
+        background: var(--neutral-fill-rest);
+        color: var(--neutral-foreground-rest);
     }
 `.withBehaviors(
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
-    accentForegroundRestBehavior,
-    neutralForegroundRestBehavior,
-    neutralFillInputRestBehavior,
-    neutralFillToggleRestBehavior
+    neutralFillRestBehavior,
+    neutralForegroundRestBehavior
 );
diff --git a/packages/web-components/fast-components-msft/src/badge/fixtures/badge.html b/packages/web-components/fast-components-msft/src/badge/fixtures/badge.html
@@ -1,19 +1,34 @@
 <fast-design-system-provider use-defaults>
+    <style>
+        fast-badge {
+            --badge-fill-highlight: #FFD800;
+            --badge-fill-lowlight: #333;
+            --badge-color-highlight: #000;
+            --badge-color-lowlight: #FFF;
+        }
+    </style>
     <h1>Badge</h1>
     <h4>Default</h4>
     <fast-badge>
         Badge
     </fast-badge>
     <h4>Lightweight</h4>
-    <fast-badge fill="lightweight">
+    <fast-badge appearance="lightweight">
         Badge
     </fast-badge>
     <h4>Accent</h4>
-    <fast-badge fill="accent">
+    <fast-badge appearance="accent">
         Badge
     </fast-badge>
     <h4>Neutral</h4>
-    <fast-badge fill="neutral">
+    <fast-badge appearance="neutral">
+        Badge
+    </fast-badge>
+    <h4>With map</h4>
+    <fast-badge fill="highlight" color="highlight">
+        Badge
+    </fast-badge>
+    <fast-badge fill="lowlight" color="lowlight">
         Badge
     </fast-badge>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components-msft/src/badge/index.ts b/packages/web-components/fast-components-msft/src/badge/index.ts
@@ -1,21 +1,26 @@
-import { attr, customElement } from "@microsoft/fast-element";
+import { attr, customElement, DOM } from "@microsoft/fast-element";
 import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation";
 import { BadgeStyles as styles } from "./badge.styles";
 
-export type BadgeFill = "accent" | "lightweight" | "neutral" | "string";
+export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string;
 
 @customElement({
     name: "fast-badge",
     template,
     styles,
 })
 export class FASTBadge extends Badge {
-    @attr
-    public fill: BadgeFill = "lightweight";
-    private fillChanged(oldValue: BadgeFill, newValue: BadgeFill): void {
+    @attr({ mode: "fromView" })
+    public appearance: BadgeAppearance = "lightweight";
+    private appearanceChanged(
+        oldValue: BadgeAppearance,
+        newValue: BadgeAppearance
+    ): void {
         if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
+            DOM.queueUpdate(() => {
+                this.classList.add(newValue);
+                this.classList.remove(oldValue);
+            });
         }
     }
 }
diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts
@@ -1,6 +1,6 @@
 import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
-import { heightNumber } from "../styles";
+import { accentForegroundRestBehavior, heightNumber } from "../styles";
 
 export const BadgeStyles = css`
     ${display("inline-block")} :host {
@@ -13,6 +13,12 @@ export const BadgeStyles = css`
     .badge {
         border-radius: calc(var(--corner-radius) * 1px);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
+        color: var(--accent-foreground-rest);
+        font-weight: 600;
+    }
+
+    .badge[style] {
+        font-weight: 400;
     }
 
     :host(.circular) .badge {
@@ -27,4 +33,4 @@ export const BadgeStyles = css`
         justify-content: center;
         box-sizing: border-box;
     }
-`;
+`.withBehaviors(accentForegroundRestBehavior);
diff --git a/packages/web-components/fast-components/src/badge/fixtures/base.html b/packages/web-components/fast-components/src/badge/fixtures/base.html
@@ -38,6 +38,8 @@
     </style>
     <h1>Badge</h1>
     <h4>Default</h4>
+    <fast-badge>Accent</fast-badge>
+    <h4>Default with color map</h4>
     <fast-badge fill="primary" style="font-size: 10px; line-height: 16px;" color="foo" id="foo">
         Badge
     </fast-badge>

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -5,6 +5,7 @@
 ```ts
 
 import { Behavior } from '@microsoft/fast-element';
+import { DecoratorAttributeConfiguration } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
@@ -131,6 +132,8 @@ export class Checkbox extends FormAssociated<HTMLInputElement> {
     // (undocumented)
     connectedCallback(): void;
     defaultChecked: boolean;
+    // (undocumented)
+    defaultSlottedNodes: Node[];
     indeterminate: boolean;
     // (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
@@ -169,6 +172,19 @@ export interface CSSCustomPropertyTarget {
     unregisterCSSCustomProperty(behavior: CSSCustomPropertyDefinition): void;
 }
 
+// @public (undocumented)
+export type CSSDisplayPropertyValue = "block" | "contents" | "flex" | "grid" | "inherit" | "initial" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "none" | "run-in" | "table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group";
+
+// @public (undocumented)
+export interface DecoratorDesignSystemPropertyConfiguration extends Omit<DecoratorAttributeConfiguration, "attribute"> {
+    // (undocumented)
+    attribute?: string | false;
+    // (undocumented)
+    cssCustomProperty?: string | false;
+    // (undocumented)
+    default: any;
+}
+
 // @public (undocumented)
 export interface DesignSystemConsumer {
     // (undocumented)
@@ -179,15 +195,7 @@ export interface DesignSystemConsumer {
 export const designSystemConsumerBehavior: Behavior;
 
 // @public
-export function designSystemProperty<T extends DesignSystemProvider>(config: DesignSystemPropertyDeclarationConfig): (source: T, property: string) => void;
-
-// @public (undocumented)
-export interface DesignSystemPropertyDeclarationConfig {
-    // (undocumented)
-    cssCustomProperty?: string | false;
-    // (undocumented)
-    default: any;
-}
+export function designSystemProperty<T extends DesignSystemProvider>(config: DecoratorDesignSystemPropertyConfiguration): (source: T, property: string) => void;
 
 // @public (undocumented)
 export class DesignSystemProvider extends FASTElement implements CSSCustomPropertyTarget, DesignSystemConsumer {
@@ -196,7 +204,7 @@ export class DesignSystemProvider extends FASTElement implements CSSCustomProper
     connectedCallback(): void;
     designSystem: {};
     designSystemProperties: {
-        [propertyName: string]: Required<DesignSystemPropertyDeclarationConfig>;
+        [propertyName: string]: Required<Pick<DecoratorDesignSystemPropertyConfiguration, "cssCustomProperty" | "default">>;
     };
     disconnectedCSSCustomPropertyRegistry: CSSCustomPropertyDefinition[];
     evaluate(definition: CSSCustomPropertyDefinition): string;
@@ -245,6 +253,12 @@ export class Dialog extends FASTElement {
 // @public (undocumented)
 export const DialogTemplate: import("@microsoft/fast-element").ViewTemplate<Dialog, any>;
 
+// @public (undocumented)
+export const disabledCursor = "not-allowed";
+
+// @public
+export function display(displayValue: CSSDisplayPropertyValue): string;
+
 // @public (undocumented)
 export class Divider extends FASTElement {
     // (undocumented)
@@ -286,6 +300,9 @@ export enum FlipperDirection {
 // @public (undocumented)
 export const FlipperTemplate: import("@microsoft/fast-element").ViewTemplate<Flipper, any>;
 
+// @public
+export const focusVisible: string;
+
 // @public
 export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<{
     query: MediaQueryList;
@@ -324,6 +341,9 @@ export const forcedColorsStylesheetBehavior: (sheet: ElementStyles) => Readonly<
     }): void;
 }>;
 
+// @public (undocumented)
+export const hidden = "\n    :host([hidden]) {\n        display: none;\n    }\n";
+
 // @public
 export function isDesignSystemConsumer(element: HTMLElement | DesignSystemConsumer): element is DesignSystemConsumer;
 
@@ -431,6 +451,8 @@ export class Radio extends FormAssociated<HTMLInputElement> implements RadioCont
     connectedCallback(): void;
     defaultChecked: boolean;
     // (undocumented)
+    defaultSlottedNodes: Node[];
+    // (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     // (undocumented)
     name: string;
@@ -616,6 +638,8 @@ export class Switch extends FormAssociated<HTMLInputElement> {
     connectedCallback(): void;
     defaultChecked: boolean;
     // (undocumented)
+    defaultSlottedNodes: Node[];
+    // (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
     // (undocumented)
     protected proxy: HTMLInputElement;
@@ -690,6 +714,8 @@ export class TextArea extends FormAssociated<HTMLTextAreaElement> {
     // (undocumented)
     connectedCallback(): void;
     // (undocumented)
+    defaultSlottedNodes: Node[];
+    // (undocumented)
     formId: string;
     // (undocumented)
     handleTextInput: () => void;
@@ -754,6 +780,8 @@ export class TextField extends FormAssociated<HTMLInputElement> {
     // (undocumented)
     control: HTMLInputElement;
     // (undocumented)
+    defaultSlottedNodes: Node[];
+    // (undocumented)
     handleTextInput(): void;
     // (undocumented)
     list: string;

diff --git a/packages/web-components/fast-foundation/src/badge/badge.template.ts b/packages/web-components/fast-foundation/src/badge/badge.template.ts
@@ -5,8 +5,10 @@ export const BadgeTemplate = html<Badge>`
     <template class="${x => (x.circular ? "circular" : "")}">
         <div
             class="badge"
-            style="background-color: var(--badge-fill-${x =>
-                x.fill}); color: var(--badge-color-${x => x.color})"
+            style="${x =>
+                x.fill || x.color
+                    ? `background-color: var(--badge-fill-${x.fill}); color: var(--badge-color-${x.color})`
+                    : void 0}"
         >
             <slot></slot>
         </div>

diff --git a/yarn.lock b/yarn.lock
@@ -23522,6 +23522,11 @@ tslib@^1.11.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
   integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
 
+tslib@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
 tslint-react@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-3.6.0.tgz#7f462c95c4a0afaae82507f06517ff02942196a1"