From 4514c4f5b2d58533ed4c41ebea80532994e55064 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Tue, 25 Apr 2023 07:22:20 -0700
Subject: [PATCH 1/2] move code examples into slider migration to match other
 files and fix bug

---
 .../FromV8/Components/Slider.stories.mdx      | 174 ++++++++++++++++++
 .../Components/Slider/Slider.stories.mdx      |  95 ----------
 .../Slider/Sliderv8Examples.stories.tsx       |  28 ---
 .../Slider/Sliderv9Examples.stories.tsx       |  67 -------
 4 files changed, 174 insertions(+), 190 deletions(-)
 create mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
 delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx
 delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx
 delete mode 100644 apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
new file mode 100644
index 00000000000000..1fb9a25d392b9b
--- /dev/null
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
@@ -0,0 +1,174 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+import v8Demo from '!!raw-loader!./Sliderv8Examples.stories.tsx';
+import v9Demo from '!!raw-loader!./Sliderv9Examples.stories.tsx';
+
+import {
+  V8BasicExample,
+  V8SnappingExample,
+  V8ControlledExample,
+  V8FormattedValueExample,
+} from './Sliderv8Examples.stories';
+import {
+  V9BasicExample,
+  V9SnappingExample,
+  V9ControlledExample,
+  V9FormattedValueExample,
+} from './Sliderv9Examples.stories';
+
+<Meta title="Concepts/Migration/from v8/Components/Slider Migration" />
+
+# Slider Migration
+
+Fluent UI V8 provides the `Slider` control to represents an input that allows user to choose a value from within a specific range.
+Fluent UI v9 provides a `Slider` control with a different API.
+
+## Examples
+
+### Basic Migration
+
+Basic usage of `Slider` V8
+
+```tsx
+import { Slider } from '@fluentui/react/lib/Slider';
+
+export const V8BasicExample = () => <Slider label="Basic v8 example" />;
+
+export const V8SnappingExample = () => (
+  <Slider label="Snapping slider v8 example" min={0} max={50} step={10} defaultValue={20} snapToStep />
+);
+
+export const V8ControlledExample = () => {
+  const [sliderValue, setSliderValue] = React.useState(0);
+  const sliderOnChange = (value: number) => setSliderValue(value);
+  return <Slider label="Controlled v8 example" max={10} value={sliderValue} onChange={sliderOnChange} />;
+};
+
+export const V8FormattedValueExample = () => {
+  const sliderAriaValueText = (value: number) => value + ' percent';
+  const sliderValueFormat = (value: number) => value + '%';
+  return (
+    <Slider
+      label="v8 Example with formatted value"
+      max={100}
+      ariaValueText={sliderAriaValueText}
+      valueFormat={sliderValueFormat}
+      showValue
+    />
+  );
+};
+```
+
+The equivalent `Slider` components in v9 are
+
+```tsx
+import { Slider, SliderProps, Label, useId, makeStyles, tokens } from '@fluentui/react-components';
+
+export const V9BasicExample = () => {
+  const basicId = useId();
+  return (
+    <>
+      <Label htmlFor={basicId}>Basic V9 example</Label>
+      <Slider id={basicId} />
+    </>
+  );
+};
+
+export const V9SnappingExample = () => {
+  const snappingId = useId();
+  return (
+    <>
+      <Label htmlFor={snappingId}>Snapping slider V9 example</Label>
+      <Slider id={snappingId} min={0} max={50} step={10} defaultValue={20} />
+    </>
+  );
+};
+
+export const V9ControlledExample = () => {
+  const [sliderValue, setSliderValue] = React.useState(0);
+  const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
+  const controlledId = useId();
+  return (
+    <>
+      <Label htmlFor={controlledId}>Controlled V9 example</Label>
+      <Slider id={controlledId} min={0} max={10} value={sliderValue} onChange={sliderOnChange} />
+    </>
+  );
+};
+
+const getFormattedExampleStyles = makeStyles({
+  wrapper: {
+    display: 'grid',
+    alignItems: 'center',
+    gridTemplateColumns: '1fr auto',
+    columnGap: tokens.spacingHorizontalL,
+  },
+});
+
+export const V9FormattedValueExample = () => {
+  const styles = getFormattedExampleStyles();
+  const [sliderValue, setSliderValue] = React.useState(0);
+  const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
+  const formattedId = useId();
+  const sliderAriaValueText = `${sliderValue} percent`;
+  const sliderValueFormat = `${sliderValue}%`;
+  return (
+    <>
+      <Label htmlFor={formattedId}>V9 Example with formatted value</Label>
+      <div className={styles.wrapper}>
+        <Slider
+          id={formattedId}
+          max={100}
+          aria-valuetext={sliderAriaValueText}
+          value={sliderValue}
+          onChange={sliderOnChange}
+        />
+        <span>{sliderValueFormat}</span>
+      </div>
+    </>
+  );
+};
+```
+
+## Props Mapping
+
+## Migration from v8
+
+- `ariaLabel` => use `aria-label` instead
+- `ariaValueText` => explicitely set `aria-valuetext`
+- `buttonProps` => Slider props, other than className and id, are passed to `input` element
+- `componentRef` => use `ref` instead.
+- `inline` => use css, or wrap in flex parent
+- `label` => Use `Label` control with `htmlFor` and `id`
+- `onChanged` => use onChange and onMouse events
+- `origin` => no longer supported
+- `originFromZero` => no longer supported
+- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
+- `showValue` and `valueFormat` => use explicitly rendered value instead
+- `snapToStep` => use `step` instead
+- `styles` => pass classNames to individual slots
+- `theme` => use `FluentProvider` HOC instead
+
+## Property mapping
+
+| v8 `Slider`         | v9 `Slider`      |
+| ------------------- | ---------------- |
+|                     |                  |
+| `ariaLabel`         | `aria-label`     |
+| `ariaValueText`     | `aria-valuetext` |
+| `buttonProps`       |                  |
+| `componentRef`      | `ref`            |
+| `defaultLowerValue` |                  |
+| `inline`            |                  |
+| `input`             | `input`          |
+| `label`             |                  |
+| `lowerValue`        |                  |
+| `onChanged`         | `onChange`       |
+| `origin`            |                  |
+| `originFromZero`    |                  |
+| `ranged`            |                  |
+| `showValue`         |                  |
+| `snapToStep`        | `step`           |
+| `styles`            | `className`      |
+| `theme`             |                  |
+| `valueFormat`       |                  |
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx
deleted file mode 100644
index 41e5233222ae84..00000000000000
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.stories.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-import v8Demo from '!!raw-loader!./Sliderv8Examples.stories.tsx';
-import v9Demo from '!!raw-loader!./Sliderv9Examples.stories.tsx';
-
-import {
-  V8BasicExample,
-  V8SnappingExample,
-  V8ControlledExample,
-  V8FormattedValueExample,
-} from './Sliderv8Examples.stories';
-import {
-  V9BasicExample,
-  V9SnappingExample,
-  V9ControlledExample,
-  V9FormattedValueExample,
-} from './Sliderv9Examples.stories';
-
-<Meta title="Concepts/Migration/from v8/Components/Slider Migration" />
-
-# Slider Migration
-
-Fluent UI V8 provides the `Slider` control to represents an input that allows user to choose a value from within a specific range.
-Fluent UI v9 provides a `Slider` control with a different API.
-
-## Examples
-
-### Basic Migration
-
-Basic usage of `Slider` V8
-
-<Canvas>
-  <Story parameters={{ docs: { source: { code: v8Demo } } }} name="v8 Example">
-    <V8BasicExample />
-    <V8SnappingExample />
-    <V8ControlledExample />
-    <V8FormattedValueExample />
-  </Story>
-</Canvas>
-
-An equivalent `Slider` in v9 is
-
-<Canvas>
-  <Story parameters={{ docs: { source: { code: v9Demo } } }} name="v9 Example">
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <V9BasicExample />
-      <V9SnappingExample />
-      <V9ControlledExample />
-      <V9FormattedValueExample />
-    </div>
-  </Story>
-</Canvas>
-
-## Props Mapping
-
-## Migration from v8
-
-- `ariaLabel` => use `aria-label` instead
-- `ariaValueText` => explicitely set `aria-valuetext`
-- `buttonProps` => Slider props, other than className and id, are passed to `input` element
-- `componentRef` => use `ref` instead.
-- `inline` => use css, or wrap in flex parent
-- `label` => Use `Label` control with `htmlFor` and `id`
-- `onChanged` => use onChange and onMouse events
-- `origin` => no longer supported
-- `originFromZero` => no longer supported
-- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
-- `showValue` and `valueFormat` => use explicitly rendered value instead
-- `snapToStep` => use `step` instead
-- `styles` => pass classNames to individual slots
-- `theme` => use `FluentProvider` HOC instead
-
-## Property mapping
-
-| v8 `Slider`         | v9 `Slider`      |
-| ------------------- | ---------------- |
-|                     |                  |
-| `ariaLabel`         | `aria-label`     |
-| `ariaValueText`     | `aria-valuetext` |
-| `buttonProps`       |                  |
-| `componentRef`      | `ref`            |
-| `defaultLowerValue` |                  |
-| `inline`            |                  |
-| `input`             | `input`          |
-| `label`             |                  |
-| `lowerValue`        |                  |
-| `onChanged`         | `onChange`       |
-| `origin`            |                  |
-| `originFromZero`    |                  |
-| `ranged`            |                  |
-| `showValue`         |                  |
-| `snapToStep`        | `step`           |
-| `styles`            | `className`      |
-| `theme`             |                  |
-| `valueFormat`       |                  |
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx
deleted file mode 100644
index ee79dcb435b31a..00000000000000
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv8Examples.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Slider } from '@fluentui/react/lib/Slider';
-import * as React from 'react';
-
-export const V8BasicExample = () => <Slider label="Basic v8 example" />;
-
-export const V8SnappingExample = () => (
-  <Slider label="Snapping slider v8 example" min={0} max={50} step={10} defaultValue={20} snapToStep />
-);
-
-export const V8ControlledExample = () => {
-  const [sliderValue, setSliderValue] = React.useState(0);
-  const sliderOnChange = (value: number) => setSliderValue(value);
-  return <Slider label="Controlled v8 example" max={10} value={sliderValue} onChange={sliderOnChange} />;
-};
-
-export const V8FormattedValueExample = () => {
-  const sliderAriaValueText = (value: number) => value + ' percent';
-  const sliderValueFormat = (value: number) => value + '%';
-  return (
-    <Slider
-      label="v8 Example with formatted value"
-      max={100}
-      ariaValueText={sliderAriaValueText}
-      valueFormat={sliderValueFormat}
-      showValue
-    />
-  );
-};
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx
deleted file mode 100644
index bcf94140fb3f68..00000000000000
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Sliderv9Examples.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { Slider, SliderProps, Label, useId, makeStyles, tokens } from '@fluentui/react-components';
-
-export const V9BasicExample = () => {
-  const basicId = useId();
-  return (
-    <>
-      <Label htmlFor={basicId}>Basic V9 example</Label>
-      <Slider id={basicId} />
-    </>
-  );
-};
-
-export const V9SnappingExample = () => {
-  const snappingId = useId();
-  return (
-    <>
-      <Label htmlFor={snappingId}>Snapping slider V9 example</Label>
-      <Slider id={snappingId} min={0} max={50} step={10} defaultValue={20} />
-    </>
-  );
-};
-
-export const V9ControlledExample = () => {
-  const [sliderValue, setSliderValue] = React.useState(0);
-  const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
-  const controlledId = useId();
-  return (
-    <>
-      <Label htmlFor={controlledId}>Controlled V9 example</Label>
-      <Slider id={controlledId} min={0} max={10} value={sliderValue} onChange={sliderOnChange} />
-    </>
-  );
-};
-
-const getFormattedExampleStyles = makeStyles({
-  wrapper: {
-    display: 'grid',
-    alignItems: 'center',
-    gridTemplateColumns: '1fr auto',
-    columnGap: tokens.spacingHorizontalL,
-  },
-});
-
-export const V9FormattedValueExample = () => {
-  const styles = getFormattedExampleStyles();
-  const [sliderValue, setSliderValue] = React.useState(0);
-  const sliderOnChange: SliderProps['onChange'] = (ev, data) => setSliderValue(data.value);
-  const formattedId = useId();
-  const sliderAriaValueText = `${sliderValue} percent`;
-  const sliderValueFormat = `${sliderValue}%`;
-  return (
-    <>
-      <Label htmlFor={formattedId}>V9 Example with formatted value</Label>
-      <div className={styles.wrapper}>
-        <Slider
-          id={formattedId}
-          max={100}
-          aria-valuetext={sliderAriaValueText}
-          value={sliderValue}
-          onChange={sliderOnChange}
-        />
-        <span>{sliderValueFormat}</span>
-      </div>
-    </>
-  );
-};

From 3410441b3f02a0970d99e9c5cd352e772b8ffdd5 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Tue, 25 Apr 2023 09:43:34 -0700
Subject: [PATCH 2/2] fix imports

---
 .../FromV8/Components/Slider.stories.mdx         | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
index 1fb9a25d392b9b..446014efe686a8 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider.stories.mdx
@@ -1,21 +1,5 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 
-import v8Demo from '!!raw-loader!./Sliderv8Examples.stories.tsx';
-import v9Demo from '!!raw-loader!./Sliderv9Examples.stories.tsx';
-
-import {
-  V8BasicExample,
-  V8SnappingExample,
-  V8ControlledExample,
-  V8FormattedValueExample,
-} from './Sliderv8Examples.stories';
-import {
-  V9BasicExample,
-  V9SnappingExample,
-  V9ControlledExample,
-  V9FormattedValueExample,
-} from './Sliderv9Examples.stories';
-
 <Meta title="Concepts/Migration/from v8/Components/Slider Migration" />
 
 # Slider Migration