feat(storiesNav): deep theming for stories nav panel

- updating README file with all the deep theme variables supported - updating `HeadingLink` component to support html strings for `brand`. So that `image` can be used for `brand` - placing `props` to last in `chevronRight` component, so that it overrides the theme props passed
2025-04-04 17:01:07 +08:00 · 2018-11-02 23:15:58 -04:00 · 2018-11-02 23:15:58 -04:00 · bbaf337700
commit bbaf337700
parent edcff0e3ff
13 changed files with 179 additions and 39 deletions
--- a/docs/src/pages/configurations/standalone-options/index.md
+++ b/docs/src/pages/configurations/standalone-options/index.md
@ -86,4 +86,5 @@ storybook({
  port: 9009,
  configDir: './.storybook',
 });
-```
+```
+
--- a/docs/src/pages/configurations/theming/index.md
+++ b/docs/src/pages/configurations/theming/index.md
@ -57,7 +57,17 @@ overlayBackground: applied to overlay `background`, // 'linear-gradient(to botto
 All options above are single key options, in other words, they are variables, and their usage is fixed.

 We will extend the theming ability in the future and possibly add more deep theming ability.
-Right now we have identified the most likely thing you might want to change the appearance of more then just 1 variable so we allow you the deep-theme the header using: `brand`.
+Right now we allow to deep theme: `stories nav panel`. Below are the varaiables that are used to deep theme `stories nav panel`.
+
+storiesNav: deep theme for `stories nav`
+
+```
+storiesNav: {
+  backgroundColor: 'aqua',
+}
+```
+
+brand: deep theme for brand including `brand name` and `shortcuts`

 ```
 brand: {
@ -65,6 +75,69 @@ brand: {
 }
 ```

+brandLink: deep theme for only `brand name`
+
+```
+brandLink: {
+  border: 'none'
+}
+```
+
+filter: deep thene for `stories filter section`
+
+```
+filter: {
+  backgroundColor: 'red',
+}
+```
+
+treeHeader: deep thene for `tree header`
+
+```
+treeHeader: {
+  color: 'blue',
+}
+```
+
+treeMenuHeader: deep thene for `tree menu header` of each menu
+
+```
+treeMenuHeader: {
+  color: 'aqua',
+}
+```
+
+menuLink: deep thene for `menu link` of each story
+
+```
+menuLink: {
+  color: 'black',
+}
+```
+
+activeMenuLink: deep thene for `active menu link` for the active story
+
+```
+activeMenuLink: {
+  fontWeight: 'light',
+}
+```
+
+treeArrow: deep theme for `tree arrow`. This accepts an object which receives `height`, `width`, `base` and `wrapper`
+
+```
+treeArrow: {
+  height: 5,
+  width: 5,
+  base: {
+    fontSize: '12px'
+  },
+  wrapper: {
+    backgroundColor: 'white'
+  }
+}
+```
+
 The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors!

 ## Adding more theme variables for addons
--- a/lib/components/src/header/header.js
+++ b/lib/components/src/header/header.js
@ -8,7 +8,7 @@ const Wrapper = styled.div(({ theme }) => ({
  ...theme.brand,
 }));

