@fluentui/web-components 2.5.11 → 3.0.0-alpha.2

package/dist/esm/badge/badge.stories.js

@@ -1,27 +1,108 @@
-import { fluentBadge } from './index';
+import { html, when } from '@microsoft/fast-element';
+import { renderComponent } from '../__test__/helpers.js';
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+import './define.js';
+const storyTemplate = html `
+  <fluent-badge appearance="${x => x.appearance}" color="${x => x.color}" shape="${x => x.shape}" size="${x => x.size}">
+    ${when(x => x.iconPosition === 'start', html `<svg
+        slot="start"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fill="currentColor"
+          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
+        />
+      </svg>`)}
+    ${x => x.content}
+    ${when(x => x.iconPosition === 'end', html `<svg
+        slot="start"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fill="currentColor"
+          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
+        />
+      </svg>`)}
+  </fluent-badge>
+`;
 export default {
-    title: 'Components/Badge',
-    component: fluentBadge,
+    title: 'Components/Badge/Badge',
+    args: {
+        content: null,
+    },
     argTypes: {
         appearance: {
-            options: ['neutral', 'accent', 'lightweight'],
-            control: { type: 'radio' },
+            options: Object.values(BadgeAppearance),
+            control: {
+                type: 'select',
+            },
         },
-    },
-};
-const BadgeTemplate = ({ appearance, label }) => `
-  <fluent-badge
-    ${appearance ? `appearance="${appearance}"` : ''}
-  >${label}</fluent-badge>`;
-export const Badge = BadgeTemplate.bind({});
-Badge.args = {
-    label: 'Badge',
-    appearance: 'accent',
-};
-Badge.parameters = {
-    docs: {
-        source: {
-            code: `<fluent-badge appearance="accent">Text</fluent-badge>`,
+        color: {
+            options: Object.values(BadgeColor),
+            control: {
+                type: 'select',
+            },
+        },
+        shape: {
+            options: Object.values(BadgeShape),
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: Object.values(BadgeSize),
+            control: {
+                type: 'select',
+            },
+        },
+        iconPosition: {
+            options: ['none', 'start', 'end'],
+            control: {
+                type: 'select',
+            },
+        },
+        content: {
+            control: 'text',
         },
     },
 };
+export const Badge = renderComponent(storyTemplate).bind({});
+export const Appearance = renderComponent(html `
+  <fluent-badge appearance="filled">filled</fluent-badge>
+  <fluent-badge appearance="ghost">ghost</fluent-badge>
+  <fluent-badge appearance="outline">outline</fluent-badge>
+  <fluent-badge appearance="tint">tint</fluent-badge>
+`);
+export const Color = renderComponent(html `
+  <fluent-badge color="brand">brand</fluent-badge>
+  <fluent-badge color="danger">danger</fluent-badge>
+  <fluent-badge color="important">important</fluent-badge>
+  <fluent-badge color="informative">informative</fluent-badge>
+  <fluent-badge color="severe">severe</fluent-badge>
+  <fluent-badge color="subtle">subtle</fluent-badge>
+  <fluent-badge color="success">success</fluent-badge>
+  <fluent-badge color="warning">warning</fluent-badge>
+`);
+export const Shape = renderComponent(html `
+  <fluent-badge shape="circular"></fluent-badge>
+  <fluent-badge shape="rounded"></fluent-badge>
+  <fluent-badge shape="square"></fluent-badge>
+`);
+export const Size = renderComponent(html `
+  <fluent-badge size="tiny"></fluent-badge>
+  <fluent-badge size="extra-small"></fluent-badge>
+  <fluent-badge size="small"></fluent-badge>
+  <fluent-badge size="medium"></fluent-badge>
+  <fluent-badge size="large"></fluent-badge>
+  <fluent-badge size="extra-large"></fluent-badge>
+`);

package/dist/esm/badge/badge.styles.js

@@ -1,40 +1,29 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { accentFillRest, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1LineHeight, } from '../design-tokens';
-import { typeRampMinus1 } from '../styles/patterns/type-ramp';
-export const badgeStyles = (context, definition) => css `
-    ${display('inline-block')} :host {
-      box-sizing: border-box;
-      ${typeRampMinus1};
-    }
+import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
+import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
+// why is the border not showing up?
+/** Badge styles
+ * @public
+ */
+export const styles = css `
+  :host([shape='square']) {
+    border-radius: ${borderRadiusNone};
+  }
 
-    .control {
-      border-radius: calc(${controlCornerRadius} * 1px);
-      padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
-    }
+  :host([shape='rounded']) {
+    border-radius: ${borderRadiusMedium};
+  }
 
-    :host(.lightweight) .control {
-      background: transparent;
-      color: ${neutralForegroundRest};
-      font-weight: 600;
-    }
+  :host([shape='rounded'][size='tiny']),
+  :host([shape='rounded'][size='extra-small']),
+  :host([shape='rounded'][size='small']) {
+    border-radius: ${borderRadiusSmall};
+  }
 
-    :host(.accent) .control {
-      background: ${accentFillRest};
-      color: ${foregroundOnAccentRest};
-    }
-
-    :host(.neutral) .control {
-      background: ${neutralFillSecondaryRest};
-      color: ${neutralForegroundRest};
-    }
-
-    :host([circular]) .control {
-      border-radius: 100px;
-      min-width: calc(${typeRampMinus1LineHeight} - calc(${designUnit} * 1px));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  `;
+  ${badgeSizeStyles}
+  ${badgeFilledStyles}
+  ${badgeGhostStyles}
+  ${badgeOutlineStyles}
+  ${badgeTintStyles}
+  ${badgeBaseStyles}
+`;

package/dist/esm/badge/badge.template.js

@@ -0,0 +1,14 @@
+import { html } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate, staticallyCompose } from '@microsoft/fast-foundation';
+/**
+ * The template for the Badge component.
+ * @public
+ */
+export function badgeTemplate(options = {}) {
+    return html `
+    ${startSlotTemplate(options)}
+    <slot>${staticallyCompose(options.defaultContent)}</slot>
+    ${endSlotTemplate(options)}
+  `;
+}
+export const template = badgeTemplate();

package/dist/esm/badge/define.js

@@ -0,0 +1,3 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './badge.definition.js';
+definition.define(FluentDesignSystem.registry);

package/dist/esm/badge/index.js

@@ -1,45 +1,5 @@
-import { __decorate } from "tslib";
-import { attr, DOM } from '@microsoft/fast-element';
-import { Badge as FoundationBadge, badgeTemplate as template } from '@microsoft/fast-foundation';
-import { badgeStyles as styles } from './badge.styles';
-/**
- * The Fluent Badge class
- * @internal
- */
-export class Badge extends FoundationBadge {
-    constructor() {
-        super(...arguments);
-        this.appearance = 'lightweight';
-    }
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            DOM.queueUpdate(() => {
-                this.classList.add(newValue);
-                this.classList.remove(oldValue);
-            });
-        }
-    }
-}
-__decorate([
-    attr({ mode: 'fromView' })
-], Badge.prototype, "appearance", void 0);
-/**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
- */
-export const fluentBadge = Badge.compose({
-    baseName: 'badge',
-    baseClass: FoundationBadge,
-    template,
-    styles,
-});
-/**
- * Styles for Badge
- * @public
- */
-export const badgeStyles = styles;
+export * from './badge.js';
+export * from './badge.options.js';
+export { template as BadgeTemplate } from './badge.template.js';
+export { styles as BadgeStyles } from './badge.styles.js';
+export { definition as BadgeDefinition } from './badge.definition.js';

