Add HorizontalActionList Component (#511)

* add post action link list

* refactoring

* use correct icon color

* menuButton styling

* update snapshots

* add unit tests

* rename to MessageActionsList

* update reference images

* fix reference image

* fix vertical alignment

* update interface to support both links and clickable

* use a more generic name

* remove stale reference images

* add references with new name

* add action states for open overflow menu

* fix description

* revert menuButton color override

* update snapshot

Author: chrismohr

config/styleguide-visual/reference/ActionLink_with_compact_desktop.png

@@ -42,3 +42,13 @@ const text = 'SharePoint Document Library website';
   <ActionLink text={text} icon={Icon} ariaLabel={text} href="https://www.yammer.com" newWindow={true} />
 </div>
 ```
+
+Compact:
+
+```js { "props": { "data-description": "with compact" } }
+const Like = require('../Icon/icons/Like').default;
+
+<div>
+  <ActionLink text="Like" icon={Like} ariaLabel="Like this Post" compact={true} />
+</div>
+```

config/styleguide-visual/reference/HorizontalActionList_basic_click_desktop.png

@@ -82,4 +82,23 @@ describe('<ActionLink />', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('with compact set to true', () => {
+    beforeEach(() => {
+      component = shallow(
+        <ActionLink
+          className="TEST_CLASSNAME"
+          text="Download"
+          icon={Down}
+          ariaLabel="Download the file"
+          href="https://yammer.com"
+          compact={true}
+        />,
+      );
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
 });

config/styleguide-visual/reference/HorizontalActionList_basic_desktop.png

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { join } from '../../util/classNames';
 import Block, { TextSize } from '../Block';
 import Clickable from '../Clickable';
+import Strong from '../Strong';
 import { FixedGridRow, FixedGridColumn, GutterSize } from '../FixedGrid';
 import { IconSize } from '../Icon';
 import NavigationLink from '../NavigationLink';
@@ -15,17 +16,20 @@ import { ActionLinkProps, NavigationActionLinkProps, ClickableActionLinkProps }
  */
 export default class ActionLink extends React.Component<ActionLinkProps> {
   public render() {
-    const { ariaLabel, className, icon: Icon, text } = this.props;
+    const { ariaLabel, className, compact = false, icon: Icon, text } = this.props;
+
+    const gutterSize = compact ? GutterSize.XSMALL : GutterSize.SMALL;
+    const iconSize = compact ? IconSize.SMALL : IconSize.MEDIUM;
     // Remove Block around Icon when this is addressed: https://github.com/Microsoft/YamUI/issues/327
     const content = (
-      <FixedGridRow gutterSize={GutterSize.SMALL}>
+      <FixedGridRow gutterSize={gutterSize}>
         <FixedGridColumn fixed={true}>
-          <Block push={2}>
-            <Icon size={IconSize.MEDIUM} block={true} />
+          <Block push={compact ? 1 : 2}>
+            <Icon size={iconSize} block={true} />
           </Block>
         </FixedGridColumn>
         <FixedGridColumn>
-          <Block textSize={TextSize.MEDIUM_SUB}>{text}</Block>
+          <Block textSize={TextSize.MEDIUM_SUB}>{compact ? <Strong>{text}</Strong> : text}</Block>
         </FixedGridColumn>
       </FixedGridRow>
     );

config/styleguide-visual/reference/HorizontalActionList_basic_hover_desktop.png

@@ -17,6 +17,11 @@ export interface BaseActionLinkProps extends BaseComponentProps {
    * The visible text.
    */
   text: string;
+
+  /**
+   * A more compressed format.
+   */
+  compact?: boolean;
 }
 
 export interface NavigationActionLinkProps extends BaseActionLinkProps {
@@ -35,7 +40,7 @@ export interface ClickableActionLinkProps extends BaseActionLinkProps {
   /**
    * A click handler.
    */
-  onClick: ((e: React.MouseEvent<HTMLButtonElement | HTMLLinkElement>) => void);
+  onClick?: ((ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void);
 }
 
 export type ActionLinkProps = NavigationActionLinkProps | ClickableActionLinkProps;

config/styleguide-visual/reference/HorizontalActionList_counts_desktop.png

@@ -33,6 +33,41 @@ exports[`<ActionLink /> with additional className matches its snapshot 1`] = `
 </CustomizedNavigationLink>
 `;
 
+exports[`<ActionLink /> with compact set to true matches its snapshot 1`] = `
+<CustomizedNavigationLink
+  ariaLabel="Download the file"
+  block={true}
+  className="y-actionLink TEST_CLASSNAME"
+  href="https://yammer.com"
+>
+  <FixedGridRow
+    gutterSize="xSmall"
+  >
+    <FixedGridColumn
+      fixed={true}
+    >
+      <CustomizedBlock
+        push={1}
+      >
+        <Down
+          block={true}
+          size="14"
+        />
+      </CustomizedBlock>
+    </FixedGridColumn>
+    <FixedGridColumn>
+      <CustomizedBlock
+        textSize="mediumSub"
+      >
+        <Strong>
+          Download
+        </Strong>
+      </CustomizedBlock>
+    </FixedGridColumn>
+  </FixedGridRow>
+</CustomizedNavigationLink>
+`;
+
 exports[`<ActionLink /> with href and ariaLabel matches its snapshot 1`] = `
 <CustomizedNavigationLink
   ariaLabel="Download file"

config/styleguide-visual/reference/HorizontalActionList_counts_hover_desktop.png

@@ -0,0 +1,99 @@
+### Examples
+
+```js { "props": { "data-description": "basic", "data-action-states": "[{\"action\":\"none\"},{\"action\":\"click\",\"selector\":\".y-menu-button\"},{\"action\":\"hover\",\"selector\":\".y-menu-button--item-text\"}]" } }
+const Like = require('../Icon/icons/Like').default;
+const Reply = require('../Icon/icons/Reply').default;
+const Share = require('../Icon/icons/Share').default;
+const Flag = require('../Icon/icons/Flag').default;
+const Strong = require('../Strong').default;
+
+const items = [
+  {
+    key: 'like',
+    icon: Like,
+    text: 'Like',
+    onClick: () => action('clicked like'),
+  },
+  {
+    key: 'reply',
+    icon: Reply,
+    text: 'Reply',
+    onClick: () => action('clicked reply'),
+  },
+  {
+    key: 'share',
+    icon: Share,
+    text: 'Share',
+    onClick: () => action('clicked share'),
+  },
+  {
+    key: 'flag',
+    icon: Flag,
+    text: 'Follow in Inbox',
+    onClick: () => action('clicked follow'),
+  },
+];
+
+<div style={{ maxWidth: '400px', height: '60px' }}>
+  <HorizontalActionList items={items} maxVisibleItemCount={3} />
+</div>;
+```
+
+```js { "props": { "data-description": "counts", "data-action-states": "[{\"action\":\"none\"},{\"action\":\"hover\",\"selector\":\".y-clickable\"}]" } }
+const Like = require('../Icon/icons/Like').default;
+const Reply = require('../Icon/icons/Reply').default;
+const Share = require('../Icon/icons/Share').default;
+
+const items = [
+  {
+    key: 'like',
+    icon: Like,
+    text: 'Like',
+    unlinkedText: '4',
+    onClick: () => action('clicked like'),
+  },
+  {
+    key: 'reply',
+    icon: Reply,
+    text: 'Reply',
+    unlinkedText: '2',
+    onClick: () => action('clicked reply'),
+  },
+  {
+    key: 'share',
+    icon: Share,
+    text: 'Share',
+    onClick: () => action('clicked share'),
+  },
+];
+
+<div style={{ maxWidth: '400px' }}>
+  <HorizontalActionList items={items} maxVisibleItemCount={2} />
+</div>;
+```
+
+```js { "props": { "data-description": "no overflow" } }
+const Like = require('../Icon/icons/Like').default;
+const Reply = require('../Icon/icons/Reply').default;
+const Share = require('../Icon/icons/Share').default;
+
+const items = [
+  {
+    key: 'like',
+    icon: Like,
+    text: 'Like',
+    unlinkedText: '8',
+    onClick: () => action('clicked like'),
+  },
+  {
+    key: 'reply',
+    icon: Reply,
+    text: 'Reply',
+    onClick: () => action('clicked reply'),
+  },
+];
+
+<div style={{ maxWidth: '400px' }}>
+  <HorizontalActionList items={items} maxVisibleItemCount={2} />
+</div>
+```

config/styleguide-visual/reference/HorizontalActionList_no_overflow_desktop.png

@@ -0,0 +1,21 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import { mergeStyleSets, ITheme } from 'office-ui-fabric-react/lib/Styling';
+import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+
+export interface HorizontalActionListClassNameProps {
+  theme: ITheme;
+}
+
+export const getClassNames = memoizeFunction((classNameProps: HorizontalActionListClassNameProps) => {
+  const { theme } = classNameProps;
+
+  return mergeStyleSets({
+    unlinkedText: {
+      color: theme.semanticColors.link,
+      paddingLeft: '0.2rem',
+    },
+    menuButton: {
+      top: '0.1rem',
+    },
+  });
+});

src/components/ActionLink/ActionLink.md

@@ -0,0 +1,76 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { HorizontalActionList } from './HorizontalActionList';
+import { HorizontalActionListItem, HorizontalActionListProps } from './HorizontalActionList.types';
+import Reply from '../Icon/icons/Reply';
+import Like from '../Icon/icons/Like';
+import { darkTheme } from '../Customizer';
+
+describe('<HorizontalActionList />', () => {
+  let component: ShallowWrapper<HorizontalActionListProps>;
+  let items: HorizontalActionListItem[];
+
+  beforeEach(() => {
+    items = [
+      {
+        icon: Like,
+        text: 'like',
+        ariaLabel: 'like',
+        key: 'like',
+        unlinkedText: '1',
+        unlinkedTextAriaLabel: '1 person has like this post',
+        onClick: jest.fn().mockName('likeOnClick'),
+      },
+      {
+        icon: Reply,
+        text: 'reply',
+        ariaLabel: 'reply',
+        key: 'reply',
+        onClick: jest.fn().mockName('replyOnClick'),
+      },
+    ];
+  });
+
+  describe('with one item', () => {
+    beforeEach(() => {
+      component = shallow(<HorizontalActionList items={items.slice(0, 1)} overflowMenuAriaLabel="more items" />);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with all items', () => {
+    beforeEach(() => {
+      component = shallow(<HorizontalActionList items={items} overflowMenuAriaLabel="more items" />);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with all items, and maxVisibleItemCount of 1', () => {
+    beforeEach(() => {
+      component = shallow(
+        <HorizontalActionList items={items} maxVisibleItemCount={1} overflowMenuAriaLabel="more items" />,
+      );
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with a theme', () => {
+    beforeEach(() => {
+      component = shallow(<HorizontalActionList items={items} theme={darkTheme} overflowMenuAriaLabel="more items" />);
+    });
+
+    it('matches its snapshot', () => {
+      expect(component).toMatchSnapshot();
+    });
+  });
+});