feat: add icon only button custom stylesheet export

Autodesk · Sep 8, 2023 · 82f4bb7 · 82f4bb7
1 parent cd9c77a
commit 82f4bb7
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 4 deletions.
diff --git a/packages/button/src/__stories__/Button.story.js b/packages/button/src/__stories__/Button.story.js
@@ -5,6 +5,14 @@ import { Settings16, Settings24 } from "@weave-design/icons";
 import Button from "../index";
 import Readme from "../../README.md";
 import { targets, types, widths } from "../constants";
+import iconOnlyStylesheet from "../utils/iconOnlyStylesheet";
+
+const buttonWithIconOnlyCode = `
+import Button, {iconOnlyStylesheet} from "@weave-design/button";
+import { Settings24 } from "@weave-design/icons";
+
+<Button icon={<Settings24 />} stylesheet={iconOnlyStylesheet} />
+`;
 
 export default {
   title: "Components/Button",
@@ -58,7 +66,10 @@ const Template = (args, context) => {
   const Icon =
     context.globals.density === "Medium density" ? Settings24 : Settings16;
   const iconProp =
-    context.story === "Button with icon" ? { icon: <Icon /> } : {};
+    context.story === "Button with label and icon" ||
+    context.story === "Button with icon only"
+      ? { icon: <Icon /> }
+      : {};
   return <Button {...args} {...iconProp} />;
 };
 
@@ -81,8 +92,24 @@ ButtonLink.args = {
 
 export const ButtonWithIcon = Template.bind({});
 
-ButtonWithIcon.storyName = "Button with icon";
+ButtonWithIcon.storyName = "Button with label and icon";
 ButtonWithIcon.args = {
   ...Default.args,
   children: "Settings",
 };
+
+export const ButtonWithIconOnly = Template.bind({});
+
+ButtonWithIconOnly.storyName = "Button with icon only";
+ButtonWithIconOnly.args = {
+  ...Default.args,
+  children: "",
+  stylesheet: iconOnlyStylesheet,
+};
+ButtonWithIconOnly.parameters = {
+  docs: {
+    source: {
+      code: buttonWithIconOnlyCode,
+    },
+  },
+};
diff --git a/packages/button/src/index.js b/packages/button/src/index.js
@@ -1,2 +1,3 @@
 export { default } from "./Button";
 export * from "./constants";
+export { default as iconOnlyStylesheet } from "./utils/iconOnlyStylesheet";
diff --git a/packages/button/src/presenters/ButtonPresenter.js b/packages/button/src/presenters/ButtonPresenter.js
@@ -15,6 +15,7 @@ import {
 const ButtonPresenter = (props) => {
   const {
     buttonRef,
+    children,
     disabled,
     hasFocus,
     hasHover,
@@ -34,7 +35,6 @@ const ButtonPresenter = (props) => {
     title,
     type,
     width,
-    children,
     ...otherProps
   } = props;
 
@@ -51,7 +51,14 @@ const ButtonPresenter = (props) => {
     <ThemeContext.Consumer>
       {({ resolvedRoles, metadata }) => {
         const styles = stylesheet(
-          { disabled, hasFocus, hasHover, isPressed, type, width },
+          {
+            disabled,
+            hasFocus,
+            hasHover,
+            isPressed,
+            type,
+            width,
+          },
           resolvedRoles,
           metadata
         );

diff --git a/packages/button/src/utils/iconOnlyStylesheet.js b/packages/button/src/utils/iconOnlyStylesheet.js
@@ -0,0 +1,26 @@
+export default function iconOnlyStylesheet(
+  styles,
+  props,
+  themeData,
+  themeMeta
+) {
+  const iconSize = themeMeta.densityId === "medium-density" ? "18px" : "14px";
+
+  return {
+    ...styles,
+    button: {
+      ...styles.button,
+      padding: `${themeData["button.paddingVertical"]}`,
+    },
+    icon: {
+      ...styles.icon,
+      left: 0,
+
+      marginRight: 0,
+      right: 0,
+    },
+    iconText: {
+      marginLeft: iconSize,
+    },
+  };
+}