normalize storybook fixtures (#6316)

* add storybook types and renderComponent helper * add ES2017.Object lib to tsconfig * update eslintrc * add hidden debug story * move accordion types to options module * move anchor types to options module * move anchored-region types to options module * move button types to options module * move horizontal-scroll types to options module * move picker types to options module * move slider types to options module * normalize accordion stories * normalize accordion-item stories * normalize anchor stories * normalize anchored-region stories * normalize avatar stories * normalize badge stories * normalize breadcrumb stories * normalize breadcrumb-item stories * normalize button stories * normalize calendar stories * normalize card stories * normalize checkbox stories * normalize combobox stories * normalize data-grid, data-grid-row, and data-grid-cell stories * normalize dialog stories * normalize disclosure stories * normalize divider stories * normalize flipper stories * normalize horizontal-scroll stories * normalize listbox stories * normalize listbox-option stories * normalize menu stories * normalize menu-item stories * normalize number-field stories * normalize picker stories * normalize progress stories * normalize progress and progress-ring stories * normalize radio stories * normalize radio-group stories * normalize search stories * normalize select stories * normalize skeleton stories * normalize slider stories * normalize slider-label stories * normalize switch stories * normalize tab stories * normalize tab-panel stories * normalize tabs stories * normalize text-area stories * normalize text-field stories * normalize toolbar stories * normalize tooltip stories * normalize tree-item stories * normalize tree-view stories * update api-report and READMEs * Change files * patch flipper
microsoft · Jun 10, 2024 · 25575a5 · 25575a5
1 parent 3168d34
commit 25575a5
Show file tree

Hide file tree

Showing 102 changed files with 2,728 additions and 2,047 deletions.
diff --git a/change/@microsoft-fast-foundation-6f10b9c9-3154-4b85-a95c-f22a452e7d7a.json b/change/@microsoft-fast-foundation-6f10b9c9-3154-4b85-a95c-f22a452e7d7a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "normalize storybook stories",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/.eslintrc.json b/packages/web-components/fast-foundation/.eslintrc.json
@@ -20,12 +20,20 @@
                 },
                 "extendDefaults": true
             }
-        ],
-        "no-restricted-imports": [
-            "error",
-            {
-                "patterns": ["**/stories/**"]
-            }
         ]
-    }
+    },
+    "overrides": [
+        {
+            "files": ["**/*.ts"],
+            "excludedFiles": ["**/*.stories.ts"],
+            "rules": {
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        "patterns": ["**/stories/**"]
+                    }
+                ]
+            }
+        }
+    ]
 }
