From 7924fa7766dc2603e0ed27416746104422aa2fc6 Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 9 Jan 2023 11:49:51 -0800
Subject: [PATCH 1/3] Reduced split button height to match textfields /
 dropdowns at 24px height.

---
 .../src/azure/styles/SpinButton.styles.ts     |  8 +++
 .../stories/Themes/Themes.stories.tsx         |  6 ++
 .../stories/components/SpinButton.stories.tsx | 67 +++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx

diff --git a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts
index e4be39b82e7865..b887c18e69b18d 100644
--- a/packages/azure-themes/src/azure/styles/SpinButton.styles.ts
+++ b/packages/azure-themes/src/azure/styles/SpinButton.styles.ts
@@ -1,5 +1,6 @@
 import { ISpinButtonStyleProps, ISpinButtonStyles } from '@fluentui/react/lib/SpinButton';
 import { IStyleFunction } from '@fluentui/react/lib/Utilities';
+import * as StyleConstants from '../Constants';
 
 export const SpinButtonStyles: IStyleFunction<ISpinButtonStyleProps, ISpinButtonStyles> = (
   props: ISpinButtonStyleProps,
@@ -7,6 +8,13 @@ export const SpinButtonStyles: IStyleFunction<ISpinButtonStyleProps, ISpinButton
   const { theme } = props;
 
   return {
+    root: {
+      selectors: {
+        '>div': {
+          height: StyleConstants.inputControlHeight,
+        },
+      },
+    },
     input: {
       backgroundColor: theme.semanticColors.inputBackground,
       color: theme.semanticColors.inputText,
diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
index 899593c1b9da78..23715efae5713c 100644
--- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
@@ -31,6 +31,7 @@ import { TeachingBubbleBasicExample } from '../components/TeachingBubble.stories
 import { MessageBarBasicExample } from '../components/messageBar.stories';
 import { TooltipBasicExample } from '../components/tooltip.stories';
 import { SliderBasicExample } from '../components/slider.stories';
+import { SpinButtonBasicExample } from '../components/SpinButton.stories';
 
 const Example = () => (
   <Stack gap={8} horizontalAlign="center" style={{ maxWidth: 1000 }}>
@@ -143,6 +144,11 @@ const Example = () => (
       <TextField errorMessage="Error message!" />
     </Stack>
 
+    <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>
+      <Label>Split button example</Label>
+      <SpinButtonBasicExample />
+    </Stack>
+
     <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>
       <Label>Misc</Label>
       <ActivityItemBasicExample />
diff --git a/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx
new file mode 100644
index 00000000000000..702482814a9847
--- /dev/null
+++ b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { SpinButton, ISpinButtonStyles, Position, IIconProps } from '@fluentui/react';
+import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
+
+const stackTokens: IStackTokens = { childrenGap: 20 };
+// By default the field grows to fit available width. Constrain the width instead.
+const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
+const iconProps: IIconProps = { iconName: 'IncreaseIndentLegacy' };
+export const SpinButtonBasicExample: React.FunctionComponent = () => {
+  return (
+    <Stack tokens={stackTokens}>
+      <SpinButton
+        label="Basic SpinButton"
+        defaultValue="0"
+        min={0}
+        max={100}
+        step={1}
+        incrementButtonAriaLabel="Increase value by 1"
+        decrementButtonAriaLabel="Decrease value by 1"
+        styles={styles}
+      />
+      <SpinButton
+        label="With label above"
+        labelPosition={Position.top}
+        defaultValue="0"
+        min={0}
+        max={100}
+        step={1}
+        incrementButtonAriaLabel="Increase value by 1"
+        decrementButtonAriaLabel="Decrease value by 1"
+        styles={styles}
+      />
+      <SpinButton
+        label="With icon"
+        iconProps={iconProps}
+        defaultValue="0"
+        min={0}
+        max={100}
+        step={1}
+        incrementButtonAriaLabel="Increase value by 1"
+        decrementButtonAriaLabel="Decrease value by 1"
+        styles={styles}
+      />
+      <SpinButton
+        label="Decimal SpinButton"
+        defaultValue="0"
+        min={0}
+        max={10}
+        step={0.1}
+        incrementButtonAriaLabel="Increase value by 0.1"
+        decrementButtonAriaLabel="Decrease value by 0.1"
+        styles={styles}
+      />
+      <SpinButton
+        label="Disabled SpinButton"
+        disabled={true}
+        defaultValue="25"
+        min={0}
+        max={100}
+        step={1}
+        incrementButtonAriaLabel="Increase value by 1"
+        decrementButtonAriaLabel="Decrease value by 1"
+        styles={styles}
+      />
+    </Stack>
+  );
+};

From ec9173b2de7e6b5ef8678a830f513b5f3210bb43 Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 9 Jan 2023 11:53:38 -0800
Subject: [PATCH 2/3] Typo fix

---
 .../src/azure-themes/stories/Themes/Themes.stories.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
index 23715efae5713c..626bee087547f6 100644
--- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
@@ -145,7 +145,7 @@ const Example = () => (
     </Stack>
 
     <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>
-      <Label>Split button example</Label>
+      <Label>Spin button example</Label>
       <SpinButtonBasicExample />
     </Stack>
 

From 9f5842ebaf522346487fe01f1b7492fa9ffe1d3d Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 9 Jan 2023 12:18:59 -0800
Subject: [PATCH 3/3] Create
 @fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json

---
 ...-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json

diff --git a/change/@fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json b/change/@fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json
new file mode 100644
index 00000000000000..48cbad330455a4
--- /dev/null
+++ b/change/@fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Spin button height fix for Azure theme. Reduced to 24px to match textfield / dropdown",
+  "packageName": "@fluentui/azure-themes",
+  "email": "30805892+Jacqueline-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}