package/dist/esm/counter-badge/counter-badge.definition.js

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { CounterBadge } from './counter-badge.js';
+import { styles } from './counter-badge.styles.js';
+import { template } from './counter-badge.template.js';
+/**
+ * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-counter-badge\>
+ */
+export const definition = CounterBadge.compose({
+    name: `${FluentDesignSystem.prefix}-counter-badge`,
+    template,
+    styles,
+});

package/dist/esm/counter-badge/counter-badge.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export class CounterBadge extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The count the badge should have.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: count
+         */
+        this.count = 0;
+        /**
+         * Max number to be displayed
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: overflow-count
+         */
+        this.overflowCount = 99;
+        /**
+         * If the badge should be shown when count is 0
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: show-zero
+         */
+        this.showZero = false;
+        /**
+         * If a dot should be displayed without the count
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: dot
+         */
+        this.dot = false;
+    }
+    countChanged() {
+        this.setCount();
+    }
+    overflowCountChanged() {
+        this.setCount();
+    }
+    /**
+     * @internal
+     * Function to set the count
+     * This is the default slotted content for the counter badge
+     * If children are slotted, that will override the value returned
+     */
+    setCount() {
+        var _a;
+        const count = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        if ((count !== 0 || this.showZero) && !this.dot) {
+            return count > this.overflowCount ? `${this.overflowCount}+` : `${count}`;
+        }
+        return;
+    }
+}
+__decorate([
+    attr
+], CounterBadge.prototype, "appearance", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "color", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "shape", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "size", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], CounterBadge.prototype, "count", void 0);
+__decorate([
+    attr({ attribute: 'overflow-count', converter: nullableNumberConverter })
+], CounterBadge.prototype, "overflowCount", void 0);
+__decorate([
+    attr({ attribute: 'show-zero', mode: 'boolean' })
+], CounterBadge.prototype, "showZero", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], CounterBadge.prototype, "dot", void 0);
+applyMixins(CounterBadge, StartEnd);

