feat: add directionSwitch for better localization composition (micros…

…oft#1740) * work directionSwitch into stylesheets * replace unset with empty string * fixing bad merge * format slider and slider label
albertsadday · May 9, 2019 · 164de23 · 164de23
1 parent f3a1ba0
commit 164de23
Show file tree

Hide file tree

Showing 20 changed files with 960 additions and 995 deletions.
diff --git a/packages/fast-components-styles-msft/src/action-toggle/index.ts b/packages/fast-components-styles-msft/src/action-toggle/index.ts
@@ -3,7 +3,11 @@ import {
     ActionToggleClassNameContract,
     ButtonClassNameContract,
 } from "@microsoft/fast-components-class-name-contracts-msft";
-import { applyLocalizedProperty, Direction } from "@microsoft/fast-jss-utilities";
+import {
+    applyLocalizedProperty,
+    Direction,
+    directionSwitch,
+} from "@microsoft/fast-jss-utilities";
 import { DesignSystem, withDesignSystemDefaults } from "../design-system/index";
 import {
     accentForegroundActive,
@@ -27,81 +31,57 @@ export const actionToggleButtonOverrides: ComponentStyles<
         alignItems: "center",
         display: "flex",
         transition: "all 600ms cubic-bezier(0.19, 1, 0.22, 1)",
-        [applyLocalizedProperty("left", "right", Direction.ltr)]: "0",
     },
 };
 
-const styles: ComponentStyles<ActionToggleClassNameContract, DesignSystem> = (
-    config: DesignSystem
-): ComponentStyleSheet<ActionToggleClassNameContract, DesignSystem> => {
-    const designSystem: DesignSystem = withDesignSystemDefaults(config);
-    const direction: Direction = designSystem.direction;
-
-    return {
-        actionToggle: {},
-        actionToggle__selected: {},
-        actionToggle_selectedGlyph: {
-            display: "inline-block",
-            position: "relative",
-            width: glyphSize,
-            height: glyphSize,
+const styles: ComponentStyles<ActionToggleClassNameContract, DesignSystem> = {
+    actionToggle: {},
+    actionToggle__selected: {},
+    actionToggle_selectedGlyph: {
+        display: "inline-block",
+        position: "relative",
+        width: glyphSize,
+        height: glyphSize,
+    },
+    actionToggle_unselectedGlyph: {
+        display: "inline-block",
+        position: "relative",
+        width: glyphSize,
+        height: glyphSize,
+    },
+    actionToggle__primary: {
+        "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
+            fill: accentForegroundCut,
         },
-        actionToggle_unselectedGlyph: {
-            display: "inline-block",
-            position: "relative",
-            width: glyphSize,
-            height: glyphSize,
+        "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
+            fill: accentForegroundCut,
         },
-        actionToggle__primary: {
-            "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                fill: accentForegroundCut,
-            },
-            "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
-                fill: accentForegroundCut,
-            },
+    },
+    actionToggle__lightweight: {
+        "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
+            fill: accentForegroundRest,
         },
-        actionToggle__lightweight: {
+        "&:hover": {
             "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                fill: accentForegroundRest,
-            },
-            "&:hover": {
-                "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                    fill: accentForegroundHover,
-                },
-            },
-            "&:active": {
-                "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                    fill: accentForegroundActive,
-                },
-            },
-            "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
-                fill: accentForegroundRest,
+                fill: accentForegroundHover,
             },
         },
-        actionToggle__justified: {
+        "&:active": {
             "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                fill: accentForegroundRest,
-            },
-            "&:hover": {
-                "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                    fill: accentForegroundHover,
-                },
-            },
-            "&:active": {
-                "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                    fill: accentForegroundActive,
-                },
-            },
-            "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
-                fill: accentForegroundRest,
+                fill: accentForegroundActive,
             },
         },
-        actionToggle__outline: {
+        "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
+            fill: accentForegroundRest,
+        },
+    },
+    actionToggle__justified: {
+        "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
+            fill: accentForegroundRest,
+        },
+        "&:hover": {
             "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                fill: neutralForegroundRest,
-            },
-            "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
-                fill: neutralForegroundRest,
+                fill: accentForegroundHover,
             },
         },
         actionToggle__stealth: {
@@ -115,14 +95,28 @@ const styles: ComponentStyles<ActionToggleClassNameContract, DesignSystem> = (
         actionToggle__disabled: {},
         actionToggle__hasGlyphAndContent: {
             "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
-                [applyLocalizedProperty(
-                    "marginRight",
-                    "marginLeft",
-                    direction
-                )]: horizontalSpacing(),
+                fill: accentForegroundActive,
             },
         },
-    };
+        "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
+            fill: accentForegroundRest,
+        },
+    },
+    actionToggle__outline: {
+        "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
+            fill: neutralForegroundRest,
+        },
+        "&$actionToggle__disabled $actionToggle_selectedGlyph, &$actionToggle__disabled $actionToggle_unselectedGlyph": {
+            fill: neutralForegroundRest,
+        },
+    },
+    actionToggle__disabled: {},
+    actionToggle__hasGlyphAndContent: {
+        "& $actionToggle_selectedGlyph, & $actionToggle_unselectedGlyph": {
+            marginRight: directionSwitch(horizontalSpacing(), ""),
+            marginLeft: directionSwitch("", horizontalSpacing()),
+        },
+    },
 };
 
 export default styles;
