feat: grouping Toolbar buttons under the 'Edit' dropdown button

Composer/packages/client/src/components/ToolBar/ToolBar.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Fragment } from 'react';
+import formatMessage from 'format-message';
+import { ActionButton, CommandButton } from 'office-ui-fabric-react/lib/Button';
+
+import { IToolBarItem } from './ToolBar.types';
+import { actionButton, leftActions, rightActions, headerSub } from './ToolBarStyles';
+
+type ToolbarProps = {
+  toolbarItems?: Array<IToolBarItem>;
+};
+
+function itemList(item: IToolBarItem, index: number) {
+  if (item.type === 'element') {
+    return <Fragment key={index}>{item.element}</Fragment>;
+  } else if (item.type === 'action') {
+    return (
+      <ActionButton
+        key={index}
+        css={actionButton}
+        {...item.buttonProps}
+        data-testid={item.dataTestid}
+        disabled={item.disabled}
+      >
+        {item.text}
+      </ActionButton>
+    );
+  } else if (item.type === 'dropdown') {
+    return (
+      <CommandButton
+        key={index}
+        css={actionButton}
+        data-testid={item.dataTestid}
+        disabled={item.disabled}
+        iconProps={item.buttonProps?.iconProps}
+        menuProps={item.menuProps}
+        text={item.text}
+      />
+    );
+  } else {
+    return null;
+  }
+}
+
+// support ActionButton or React Elements, the display order is array index.
+// action = {type:action/element, text, align, element, buttonProps: use
+// fabric-ui IButtonProps interface}
+export function ToolBar(props: ToolbarProps) {
+  const { toolbarItems = [], ...rest } = props;
+
+  const left: IToolBarItem[] = [];
+  const right: IToolBarItem[] = [];
+
+  for (const item of toolbarItems) {
+    switch (item.align) {
+      case 'left':
+        left.push(item);
+        break;
+      case 'right':
+        right.push(item);
+    }
+  }
+
+  return (
+    <div aria-label={formatMessage('toolbar')} css={headerSub} role="region" {...rest}>
+      <div css={leftActions}>{left.map(itemList)} </div>
+      <div css={rightActions}>{right.map(itemList)}</div>
+    </div>
+  );
+}

Composer/packages/client/src/components/ToolBar/ToolBar.types.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IContextualMenuProps, IIconProps } from 'office-ui-fabric-react/lib';
+
+export type IToolBarItem = {
+  type: string;
+  element?: any;
+  text?: string;
+  buttonProps?: {
+    iconProps?: IIconProps;
+    onClick?: () => void;
+  };
+  menuProps?: IContextualMenuProps;
+  align?: string;
+  dataTestid?: string;
+  disabled?: boolean;
+};

Composer/packages/client/src/components/ToolBar/ToolBarStyles.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { css } from '@emotion/core';
+import { NeutralColors } from '@uifabric/fluent-theme';
+
+export const headerSub = css`
+  height: 44px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid ${NeutralColors.gray30};
+`;
+
+export const leftActions = css`
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  height: 44px;
+`;
+
+export const rightActions = css`
+  position: relative;
+  height: 44px;
+  margin-right: 20px;
+`;
+
+export const actionButton = css`
+  font-size: 16px;
+  margin-top: 2px;
+  margin-left: 15px;
+`;

Composer/packages/client/src/components/ToolBar/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export { ToolBar } from './ToolBar';
+export { IToolBarItem } from './ToolBar.types';