[web-components] fix: remove logical properties to fix spinner in rtl (…

…#33654)
microsoft · Jan 14, 2025 · 00458f3 · 00458f3
1 parent 1e110d6
commit 00458f3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/change/@fluentui-web-components-49fd3f00-10b9-4573-a6ac-bce95c8f2fe5.json b/change/@fluentui-web-components-49fd3f00-10b9-4573-a6ac-bce95c8f2fe5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: revert logical properties in spinner to support rtl\"",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/spinner/spinner.styles.ts b/packages/web-components/src/spinner/spinner.styles.ts
@@ -93,12 +93,12 @@ export const styles = css`
 
   .start {
     overflow: hidden;
-    inset-inline-end: 50%;
+    right: 50%;
   }
 
   .end {
     overflow: hidden;
-    inset-inline-start: 50%;
+    left: 50%;
   }
 
   .indicator {
@@ -107,7 +107,7 @@ export const styles = css`
     border-radius: 50%;
     border: var(--indicatorSize) solid transparent;
     border-block-start-color: currentcolor;
-    border-inline-end-color: currentcolor;
+    border-right-color: currentcolor;
   }
 
   :host(${invertedState}) .indicator {
@@ -171,7 +171,7 @@ export const styles = css`
     .indicator {
       border-color: Canvas;
       border-block-start-color: Highlight;
-      border-inline-end-color: Highlight;
+      border-right-color: Highlight;
     }
   `),
 );