Rename panel_actionbar to ActionBar & update API (see comment)

API updated so consumers don't have to compose ActionBar + ActionButton in situ every usage. This removes needing to export 2 components from @storybook/components and then import them in addons and elsewhere in the UI. What do you think @ndelangen @tmeasday?

addons/a11y/src/components/Panel.js

@@ -4,13 +4,27 @@ import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
 import { STORY_RENDERED } from '@storybook/core-events';
-import { ActionBar, ActionButton, Icons } from '@storybook/components';
+import { ActionBar, Icons } from '@storybook/components';
 
 import EVENTS from '../constants';
 
 import Tabs from './Tabs';
 import Report from './Report';
 
+const Icon = styled(Icons)(
+  {
+    height: '12px',
+    width: '12px',
+    marginRight: '4px',
+  },
+  ({ status, theme }) =>
+    status === 'running'
+      ? {
+          animation: `${theme.animation.rotate360} 1s linear infinite;`,
+        }
+      : {}
+);
+
 const Passes = styled.span(({ theme }) => ({
   color: theme.color.positive,
 }));
@@ -97,6 +111,23 @@ class A11YPanel extends Component {
     const { passes, violations, status } = this.state;
     const { active } = this.props;
 
+    let actionTitle;
+    if (status === 'ready') {
+      actionTitle = 'Rerun tests';
+    } else if (status === 'running') {
+      actionTitle = (
+        <Fragment>
+          <Icon inline icon="sync" status={status} /> Running test
+        </Fragment>
+      );
+    } else if (status === 'ran') {
+      actionTitle = (
+        <Fragment>
+          <Icon inline icon="check" /> Tests completed
+        </Fragment>
+      );
+    }
+
     return active ? (
       <Fragment>
         <Tabs
@@ -112,21 +143,7 @@ class A11YPanel extends Component {
             },
           ]}
         />
-        <ActionBar key="actionbar">
-          <ActionButton onClick={this.request}>
-            {status === 'ready' ? <span>RERUN TEST</span> : null}
-            {status === 'running' ? (
-              <Fragment>
-                <Icons inline icon="timer" /> <span>Running test</span>
-              </Fragment>
-            ) : null}
-            {status === 'ran' ? (
-              <Fragment>
-                <Icons inline icon="check" /> <span>Tests completed</span>
-              </Fragment>
-            ) : null}
-          </ActionButton>
-        </ActionBar>
+        <ActionBar key="actionbar" actionItems={[{ title: actionTitle, onClick: this.request }]} />
       </Fragment>
     ) : null;
   }

addons/actions/src/components/ActionLogger/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Inspector from 'react-inspector';
 
 import { withTheme } from '@storybook/theming';
-import { ActionBar, ActionButton } from '@storybook/components';
+import { ActionBar } from '@storybook/components';
 
 import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
 
@@ -26,9 +26,7 @@ const ActionLogger = withTheme(({ actions, onClear, theme }) => (
       ))}
     </Actions>
 
-    <ActionBar>
-      <ActionButton onClick={onClear}>CLEAR</ActionButton>
-    </ActionBar>
+    <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
   </Wrapper>
 ));
 

addons/knobs/src/components/Panel.js

@@ -6,7 +6,7 @@ import { styled } from '@storybook/theming';
 import copy from 'copy-to-clipboard';
 
 import { STORY_CHANGED } from '@storybook/core-events';
-import { Placeholder, TabWrapper, TabsState, ActionBar, ActionButton } from '@storybook/components';
+import { Placeholder, TabWrapper, TabsState, ActionBar } from '@storybook/components';
 import { RESET, SET, CHANGE, SET_OPTIONS, CLICK } from '../shared';
 
 import Types from './types';
@@ -190,10 +190,12 @@ export default class KnobPanel extends PureComponent {
             onFieldClick={this.handleClick}
           />
         )}
-        <ActionBar>
-          <ActionButton onClick={this.copy}>COPY</ActionButton>
-          <ActionButton onClick={this.reset}>RESET</ActionButton>
-        </ActionBar>
+        <ActionBar
+          actionItems={[
+            { title: 'Copy', onClick: this.copy },
+            { title: 'Reset', onClick: this.reset },
+          ]}
+        />
       </PanelWrapper>
     );
   }

