28576 small button is using 3px border radius

[AbdulRehmanMehar]

Previous Behavior

Small buttons are using 3px border radius.

New Behavior

Small buttons will be using 4px border radius per UX spec:
https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/theme-border-radii--page

REC-20230720010813.mp4

Related Issue(s)

#28576

Fixes #

@@ -13,6 +13,7 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
 const iconSpacingVar = '--fui-Button__icon--spacing';
 
 const buttonSpacingSmall = '3px';
+const buttonBorderRadiusSmall = '4px';
 const buttonSpacingSmallWithIcon = '1px';
 const buttonSpacingMedium = '5px';
 const buttonSpacingLarge = '8px';
@@ -243,7 +244,7 @@ const useRootStyles = makeStyles({
     minWidth: '64px',
     ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),
 
-    ...shorthands.borderRadius(buttonSpacingSmall),
+    ...shorthands.borderRadius(buttonBorderRadiusSmall),
 
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
InfoButton	mount	13	10	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	602	638	5000
Button	mount	315	312	5000
Field	mount	1071	1123	5000
FluentProvider	mount	707	676	5000
FluentProviderWithTheme	mount	75	84	10
FluentProviderWithTheme	virtual-rerender	62	69	10
FluentProviderWithTheme	virtual-rerender-with-unmount	77	85	10
InfoButton	mount	13	10	5000	Possible regression
MakeStyles	mount	859	861	50000
Persona	mount	1733	1646	5000
SpinButton	mount	1346	1348	5000

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-alert Alert	81.836 kB 22.031 kB	81.668 kB 21.964 kB	-168 B -67 B
react-button Button	37.078 kB 9.751 kB	36.91 kB 9.685 kB	-168 B -66 B
react-button CompoundButton	44.427 kB 11.234 kB	44.259 kB 11.167 kB	-168 B -67 B
react-button MenuButton	41.464 kB 11.001 kB	41.296 kB 10.933 kB	-168 B -68 B
react-button SplitButton	49.499 kB 12.555 kB	49.331 kB 12.486 kB	-168 B -69 B
react-button ToggleButton	54.124 kB 11.65 kB	53.956 kB 11.582 kB	-168 B -68 B
react-components react-components: Button, FluentProvider & webLightTheme	66.614 kB 18.512 kB	66.446 kB 18.441 kB	-168 B -71 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	203.786 kB 57.921 kB	203.618 kB 57.845 kB	-168 B -76 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-card Card - All	88.335 kB 25.271 kB
react-card Card	83.177 kB 23.742 kB
react-card CardFooter	9.338 kB 3.932 kB
react-card CardHeader	11.59 kB 4.716 kB
react-card CardPreview	10.297 kB 4.317 kB
react-components react-components: FluentProvider & webLightTheme	37.787 kB 12.387 kB
react-portal-compat PortalCompatProvider	6.48 kB 2.203 kB

_{🤖 This report was generated against 846a45467d7e70f3960950b6eb42d3a1d3cef2e5}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 26aa4b6:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 846a45467d7e70f3960950b6eb42d3a1d3cef2e5 (build)

[sopranopillow]

once that change is merged in, we can go ahead and merge it. Thanks for your contribution!

[sopranopillow]

/azp run Fluent UI React - PR and CI

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).