Adds Slider as a web component (microsoft#27165)

* Initial commit of styles and markup for slider * Cleans up some styles and adds Stories for states * More Slider styles and stories * Adds stripes to slider for vertical/horizontal. Deletes SliderLabel as we don't need it * Fixes silly math * Cleans up CSS * Cleans up CSS and Stories for Slider * Initial commit of styles and markup for slider * More Slider styles and stories * Adds stripes to slider for vertical/horizontal. Deletes SliderLabel as we don't need it * Fixes silly math * Fixes some styles on checkmarks * Adds check to see if Step was set * Generates API report * Removes some duplicate CSS and cleans up spec * Adds slider to index.ts and package.json * Addresses initial round of feedback to PR * Renames sizeChanged to stepChanged. Duh. * Adds JSDOC comments * update slider step rate code * Adds export to SliderOrientation * Adds new focus style and fixes overflow visual bug * Fixes build errors * Adds export to SliderOrientation * Adds new focus style and fixes overflow visual bug * Fixes build errors * Runs API report --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v · Apr 29, 2024 · 5854b5c · 5854b5c
1 parent 2124972
commit 5854b5c
Show file tree

Hide file tree

Showing 15 changed files with 457 additions and 79 deletions.
diff --git a/change/@fluentui-web-components-a3ffbc3c-8b89-4d1c-ba56-3690c7fb06e1.json b/change/@fluentui-web-components-a3ffbc3c-8b89-4d1c-ba56-3690c7fb06e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds Slider as a web component",
+  "packageName": "@fluentui/web-components",
+  "email": "ryan@ryanmerrill.net",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -16,7 +16,9 @@ import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { FASTProgress } from '@microsoft/fast-foundation';
 import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTSlider } from '@microsoft/fast-foundation';
 import { FASTSwitch } from '@microsoft/fast-foundation';
+import { SliderOrientation } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
@@ -1603,6 +1605,37 @@ export const shadow8: CSSDesignToken<string>;
 // @public (undocumented)
 export const shadow8Brand: CSSDesignToken<string>;
 
+// @public
+export class Slider extends FASTSlider {
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // (undocumented)
+    handleChange(source: any, propertyName: string): void;
+    size?: SliderSize;
+}
+
+// @public
+export const SliderDefinition: FASTElementDefinition<typeof Slider>;
+
+export { SliderOrientation }
+
+// @public
+export const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+
+// @public
+export type SliderSize = ValuesOf<typeof SliderSize>;
+
+// @public
+export const SliderStyles: ElementStyles;
+
+// @public (undocumented)
+export const SliderTemplate: ElementViewTemplate<FASTSlider>;
+
 // @public (undocumented)
 export const spacingHorizontalL: CSSDesignToken<string>;
 

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -60,13 +60,17 @@
       "types": "./dist/esm/progress-bar/define.d.ts",
       "default": "./dist/esm/progress-bar/define.js"
     },
