Merge pull request #5692 from storybooks/fix/tooltip-tools

Fix/tooltip tools
storybookjs · Feb 21, 2019 · cedc39f · cedc39f
2 parents 81afc43 + 3480bc0
commit cedc39f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 44 deletions.
diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js
@@ -24,7 +24,7 @@ const ColorIcon = styled.span(
 class ColorBlindness extends Component {
   state = {
     expanded: false,
-    filter: false,
+    filter: null,
   };
 
   setFilter = filter => {

diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -31,10 +31,7 @@ const createBackgroundSelectorItem = memoize(1000)(
   })
 );
 
-const getSelectedBackgroundColor = (
-  list: BackgroundConfig[],
-  currentSelectedValue: string
-): string => {
+const getSelectedBackgroundColor = (list: BackgroundConfig[], currentSelectedValue: string): string => {
   if (!list.length) {
     return 'transparent';
   }
@@ -54,36 +51,30 @@ const getSelectedBackgroundColor = (
   return 'transparent';
 };
 
-const getDisplayableState = memoize(10)(
-  (props: BackgroundToolProps, state: BackgroundToolState, change) => {
-    const data = props.api.getCurrentStoryData();
-    const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
-
-    const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
-
-    let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
-
-    if (selectedBackgroundColor !== 'transparent') {
-      availableBackgroundSelectorItems.push(
-        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', false, change)
-      );
-    }
-
-    if (list.length) {
-      availableBackgroundSelectorItems = [
-        ...availableBackgroundSelectorItems,
-        ...list.map(({ name, value }) =>
-          createBackgroundSelectorItem(null, name, value, true, change)
-        ),
-      ];
-    }
-
-    return {
-      items: availableBackgroundSelectorItems,
-      selectedBackgroundColor,
-    };
+const getDisplayableState = memoize(10)((props: BackgroundToolProps, state: BackgroundToolState, change) => {
+  const data = props.api.getCurrentStoryData();
+  const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
+
+  const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
+
+  let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
+
+  if (selectedBackgroundColor !== 'transparent') {
+    availableBackgroundSelectorItems.push(createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change));
   }
-);
+
+  if (list.length) {
+    availableBackgroundSelectorItems = [
+      ...availableBackgroundSelectorItems,
+      ...list.map(({ name, value }) => createBackgroundSelectorItem(null, name, value, true, change)),
+    ];
+  }
+
+  return {
+    items: availableBackgroundSelectorItems,
+    selectedBackgroundColor,
+  };
+});
 
 interface BackgroundToolProps {
   api: {
@@ -128,11 +119,7 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
 
   render() {
     const { expanded } = this.state;
-    const { items, selectedBackgroundColor } = getDisplayableState(
-      this.props,
-      this.state,
-      this.change
-    );
+    const { items, selectedBackgroundColor } = getDisplayableState(this.props, this.state, this.change);
 
     return items.length ? (
       <Fragment>
@@ -149,9 +136,7 @@ export class BackgroundSelector extends Component<BackgroundToolProps, Backgroun
           placement="top"
           trigger="click"
           tooltipShown={expanded}
-          onVisibilityChange={(newVisibility: boolean) =>
-            this.setState({ expanded: newVisibility })
-          }
+          onVisibilityChange={(newVisibility: boolean) => this.setState({ expanded: newVisibility })}
           tooltip={<TooltipLinkList links={items} />}
           closeOnClick
         >

diff --git a/addons/storysource/src/StoryPanel.js b/addons/storysource/src/StoryPanel.js
@@ -95,7 +95,7 @@ export default class StoryPanel extends Component {
     const story = this.createPart(storyRows, stylesheet, useInlineStyles);
     const storyKey = `${first}-${last}`;
 
-    if (areLocationsEqual(location, currentLocation)) {
+    if (location && currentLocation && areLocationsEqual(location, currentLocation)) {
       return (
         <SelectedStoryHighlight key={storyKey} ref={this.setSelectedStoryRef}>
           {story}

diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.js
@@ -49,7 +49,7 @@ const getState = memoize(10)((props, state, change) => {
             id: 'rotate',
             title: 'Rotate viewport',
             onClick: () => {
-              change({ isRotated: !state.isRotate, expanded: false });
+              change({ isRotated: !state.isRotated, expanded: false });
             },
           },
         ]