fix listbox-option selected indicator position in rtl (#27894)

microsoft · May 31, 2023 · 629df3c · 629df3c
1 parent 23d7cf2
commit 629df3c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json b/change/@fluentui-web-components-acd8f52d-86c3-4eae-aaf9-51b26fd25288.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix listbox-option selected indicator position in RTL instances",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -27,6 +27,7 @@ import {
 } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { focusTreatmentBase } from '../styles/focus';
+import { DirectionalStyleSheetBehavior } from '../styles/direction';
 
 export const optionStyles: (
   context: ElementDefinitionContext,
@@ -131,6 +132,11 @@ export const optionStyles: (
       margin-inline-end: 1ch;
     }
   `.withBehaviors(
+    new DirectionalStyleSheetBehavior(null, css`
+      :host::before {
+        right: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
+      }
+    `),
     forcedColorsStylesheetBehavior(
       css`
         :host {