Merge pull request #219 from buildo/link-button-add-props

Add icon to LinkButton + fix onPress type

Author: veej

packages/bento-design-system/src/Button/ButtonLink.tsx

@@ -3,10 +3,11 @@ import { buttonRecipe } from "../Button/Button.css";
 import { useLinkComponent } from "../util/link";
 import { ButtonProps } from "./createButton";
 import { Label } from "..";
-import { Box } from "../internal";
+import { Box, Column, Columns } from "../internal";
 import { useLink } from "@react-aria/link";
 import { element } from "../reset.css";
 import { ButtonConfig } from "./Config";
+import { IconProps } from "../Icons";
 
 type Props = {
   href: string;
@@ -16,6 +17,7 @@ type Props = {
   isDisabled?: ButtonProps["isDisabled"];
   size?: ButtonProps["size"];
   active?: boolean;
+  icon?: (props: IconProps) => JSX.Element;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">;
 
 export function createButtonLink(config: ButtonConfig) {
@@ -57,9 +59,19 @@ export function createButtonLink(config: ButtonConfig) {
         paddingY={config.paddingY[size]}
         borderRadius={config.radius}
       >
-        <Label as="span" size={config.labelSize}>
-          {label}
-        </Label>
+        <Columns space={config.internalSpacing} alignY="center">
+          {props.icon && (
+            <Column width="content">
+              {props.icon({
+                size: config.iconSize[size],
+                color: "inherit",
+              })}
+            </Column>
+          )}
+          <Label as="span" size={config.labelSize} uppercase={config.uppercaseLabel}>
+            {label}
+          </Label>
+        </Columns>
       </Box>
     );
   };

packages/bento-design-system/src/Button/createButton.tsx

@@ -18,7 +18,7 @@ type Props = {
   isDisabled?: boolean;
   size?: ButtonSize;
   icon?: (props: IconProps) => JSX.Element;
-} & AriaButtonProps<"button">;
+} & Omit<AriaButtonProps<"button">, "onPress">;
 
 /**
  * A button

packages/storybook/stories/Components/ButtonLink.stories.tsx

@@ -1,5 +1,6 @@
 import { createComponentStories, formatMessage, textArgType } from "../util";
 import { ButtonLink } from "../";
+import { IconCheck } from "@buildo/bento-design-system";
 
 const { defaultExport, createStory } = createComponentStories({
   component: ButtonLink,
@@ -25,3 +26,9 @@ export const Active = createStory({
   hierarchy: "primary",
   active: true,
 });
+
+export const WithIcon = createStory({
+  kind: "solid",
+  hierarchy: "primary",
+  icon: IconCheck,
+});