Merge pull request #374 from dcos-labs/mp/fix/headerbar-theme-padding…

…-none Allow AppChrome components' padding to be 0 via theming
d2iq · Jul 12, 2019 · 0ae1e6f · 0ae1e6f
2 parents 838cb80 + 583f487
commit 0ae1e6f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 33 deletions.
diff --git a/packages/appChrome/components/HeaderBar.tsx b/packages/appChrome/components/HeaderBar.tsx
@@ -18,7 +18,6 @@ export interface HeaderProps {
 class Header extends React.PureComponent<HeaderProps, {}> {
   public render() {
     const { children } = this.props;
-    /* tslint:disable:no-string-literal */
     const HeaderBar = styled("div")`
       ${props => {
         const bgColor =
@@ -30,19 +29,22 @@ class Header extends React.PureComponent<HeaderProps, {}> {
         );
         return css`
           background-color: ${bgColor};
-          padding-left: ${spaceSizes[props.theme.headerPaddingHor] ||
-            spaceSizes["l"]};
-          padding-right: ${spaceSizes[props.theme.headerPaddingHor] ||
-            spaceSizes["l"]};
-          padding-bottom: ${spaceSizes[props.theme.headerPaddingVert] ||
-            spaceSizes["xs"]};
-          padding-top: ${spaceSizes[props.theme.headerPaddingVert] ||
-            spaceSizes["xs"]};
+          padding-left: ${props.theme.headerPaddingHor
+            ? spaceSizes[props.theme.headerPaddingHor]
+            : spaceSizes.l};
+          padding-right: ${props.theme.headerPaddingHor
+            ? spaceSizes[props.theme.headerPaddingHor]
+            : spaceSizes.l};
+          padding-bottom: ${props.theme.headerPaddingVert
+            ? spaceSizes[props.theme.headerPaddingVert]
+            : spaceSizes.xs};
+          padding-top: ${props.theme.headerPaddingVert
+            ? spaceSizes[props.theme.headerPaddingVert]
+            : spaceSizes.xs};
           ${tintContent(textColor)};
         `;
       }};
     `;
-    /* tslint:enable:no-string-literal */
 
     return (
       <HeaderBar className={cx(flex({ align: "center" }))}>

diff --git a/packages/appChrome/components/SidebarItem.tsx b/packages/appChrome/components/SidebarItem.tsx
@@ -14,26 +14,28 @@ export interface SidebarItemProps {
 class SidebarItemComponent extends React.PureComponent<SidebarItemProps, {}> {
   public render() {
     const { children, isActive, onClick } = this.props;
-    /* tslint:disable:no-string-literal */
     const Item = styled("li")`
-      padding-left: ${props =>
-        spaceSizes[props.theme.sidebarItemPaddingHor] || spaceSizes["l"]};
-      padding-right: ${props =>
-        spaceSizes[props.theme.sidebarItemPaddingHor] || spaceSizes["l"]};
-      padding-bottom: ${props =>
-        spaceSizes[props.theme.sidebarItemPaddingVert] || spaceSizes["none"]};
-      padding-top: ${props =>
-        spaceSizes[props.theme.sidebarItemPaddingVert] || spaceSizes["none"]};
       ${props => {
         return css`
           ${sidebarNavItem(
             Boolean(isActive),
             props.theme.sidebarBackgroundColor
           )};
+          padding-left: ${props.theme.sidebarItemPaddingHor
+            ? spaceSizes[props.theme.sidebarItemPaddingHor]
+            : spaceSizes.l};
+          padding-right: ${props.theme.sidebarItemPaddingHor
+            ? spaceSizes[props.theme.sidebarItemPaddingHor]
+            : spaceSizes.l};
+          padding-bottom: ${props.theme.sidebarItemPaddingVert
+            ? spaceSizes[props.theme.sidebarItemPaddingVert]
+            : spaceSizes.none};
+          padding-top: ${props.theme.sidebarItemPaddingVert
+            ? spaceSizes[props.theme.sidebarItemPaddingVert]
+            : spaceSizes.none};
         `;
       }};
     `;
-    /* tslint:enable:no-string-literal */
 
     return (
       <Clickable

diff --git a/packages/appChrome/components/SidebarSection.tsx b/packages/appChrome/components/SidebarSection.tsx
@@ -24,18 +24,31 @@ class SidebarSection extends React.PureComponent<SidebarSectionProps, {}> {
   public render() {
     const { label, children } = this.props;
 
-    /* tslint:disable:no-string-literal */
     const H3 = styled("h3")`
-      padding-left: ${props =>
-        spaceSizes[props.theme.sidebarHeaderPaddingHor] || spaceSizes["l"]};
-      padding-right: ${props =>
-        spaceSizes[props.theme.sidebarHeaderPaddingHor] || spaceSizes["l"]};
-      padding-bottom: ${props =>
-        spaceSizes[props.theme.sidebarHeaderPaddingVert] || spaceSizes["s"]};
-      padding-top: ${props =>
-        spaceSizes[props.theme.sidebarHeaderPaddingVert] || spaceSizes["s"]};
+      ${props => `
+        padding-left: ${
+          props.theme.sidebarHeaderPaddingHor
+            ? spaceSizes[props.theme.sidebarHeaderPaddingHor]
+            : spaceSizes.l
+        };
+        padding-right: ${
+          props.theme.sidebarHeaderPaddingHor
+            ? spaceSizes[props.theme.sidebarHeaderPaddingHor]
+            : spaceSizes.l
+        };
+        padding-bottom: ${
+          props.theme.sidebarHeaderPaddingVert
+            ? spaceSizes[props.theme.sidebarHeaderPaddingVert]
+            : spaceSizes.s
+        };
+        padding-top: ${
+          props.theme.sidebarHeaderPaddingVert
+            ? spaceSizes[props.theme.sidebarHeaderPaddingVert]
+            : spaceSizes.s
+        };
+
+        `};
     `;
-    /* tslint:enable:no-string-literal */
 
     return (
       <div>

diff --git a/packages/appChrome/stories/AppChrome.stories.tsx b/packages/appChrome/stories/AppChrome.stories.tsx
@@ -376,7 +376,8 @@ storiesOf("AppChrome", module)
       m: "m",
       l: "l",
       xl: "xl",
-      xxl: "xxl"
+      xxl: "xxl",
+      none: "none"
     };
 
     const paddingHorSize = select("Horizontal Padding", paddingSizes, "l");
@@ -419,7 +420,8 @@ storiesOf("AppChrome", module)
       m: "m",
       l: "l",
       xl: "xl",
-      xxl: "xxl"
+      xxl: "xxl",
+      none: "none"
     };
 
     const paddingHorSize = select(
@@ -482,7 +484,8 @@ storiesOf("AppChrome", module)
       m: "m",
       l: "l",
       xl: "xl",
-      xxl: "xxl"
+      xxl: "xxl",
+      none: "none"
     };
 
     const paddingHorSize = select("Horizontal Padding", paddingSizes, "l");