spinbutton: update internal padding for small size (#25286)

* spinbutton: update internal padding for small size

Updates the internal left and right padding of SpinButton at "small"
sizes such that there are 8 pixels of padding to align with other input
controls.

* fix typo

* update internal padding so it does not affect external layout

Visual regression testing showed that the previous padding change
affected external layout (i.e., it might break an application's layout)
so this update accounts for the width change internally.

* remove negative margin

* fix lint warning

* Update packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: updates internal SpinButton padding",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx

@@ -260,7 +260,7 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
         ref,
         autoComplete: 'off',
         role: 'spinbutton',
-        appearance: appearance,
+        appearance,
         type: 'text',
         ...nativeProps.primary,
       },

packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts

@@ -60,6 +60,13 @@ const useRootStyles = makeStyles({
     },
   },
 
+  small: {
+    paddingLeft: tokens.spacingHorizontalS,
+  },
+
+  // intentionally empty
+  medium: {},
+
   outline: {
     '::before': {
       ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
@@ -198,15 +205,14 @@ const useButtonStyles = makeStyles({
     ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),
   },
 
-  // TODO: revisit these padding numbers for aligning the icon.
-  // Padding values aren't perfect.
-  // The icon doesn't align perfectly with the Figma designs.
-  // It's set in a 16x16px square but the artwork is inset from that
-  // so I've had to compute the numbers by handle.
+  // Padding values numbers don't align with design specs
+  // but visually the padding aligns.
+  // The icons are set in a 16x16px square but the artwork is inset from that
+  // so these padding values are computed by hand.
   // Additionally the design uses fractional values so these are
   // rounded to the nearest integer.
   incrementButtonSmall: {
-    ...shorthands.padding('3px', '5px', '0px', '5px'),
+    ...shorthands.padding('3px', '6px', '0px', '4px'),
   },
 
   incrementButtonMedium: {
@@ -222,7 +228,7 @@ const useButtonStyles = makeStyles({
   },
 
   decrementButtonSmall: {
-    ...shorthands.padding('0px', '5px', '3px', '5px'),
+    ...shorthands.padding('0px', '6px', '3px', '4px'),
   },
 
   decrementButtonMedium: {
@@ -433,6 +439,7 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
     state.root.className, // Get the classes from useInputStyles_unstable
     spinButtonClassNames.root,
     rootStyles.base,
+    rootStyles[size],
     appearance === 'outline' && rootStyles.outline,
     appearance === 'underline' && rootStyles.underline,
     filled && rootStyles.filled,