[IconButton, Icon]: Adds new icon, new props.

change/@microsoft-arbutus-icon-button-81171ac7-0a87-42ef-828f-4c1d933dbdf0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds new icons: vertical-more, horizontal-more.",
+  "packageName": "@microsoft/arbutus.icon-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-arbutus-icon-df35289d-6cb8-4f06-882e-17bfc49e5ebd.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds size, button attributes, and ref to IconButton props.",
+  "packageName": "@microsoft/arbutus.icon",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

components/icon-button/__dev__/icon-button.stories.tsx

@@ -33,4 +33,5 @@ export const Simple = Template.bind({}) as StoryFn<FunctionComponent<IconButtonP
 Simple.args = {
   label: 'Simple IconButton Example',
   iconName: 'x',
+  size: 'large',
 };

components/icon-button/src/icon-button/icon-button.tsx

@@ -1,30 +1,40 @@
 import { mergeClasses } from '@griffel/react';
-import { Icon } from '@microsoft/arbutus.icon';
+import { Icon, IconProps } from '@microsoft/arbutus.icon';
 import { useSpaceStyles } from '@microsoft/arbutus.use-space-styles';
-import type { FC } from 'react';
+import { type FC, forwardRef } from 'react';
 import * as React from 'react';
 
 import { useIconButtonStyles } from './icon-button.styles';
 import type { IconButtonProps } from './icon-button.types';
 
-export const IconButton: FC<IconButtonProps> = ({
-  className,
-  label,
-  iconName,
-  onClick,
-  color = 'primary',
-}) => {
-  // Styles
-  const classes = useIconButtonStyles();
-  const space = useSpaceStyles();
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      label,
+      iconName,
+      color = 'primary',
+      size = 'medium',
+      ...restButtonAttributes
+    },
+    ref,
+  ) => {
+    // Styles
+    const classes = useIconButtonStyles();
+    const space = useSpaceStyles();
+    const iconSize: IconProps['size'] = size === 'medium' ? 'medium' : 'large';
 
-  return (
-    <button
-      onClick={onClick}
-      aria-label={label}
-      className={mergeClasses(classes.root, classes[color], space.p2, className)}
-    >
-      <Icon iconName={iconName} />
-    </button>
-  );
-};
+    return (
+      <button
+        ref={ref}
+        className={mergeClasses(classes.root, classes[color], space.p2, className)}
+        {...(restButtonAttributes['aria-label']
+          ? { 'aria-label': restButtonAttributes['aria-label'] }
+          : { 'area-label': label })}
+        {...restButtonAttributes}
+      >
+        <Icon iconName={iconName} size={iconSize} />
+      </button>
+    );
+  },
+);

components/icon-button/src/icon-button/icon-button.types.ts

@@ -1,5 +1,5 @@
 import type { paths } from '@microsoft/arbutus.icon';
-import type { SyntheticEvent } from 'react';
+import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
 
 export type ColorVariant = 'accent' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
 
@@ -37,4 +37,10 @@ export type IconButtonProps = {
    * Click handler.
    */
   onClick: (e?: SyntheticEvent) => void;
-};
+
+  /**
+   * Size of the button.
+   * @default 'medium'
+   */
+  size?: 'medium' | 'large';
+} & ButtonHTMLAttributes<HTMLButtonElement>;

components/icon/src/icon/icons/index.ts

@@ -8,6 +8,8 @@ import { Exclamation } from './exclamation';
 import { FullScreen } from './full-screen';
 import { Link } from './link';
 import { Moon } from './moon';
+import { MoreHorizontal } from './more-horizontal';
+import { MoreVertical } from './more-vertical';
 import { Open } from './open';
 import { SlideIn } from './slide-in';
 import { SlideOut } from './slide-out';