package/dist/esm/counter-badge/counter-badge.options.js

@@ -0,0 +1,42 @@
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export const CounterBadgeAppearance = {
+    filled: 'filled',
+    ghost: 'ghost',
+};
+/**
+ * CounterBadgeColor constants
+ * @public
+ */
+export const CounterBadgeColor = {
+    brand: 'brand',
+    danger: 'danger',
+    important: 'important',
+    informative: 'informative',
+    severe: 'severe',
+    subtle: 'subtle',
+    success: 'success',
+    warning: 'warning',
+};
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export const CounterBadgeShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+};
+/**
+ * A CounterBadge can be square, circular or rounded.
+ * @public
+ */
+export const CounterBadgeSize = {
+    tiny: 'tiny',
+    extraSmall: 'extra-small',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    extraLarge: 'extra-large',
+};

package/dist/esm/counter-badge/counter-badge.stories.js

@@ -0,0 +1,102 @@
+import { html } from '@microsoft/fast-element';
+import { renderComponent } from '../__test__/helpers.js';
+import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
+import './define.js';
+// TODO: Currently cannot show icon or content
+// in the counter badge stories because it projects as slotted content
+const storyTemplate = html `
+  <fluent-counter-badge
+    appearance="${x => x.appearance}"
+    color="${x => x.color}"
+    shape="${x => x.shape}"
+    size="${x => x.size}"
+    count="${x => x.count}"
+    overflow-count="${x => x.overflowCount}"
+    ?show-zero="${x => x.showZero}"
+    ?dot="${x => x.dot}"
+  ></fluent-counter-badge>
+`;
+export default {
+    title: 'Components/Badge/Counter Badge',
+    args: {
+        dot: false,
+        showZero: false,
+        appearance: CounterBadgeAppearance.filled,
+        color: CounterBadgeColor.brand,
+        shape: CounterBadgeShape.circular,
+        count: 5,
+    },
+    argTypes: {
+        appearance: {
+            options: Object.values(CounterBadgeAppearance),
+            control: {
+                type: 'select',
+            },
+        },
+        color: {
+            options: Object.values(CounterBadgeColor),
+            control: {
+                type: 'select',
+            },
+        },
+        shape: {
+            options: Object.values(CounterBadgeShape),
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: Object.values(CounterBadgeSize),
+            control: {
+                type: 'select',
+            },
+        },
+        iconPosition: {
+            options: ['none', 'start', 'end'],
+            control: {
+                type: 'select',
+            },
+        },
+        dot: {
+            control: 'boolean',
+        },
+        showZero: {
+            control: 'boolean',
+        },
+        count: {
+            control: 'number',
+        },
+        overflowCount: {
+            control: 'text',
+        },
+    },
+};
+export const CounterBadge = renderComponent(storyTemplate).bind({});
+export const Appearance = renderComponent(html `
+  <fluent-counter-badge count="5" appearance="filled"></fluent-counter-badge>
+  <fluent-counter-badge count="5" appearance="ghost"></fluent-counter-badge>
+`);
+export const Color = renderComponent(html `
+  <fluent-counter-badge count="5" color="brand"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="danger"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="important"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="informative"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="severe"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="subtle"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="success"></fluent-counter-badge>
+  <fluent-counter-badge count="5" color="warning"></fluent-counter-badge>
+`);
+export const Shape = renderComponent(html `
+  <fluent-counter-badge count="5" shape="circular"></fluent-counter-badge>
+  <fluent-counter-badge count="5" shape="rounded"></fluent-counter-badge>
+`);
+export const Size = renderComponent(html `
+  <fluent-counter-badge size="tiny"></fluent-counter-badge>
+  <fluent-counter-badge size="extra-small"></fluent-counter-badge>
+  <fluent-counter-badge size="small"></fluent-counter-badge>
+  <fluent-counter-badge size="medium"></fluent-counter-badge>
+  <fluent-counter-badge size="large"></fluent-counter-badge>
+  <fluent-counter-badge size="extra-large"></fluent-counter-badge>
+`);
+export const Dot = renderComponent(html `<fluent-counter-badge dot></fluent-counter-badge>`);
+export const ShowZero = renderComponent(html `<fluent-counter-badge show-zero></fluent-counter-badge>`);

package/dist/esm/counter-badge/counter-badge.styles.js