lib/components/src/ActionBar/ActionBar.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { styled } from '@storybook/theming';
+
+const Container = styled.div(({ theme }) => ({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  maxWidth: '100%',
+  display: 'flex',
+  background: theme.barFill,
+}));
+
+export const ActionButton = styled.button(({ theme }) => ({
+  border: '0 none',
+  padding: '4px 10px',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+
+  color: theme.color.dark,
+  background: theme.barFill,
+
+  fontSize: 12,
+  lineHeight: '16px',
+  fontWeight: theme.typography.weight.bold,
+
+  borderTop: `1px solid ${theme.mainBorderColor}`,
+  borderLeft: `1px solid ${theme.mainBorderColor}`,
+  marginLeft: -1,
+
+  borderRadius: `4px 0 0 0`,
+
+  '&:not(:last-child)': { borderRight: `1px solid ${theme.mainBorderColor}` },
+  '& + *': {
+    borderLeft: `1px solid ${theme.mainBorderColor}`,
+    borderRadius: 0,
+  },
+
+  '&:focus': {
+    boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`,
+    outline: '0 none',
+  },
+}));
+ActionButton.displayName = 'ActionButton';
+
+export const ActionBar = ({ actionItems }) => (
+  <Container>
+    {actionItems.map(({ title, onClick }, index) => (
+      <ActionButton
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        onClick={onClick}
+      >
+        {title}
+      </ActionButton>
+    ))}
+  </Container>
+);
+
+ActionBar.propTypes = {
+  actionItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.node.isRequired,
+      onClick: PropTypes.func.isRequired,
+    })
+  ).isRequired,
+};

lib/components/src/ActionBar/ActionBar.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { ActionBar } from './ActionBar';
+
+const action1 = action('action1');
+const action2 = action('action2');
+const action3 = action('action3');
+
+export default {
+  Component: ActionBar,
+  title: 'Basics|ActionBar',
+  decorators: [
+    storyFn => (
+      <div
+        style={{
+          position: 'relative',
+          width: '240px',
+          height: '64px',
+          margin: '1rem',
+          background: 'papayawhip',
+          border: '1px solid rgba(0,0,0,.05)',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+};
+
+export const singleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
+
+export const manyItems = () => (
+  <ActionBar
+    actionItems={[
+      { title: 'Action string', onClick: action1 },
+      { title: <div>Action node</div>, onClick: action2 },
+      { title: 'Long action string', onClick: action3 },
+    ]}
+  />
+);

lib/components/src/index.js

@@ -15,7 +15,7 @@ export { default as Form } from './form/index';
 export SyntaxHighlighter from './syntaxhighlighter/syntaxhighlighter';
 
 export { Tabs, TabsState, TabWrapper } from './tabs/tabs';
-export { ActionBar, ActionButton } from './panel_actionbar/panel_actionbar';
+export { ActionBar } from './ActionBar/ActionBar';
 export { default as Placeholder } from './placeholder/placeholder';
 
 export { default as WithTooltip } from './tooltip/WithTooltip';

lib/components/src/panel_actionbar/panel_actionbar.js

@@ -1,71 +0,0 @@
-import React, { Children } from 'react';
-import PropTypes from 'prop-types';
-
-import { styled } from '@storybook/theming';
-
-const Container = styled.ul(({ theme }) => ({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  maxWidth: '100%',
-  display: 'flex',
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-
-  borderTop: theme.mainBorder,
-  borderLeft: theme.mainBorder,
-  background: theme.barFill,
-  borderRadius: `${theme.mainBorderRadius}px 0 0 0`,
-}));
-
-export const ActionButton = styled.button(({ theme }) => ({
-  border: '0 none',
-  display: 'block',
-  background: 'none',
-  padding: '0 10px',
-  cursor: 'pointer',
-
-  textTransform: 'inherit',
-  letterSpacing: 'inherit',
-  fontSize: 'inherit',
-  color: 'inherit',
-
-  borderTop: '2px solid transparent',
-  borderBottom: '2px solid transparent',
-
-  '&:focus': {
-    borderBottom: `2px solid ${theme.color.secondary}`,
-    outline: '0 none',
-  },
-}));
-ActionButton.displayName = 'ActionButton';
-
-export const ActionItem = styled.li(({ first, theme }) => ({
-  display: 'flex',
-  position: 'relative',
-  listStyle: 'none',
-  padding: 0,
-  height: 26,
-  fontSize: 11,
-  letterSpacing: 1,
-  textTransform: 'uppercase',
-
-  borderLeft: first ? '0 none' : `1px solid ${theme.mainBorderColor}`,
-}));
-ActionItem.displayName = 'ActionItem';
-
-export const ActionBar = ({ children }) => (
-  <Container>
-    {Children.toArray(children).map((item, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <ActionItem key={index} first={index === 0}>
-        {item}
-      </ActionItem>
-    ))}
-  </Container>
-);
-
-ActionBar.propTypes = {
-  children: PropTypes.node.isRequired,
-};

lib/components/src/panel_actionbar/panel_actionbar.stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { ActionBar, ActionButton } from './panel_actionbar';
-
-const action1 = action('action1');
-storiesOf('Basics|PanelActionBar', module)
-  .add('single item', () => (
-    <ActionBar>
-      <ActionButton onClick={action1}>CLEAR</ActionButton>
-    </ActionBar>
-  ))
-  .add('3 items', () => (
-    <ActionBar>
-      <ActionButton onClick={action1}>Nr1</ActionButton>
-      <ActionButton onClick={action1}>Nr2</ActionButton>
-      <ActionButton onClick={action1}>Nr3</ActionButton>
-    </ActionBar>
-  ));

lib/components/src/syntaxhighlighter/syntaxhighlighter.js

@@ -11,7 +11,7 @@ import html from 'react-syntax-highlighter/languages/prism/markup';
 
 import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
 import { js as beautify } from 'js-beautify';
-import { ActionBar, ActionButton } from '../panel_actionbar/panel_actionbar';
+import { ActionBar } from '../ActionBar/ActionBar';
 
 registerLanguage('jsx', jsx);
 registerLanguage('bash', bash);
@@ -125,9 +125,7 @@ export default class CopyableCode extends PureComponent {
           </SyntaxHighlighter>
         </Scroller>
         {copyable ? (
-          <ActionBar>
-            <ActionButton onClick={this.onClick}>{copied ? 'copied' : 'copy'}</ActionButton>
-          </ActionBar>
+          <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick: this.onClick }]} />
         ) : null}
       </Wrapper>
     ) : null;