fixes broken rtl scenerios in web components (#16247)

* fix: broken rtl scenerios * Change files * small fix
microsoft · Dec 17, 2020 · 81651e8 · 81651e8
1 parent cb8c48d
commit 81651e8
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 18 deletions.
diff --git a/change/@fluentui-web-components-2020-12-16-12-45-46-users-jes-rtl-fixes.json b/change/@fluentui-web-components-2020-12-16-12-45-46-users-jes-rtl-fixes.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: broken rtl scenerios",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-12-16T20:45:46.346Z"
+}
diff --git a/packages/web-components/src/switch/fixtures/switch.html b/packages/web-components/src/switch/fixtures/switch.html
@@ -1,4 +1,32 @@
 <fluent-design-system-provider use-defaults>
+  <div
+    style="
+          direction: ltr;
+          display: grid;
+          grid-auto-flow: column;
+          grid-template-columns: min-content;
+          grid-gap: 12px;
+      "
+  >
+    <script>
+      let darkTheme = false;
+    </script>
+    <fluent-switch
+      onclick="document.dir = document.dir === 'rtl' ? 'ltr' : 'rtl'; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('direction', document.dir);"
+    >
+      <span style="padding-inline-end: 8px;">Direction</span>
+      <span slot="unchecked-message">ltr</span>
+      <span slot="checked-message">rtl</span>
+    </fluent-switch>
+
+    <fluent-switch
+      onclick="document.darkTheme = !document.darkTheme; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('background-color', darkTheme ? '#333333' : '#F7F7F7');"
+    >
+      <span style="padding-inline-end: 8px;"> Theme</span>
+      <span slot="checked-message">Dark</span>
+      <span slot="unchecked-message">Light</span>
+    </fluent-switch>
+  </div>
   <h1>Switch</h1>
   <h4>Default</h4>
   <div style="display: flex; flex-direction: column;">
@@ -39,8 +67,8 @@ <h4>Disabled</h4>
   </div>
 
   <h4>Inline</h4>
-  <fluent-switch style="margin-right: 12px;">Light Speed</fluent-switch>
-  <fluent-switch style="margin-right: 12px;">Ridiculous Speed</fluent-switch>
-  <fluent-switch style="margin-right: 12px;">Ludicrous Speed</fluent-switch>
+  <fluent-switch style="margin-inline-end: 12px;">Light Speed</fluent-switch>
+  <fluent-switch style="margin-inline-end: 12px;">Ridiculous Speed</fluent-switch>
+  <fluent-switch style="margin-inline-end: 12px;">Ludicrous Speed</fluent-switch>
   <fluent-switch checked>Plaid Speed</fluent-switch>
 </fluent-design-system-provider>
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -1,6 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import {
+  DirectionalStyleSheetBehavior,
+  disabledCursor,
+  display,
+  focusVisible,
+  forcedColorsStylesheetBehavior,
+} from '@microsoft/fast-foundation';
 import {
   accentFillActiveBehavior,
   accentFillHoverBehavior,
@@ -78,7 +84,6 @@ export const SwitchStyles = css`
         height: calc((${heightNumber} - (var(--design-unit) * 5.5)) * 1px);
         width: calc((${heightNumber} - (var(--design-unit) * 5.5)) * 1px);
         top: calc(var(--design-unit) * 1px);
-        left: calc(var(--design-unit) * 1px);
         background: ${neutralForegroundRestBehavior.var};
         border-radius: 50%;
         transition: all 0.2s ease-in-out;
@@ -108,24 +113,23 @@ export const SwitchStyles = css`
         } margin-inline-start: calc(var(--design-unit) * 2px + 2px);
     }
 
-    :host(.checked) .checked-indicator {
-        left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px);
+    :host([aria-checked="true"]) .checked-indicator {
         background: ${accentForegroundCutRestBehavior.var};
     }
 
