Merge branch 'master' into mp/fix/headerbar-theme-padding-none

d2iq · Jul 12, 2019 · 583f487 · 583f487
2 parents e576f34 + 838cb80
commit 583f487
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/appChrome/stories/AppChrome.stories.tsx b/packages/appChrome/stories/AppChrome.stories.tsx
@@ -453,7 +453,7 @@ storiesOf("AppChrome", module)
       <ThemeProvider theme={CustomTheme}>
         <Sidebar isOpen={true}>
           <SidebarSection label={sectionHeader}>
-            <SidebarItem onClick={action("clicked a nav item")}>
+            <SidebarItem isActive={true} onClick={action("clicked a nav item")}>
               <SidebarItemLabel>Lorem Ipsum</SidebarItemLabel>
             </SidebarItem>
             <SidebarItem onClick={action("clicked a nav item")}>

diff --git a/packages/appChrome/style.ts b/packages/appChrome/style.ts
@@ -6,10 +6,12 @@ import {
   spaceXl,
   themeBgSelected,
   themeBgHover,
-  themeBgHoverInverted
+  themeBgHoverInverted,
+  themeTextColorPrimary,
+  themeTextColorPrimaryInverted
 } from "../design-tokens/build/js/designTokens";
 import { padding } from "../shared/styles/styleUtils";
-import { pickHoverBg } from "../shared/styles/color";
+import { pickHoverBg, pickReadableTextColor } from "../shared/styles/color";
 import getCSSVarValue from "../utilities/components/getCSSVarValue";
 
 const iconSize = "24px";
@@ -62,6 +64,13 @@ export const sidebarSectionList = css`
 export const sidebarNavItem = (isActive: boolean, sidebarBgColor: string) => {
   return css`
     background-color: ${isActive ? themeBgSelected : "transparent"};
+    color: ${isActive
+      ? pickReadableTextColor(
+          sidebarBgColor,
+          themeTextColorPrimary,
+          themeTextColorPrimaryInverted
+        )
+      : null};
     cursor: pointer;
     text-transform: capitalize;
 

diff --git a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`Sidebar SidebarSubMenu renders 1`] = `
         </SidebarItemLabel>
       </div>
     }
-    labelClassName="css-1beii4s"
+    labelClassName="css-193h9wh"
   >
     <ul
       className="emotion-0"