From 0fbf8393ec5e68f59151f41c05c2fc02f12007b7 Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Tue, 18 Oct 2022 16:09:05 -0700 Subject: [PATCH 1/6] 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. --- ...-76d708a4-ab34-43c6-a831-8aca052df11b.json | 7 +++++++ .../SpinButton/useSpinButtonStyles.ts | 19 +++++++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json diff --git a/change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json b/change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json new file mode 100644 index 00000000000000..3c74f0145d9d50 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index a546c0e251c672..5f582d4d82e867 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -60,6 +60,13 @@ const useRootStyles = makeStyles({ }, }, + small: { + paddingLeft: tokens.spacingHorizontalS, + }, + + // intentially 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 + // 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 I've had to compute the numbers by handle. // 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, From b8d1ad65e9da666752abfa36854c24acd0fdb605 Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Tue, 18 Oct 2022 16:15:19 -0700 Subject: [PATCH 2/6] fix typo --- .../src/components/SpinButton/useSpinButtonStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index 5f582d4d82e867..4ffd1206ce3763 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -64,7 +64,7 @@ const useRootStyles = makeStyles({ paddingLeft: tokens.spacingHorizontalS, }, - // intentially empty + // intentionally empty medium: {}, outline: { From dbdb69dd50a40aa43031c48e0fa9e8a1b5299096 Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Wed, 19 Oct 2022 16:38:33 -0700 Subject: [PATCH 3/6] 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. --- .../SpinButton/useSpinButtonStyles.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index 4ffd1206ce3763..10fb311b0c8508 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -170,6 +170,18 @@ const useInputStyles = makeStyles({ outlineStyle: 'none', ...shorthands.padding(0), }, + + small: { + // Originally the small padding was 6px but the design was + // updated to 8px to align with other small inputs. + // This negative margin is applied so the external size + // of the small SpinButton is not changed (i.e., this change + // won't affect anyone's page layout). + marginRight: '-2px', + }, + + // intentionally empty + medium: {}, }); const useButtonStyles = makeStyles({ @@ -477,7 +489,12 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton state.decrementButton.className, ); - state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base); + state.input.className = mergeClasses( + spinButtonClassNames.input, + state.input.className, + inputStyles.base, + inputStyles[size], + ); return state; }; From 66fdb06ab9deb6dd8f7f6d3d83fd231e12776a49 Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Fri, 21 Oct 2022 11:28:37 -0700 Subject: [PATCH 4/6] remove negative margin --- .../SpinButton/useSpinButtonStyles.ts | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index 10fb311b0c8508..4ffd1206ce3763 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -170,18 +170,6 @@ const useInputStyles = makeStyles({ outlineStyle: 'none', ...shorthands.padding(0), }, - - small: { - // Originally the small padding was 6px but the design was - // updated to 8px to align with other small inputs. - // This negative margin is applied so the external size - // of the small SpinButton is not changed (i.e., this change - // won't affect anyone's page layout). - marginRight: '-2px', - }, - - // intentionally empty - medium: {}, }); const useButtonStyles = makeStyles({ @@ -489,12 +477,7 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton state.decrementButton.className, ); - state.input.className = mergeClasses( - spinButtonClassNames.input, - state.input.className, - inputStyles.base, - inputStyles[size], - ); + state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base); return state; }; From 6a969426aca60e5ee6d75002f13a7d40f8bc0f1a Mon Sep 17 00:00:00 2001 From: Sean Monahan Date: Fri, 21 Oct 2022 11:28:51 -0700 Subject: [PATCH 5/6] fix lint warning --- .../src/components/SpinButton/useSpinButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx index 86d861e0959bfe..e8d08b8b119e36 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx @@ -260,7 +260,7 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref Date: Mon, 24 Oct 2022 13:27:44 -0700 Subject: [PATCH 6/6] Update packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- .../src/components/SpinButton/useSpinButtonStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts index 4ffd1206ce3763..24c48d243c87ff 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts +++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts @@ -208,7 +208,7 @@ const useButtonStyles = makeStyles({ // 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 I've had to compute the numbers by handle. + // so these padding values are computed by hand. // Additionally the design uses fractional values so these are // rounded to the nearest integer. incrementButtonSmall: {