-    :host(.checked) .switch {
+    :host([aria-checked="true"]) .switch {
         background: ${accentFillRestBehavior.var};
     }
 
-    :host(.checked:enabled) .switch:hover {
+    :host([aria-checked="true"]:enabled) .switch:hover {
         background: ${accentFillHoverBehavior.var};
     }
 
-    :host(.checked:enabled) .switch:active {
+    :host([aria-checked="true"]:enabled) .switch:active {
         background: ${accentFillActiveBehavior.var};
     }
 
-    :host(.checked:${focusVisible}:enabled) .switch {
+    :host([aria-checked="true"]:${focusVisible}:enabled) .switch {
         box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocusBehavior.var};
         border-color: transparent;
     }
@@ -138,11 +142,11 @@ export const SwitchStyles = css`
         display: none;
     }
 
-    :host(.checked) .unchecked-message {
+    :host([aria-checked="true"]) .unchecked-message {
         display: none;
     }
 
-    :host(.checked) .checked-message {
+    :host([aria-checked="true"]) .checked-message {
         display: block;
     }
 `.withBehaviors(
@@ -158,6 +162,26 @@ export const SwitchStyles = css`
   neutralOutlineActiveBehavior,
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
+  new DirectionalStyleSheetBehavior(
+    css`
+      .checked-indicator {
+        left: calc(var(--design-unit) * 1px);
+      }
+
+      :host([aria-checked='true']) .checked-indicator {
+        left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px);
+      }
+    `,
+    css`
+      .checked-indicator {
+        right: calc(var(--design-unit) * 1px);
+      }
+
+      :host([aria-checked='true']) .checked-indicator {
+        right: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px);
+      }
+    `,
+  ),
   forcedColorsStylesheetBehavior(
     css`
             .checked-indicator,

diff --git a/packages/web-components/src/tree-item/fixtures/tree-item.html b/packages/web-components/src/tree-item/fixtures/tree-item.html
@@ -1,4 +1,32 @@
 <fluent-design-system-provider use-defaults>
+  <div
+    style="
+          direction: ltr;
+          display: grid;
+          grid-auto-flow: column;
+          grid-template-columns: min-content;
+          grid-gap: 12px;
+      "
+  >
+    <script>
+      let darkTheme = false;
+    </script>
+    <fluent-switch
+      onclick="document.dir = document.dir === 'rtl' ? 'ltr' : 'rtl'; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('direction', document.dir);"
+    >
+      <span style="padding-inline-end: 8px;">Direction</span>
+      <span slot="unchecked-message">ltr</span>
+      <span slot="checked-message">rtl</span>
+    </fluent-switch>
+
+    <fluent-switch
+      onclick="document.darkTheme = !document.darkTheme; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('background-color', darkTheme ? '#333333' : '#F7F7F7');"
+    >
+      <span style="padding-inline-end: 8px;"> Theme</span>
+      <span slot="checked-message">Dark</span>
+      <span slot="unchecked-message">Light</span>
+    </fluent-switch>
+  </div>
   <h1>Tree item</h1>
   <h4>Default</h4>
   <fluent-tree-item>Tree item</fluent-tree-item>

diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -1,5 +1,11 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import {
+  DirectionalStyleSheetBehavior,
+  disabledCursor,
+  display,
+  focusVisible,
+  forcedColorsStylesheetBehavior,
+} from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   accentForegroundRestBehavior,
@@ -14,6 +20,36 @@ import {
   neutralForegroundRestBehavior,
 } from '../styles/index';
 
+const ltr = css`
+  .expand-collapse-glyph {
+    transform: rotate(-45deg);
+  }
+  :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);
+  }
+  :host([expanded]) > .positioning-region .expand-collapse-glyph {
+    transform: rotate(0deg);
+  }
+`;
+
+const rtl = css`
+  .expand-collapse-glyph {
+    transform: rotate(135deg);
+  }
+  :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);
+  }
+  :host([expanded]) > .positioning-region .expand-collapse-glyph {
+    transform: rotate(90deg);
+  }
+`;
+
 export const TreeItemStyles = css`
     ${display('block')} :host {
         contain: content;
@@ -36,7 +72,7 @@ export const TreeItemStyles = css`
     }
 
     :host(:${focusVisible}) .positioning-region {
-        border: ${neutralFocusBehavior.var} 1px solid;
+        border: ${neutralFocusBehavior.var} calc(var(--outline-width) * 1px) solid;
         border-radius: calc(var(--corner-radius) * 1px);
         color: ${neutralForegroundActiveBehavior.var};
     }
@@ -45,7 +81,7 @@ export const TreeItemStyles = css`
         display: flex;
         position: relative;
         box-sizing: border-box;
-        border: transparent 1px solid;
+        border: transparent calc(var(--outline-width) * 1px) solid;
         height: calc(${heightNumber} * 1px);
     }
 
@@ -157,7 +193,6 @@ export const TreeItemStyles = css`
           /* 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 */ ''
         } background: ${accentForegroundRestBehavior.var};
-        ${/* value needs to be localized */ ''} left: calc(var(--focus-outline-width) * 1px);
         border-radius: calc(var(--corner-radius) * 1px);
     }
 
@@ -168,7 +203,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));
     }
 
@@ -186,6 +220,7 @@ export const TreeItemStyles = css`
   neutralFocusInnerAccentBehavior,
   neutralForegroundActiveBehavior,
   neutralForegroundRestBehavior,
+  new DirectionalStyleSheetBehavior(ltr, rtl),
   forcedColorsStylesheetBehavior(
     css`
         :host {

diff --git a/packages/web-components/src/tree-view/fixtures/tree-view.html b/packages/web-components/src/tree-view/fixtures/tree-view.html
@@ -1,4 +1,32 @@
 <fluent-design-system-provider use-defaults>
+  <div
+    style="
+          direction: ltr;
+          display: grid;
+          grid-auto-flow: column;
+          grid-template-columns: min-content;
+          grid-gap: 12px;
+      "
+  >
+    <script>
+      let darkTheme = false;
+    </script>
+    <fluent-switch
+      onclick="document.dir = document.dir === 'rtl' ? 'ltr' : 'rtl'; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('direction', document.dir);"
+    >
+      <span style="padding-inline-end: 8px;">Direction</span>
+      <span slot="unchecked-message">ltr</span>
+      <span slot="checked-message">rtl</span>
+    </fluent-switch>
+
+    <fluent-switch
+      onclick="document.darkTheme = !document.darkTheme; document.getElementsByTagName('fluent-design-system-provider')[0].setAttribute('background-color', darkTheme ? '#333333' : '#F7F7F7');"
+    >
+      <span style="padding-inline-end: 8px;"> Theme</span>
+      <span slot="checked-message">Dark</span>
+      <span slot="unchecked-message">Light</span>
+    </fluent-switch>
+  </div>
   <h4>With items (don't render collapsed nodes)</h4>
   <fluent-tree-view render-collapsed-nodes="false">
     <fluent-tree-item>