feat: add badge and counter badge as new components

change/@fluentui-web-components-25e8f64c-845e-401f-a7f8-c9472a5720df.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add badge and counter badge as new components",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -8,8 +8,174 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { StartEndOptions } from '@microsoft/fast-foundation';
+import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
+//
+// @public
+export class Badge extends FASTElement {
+    appearance: BadgeAppearance;
+    color: BadgeColor;
+    shape: BadgeShape;
+    size: BadgeSize;
+}
+
+// @internal
+export interface Badge extends StartEnd {
+}
+
+// @public
+export const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
+
+// @public
+export type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+
+// @public
+export 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";
+};
+
+// @public
+export type BadgeColor = ValuesOf<typeof BadgeColor>;
+
+// @public
+export const BadgeDefinition: FASTElementDefinition<typeof Badge>;
+
+// Warning: (ae-internal-missing-underscore) The name "BadgeOptions" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
+
+// @public
+export const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type BadgeShape = ValuesOf<typeof BadgeShape>;
+
+// @public
+export const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+// @public
+export type BadgeSize = ValuesOf<typeof BadgeSize>;
+
+// @public
+export const BadgeStyles: ElementStyles;
+
+// @public (undocumented)
+export const BadgeTemplate: ElementViewTemplate<Badge>;
+
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "CounterBadge" because one of its declarations is marked as @internal
+//
+// @public
+export class CounterBadge extends FASTElement {
+    appearance: CounterBadgeAppearance;
+    color: CounterBadgeColor;
+    count: number;
+    // (undocumented)
+    protected countChanged(): void;
+    dot: boolean;
+    overflowCount: number;
+    // (undocumented)
+    protected overflowCountChanged(): void;
+    // @internal
+    setCount(): string | void;
+    shape: CounterBadgeShape;
+    showZero: boolean;
+    size: CounterBadgeSize;
+}
+
+// @internal
+export interface CounterBadge extends StartEnd {
+}
+
+// @public
+export const CounterBadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
+
+// @public
+export type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+
+// @public
+export 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";
+};
+
+// @public
+export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+
+// @public
+export const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
+
+// Warning: (ae-incompatible-release-tags) The symbol "CounterBadgeOptions" is marked as @public, but its signature references "BadgeOptions" which is marked as @internal
+//
+// @public
+export type CounterBadgeOptions = BadgeOptions;
+
+// @public
+export const CounterBadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
+
+// @public
+export type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+
+// @public
+export const CounterBadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+// @public
+export type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;
+
+// @public
+export const CounterBadgeStyles: ElementStyles;
+
+// @public
+export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
+
 // @public
 class Text_2 extends FASTElement {
     align: TextAlign;

packages/web-components/package.json

@@ -24,6 +24,14 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./badge": {
+      "types": "./dist/esm/badge/define.d.ts",
+      "default": "./dist/esm/badge/define.js"
+    },
+    "./counter-badge": {
+      "types": "./dist/esm/counter-badge/define.d.ts",
+      "default": "./dist/esm/counter-badge/define.js"
+    },
     "./text": {
       "types": "./dist/esm/text/define.d.ts",
       "default": "./dist/esm/text/define.js"

packages/web-components/src/badge/badge.definition.ts

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

packages/web-components/src/badge/badge.options.ts

@@ -0,0 +1,82 @@
+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 type BadgeOptions = StartEndOptions<Badge> & {
+  defaultContent?: StaticallyComposableHTML;
+};
+
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export const BadgeAppearance = {
+  filled: 'filled',
+  ghost: 'ghost',
+  outline: 'outline',
+  tint: 'tint',
+} as const;
+
+/**
+ * A Badge can be filled, outline, ghost, inverted
+ * @public
+ */
+export type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+
+/**
+ * BadgeColor constants
+ * @public
+ */
+export const BadgeColor = {
+  brand: 'brand',
+  danger: 'danger',
+  important: 'important',
+  informative: 'informative',
+  severe: 'severe',
+  subtle: 'subtle',
+  success: 'success',
+  warning: 'warning',
+} as const;
+
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export type BadgeColor = ValuesOf<typeof BadgeColor>;
+
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export const BadgeShape = {
+  circular: 'circular',
+  rounded: 'rounded',
+  square: 'square',
+} as const;
+
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export type BadgeShape = ValuesOf<typeof BadgeShape>;
+
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export const BadgeSize = {
+  tiny: 'tiny',
+  extraSmall: 'extra-small',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  extraLarge: 'extra-large',
+} as const;
+
+/**
+ * A Badge can be on of several preset sizes.
+ * @public
+ */
+export type BadgeSize = ValuesOf<typeof BadgeSize>;