@@ -0,0 +1,30 @@
+import { css } from '@microsoft/fast-element';
+import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
+import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
+/** Badge styles
+ * @public
+ */
+export const styles = css `
+  :host([shape='rounded']) {
+    border-radius: ${borderRadiusMedium};
+  }
+
+  :host([shape='rounded'][size='tiny']),
+  :host([shape='rounded'][size='extra-small']),
+  :host([shape='rounded'][size='small']) {
+    border-radius: ${borderRadiusSmall};
+  }
+
+  ${badgeSizeStyles}
+  ${badgeFilledStyles}
+  ${badgeGhostStyles}
+  ${badgeBaseStyles}
+
+  :host([dot]),
+  :host([dot][appearance][size]) {
+    min-width: auto;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+  }
+`;

package/dist/esm/counter-badge/counter-badge.template.js

@@ -0,0 +1,12 @@
+import { html } from '@microsoft/fast-element';
+import { badgeTemplate } from '../badge/badge.template.js';
+function composeTemplate(options = {}) {
+    return badgeTemplate({
+        defaultContent: html `${x => x.setCount()}`,
+    });
+}
+/**
+ * The template for the Counter Badge component.
+ * @public
+ */
+export const template = composeTemplate();

package/dist/esm/counter-badge/define.js

@@ -0,0 +1,3 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './counter-badge.definition.js';
+definition.define(FluentDesignSystem.registry);

package/dist/esm/counter-badge/index.js

@@ -0,0 +1,5 @@
+export * from './counter-badge.js';
+export * from './counter-badge.options.js';
+export { template as CounterBadgeTemplate } from './counter-badge.template.js';
+export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
+export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';

package/dist/esm/fluent-design-system.js

@@ -1,11 +1,5 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
-/**
- * Provides a design system for the specified element either by returning one that was
- * already created for that element or creating one.
- * @param element - The element to root the design system at. By default, this is the body.
- * @returns A Fluent Design System
- * @public
- */
-export function provideFluentDesignSystem(element) {
-    return DesignSystem.getOrCreate(element).withPrefix('fluent');
-}
+export const FluentDesignSystem = Object.freeze({
+    prefix: 'fluent',
+    shadowRootMode: 'open',
+    registry: customElements,
+});

package/dist/esm/index-rollup.js

@@ -1,12 +1 @@
-// TODO: Is exporting Foundation still necessary with the updated API's?
-// export * from "@microsoft/fast-element";
-import { allComponents } from './custom-elements';
-import { provideFluentDesignSystem } from './fluent-design-system';
-export * from './index';
-/**
- * The global Fluent Design System.
- * @remarks
- * Only available if the components are added through a script tag
- * rather than a module/build system.
- */
-export const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
+export * from './index.js';

package/dist/esm/index.js

@@ -1,49 +1,5 @@
-/**
- * Export all custom element definitions.
- */
-export * from './custom-elements';
-export * from './fluent-design-system';
-export * from './accordion/';
-export * from './anchor/';
-export * from './anchored-region';
-export * from './badge/';
-export * from './breadcrumb';
-export * from './breadcrumb-item';
-export * from './button/';
-export * from './card/';
-export * from './checkbox/';
-export * from './combobox/';
-export * from './data-grid';
-export * from './design-system-provider/';
-export * from './dialog/';
-export * from './divider/';
-export * from './flipper/';
-export * from './horizontal-scroll/';
-export * from './listbox';
-export * from './listbox-option';
-export * from './menu/';
-export * from './menu-item/';
-export * from './number-field/';
-export * from './progress/';
-export * from './radio/';
-export * from './radio-group/';
-export * from './search/';
-export * from './select';
-export * from './skeleton/';
-export * from './slider/';
-export * from './slider-label/';
-export * from './switch/';
-export * from './tabs/';
-export * from './text-area/';
-export * from './text-field/';
-export * from './toolbar';
-export * from './tooltip';
-export * from './tree-item/';
-export * from './tree-view/';
-// export styles and utils
-export * from './design-tokens';
-export * from './styles';
-export { PaletteRGB } from './color/palette';
-export { SwatchRGB } from './color/swatch';
-export { isDark } from './color/utilities/is-dark';
-export { StandardLuminance } from './color/utilities/base-layer-luminance';
+export * from './badge/index.js';
+export * from './counter-badge/index.js';
+export * from './progress-bar/index.js';
+export * from './text/index.js';
+export * from './theme/index.js';

package/dist/esm/progress-bar/define.js

@@ -0,0 +1,3 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './progress-bar.definition.js';
+definition.define(FluentDesignSystem.registry);