fix(web-components): remove final dependencies on fast-foundation (#3…

…1009) Co-authored-by: Christopher Holt <=>
microsoft · May 10, 2024 · 1b9913b · 1b9913b
1 parent 8ea6668
commit 1b9913b
Show file tree

Hide file tree

Showing 34 changed files with 326 additions and 55 deletions.
diff --git a/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
@@ -2,12 +2,9 @@ import * as React from 'react';
 import { StoryContext } from '@storybook/addons';
 import { ComponentStory } from '@storybook/react';
 import { FASTElement, customElement, html, attr } from '@microsoft/fast-element';
-import { DesignToken } from '@microsoft/fast-foundation';
 import { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens';
 import { setThemeFor } from '@fluentui/web-components';
 
-DesignToken.registerDefaultStyleTarget();
-
 const themes = [
   { id: 'web-light', label: 'Web Light', theme: webLightTheme },
   { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },

diff --git a/change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json b/change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): remove final dependencies on fast-foundation",
+  "packageName": "@fluentui/web-components",
+  "email": "=",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -10,6 +10,8 @@ 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 type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -1648,6 +1650,9 @@ export const CounterBadgeStyles: ElementStyles;
 // @public
 export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
+// @public
+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 const curveAccelerateMax = "var(--curveAccelerateMax)";
 
@@ -1675,6 +1680,9 @@ export const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 // @public (undocumented)
 export const curveLinear = "var(--curveLinear)";
 
+// @public
+export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIAButton" because one of its declarations is marked as @internal
 //
 // @public
@@ -1741,6 +1749,9 @@ export const DialogStyles: ElementStyles;
 // @public
 export const DialogTemplate: ElementViewTemplate<Dialog>;
 
+// @public
+export function display(displayValue: CSSDisplayPropertyValue): string;
+
 // @public
 export class Divider extends FASTElement {
     alignContent?: DividerAlignContent;
@@ -1880,6 +1891,15 @@ export const fontWeightRegular = "var(--fontWeightRegular)";
 // @public (undocumented)
 export const fontWeightSemibold = "var(--fontWeightSemibold)";
 
+// @public
+export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+// @public
+export const getDirection: (rootNode: HTMLElement) => Direction;
+
+// @public
+export const hidden = ":host([hidden]){display:none}";
+
 // @public
 class Image_2 extends FASTElement {
     block?: boolean;
@@ -1940,6 +1960,9 @@ export const LabelStyles: ElementStyles;
 // @public (undocumented)
 export const LabelTemplate: ElementViewTemplate<Label>;
 
+// @public
+export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 // @public (undocumented)
 export const lineHeightBase100 = "var(--lineHeightBase100)";
 
@@ -1970,6 +1993,29 @@ export const lineHeightHero800 = "var(--lineHeightHero800)";
 // @public (undocumented)
 export const lineHeightHero900 = "var(--lineHeightHero900)";
 
+// @public
+export abstract class MatchMediaBehavior implements HostBehavior {
+    constructor(query: MediaQueryList);
+    connectedCallback(controller: HostController): void;
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    disconnectedCallback(controller: HostController): void;
+    readonly query: MediaQueryList;
+}
+
+// @public
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    readonly query: MediaQueryList;
+    // @internal
+    removedCallback(controller: HostController<any>): void;
+    readonly styles: ElementStyles;
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+}
+
+// @public
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
 // @public
 export class Menu extends FASTElement {
     cleanup?: () => void;

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -205,9 +205,9 @@
   },
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
-    "@microsoft/fast-foundation": "3.0.0-alpha.31",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
+    "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },
   "beachball": {

diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   borderRadiusSmall,

diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 
 export const styles = css`
   ${display('flex')}

diff --git a/packages/web-components/src/avatar/avatar.styles.ts b/packages/web-components/src/avatar/avatar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,

diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utils/index.js';
 import {
   borderRadiusXLarge,
   colorBackgroundOverlay,

diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   colorBrandForeground1,
   colorBrandStroke1,

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -30,3 +30,7 @@ export * from './toggle-button/index.js';
 
 export * from './fluent-design-system.js';
 export * from './theme/index.js';
+
+export * from './utils/direction.js';
+export * from './utils/display.js';
+export * from './utils/behaviors/match-media-stylesheet-behavior.js';
diff --git a/packages/web-components/src/label/label.styles.ts b/packages/web-components/src/label/label.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   colorNeutralForeground1,
   colorNeutralForegroundDisabled,

diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorCompoundBrandForeground1Hover,

diff --git a/packages/web-components/src/menu-list/menu-list.styles.ts b/packages/web-components/src/menu-list/menu-list.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorNeutralBackground1,

diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorBrandBackground2,

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   colorNeutralForeground1,
   colorNeutralForegroundDisabled,

diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusSmall,

diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,

diff --git a/packages/web-components/src/spinner/spinner.styles.ts b/packages/web-components/src/spinner/spinner.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
 
 export const styles = css`

diff --git a/packages/web-components/src/styles/partials/badge.partials.ts b/packages/web-components/src/styles/partials/badge.partials.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../../utils/index.js';
 import {
   borderRadiusCircular,
   colorBrandBackground,

diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   colorCompoundBrandBackground,

diff --git a/packages/web-components/src/tab-panel/tab-panel.styles.ts b/packages/web-components/src/tab-panel/tab-panel.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { spacingHorizontalM, spacingHorizontalMNudge } from '../theme/design-tokens.js';
 
 export const styles = css`

diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,

diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,

diff --git a/packages/web-components/src/text-input/text-input.styles.ts b/packages/web-components/src/text-input/text-input.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorCompoundBrandStroke,

diff --git a/packages/web-components/src/text/text.styles.ts b/packages/web-components/src/text/text.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   fontFamilyBase,
   fontFamilyMonospace,

diff --git a/packages/web-components/src/theme/theme.stories.ts b/packages/web-components/src/theme/theme.stories.ts
@@ -1,8 +1,5 @@
-import { DesignToken } from '@microsoft/fast-foundation/design-token.js';
 import * as tokens from '../theme/design-tokens.js';
 
-DesignToken.registerDefaultStyleTarget();
-
 export default {
   title: 'Theme/Tokens',
 };
@@ -12,13 +9,13 @@ export const Tokens = () => `
   <h3>Theme Tokens</h3>
   <p>Debug story which uses theme tokens to style the element below.</p>
   <div style="
-    font-family: var(${tokens.fontFamilyBase});
-    font-size: var(${tokens.fontSizeBase300});
-    background: var(${tokens.colorBrandBackground});
-    color: var(${tokens.colorNeutralForegroundOnBrand});
-    border: var(${tokens.strokeWidthThicker}) solid var(${tokens.colorNeutralStroke1});
-    padding: var(${tokens.spacingVerticalS}) var(${tokens.spacingHorizontalM});
-    box-shadow: var(${tokens.shadow28});
+    font-family: ${tokens.fontFamilyBase};
+    font-size: ${tokens.fontSizeBase300};
+    background: ${tokens.colorBrandBackground};
+    color: ${tokens.colorNeutralForegroundOnBrand};
+    border: ${tokens.strokeWidthThicker} solid ${tokens.colorNeutralStroke1};
+    padding: ${tokens.spacingVerticalS} ${tokens.spacingHorizontalM};
+    box-shadow: ${tokens.shadow28};
   ">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
 </div>
 `;
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import {
   colorBrandBackgroundHover,