diff --git a/packages/fast-components-styles-msft/src/action-trigger/index.ts b/packages/fast-components-styles-msft/src/action-trigger/index.ts
@@ -1,10 +1,10 @@
-import { ComponentStyles, ComponentStyleSheet } from "@microsoft/fast-jss-manager";
+import { ComponentStyles } from "@microsoft/fast-jss-manager";
 import {
     ActionTriggerClassNameContract,
     ButtonClassNameContract,
 } from "@microsoft/fast-components-class-name-contracts-msft";
-import { applyLocalizedProperty, Direction } from "@microsoft/fast-jss-utilities";
-import { DesignSystem, withDesignSystemDefaults } from "../design-system/index";
+import { directionSwitch } from "@microsoft/fast-jss-utilities";
+import { DesignSystem } from "../design-system/index";
 import {
     accentForegroundActive,
     accentForegroundCut,
@@ -30,88 +30,78 @@ export const actionTriggerButtonOverrides: ComponentStyles<
     },
 };
 
-const styles: ComponentStyles<ActionTriggerClassNameContract, DesignSystem> = (
-    config: DesignSystem
-): ComponentStyleSheet<ActionTriggerClassNameContract, DesignSystem> => {
-    const designSystem: DesignSystem = withDesignSystemDefaults(config);
-    const direction: Direction = designSystem.direction;
-
-    return {
-        actionTrigger: {},
-        actionTrigger_glyph: {
-            display: "inline-block",
-            position: "relative",
-            width: glyphSize,
-            height: glyphSize,
-            flexShrink: "0",
-            [applyLocalizedProperty(
-                "marginRight",
-                "marginLeft",
-                direction
-            )]: horizontalSpacing(),
+const styles: ComponentStyles<ActionTriggerClassNameContract, DesignSystem> = {
+    actionTrigger: {},
+    actionTrigger_glyph: {
+        display: "inline-block",
+        position: "relative",
+        width: glyphSize,
+        height: glyphSize,
+        flexShrink: "0",
+        marginRight: directionSwitch(horizontalSpacing(), ""),
+        marginLeft: directionSwitch("", horizontalSpacing()),
+    },
+    actionTrigger__primary: {
+        "& $actionTrigger_glyph": {
+            fill: accentForegroundCut,
         },
-        actionTrigger__primary: {
-            "& $actionTrigger_glyph": {
-                fill: accentForegroundCut,
-            },
-            "&$actionTrigger__disabled $actionTrigger_glyph": {
-                fill: accentForegroundCut,
-            },
+        "&$actionTrigger__disabled $actionTrigger_glyph": {
+            fill: accentForegroundCut,
+        },
+    },
+    actionTrigger__lightweight: {
+        "& $actionTrigger_glyph": {
+            fill: accentForegroundRest,
         },
-        actionTrigger__lightweight: {
+        "&:hover": {
             "& $actionTrigger_glyph": {
-                fill: accentForegroundRest,
-            },
-            "&:hover": {
-                "& $actionTrigger_glyph": {
-                    fill: accentForegroundHover,
-                },
-            },
-            "&:active": {
-                "& $actionTrigger_glyph": {
-                    fill: accentForegroundActive,
-                },
-            },
-            "&$actionTrigger__disabled $actionTrigger_glyph": {
-                fill: accentForegroundRest,
+                fill: accentForegroundHover,
             },
         },
-        actionTrigger__justified: {
+        "&:active": {
             "& $actionTrigger_glyph": {
-                fill: accentForegroundRest,
-            },
-            "&:hover": {
-                "& $actionTrigger_glyph": {
-                    fill: accentForegroundHover,
-                },
-            },
-            "&:active": {
-                "& $actionTrigger_glyph": {
-                    fill: accentForegroundActive,
-                },
-            },
-            "&$actionTrigger__disabled $actionTrigger_glyph": {
-                fill: accentForegroundRest,
+                fill: accentForegroundActive,
             },
         },
-        actionTrigger__outline: {
+        "&$actionTrigger__disabled $actionTrigger_glyph": {
+            fill: accentForegroundRest,
+        },
+    },
+    actionTrigger__justified: {
+        "& $actionTrigger_glyph": {
+            fill: accentForegroundRest,
+        },
+        "&:hover": {
             "& $actionTrigger_glyph": {
-                fill: neutralForegroundRest,
-            },
-            "&$actionTrigger__disabled $actionTrigger_glyph": {
-                fill: neutralForegroundRest,
+                fill: accentForegroundHover,
             },
         },
-        actionTrigger__stealth: {
+        "&:active": {
             "& $actionTrigger_glyph": {
-                fill: neutralForegroundRest,
-            },
-            "&$actionTrigger__disabled $actionTrigger_glyph": {
-                fill: neutralForegroundRest,
+                fill: accentForegroundActive,
             },
         },
-        actionTrigger__disabled: {},
-    };
+        "&$actionTrigger__disabled $actionTrigger_glyph": {
+            fill: accentForegroundRest,
+        },
+    },
+    actionTrigger__outline: {
+        "& $actionTrigger_glyph": {
+            fill: neutralForegroundRest,
+        },
+        "&$actionTrigger__disabled $actionTrigger_glyph": {
+            fill: neutralForegroundRest,
+        },
+    },
+    actionTrigger__stealth: {
+        "& $actionTrigger_glyph": {
+            fill: neutralForegroundRest,
+        },
+        "&$actionTrigger__disabled $actionTrigger_glyph": {
+            fill: neutralForegroundRest,
+        },
+    },
+    actionTrigger__disabled: {},
 };
 
 export default styles;