-    "./switch": {
-      "types": "./dist/esm/switch/define.d.ts",
-      "default": "./dist/esm/switch/define.js"
+    "./slider": {
+      "types": "./dist/esm/slider/define.d.ts",
+      "default": "./dist/esm/slider/define.js"
     },
     "./spinner": {
       "types": "./dist/esm/spinner/define.d.ts",
       "default": "./dist/esm/spinner/define.js"
+    },
+    "./switch": {
+      "types": "./dist/esm/switch/define.d.ts",
+      "default": "./dist/esm/switch/define.js"
     }
   },
   "scripts": {

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -6,6 +6,7 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './progress-bar/index.js';
+export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './text/index.js';

diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -13,7 +13,7 @@ import {
   colorPaletteRedBackground3,
 } from '../theme/design-tokens.js';
 
-/** Text styles
+/** ProgressBar styles
  * @public
  */
 export const styles = css`

diff --git a/packages/web-components/src/slider-label/slider-label.spec.md b/packages/web-components/src/slider-label/slider-label.spec.md
diff --git a/packages/web-components/src/slider/define.ts b/packages/web-components/src/slider/define.ts
@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './slider.definition.js';
+
+definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
@@ -0,0 +1,5 @@
+export * from './slider.js';
+export * from './slider.options.js';
+export { definition as SliderDefinition } from './slider.definition.js';
+export { styles as SliderStyles } from './slider.styles.js';
+export { template as SliderTemplate } from './slider.template.js';
diff --git a/packages/web-components/src/slider/slider.definition.ts b/packages/web-components/src/slider/slider.definition.ts
@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Slider } from './slider.js';
+import { styles } from './slider.styles.js';
+import { template } from './slider.template.js';
+
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+export const definition = Slider.compose({
+  name: `${FluentDesignSystem.prefix}-slider`,
+  template,
+  styles,
+});
diff --git a/packages/web-components/src/slider/slider.options.ts b/packages/web-components/src/slider/slider.options.ts
@@ -0,0 +1,17 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+export { SliderOrientation } from '@microsoft/fast-foundation';
+
+/**
+ * SliderSize Constants
+ * @public
+ */
+export const SliderSize = {
+  small: 'small',
+  medium: 'medium',
+} as const;
+
+/**
+ * Applies bar height to the slider rail and diameter to the slider thumbs
+ * @public
+ */
+export type SliderSize = ValuesOf<typeof SliderSize>;
diff --git a/packages/web-components/src/slider/slider.spec.md b/packages/web-components/src/slider/slider.spec.md
@@ -75,7 +75,6 @@ None
   - no `defaultValue` or `value` attributes, instead only `current-value` that specifies the selected range of the slider
   - `rail` is in Fluent React; `track` is in FAST Foundation
   - No value indicators to the left/right of slider in FAST Slider. These should be present in Fluent version. This will be handled through slotting in the the SliderLabel component.
-  - No default support for the ticks on the slider when `step` is set. This will be handled through slotting in the SliderLabel component.
 - [x] [Fluent UI React V9 Storybook](https://aka.ms/fluentui-storybook) for implementation differences and document
   - [Fluent React V9 Slider](https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/components-slider--default)
 - [x] [Open GitHub issues related to component](https://github.com/microsoft/fluentui/wiki/Component-Implementation-Guide#find-open-issues-on-github)

diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts
@@ -0,0 +1,80 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import { SliderSize as SliderSetSize } from './slider.options.js';
+import type { Slider as FluentSlider } from './slider.js';
+import './define.js';
+
+type SliderStoryArgs = Args & FluentSlider;
+type SliderStoryMeta = Meta<SliderStoryArgs>;
+
+const storyTemplate = html<SliderStoryArgs>`
+  <fluent-slider
+    ?disabled=${x => x.disabled}
+    ?readonly=${x => x.readOnly}
+    step=${x => x.step}
+    size=${x => x.size}
+    min=${x => x.min}
+    max=${x => x.max}
+    orientation=${x => x.orientation}
+    value=${x => x.value}
+  ></fluent-slider>
+`;
+
+export default {
+  title: 'Components/Slider',
+  args: {
+    disabled: false,
+    readOnly: false,
+    min: 0,
+    max: 100,
+    size: SliderSetSize.medium,
+    orientation: 'horizontal',
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    min: {
+      control: 'number',
+      defaultValue: 0,
+    },
+    max: {
+      control: 'number',
+      defaultValue: 100,
+    },
+    value: { control: 'number', defaultValue: 50 },
+    size: {
+      control: {
+        type: 'inline-radio',
+        options: Object.values(SliderSetSize),
+      },
+    },
+    orientation: {
+      control: {
+        type: 'inline-radio',
+        options: ['horizontal', 'vertical'],
+      },
+    },
+  },
+} as SliderStoryMeta;
+
+export const Slider = renderComponent(storyTemplate).bind({});
+
+export const SliderOrientation = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider orientation="vertical" step="20" value="60" min="0" max="100"></fluent-slider>
+  <fluent-slider orientation="horizontal" step="20" value="60" min="0" max="100"></fluent-slider>
+`);
+
+export const SliderSize = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider size="small" value="10" min="0" max="10"></fluent-slider>
+  <fluent-slider size="medium" value="10" min="0" max="10"></fluent-slider>
+`);
+
+export const SliderSteps = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider step="10" value="10" min="0" max="100"></fluent-slider>
+`);
+
+export const SliderDisabled = renderComponent(html<SliderStoryArgs>`
+  <fluent-slider disabled value="10" min="0" max="100"></fluent-slider>
+  <fluent-slider step="25" disabled value="50" min="0" max="100"></fluent-slider>
+`);