fix: button slots spacing (#33917)

mlijanto · web-flow · commit 2ccb82dd6469 · 2025-02-27T16:13:22.000-08:00
diff --git a/change/@fluentui-web-components-23edc611-4d8c-4176-975a-3530019982d5.json b/change/@fluentui-web-components-23edc611-4d8c-4176-975a-3530019982d5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixed button start and end slots inline spacing.",
+  "packageName": "@fluentui/web-components",
+  "email": "601470+mlijanto@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -140,15 +140,12 @@ export const baseButtonStyles = css`
     fill: currentColor;
   }
 
-  :is([slot='start'], ::slotted([slot='start'])) {
+  ::slotted([slot='start']) {
     margin-inline-end: var(--icon-spacing);
   }
 
-  :is([slot='end'], ::slotted([slot='end'])) {
+  ::slotted([slot='end']) {
     flex-shrink: 0;
-  }
-
-  :host(:not(${iconOnlyState})) :is([slot='end'], :host(:not(${iconOnlyState}))::slotted([slot='end'])) {
     margin-inline-start: var(--icon-spacing);
   }
 

Original file line number	Diff line number	Diff line change
@@ -140,15 +140,12 @@ export const baseButtonStyles = css`
`140`	`140`	`fill: currentColor;`
`141`	`141`	`}`
`142`	`142`
`143`		`- :is([slot='start'], ::slotted([slot='start'])) {`
	`143`	`+ ::slotted([slot='start']) {`
`144`	`144`	`margin-inline-end: var(--icon-spacing);`
`145`	`145`	`}`
`146`	`146`
`147`		`- :is([slot='end'], ::slotted([slot='end'])) {`
	`147`	`+ ::slotted([slot='end']) {`
`148`	`148`	`flex-shrink: 0;`
`149`		`- }`
`150`		`-`
`151`		`- :host(:not(${iconOnlyState})) :is([slot='end'], :host(:not(${iconOnlyState}))::slotted([slot='end'])) {`
`152`	`149`	`margin-inline-start: var(--icon-spacing);`
`153`	`150`	`}`
`154`	`151`