diff --git a/packages/web-components/fast-components-msft/package.json b/packages/web-components/fast-components-msft/package.json index 6d3bc24bc72..25ab61161a2 100644 --- 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 index 0275095128d..56f41d07346 100644 --- 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 index ddeb9fdc8ae..a7d1c99bc4e 100644 --- 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 @@ +

Badge

Default

Badge

Lightweight

- + Badge

Accent

- + Badge

Neutral

- + + Badge + +

With map

+ + Badge + + Badge \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/badge/index.ts b/packages/web-components/fast-components-msft/src/badge/index.ts index 6e531882511..264a40bdd04 100644 --- a/packages/web-components/fast-components-msft/src/badge/index.ts +++ b/packages/web-components/fast-components-msft/src/badge/index.ts @@ -1,8 +1,8 @@ -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", @@ -10,12 +10,17 @@ export type BadgeFill = "accent" | "lightweight" | "neutral" | "string"; 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 index c3d8e818e1c..8defc402681 100644 --- 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 index cfeec36d88c..fcd50fe17ea 100644 --- 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 @@

Badge

Default

+ Accent +

Default with color map

Badge diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 6d4a361ad58..6c5e41430e1 100644 --- 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 { // (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 { + // (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(config: DesignSystemPropertyDeclarationConfig): (source: T, property: string) => void; - -// @public (undocumented) -export interface DesignSystemPropertyDeclarationConfig { - // (undocumented) - cssCustomProperty?: string | false; - // (undocumented) - default: any; -} +export function designSystemProperty(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; + [propertyName: string]: Required>; }; 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; +// @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; +// @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 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 { 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 { // (undocumented) connectedCallback(): void; // (undocumented) + defaultSlottedNodes: Node[]; + // (undocumented) formId: string; // (undocumented) handleTextInput: () => void; @@ -754,6 +780,8 @@ export class TextField extends FormAssociated { // (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 index 549170b76fa..effe5f5cc66 100644 --- 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`