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

package/.eslintrc.json

@@ -0,0 +1,62 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "import"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "settings": {
+    "react": {
+      "version": "latest"
+    }
+  },
+  "rules": {
+    "no-extra-boolean-cast": "off",
+    "no-prototype-builtins": "off",
+    "no-fallthrough": "off",
+    "no-unexpected-multiline": "off",
+    "import/order": "error",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "comma-dangle": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "none"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "default",
+        "format": ["UPPER_CASE", "camelCase", "PascalCase"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "property",
+        "format": null // disable for property names because of our foo__expanded convention for JSS
+        // TODO: I think we can come up with a regex that ignores variables with __ in them
+      },
+      {
+        "selector": "variable",
+        "format": null // disable for variable names because of our foo__expanded convention for JSS
+        // TODO: I think we can come up with a regex that ignores variables with __ in them
+      }
+    ]
+  }
+}

package/CHANGELOG.json

@@ -2,30 +2,89 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Mon, 23 Jan 2023 12:40:30 GMT",
-      "tag": "@fluentui/web-components_v3.0.0-alpha.1",
-      "version": "3.0.0-alpha.1",
+      "date": "Wed, 25 Jan 2023 16:36:01 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.2",
+      "version": "3.0.0-alpha.2",
       "comments": {
         "none": [
           {
             "author": "martinhochel@microsoft.com",
             "package": "@fluentui/web-components",
-            "commit": "7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8",
-            "comment": "chore: bump web-components to 3.0.0-alpha.0"
-          },
+            "commit": "c5b3031ada2f788ef0a36185024f4c10c16143d6",
+            "comment": "chore: run manually bump to fix failed CI release"
+          }
+        ],
+        "prerelease": [
           {
             "author": "miroslav.stastny@microsoft.com",
             "package": "@fluentui/web-components",
-            "commit": "cd42ab4f8aa11c7ac134538193dc8dc4a01ca0f3",
-            "comment": "Reset web-components for v3 development"
+            "commit": "68de783e80c71173a717c758680a63bf9c7e8c78",
+            "comment": "feat: export theme"
           }
-        ],
+        ]
+      }
+    },
+    {
+      "date": "Wed, 25 Jan 2023 14:49:08 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.1",
+      "version": "3.0.0-alpha.1",
+      "comments": {
         "prerelease": [
+          {
+            "author": "ryan@ryanmerrill.net",
+            "package": "@fluentui/web-components",
+            "commit": "1322f3f962e8a850fe104cc2ba9b12b2bc2f2842",
+            "comment": "add progressbar as new component"
+          },
           {
             "author": "miroslav.stastny@microsoft.com",
             "package": "@fluentui/web-components",
             "commit": "6de62a46eafd74b968ec913901729b3f7284dc7a",
             "comment": "Add initial theme"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "eead74fee07339f998615fe34d8f847d0f63af6e",
+            "comment": "add badge and counter badge as new components"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "5e3ba35835c0a5487b574ea58a51cccd67b5fa8c",
+            "comment": "add text as a new component"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "7c94cbd46051ea57bba4e8885c86e89967bb412c",
+            "comment": "chore: setup typescript 4.7 for web-components package"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "cd42ab4f8aa11c7ac134538193dc8dc4a01ca0f3",
+            "comment": "Reset web-components for v3 development"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8",
+            "comment": "chore: bump web-components to 3.0.0-alpha.0"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "9b29aada3dba8f929530ddc1b4b64e869d5fffd4",
+            "comment": "chore(web-components): resolve invalid webpack test regex on windows"
+          },
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "be3d30fcbe222be34b02a554e948d14bb2d730df",
+            "comment": "update clean file to .cjs and ensure rimraf is in dependency tree"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,17 +1,29 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 23 Jan 2023 12:40:30 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Jan 2023 16:36:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.2)
+
+Wed, 25 Jan 2023 16:36:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.1..@fluentui/web-components_v3.0.0-alpha.2)
+
+### Changes
+
+- feat: export theme ([PR #26500](https://github.com/microsoft/fluentui/pull/26500) by miroslav.stastny@microsoft.com)
+
 ## [3.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.1)
 
-Mon, 23 Jan 2023 12:40:30 GMT 
+Wed, 25 Jan 2023 14:49:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.8..@fluentui/web-components_v3.0.0-alpha.1)
 
 ### Changes
 
+- add progressbar as new component ([PR #26329](https://github.com/microsoft/fluentui/pull/26329) by ryan@ryanmerrill.net)
 - Add initial theme ([PR #25660](https://github.com/microsoft/fluentui/pull/25660) by miroslav.stastny@microsoft.com)
+- add badge and counter badge as new components ([PR #26357](https://github.com/microsoft/fluentui/pull/26357) by chhol@microsoft.com)
+- add text as a new component ([PR #26090](https://github.com/microsoft/fluentui/pull/26090) by chhol@microsoft.com)
 
 ## [2.5.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.8)
 

package/dist/dts/badge/badge.d.ts

@@ -0,0 +1,49 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class Badge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: BadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: BadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: BadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size: BadgeSize;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API extractor.
+ * TODO: Below will be unnecessary when Badge class gets updated
+ * @internal
+ */
+export interface Badge extends StartEnd {
+}

package/dist/dts/badge/badge.definition.d.ts

@@ -0,0 +1,11 @@
+import { Badge } from './badge.js';
+/**
+ * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Badge>;

package/dist/dts/badge/badge.options.d.ts

@@ -0,0 +1,73 @@
+import { StartEndOptions, StaticallyComposableHTML, ValuesOf } from '@microsoft/fast-foundation';
+import type { Badge } from './badge.js';
+/**
+ * @internal - marking as internal update when Badge PR for start/end is in
+ */
+export declare type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export declare const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
+/**
+ * A Badge can be filled, outline, ghost, inverted
+ * @public
+ */
+export declare type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+/**
+ * BadgeColor constants
+ * @public
+ */
+export declare const BadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeShape = ValuesOf<typeof BadgeShape>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * A Badge can be on of several preset sizes.
+ * @public
+ */
+export declare type BadgeSize = ValuesOf<typeof BadgeSize>;

package/dist/dts/badge/badge.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Args, Meta } from '@storybook/html';
+import type { Badge as FluentBadge } from './badge.js';
+import './define.js';
+declare type BadgeStoryArgs = Args & FluentBadge;
+declare type BadgeStoryMeta = Meta<BadgeStoryArgs>;
+declare const _default: BadgeStoryMeta;
+export default _default;
+export declare const Badge: any;
+export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
+export declare const Color: (args: Args) => Element | DocumentFragment | null;
+export declare const Shape: (args: Args) => Element | DocumentFragment | null;
+export declare const Size: BadgeStoryMeta;

package/dist/dts/badge/badge.styles.d.ts

@@ -0,0 +1,4 @@
+/** Badge styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/badge/badge.template.d.ts

@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Badge } from './badge.js';
+import type { BadgeOptions } from './badge.options.js';
+/**
+ * The template for the Badge component.
+ * @public
+ */
+export declare function badgeTemplate<T extends Badge>(options?: BadgeOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Badge>;

package/dist/dts/badge/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/badge/index.d.ts

@@ -0,0 +1,5 @@
+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/dts/counter-badge/counter-badge.d.ts

@@ -0,0 +1,90 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class CounterBadge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: CounterBadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: CounterBadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: CounterBadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size: CounterBadgeSize;
+    /**
+     * The count the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: count
+     */
+    count: number;
+    protected countChanged(): void;
+    /**
+     * Max number to be displayed
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: overflow-count
+     */
+    overflowCount: number;
+    protected overflowCountChanged(): void;
+    /**
+     * If the badge should be shown when count is 0
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: show-zero
+     */
+    showZero: boolean;
+    /**
+     * If a dot should be displayed without the count
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: dot
+     */
+    dot: boolean;
+    /**
+     * @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(): string | void;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API extractor.
+ * TODO: Below will be unnecessary when Badge class gets updated
+ * @internal
+ */
+export interface CounterBadge extends StartEnd {
+}

package/dist/dts/counter-badge/counter-badge.definition.d.ts

@@ -0,0 +1,11 @@
+import { CounterBadge } from './counter-badge.js';
+/**
+ * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-counter-badge\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof CounterBadge>;

package/dist/dts/counter-badge/counter-badge.options.d.ts

@@ -0,0 +1,69 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+import { BadgeOptions } from '../badge/badge.options.js';
+/**
+ * CounterBadge options
+ * @public
+ */
+export declare type CounterBadgeOptions = BadgeOptions;
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export declare const CounterBadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
+/**
+ * A CounterBadge can have an appearance of filled or ghost
+ * @public
+ */
+export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+/**
+ * CounterBadgeColor constants
+ * @public
+ */
+export declare const CounterBadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+/**
+ * A CounterBadge can be square, circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * A CounterBadge can be on of several preset sizes.
+ * @public
+ */
+export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;

package/dist/dts/counter-badge/counter-badge.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Args, Meta } from '@storybook/html';
+import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
+import './define.js';
+declare type CounterBadgeStoryArgs = Args & FluentCounterBadge;
+declare type CounterBadgeStoryMeta = Meta<CounterBadgeStoryArgs>;
+declare const _default: CounterBadgeStoryMeta;
+export default _default;
+export declare const CounterBadge: any;
+export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
+export declare const Color: (args: Args) => Element | DocumentFragment | null;
+export declare const Shape: (args: Args) => Element | DocumentFragment | null;
+export declare const Size: CounterBadgeStoryMeta;
+export declare const Dot: (args: Args) => Element | DocumentFragment | null;
+export declare const ShowZero: (args: Args) => Element | DocumentFragment | null;

package/dist/dts/counter-badge/counter-badge.styles.d.ts

@@ -0,0 +1,4 @@
+/** Badge styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/counter-badge/counter-badge.template.d.ts

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { CounterBadge } from './counter-badge.js';
+/**
+ * The template for the Counter Badge component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<CounterBadge>;

package/dist/dts/counter-badge/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/counter-badge/index.d.ts

@@ -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/dts/fluent-design-system.d.ts

@@ -0,0 +1,5 @@
+export declare const FluentDesignSystem: Readonly<{
+    prefix: "fluent";
+    shadowRootMode: "open";
+    registry: CustomElementRegistry;
+}>;

package/dist/dts/index-rollup.d.ts

@@ -1 +1 @@
-export * from './index';
+export * from './index.js';

package/dist/dts/index.d.ts

@@ -1 +1,5 @@
-export declare const empty = "";
+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/dts/progress-bar/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/progress-bar/index.d.ts

@@ -0,0 +1,5 @@
+export * from './progress-bar.js';
+export * from './progress-bar.options.js';
+export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { styles as ProgressBarStyles } from './progress-bar.styles.js';
+export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -0,0 +1,30 @@
+import { FASTProgress } from '@microsoft/fast-foundation';
+import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+/**
+ * The base class used for constructing a fluent-progress-bar custom element
+ * @public
+ */
+export declare class ProgressBar extends FASTProgress {
+    /**
+     * The thickness of the progress bar
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: thickness
+     */
+    thickness: ProgressBarThickness;
+    /**
+     * The shape of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: ProgressBarShape;
+    /**
+     * The validation state of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: validation-state
+     */
+    validationState: ProgressBarValidationState | null;
+}

package/dist/dts/progress-bar/progress-bar.definition.d.ts

@@ -0,0 +1,10 @@
+import { ProgressBar } from './progress-bar.js';
+/**
+ * The Fluent ProgressBar Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof ProgressBar>;