@@ -18,6 +20,8 @@ export const paths = {
   ['arrow-right']: ArrowRight,
   ['chevron-right']: ChevronRight,
   ['full-screen']: FullScreen,
+  ['more-horizontal']: MoreHorizontal,
+  ['more-vertical']: MoreVertical,
   ['slide-in']: SlideIn,
   ['slide-out']: SlideOut,
   check: Check,

components/icon/src/icon/icons/more-horizontal.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const MoreHorizontal = () => (
+  <path
+    d="M5.16665 7.99999C5.16665 8.64433 4.64431 9.16666 3.99998 9.16666C3.35565 9.16666 2.83331 8.64433 2.83331 7.99999C2.83331 7.35566 3.35565 6.83333 3.99998 6.83333C4.64431 6.83333 5.16665 7.35566 5.16665 7.99999ZM9.16665 7.99999C9.16665 8.64433 8.64431 9.16666 7.99998 9.16666C7.35565 9.16666 6.83331 8.64433 6.83331 7.99999C6.83331 7.35566 7.35565 6.83333 7.99998 6.83333C8.64431 6.83333 9.16665 7.35566 9.16665 7.99999ZM12 9.16666C12.6443 9.16666 13.1666 8.64433 13.1666 7.99999C13.1666 7.35566 12.6443 6.83333 12 6.83333C11.3556 6.83333 10.8333 7.35566 10.8333 7.99999C10.8333 8.64433 11.3556 9.16666 12 9.16666Z"
+    fill="currentColor"
+  />
+);

components/icon/src/icon/icons/more-vertical.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const MoreVertical = () => (
+  <path
+    d="M7.99998 5.16666C7.35565 5.16666 6.83331 4.64433 6.83331 3.99999C6.83331 3.35566 7.35565 2.83333 7.99998 2.83333C8.64431 2.83333 9.16665 3.35566 9.16665 3.99999C9.16665 4.64433 8.64431 5.16666 7.99998 5.16666ZM7.99998 9.16666C7.35565 9.16666 6.83331 8.64433 6.83331 8C6.83331 7.35566 7.35565 6.83333 7.99998 6.83333C8.64431 6.83333 9.16665 7.35566 9.16665 8C9.16665 8.64433 8.64431 9.16666 7.99998 9.16666ZM6.83331 12C6.83331 12.6443 7.35565 13.1667 7.99998 13.1667C8.64431 13.1667 9.16665 12.6443 9.16665 12C9.16665 11.3557 8.64431 10.8333 7.99998 10.8333C7.35565 10.8333 6.83331 11.3557 6.83331 12Z"
+    fill="currentColor"
+  />
+);

docs/404.html

@@ -2,6 +2,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>

docs/404/index.html

@@ -2,6 +2,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>

docs/_gatsby/slices/_gatsby-scripts-1.html

@@ -2,6 +2,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script>

docs/about/index.html

@@ -2,6 +2,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>

docs/app-2e5e33445842bbe309fb.js.LICENSE.txt

@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+/**
+  * @reach/visually-hidden v0.18.0
+  *
+  * Copyright (c) 2018-2022, React Training LLC
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE.md file in the root directory of this source tree.
+  *
+  * @license MIT
+  */
+
+/**
+ * @license React
+ * react-server-dom-webpack.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

docs/chunk-map.json

@@ -1 +1 @@
-{"app":["/app-017b1960ec5645ba793a.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-d647845e71b41280263c.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js"],"component---src-pages-pages-json-path-tsx":["/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js"],"component---src-templates-preview-page-tsx":["/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js"]}
+{"app":["/app-2e5e33445842bbe309fb.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-d647845e71b41280263c.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js"],"component---src-pages-pages-json-path-tsx":["/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js"],"component---src-templates-preview-page-tsx":["/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js"]}

docs/cms/editing-content/index.html

@@ -15,6 +15,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>

docs/cms/get-started/index.html

@@ -25,6 +25,6 @@
           <script
             id="gatsby-chunk-mapping"
           >
-            window.___chunkMapping="{\"app\":[\"/app-017b1960ec5645ba793a.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
+            window.___chunkMapping="{\"app\":[\"/app-2e5e33445842bbe309fb.js\"],\"component---src-pages-404-tsx\":[\"/component---src-pages-404-tsx-d647845e71b41280263c.js\"],\"component---src-pages-index-tsx\":[\"/component---src-pages-index-tsx-4b1aa8d467df8b70f330.js\"],\"component---src-pages-pages-json-path-tsx\":[\"/component---src-pages-pages-json-path-tsx-676ba9e6fa5b8f1ff04f.js\"],\"component---src-templates-preview-page-tsx\":[\"/component---src-templates-preview-page-tsx-11e0a79fb5e403868531.js\"]}";
           </script>
-        <script>window.___webpackCompilationHash="2fae460d4ff3545c3ef9";</script><script src="/blueprints/webpack-runtime-7c8c9b47d247298700ec.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-017b1960ec5645ba793a.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>
+        <script>window.___webpackCompilationHash="2dcb3b1fe89818fa8a3c";</script><script src="/blueprints/webpack-runtime-537ebabfe090f51b862e.js" async></script><script src="/blueprints/framework-035bd4b2e8a6ffcb4797.js" async></script><script src="/blueprints/app-2e5e33445842bbe309fb.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>