fix: use design system direction support for glyph in treeview (micro…

…soft#3608)
haithemT · Jul 31, 2020 · fbc312d · fbc312d
1 parent cfaeab3
commit fbc312d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts
@@ -1,5 +1,6 @@
 import { css } from "@microsoft/fast-element";
 import {
+    DirectionalStyleSheetBehavior,
     disabledCursor,
     display,
     focusVisible,
@@ -20,6 +21,24 @@ import {
     neutralForegroundRestBehavior,
 } from "../styles/index";
 
+const ltr = css`
+    :host(.nested) .expand-collapse-button {
+        left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
+    }
+    :host([selected])::after {
+        left: calc(var(--focus-outline-width) * 1px);
+    }
+`;
+
+const rtl = css`
+    :host(.nested) .expand-collapse-button {
+        right: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
+    }
+    :host([selected])::after {
+        right: calc(var(--focus-outline-width) * 1px);
+    }
+`;
+
 export const TreeItemStyles = css`
     ${display("block")} :host {
         contain: content;
@@ -165,11 +184,8 @@ export const TreeItemStyles = css`
         height: calc((${heightNumber} / 2) * 1px);
         ${
             /* The french fry background needs to be calculated based on the selected background state for this control.
-            We currently have no way of chaning that, so setting to accent-foreground-rest for the time being */ ""
+            We currently have no way of changing that, so setting to accent-foreground-rest for the time being */ ""
         } background: ${accentForegroundRestBehavior.var};
-        ${
-            /* value needs to be localized */ ""
-        } left: calc(var(--focus-outline-width) * 1px);
         border-radius: calc(var(--corner-radius) * 1px);
     }
 
@@ -180,8 +196,6 @@ export const TreeItemStyles = css`
 
     :host(.nested) .expand-collapse-button {
         position: absolute;
-        ${/* value needs to be localized  */ ""}
-        left: var(--expand-collapse-button-nested-width, calc(${heightNumber} * -1px));
     }
 
     ::slotted(fast-tree-item) {
@@ -198,6 +212,7 @@ export const TreeItemStyles = css`
     neutralFocusInnerAccentBehavior,
     neutralForegroundActiveBehavior,
     neutralForegroundRestBehavior,
+    new DirectionalStyleSheetBehavior(ltr, rtl),
     forcedColorsStylesheetBehavior(
         css`
         :host {

diff --git a/sites/fast-component-explorer/app/preview.tsx b/sites/fast-component-explorer/app/preview.tsx
@@ -183,6 +183,8 @@ class Preview extends Foundation<
                 "min-height: 100vh; min-width: 100vw;"
             );
 
+            designSystemProvider.setAttribute("direction", this.state.direction);
+
             if (this.state.transparentBackground) {
                 designSystemProvider.setAttribute("no-paint", "");
             }