Azure Theme: reduced spin button height to match TextField / DropDowns at 24px height

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"
+}

packages/azure-themes/src/azure/styles/SpinButton.styles.ts

@@ -1,12 +1,20 @@
 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,
 ) => {
   const { theme } = props;
 
   return {
+    root: {
+      selectors: {
+        '>div': {
+          height: StyleConstants.inputControlHeight,
+        },
+      },
+    },
     input: {
       backgroundColor: theme.semanticColors.inputBackground,
       color: theme.semanticColors.inputText,

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>Spin button example</Label>
+      <SpinButtonBasicExample />
+    </Stack>
+
     <Stack gap={8} horizontalAlign="center" style={{ marginTop: 40 }}>
       <Label>Misc</Label>
       <ActivityItemBasicExample />

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>
+  );
+};