-const HeadingLink = styled.a({
+const HeadingLink = styled.a(({ theme }) => ({
  textDecoration: 'none',
  flexGrow: 1,
  display: 'flex',
@ -26,7 +26,8 @@ const HeadingLink = styled.a({
  padding: '5px',
  margin: 0,
  overflow: 'hidden',
-});
+  ...theme.brandLink,
+}));

 const ShortHelpButton = styled.button({
  textTransform: 'uppercase',
@ -48,9 +49,12 @@ const ShortHelpButton = styled.button({

 const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp, isMobileDevice }) => (
  <Wrapper isMobileDevice={isMobileDevice}>
-    <HeadingLink href={url} target="_blank" rel="noopener noreferrer">
-      {name}
-    </HeadingLink>
+    <HeadingLink
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      dangerouslySetInnerHTML={{ __html: name }}
+    />
    {enableShortcutsHelp && <ShortHelpButton onClick={openShortcutsHelp}>⌘</ShortHelpButton>}
  </Wrapper>
 );
--- a/lib/components/src/icons/chevronRight.js
+++ b/lib/components/src/icons/chevronRight.js
@ -2,13 +2,13 @@ import React from 'react';

 export default props => (
  <svg
-    {...props}
    fill="currentColor"
    preserveAspectRatio="xMidYMid meet"
    height="10"
    width="10"
    viewBox="0 0 40 40"
    style={{ verticalAlign: 'top', fill: 'currentcolor' }}
+    {...props}
  >
    <g>
      <path d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z" />
--- a/lib/components/src/layout/desktop.js
+++ b/lib/components/src/layout/desktop.js
@ -61,15 +61,18 @@ const GlobalStyles = () => (
  />
 );

-const StoriesPanelWrapper = styled.div(({ showStoriesPanel, storiesPanelOnTop }) => ({
-  boxSizing: 'border-box',
-  width: '100%',
-  height: '100%',
-  display: showStoriesPanel ? 'flex' : 'none',
-  flexDirection: storiesPanelOnTop ? 'column' : 'row',
-  alignItems: 'stretch',
-  paddingRight: storiesPanelOnTop ? 10 : 0,
-}));
+const StoriesPanelWrapper = styled.div(
+  ({ showStoriesPanel, storiesPanelOnTop, theme: { storiesNav } }) => ({
+    boxSizing: 'border-box',
+    width: '100%',
+    height: '100%',
+    display: showStoriesPanel ? 'flex' : 'none',
+    flexDirection: storiesPanelOnTop ? 'column' : 'row',
+    alignItems: 'stretch',
+    paddingRight: storiesPanelOnTop ? 10 : 0,
+    ...storiesNav,
+  })
+);

 const StoriesPanelInner = styled.div({
  flexGrow: 1,
--- a/lib/components/src/layout/mobile.js
+++ b/lib/components/src/layout/mobile.js
@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { Tab, TabBar } from '../tabs/tabs';

 const MobilePanel = styled.div(
-  ({ selected }) =>
+  ({ selected, theme }) =>
    selected
      ? {
          display: 'block',
@ -16,6 +16,7 @@ const MobilePanel = styled.div(
          width: '100vw',
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
+          ...theme.storiesNav,
        }
      : {
          display: 'none',
--- a/lib/components/src/navigation/MenuLink.js
+++ b/lib/components/src/navigation/MenuLink.js
@ -13,14 +13,16 @@ const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
    marginLeft: '5px',
    position: 'relative',
    zIndex: 1,
+    ...theme.menuLink,
  }),
-  ({ active }) =>
+  ({ theme, active }) =>
    active
      ? {
          color: 'inherit',
          fontWeight: 'bold',
          backgroundColor: 'rgba(0,0,0,0.07)',
          zIndex: 0,
+          ...theme.activeMenuLink,
        }
      : {}
 );
--- a/lib/components/src/theme.js
+++ b/lib/components/src/theme.js
@ -36,8 +36,24 @@ export const normal = {
  overlayBackground:
    'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))',

+  storiesNav: {},
+
  brand: {},

+  brandLink: {},
+
+  filter: {},
+
+  treeHeader: {},
+
+  treeMenuHeader: {},
+
+  menuLink: {},
+
+  activeMenuLink: {},
+
+  treeArrow: {},
+
  addonActionsTheme: {
    ...chromeLight,
    BASE_FONT_FAMILY: monoFonts.fontFamily,
@ -67,10 +83,26 @@ export const dark = {
  overlayBackground:
    'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',

+  storiesNav: {},
+
  brand: {
    background: 'rgba(0,0,0,1)',
  },

+  brandLink: {},
+
+  filter: {},
+
+  treeHeader: {},
+
+  treeMenuHeader: {},
+
+  menuLink: {},
+
+  activeMenuLink: {},
+
+  treeArrow: {},
+
  addonActionsTheme: {
    ...chromeDark,
    BASE_FONT_FAMILY: monoFonts.fontFamily,
--- a/lib/ui/src/modules/ui/components/stories_panel/snapshots/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/snapshots/index.stories.storyshot
@ -170,7 +170,7 @@ exports[`Storyshots UI|stories/StoriesPanel with storiesHierarchies prop 1`] = `
                        fill="currentColor"
                        height="10"
                        preserveAspectRatio="xMidYMid meet"
-                        style="vertical-align:top;fill:currentcolor"
+                        style="vertical-align:top;fill:currentColor"
                        viewBox="0 0 40 40"
                        width="10"
                      >
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/snapshots/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/snapshots/index.stories.storyshot
@ -54,7 +54,7 @@ exports[`Storyshots UI|stories/Stories simple 1`] = `
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -99,7 +99,7 @@ exports[`Storyshots UI|stories/Stories simple 1`] = `
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -212,7 +212,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -257,7 +257,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -304,7 +304,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
                            fill="currentColor"
                            height="10"
                            preserveAspectRatio="xMidYMid meet"
-                            style="vertical-align:top;fill:currentcolor"
+                            style="vertical-align:top;fill:currentColor"
                            viewBox="0 0 40 40"
                            width="10"
                          >
@ -351,7 +351,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
                                  fill="currentColor"
                                  height="10"
                                  preserveAspectRatio="xMidYMid meet"
-                                  style="vertical-align:top;fill:currentcolor"
+                                  style="vertical-align:top;fill:currentColor"
                                  viewBox="0 0 40 40"
                                  width="10"
                                >
@ -470,7 +470,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -527,7 +527,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
                            fill="currentColor"
                            height="10"
                            preserveAspectRatio="xMidYMid meet"
-                            style="vertical-align:top;fill:currentcolor"
+                            style="vertical-align:top;fill:currentColor"
                            viewBox="0 0 40 40"
                            width="10"
                          >
@ -574,7 +574,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
                                  fill="currentColor"
                                  height="10"
                                  preserveAspectRatio="xMidYMid meet"
-                                  style="vertical-align:top;fill:currentcolor"
+                                  style="vertical-align:top;fill:currentColor"
                                  viewBox="0 0 40 40"
                                  width="10"
                                >
@ -693,7 +693,7 @@ exports[`Storyshots UI|stories/Stories without hierarchy - hierarchySeparator is
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
@ -738,7 +738,7 @@ exports[`Storyshots UI|stories/Stories without hierarchy - hierarchySeparator is
                      fill="currentColor"
                      height="10"
                      preserveAspectRatio="xMidYMid meet"
-                      style="vertical-align:top;fill:currentcolor"
+                      style="vertical-align:top;fill:currentColor"
                      viewBox="0 0 40 40"
                      width="10"
                    >
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
@ -2,6 +2,7 @@ import { decorators } from 'react-treebeard';
 import { Icons } from '@storybook/components';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withCSSContext } from '@emotion/core';
 import { MenuLink } from '../../../containers/routed_link';
 import MenuItem from '../../menu_item';
 import treeNodeTypes from './tree_node_type';
@ -9,19 +10,29 @@ import { highlightNode } from './tree_decorators_utils';

 function noop() {}

-function ToggleDecorator({ style }) {
+function ToggleDecorator({ style, theme }) {
  const { height, width, arrow } = style;
+  const { treeArrow } = theme;
+
+  const baseStyles =
+    treeArrow && treeArrow.base ? { ...style.base, ...treeArrow.base } : style.base;
+  const wrapperStyles =
+    treeArrow && treeArrow.wrapper ? { ...style.wrapper, ...treeArrow.wrapper } : style.wrapper;
+  const chevronHeight = treeArrow && treeArrow.height ? treeArrow.height : height;
+  const chevronWeight = treeArrow && treeArrow.width ? treeArrow.height : width;
+  const arrowStyles = treeArrow && treeArrow.arrow ? { ...arrow, ...treeArrow.arrow } : arrow;

  return (
-    <div style={style.base}>
-      <div style={style.wrapper}>
-        <Icons.ChevronRight height={height} width={width} style={arrow} />
+    <div style={baseStyles}>
+      <div style={wrapperStyles}>
+        <Icons.ChevronRight height={chevronHeight} width={chevronWeight} style={arrowStyles} />
      </div>
    </div>
  );
 }

 ToggleDecorator.propTypes = {
+  theme: PropTypes.shape({}),
  style: PropTypes.shape({
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
@ -29,8 +40,12 @@ ToggleDecorator.propTypes = {
  }).isRequired,
 };

+ToggleDecorator.defaultProps = {
+  theme: {},
+};
+
 function ContainerDecorator(props) {
-  const { node, style, onClick } = props;
+  const { node, style, onClick, theme } = props;
  const { container, ...restStyles } = style;

  if (node.root) {
@ -40,9 +55,11 @@ function ContainerDecorator(props) {
  const containerStyle = container.reduce((acc, styles) => ({ ...acc, ...styles }), {});
  const innerContainer = <decorators.Container {...props} style={restStyles} onClick={noop} />;

+  const containerStyles = { ...containerStyle, ...theme.treeMenuHeader };
+
  if (node.type !== treeNodeTypes.STORY) {
    return (
-      <MenuItem style={containerStyle} onClick={onClick} data-name={node.name}>
+      <MenuItem style={containerStyles} onClick={onClick} data-name={node.name}>
        {innerContainer}
      </MenuItem>
    );
@ -66,6 +83,7 @@ function ContainerDecorator(props) {
 }

 ContainerDecorator.propTypes = {
+  theme: PropTypes.shape({}),
  style: PropTypes.shape({
    container: PropTypes.array.isRequired,
  }).isRequired,
@ -80,6 +98,10 @@ ContainerDecorator.propTypes = {
  onClick: PropTypes.func.isRequired,
 };

+ContainerDecorator.defaultProps = {
+  theme: {},
+};
+
 function HeaderDecorator(props) {
  const { style, node, ...restProps } = props;

@ -116,6 +138,6 @@ HeaderDecorator.propTypes = {
 export default {
  ...decorators,
  Header: HeaderDecorator,
-  Container: ContainerDecorator,
-  Toggle: ToggleDecorator,
+  Container: withCSSContext((props, { theme }) => <ContainerDecorator {...props} theme={theme} />),
+  Toggle: withCSSContext((props, { theme }) => <ToggleDecorator {...props} theme={theme} />),
 };
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
@ -12,6 +12,7 @@ const TreeHeader = styled.h4(({ theme }) => ({
  padding: '0 13px 5px 13px',
  margin: 0,
  overflow: 'hidden',
+  ...theme.treeHeader,
 }));

 TreeHeader.propTypes = {
--- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js
@ -24,6 +24,7 @@ const Input = styled.input(({ theme }) => ({
  border: '0 none',
  outline: 'none',
  borderRadius: 2,
+  ...theme.filter,
 }));

 const ClearButton = styled.button({