fix: update Spinner styles to work around styling bug (microsoft#31913)

Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>
spmonahan · Jul 8, 2024 · 261f427 · 261f427
1 parent fe2ad5b
commit 261f427
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/change/@fluentui-react-dbe02eba-3a06-40c9-8678-e553a2c2ff71.json b/change/@fluentui-react-dbe02eba-3a06-40c9-8678-e553a2c2ff71.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: update Spinner styles to address CSS bug",
+ "packageName": "@fluentui/react",
+ "email": "seanmonahan@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Spinner/Spinner.styles.tsx b/packages/react/src/components/Spinner/Spinner.styles.tsx
@@ -58,8 +58,12 @@ export const getStyles = (props: ISpinnerStyleProps): ISpinnerStyles => {
  {
  boxSizing: 'border-box',
  borderRadius: '50%',
- border: '1.5px solid ' + palette.themeLight,
+ borderWidth: '1.5px',
+ borderStyle: 'solid',
  borderTopColor: palette.themePrimary,
+ borderRightColor: palette.themeLight,
+ borderBottomColor: palette.themeLight,
+ borderLeftColor: palette.themeLight,
  animationName: spinAnimation(),
  animationDuration: '1.3s',
  animationIterationCount: 'infinite',

diff --git a/packages/react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/packages/react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -20,9 +20,13 @@ exports[`Spinner renders Spinner correctly 1`] = `
  animation-iteration-count: infinite;
  animation-name: keyframes 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);};
  animation-timing-function: cubic-bezier(.53,.21,.29,.67);
+ border-bottom-color: #c7e0f4;
+ border-left-color: #c7e0f4;
  border-radius: 50%;
+ border-right-color: #c7e0f4;
+ border-style: solid;
  border-top-color: #0078d4;
- border: 1.5px solid #c7e0f4;
+ border-width: 1.5px;
  box-sizing: border-box;
  height: 20px;
  width: 20px;