diff --git a/packages/web-components/fast-foundation/.storybook/debug.stories.ts b/packages/web-components/fast-foundation/.storybook/debug.stories.ts
@@ -0,0 +1,13 @@
+/**
+ * This is a special story that allows us to load a blank preview page for
+ * playwright tests which need to generate elements and insert them directly,
+ * rather than start with a pre-determined element.
+ */
+
+import type { Meta } from "@storybook/html";
+
+export default {
+    title: "Debug",
+} as Meta;
+
+export const Blank = () => "";
diff --git a/packages/web-components/fast-foundation/.storybook/main.cjs b/packages/web-components/fast-foundation/.storybook/main.cjs
@@ -3,7 +3,7 @@ const path = require("path");
 
 module.exports = {
     addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-    stories: ["../src/**/stories/*.stories.ts"],
+    stories: ["../src/**/stories/*.stories.ts", "debug.stories.ts"],
     framework: "@storybook/html",
     features: {
         babelModeV7: true,

diff --git a/packages/web-components/fast-foundation/.storybook/manager-head.html b/packages/web-components/fast-foundation/.storybook/manager-head.html
@@ -0,0 +1,6 @@
+<style>
+    /* hide the blank debug "story" from the sidebar */
+    [data-item-id*="debug"] {
+        display: none !important;
+    }
+</style>
diff --git a/packages/web-components/fast-foundation/.storybook/preview-head.html b/packages/web-components/fast-foundation/.storybook/preview-head.html
@@ -98,8 +98,10 @@
         --type-ramp-plus-6-line-height: 72px;
     }
 
-    html {
+    html,
+    .docs-story {
         background-color: var(--fill-color);
+        color: var(--neutral-foreground-rest);
         min-height: 100%;
     }
 

diff --git a/packages/web-components/fast-foundation/.storybook/preview.js b/packages/web-components/fast-foundation/.storybook/preview.js
@@ -1,3 +1,4 @@
+import "@microsoft/fast-element/polyfills";
 import "../src/anchor/stories/anchor.register.js";
 import "../src/anchored-region/stories/anchored-region.register.js";
 import "../src/avatar/stories/avatar.register.js";

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -59,14 +59,34 @@ export interface AnchoredRegionConfig {
 }
 
 // @public
-export type AnchoredRegionPositionLabel = "start" | "insetStart" | "insetEnd" | "end" | "center";
+export const AnchoredRegionPositionLabel: {
+    readonly start: "start";
+    readonly insetStart: "insetStart";
+    readonly insetEnd: "insetEnd";
+    readonly end: "end";
+    readonly center: "center";
+};
+
+// @public
+export type AnchoredRegionPositionLabel = typeof AnchoredRegionPositionLabel[keyof typeof AnchoredRegionPositionLabel];
 
 // @public
 export function anchoredRegionTemplate(): ElementViewTemplate<FASTAnchoredRegion>;
 
 // @public
 export type AnchorOptions = StartEndOptions;
 
+// @public
+export const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+
+// @public
+export type AnchorTarget = typeof AnchorTarget[keyof typeof AnchorTarget];
+
 // @public
 export function anchorTemplate(options?: AnchorOptions): ElementViewTemplate<FASTAnchor>;
 
@@ -102,7 +122,7 @@ export const AutoUpdateMode: {
     readonly auto: "auto";
 };
 
-// @public (undocumented)
+// @public
 export type AutoUpdateMode = typeof AutoUpdateMode[keyof typeof AutoUpdateMode];
 
 // @public
@@ -114,10 +134,24 @@ export type AvatarOptions = {
 export function avatarTemplate(options?: AvatarOptions): ElementViewTemplate<FASTAvatar>;
 
 // @public
-export type AxisPositioningMode = "uncontrolled" | "locktodefault" | "dynamic";
+export const AxisPositioningMode: {
+    readonly uncontrolled: "uncontrolled";
+    readonly locktodefault: "locktodefault";
+    readonly dynamic: "dynamic";
+};
 
 // @public
-export type AxisScalingMode = "anchor" | "fill" | "content";
+export type AxisPositioningMode = typeof AxisPositioningMode[keyof typeof AxisPositioningMode];
+
+// @public
+export const AxisScalingMode: {
+    readonly anchor: "anchor";
+    readonly content: "content";
+    readonly fill: "fill";
+};
+
+// @public
+export type AxisScalingMode = typeof AxisScalingMode[keyof typeof AxisScalingMode];
 
 // @public
 export function badgeTemplate(): ElementViewTemplate<FASTBadge>;
@@ -139,6 +173,16 @@ export type ButtonOptions = StartEndOptions;
 // @public
 export function buttonTemplate(options?: ButtonOptions): ElementViewTemplate<FASTButton>;
 
+// @public
+export const ButtonType: {
+    readonly submit: "submit";
+    readonly reset: "reset";
+    readonly button: "button";
+};
+
+// @public
+export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
+
 // @public
 export function calendarCellTemplate(options: CalendarOptions, todayString: string): ViewTemplate<CalendarDateInfo>;
 
@@ -534,6 +578,16 @@ export interface DesignTokenSubscriber<T extends DesignToken<any>> {
 // @public
 export function dialogTemplate(): ElementViewTemplate<FASTDialog>;
 
+// Warning: (ae-internal-missing-underscore) The name "Dimension" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export interface Dimension {
+    // (undocumented)
+    height: number;
+    // (undocumented)
+    width: number;
+}
+
 // @public @deprecated
 export const disabledCursor = "not-allowed";
 
@@ -606,7 +660,7 @@ export class FASTAnchor extends FASTElement {
     ping: string;
     referrerpolicy: string;
     rel: string;
-    target: "_self" | "_blank" | "_parent" | "_top";
+    target: AnchorTarget;
     type: string;
 }
 
@@ -761,9 +815,9 @@ export class FASTButton extends FormAssociatedButton {
     formtarget: "_self" | "_blank" | "_parent" | "_top";
     // (undocumented)
     protected formtargetChanged(): void;
-    type: "submit" | "reset" | "button";
+    type: ButtonType;
     // (undocumented)
-    protected typeChanged(previous: "submit" | "reset" | "button" | void, next: "submit" | "reset" | "button"): void;
+    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
     validate(): void;
 }
 
@@ -1057,7 +1111,7 @@ export class FASTHorizontalScroll extends FASTElement {
     // (undocumented)
     disconnectedCallback(): void;
     duration: string;
-    easing: ScrollEasing;
+    easing: ScrollEasing | string;
     flippersHiddenFromAT: boolean;
     keyupHandler(e: Event & KeyboardEvent): void;
     nextFlipperContainer: HTMLDivElement;
@@ -1430,7 +1484,7 @@ export class FASTPicker extends FormAssociatedPicker {
     menuOptionTemplate: ViewTemplate;
     // (undocumented)
     protected menuOptionTemplateChanged(): void;
-    menuPlacement: menuConfigs;
+    menuPlacement: MenuPlacement;
     // (undocumented)
     protected menuPlacementChanged(): void;
     // @internal
@@ -2236,7 +2290,17 @@ export const getDirection: (rootNode: HTMLElement) => Direction;
 export const hidden = ":host([hidden]){display:none}";
 
 // @public
-export type HorizontalPosition = "start" | "end" | "left" | "right" | "center" | "unset";
+export const HorizontalPosition: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly center: "center";
+    readonly unset: "unset";
+};
+
+// @public
+export type HorizontalPosition = typeof HorizontalPosition[keyof typeof HorizontalPosition];
 
 // @public
 export type HorizontalScrollOptions = StartEndOptions & {
@@ -2248,7 +2312,13 @@ export type HorizontalScrollOptions = StartEndOptions & {
 export function horizontalScrollTemplate(options?: HorizontalScrollOptions): ElementViewTemplate<FASTHorizontalScroll>;
 
 // @public
-export type HorizontalScrollView = "default" | "mobile";
+export const HorizontalScrollView: {
+    readonly default: "default";
+    readonly mobile: "mobile";
+};
+
+// @public
+export type HorizontalScrollView = typeof HorizontalScrollView[keyof typeof HorizontalScrollView];
 
 // Warning: (ae-internal-missing-underscore) The name "interactiveCalendarGridTemplate" should be prefixed with an underscore because the declaration is marked as @internal
 //
@@ -2296,9 +2366,6 @@ export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
 // @public
 export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
 
-// @beta
-export type menuConfigs = "bottom" | "bottom-fill" | "tallest" | "tallest-fill" | "top" | "top-fill";
-
 // @public
 export type MenuItemColumnCount = 0 | 1 | 2;
 
@@ -2323,6 +2390,19 @@ export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];
 // @public
 export function menuItemTemplate(options: MenuItemOptions): ElementViewTemplate<FASTMenuItem>;
 
+// @beta
+export const MenuPlacement: {
+    readonly bottom: "bottom";
+    readonly bottomFill: "bottom-fill";
+    readonly tallest: "tallest";
+    readonly tallestFill: "tallest-fill";
+    readonly top: "top";
+    readonly topFill: "top-fill";
+};
+
+// @beta
+export type MenuPlacement = typeof MenuPlacement[keyof typeof MenuPlacement];
+
 // @public
 export function menuTemplate(): ElementViewTemplate<FASTMenu>;
 
@@ -2457,7 +2537,15 @@ export const roleForMenuItem: {
 };
 
 // @public
-export type ScrollEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
+export const ScrollEasing: {
+    readonly linear: "linear";
+    readonly easeIn: "ease-in";
+    readonly easeOut: "ease-out";
+    readonly easeInOut: "ease-in-out";
+};
+
+// @public
+export type ScrollEasing = typeof ScrollEasing[keyof typeof ScrollEasing];
 
 // @public
 export type SearchOptions = StartEndOptions;
@@ -2639,11 +2727,14 @@ export const TooltipPosition: {
     readonly right: "right";
     readonly bottom: "bottom";
     readonly left: "left";
+    readonly center: "center";
     readonly start: "start";
     readonly end: "end";
     readonly topLeft: "top-left";
+    readonly topCenter: "top-center";
     readonly topRight: "top-right";
     readonly bottomLeft: "bottom-left";
+    readonly bottomCenter: "bottom-center";
     readonly bottomRight: "bottom-right";
     readonly topStart: "top-start";
     readonly topEnd: "top-end";
@@ -2669,7 +2760,15 @@ export function treeItemTemplate(options?: TreeItemOptions): ElementViewTemplate
 export function treeViewTemplate(): ElementViewTemplate<FASTTreeView>;
 
 // @public
-export type VerticalPosition = "top" | "bottom" | "center" | "unset";
+export const VerticalPosition: {
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly unset: "unset";
+};
+
+// @public
+export type VerticalPosition = typeof VerticalPosition[keyof typeof VerticalPosition];
 
 // @public
 export const WeekdayFormat: {