Merge pull request #47 from buildo/3171075-add_button_icons_and

gabro · web-flow · commit a38f904cafcd · 2022-03-04T10:56:01.000+01:00
diff --git a/src/Button/Button.css.ts b/src/Button/Button.css.ts
@@ -16,11 +16,17 @@ export const buttonRecipe = strictRecipe({
       solid: bentoSprinkles({
         background: { disabled: "disabledSolidBackground" },
         color: { disabled: "disabledSolidForeground" },
+        fill: { disabled: "disabledSolidForeground" },
       }),
       transparent: bentoSprinkles({
         background: { disabled: "disabledTransparentBackground" },
         color: { disabled: "disabledTransparentForeground" },
       }),
+      outline: bentoSprinkles({
+        background: { disabled: "disabledTransparentBackground" },
+        color: { disabled: "disabledTransparentForeground" },
+        fill: { disabled: "disabledTransparentForeground" },
+      }),
     },
     hierarchy: {
       primary: {},
@@ -45,6 +51,11 @@ export const buttonRecipe = strictRecipe({
           hover: "primarySolidHoverForeground",
           focus: "primarySolidFocusForeground",
         },
+        fill: {
+          default: "primarySolidEnabledForeground",
+          hover: "primarySolidHoverForeground",
+          focus: "primarySolidFocusForeground",
+        },
         background: {
           default: "primarySolidEnabledBackground",
           hover: "primarySolidHoverBackground",
@@ -63,6 +74,11 @@ export const buttonRecipe = strictRecipe({
           hover: "secondarySolidHoverForeground",
           focus: "secondarySolidFocusForeground",
         },
+        fill: {
+          default: "secondarySolidEnabledForeground",
+          hover: "secondarySolidHoverForeground",
+          focus: "secondarySolidFocusForeground",
+        },
         background: {
           default: "secondarySolidEnabledBackground",
           hover: "secondarySolidHoverBackground",
@@ -81,6 +97,11 @@ export const buttonRecipe = strictRecipe({
           hover: "dangerSolidHoverForeground",
           focus: "dangerSolidFocusForeground",
         },
+        fill: {
+          default: "dangerSolidEnabledForeground",
+          hover: "dangerSolidHoverForeground",
+          focus: "dangerSolidFocusForeground",
+        },
         background: {
           default: "dangerSolidEnabledBackground",
           hover: "dangerSolidHoverBackground",
@@ -99,6 +120,11 @@ export const buttonRecipe = strictRecipe({
           hover: "primaryTransparentHoverForeground",
           focus: "primaryTransparentFocusForeground",
         },
+        fill: {
+          default: "primaryTransparentEnabledForeground",
+          hover: "primaryTransparentHoverForeground",
+          focus: "primaryTransparentFocusForeground",
+        },
         background: {
           default: "primaryTransparentEnabledBackground",
           hover: "primaryTransparentHoverBackground",
@@ -117,6 +143,11 @@ export const buttonRecipe = strictRecipe({
           hover: "secondaryTransparentHoverForeground",
           focus: "secondaryTransparentFocusForeground",
         },
+        fill: {
+          default: "secondaryTransparentEnabledForeground",
+          hover: "secondaryTransparentHoverForeground",
+          focus: "secondaryTransparentFocusForeground",
+        },
         background: {
           default: "secondaryTransparentEnabledBackground",
           hover: "secondaryTransparentHoverBackground",
@@ -135,11 +166,88 @@ export const buttonRecipe = strictRecipe({
           hover: "dangerTransparentHoverForeground",
           focus: "dangerTransparentFocusForeground",
         },
+        fill: {
+          default: "dangerTransparentEnabledForeground",
+          hover: "dangerTransparentHoverForeground",
+          focus: "dangerTransparentFocusForeground",
+        },
+        background: {
+          default: "dangerTransparentEnabledBackground",
+          hover: "dangerTransparentHoverBackground",
+          focus: "dangerTransparentFocusBackground",
+        },
+      }),
+    },
+    {
+      variants: {
+        kind: "outline",
+        hierarchy: "primary",
+      },
+      style: bentoSprinkles({
+        color: {
+          default: "primaryTransparentEnabledForeground",
+          hover: "primaryTransparentHoverForeground",
+          focus: "primaryTransparentFocusForeground",
+        },
+        fill: {
+          default: "primaryTransparentEnabledForeground",
+          hover: "primaryTransparentHoverForeground",
+          focus: "primaryTransparentFocusForeground",
+        },
+        background: {
+          default: "primaryTransparentEnabledBackground",
+          hover: "primaryTransparentHoverBackground",
+          focus: "primaryTransparentFocusBackground",
+        },
+        boxShadow: "inherit",
+      }),
+    },
+    {
+      variants: {
+        kind: "outline",
+        hierarchy: "secondary",
+      },
+      style: bentoSprinkles({
+        color: {
+          default: "secondaryTransparentEnabledForeground",
+          hover: "secondaryTransparentHoverForeground",
+          focus: "secondaryTransparentFocusForeground",
+        },
+        fill: {
+          default: "secondaryTransparentEnabledForeground",
+          hover: "secondaryTransparentHoverForeground",
+          focus: "secondaryTransparentFocusForeground",
+        },
+        background: {
+          default: "secondaryTransparentEnabledBackground",
+          hover: "secondaryTransparentHoverBackground",
+          focus: "secondaryTransparentFocusBackground",
+        },
+        boxShadow: "inherit",
+      }),
+    },
+    {
+      variants: {
+        kind: "outline",
+        hierarchy: "danger",
+      },
+      style: bentoSprinkles({
+        color: {
+          default: "dangerTransparentEnabledForeground",
+          hover: "dangerTransparentHoverForeground",
+          focus: "dangerTransparentFocusForeground",
+        },
+        fill: {
+          default: "dangerTransparentEnabledForeground",
+          hover: "dangerTransparentHoverForeground",
+          focus: "dangerTransparentFocusForeground",
+        },
         background: {
           default: "dangerTransparentEnabledBackground",
           hover: "dangerTransparentHoverBackground",
           focus: "dangerTransparentFocusBackground",
         },
+        boxShadow: "inherit",
       }),
     },
   ],
diff --git a/src/Button/createButton.tsx b/src/Button/createButton.tsx
@@ -5,16 +5,18 @@ import { ComponentProps, useRef } from "react";
 import { AriaButtonProps } from "@react-types/button";
 import { useButton } from "@react-aria/button";
 import { Label } from "../Typography/Label/Label";
-import { BentoSprinkles } from "../internal";
+import { BentoSprinkles, Column, Columns } from "../internal";
+import { IconProps } from "src";
 
 type Size = "small" | "medium" | "large";
 export type ButtonProps = {
   label: LocalizedString;
   onPress: () => void;
-  kind: "solid" | "transparent";
+  kind: "solid" | "transparent" | "outline";
   hierarchy: "primary" | "secondary" | "danger";
   isDisabled?: boolean;
   size?: Size;
+  icon?: (props: IconProps) => JSX.Element;
 } & AriaButtonProps<"button">;
 
 type SizeConfig<T> = {
@@ -26,6 +28,9 @@ export type ButtonConfig = {
   paddingY: SizeConfig<BentoSprinkles["paddingY"]>;
   labelSize: ComponentProps<typeof Label>["size"];
   radius: BentoSprinkles["borderRadius"];
+  internalSpacing: BentoSprinkles["gap"];
+  iconSize: SizeConfig<IconProps["size"]>;
+  uppercaseLabel: boolean;
 };
 
 export const defaultButtonConfig: ButtonConfig = {
@@ -41,6 +46,13 @@ export const defaultButtonConfig: ButtonConfig = {
   },
   labelSize: "large",
   radius: 8,
+  internalSpacing: 8,
+  iconSize: {
+    small: 12,
+    medium: 12,
+    large: 16,
+  },
+  uppercaseLabel: true,
 };
 
 export function createButton(config: ButtonConfig = defaultButtonConfig) {
@@ -67,7 +79,19 @@ export function createButton(config: ButtonConfig = defaultButtonConfig) {
         paddingY={config.paddingY[size]}
         borderRadius={config.radius}
       >
-        <Label size={config.labelSize}>{props.label}</Label>
+        <Columns space={config.internalSpacing} alignY="center">
+          {props.icon && (
+            <Column width="content">
+              {props.icon({
+                size: config.iconSize[size],
+                color: "inherit",
+              })}
+            </Column>
+          )}
+          <Label size={config.labelSize} uppercase={config.uppercaseLabel}>
+            {props.label}
+          </Label>
+        </Columns>
       </Box>
     );
   };
diff --git a/src/CheckboxField/createCheckboxField.tsx b/src/CheckboxField/createCheckboxField.tsx
@@ -35,8 +35,6 @@ export function createCheckboxField(
     const { fieldProps, errorMessageProps } = useField(checkboxProps);
     const inputProps = { ..._inputProps, "aria-describedby": fieldProps["aria-describedby"] };
 
-    console.log(errorMessageProps);
-
     return (
       <Field
         {...props}
diff --git a/src/Icons/Icon.css.ts b/src/Icons/Icon.css.ts
@@ -1,15 +1,18 @@
+import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { bentoSprinkles } from "../internal";
 
 export const iconRecipe = recipe({
   variants: {
     width: {
       8: bentoSprinkles({ width: 8 }),
+      12: style({ width: "12px" }),
       16: bentoSprinkles({ width: 16 }),
       24: bentoSprinkles({ width: 24 }),
     },
     height: {
       8: bentoSprinkles({ height: 8 }),
+      12: style({ height: "12px" }),
       16: bentoSprinkles({ height: 16 }),
       24: bentoSprinkles({ height: 24 }),
     },
@@ -22,6 +25,7 @@ export const iconRecipe = recipe({
       warning: bentoSprinkles({ fill: "foregroundWarning" }),
       negative: bentoSprinkles({ fill: "foregroundNegative" }),
       disabled: bentoSprinkles({ fill: "foregroundDisabled" }),
+      inherit: bentoSprinkles({ fill: "inherit" }),
     },
   },
 });
diff --git a/src/Icons/IconProps.ts b/src/Icons/IconProps.ts
@@ -1,7 +1,7 @@
 import { vars } from "../vars.css";
 
 export type IconProps = {
-  size: Extract<keyof typeof vars.space, 8 | 12 | 16 | 24>;
+  size: Extract<keyof typeof vars.space, 8 | 16 | 24> | 12;
   color?:
     | "default"
     | "primary"
@@ -10,6 +10,7 @@ export type IconProps = {
     | "positive"
     | "warning"
     | "negative"
-    | "disabled";
+    | "disabled"
+    | "inherit";
   className?: string;
 };
diff --git a/src/util/atoms.ts b/src/util/atoms.ts
@@ -99,9 +99,9 @@ export const statusProperties = {
     default: "default",
     notAllowed: "not-allowed",
   },
-  boxShadow: { ...vars.boxShadow, none: "none" },
+  boxShadow: { ...vars.boxShadow, none: "none", inherit: "inset 0px 0px 0px 1px" },
   outline: { ...vars.outlineColor, none: "none" },
   stroke: color,
   textDecoration: ["none", "underline"],
-  fill: { ...color, ...background },
+  fill: { ...color, ...background, inherit: "inherit" },
 } as const;
diff --git a/stories/Components/Button.stories.tsx b/stories/Components/Button.stories.tsx
@@ -1,5 +1,5 @@
 import { createComponentStories, formatMessage, textArgType } from "../util";
-import { Button } from "../";
+import { Button, IconCheck } from "../";
 
 const { defaultExport, createStory } = createComponentStories({
   component: Button,
@@ -43,6 +43,21 @@ export const DangerTransparent = createStory({
   hierarchy: "danger",
 });
 
+export const PrimaryOutline = createStory({
+  kind: "outline",
+  hierarchy: "primary",
+});
+
+export const SecondaryOutline = createStory({
+  kind: "outline",
+  hierarchy: "secondary",
+});
+
+export const DangerOutline = createStory({
+  kind: "outline",
+  hierarchy: "danger",
+});
+
 export const SolidDisabled = createStory({
   kind: "solid",
   hierarchy: "primary",
@@ -55,6 +70,12 @@ export const TransparentDisabled = createStory({
   isDisabled: true,
 });
 
+export const OutlineDisabled = createStory({
+  kind: "outline",
+  hierarchy: "primary",
+  isDisabled: true,
+});
+
 export const PrimarySmall = createStory({
   kind: "solid",
   hierarchy: "primary",
@@ -66,3 +87,9 @@ export const PrimaryLarge = createStory({
   hierarchy: "primary",
   size: "large",
 });
+
+export const WithIcon = createStory({
+  kind: "solid",
+  hierarchy: "primary",
+  icon: IconCheck,
+});
diff --git a/stories/Foundations/Icons.stories.tsx b/stories/Foundations/Icons.stories.tsx
@@ -3,16 +3,15 @@ import { Box, Inline, Stack } from "../../src/internal";
 import { Body } from "../../src";
 import * as icons from "../../src/Icons";
 import { IconProps } from "../../src/Icons/IconProps";
-import { vars } from "../../src/vars.css";
 import { formatMessage } from "../util";
 
 const meta = {
   args: {
-    size: "24",
+    size: 24,
   },
   argTypes: {
     size: {
-      options: ["8", "16", "24"],
+      options: [8, 12, 16, 24],
       control: { type: "select" },
     },
     color: {
@@ -31,7 +30,7 @@ export const Icons = (args: IconProps) => {
         {Object.entries(icons).map(([name, Icon]) => (
           <Box padding={16} alignItems="center" justifyContent="center" style={{ width: 100 }}>
             <Stack space={8} align="center">
-              <Box display="flex" alignItems="center" style={{ height: vars.space[args.size] }}>
+              <Box display="flex" alignItems="center" style={{ height: 24 }}>
                 <Icon size={args.size} color={args.color} />
               </Box>
               <Body size="small">{formatMessage(name.replace(/^Icon/g, ""))}</Body>
diff --git a/stories/atoms.ts b/stories/atoms.ts
@@ -11,6 +11,11 @@ const color = {
   ...vars.color,
 };
 
+const fill = {
+  ...bentoAtoms.statusProperties.fill,
+  ...vars.color,
+};
+
 export const unconditionalProperties = {
   ...bentoAtoms.unconditionalProperties,
   fontFamily: {
@@ -31,6 +36,6 @@ export const responsiveProperties = {
 export const statusProperties = {
   ...bentoAtoms.statusProperties,
   color,
-  fill: { ...color, ...bentoAtoms.statusProperties.background },
+  fill,
   stroke: color,
 };
