Merge pull request #551 from bvkimball/better-form-support

Add more form-related props to `Button`. Add onKeyDown and onKeyUp to `TextField` and `TextArea`.

Author: gabro

packages/bento-design-system/package.json

@@ -110,6 +110,7 @@
     "@vanilla-extract/sprinkles": "1.4.1",
     "clsx": "^1.2.1",
     "deepmerge-ts": "^4.3.0",
+    "lodash.pick": "4.4.0",
     "react-cool-dimensions": "^2.0.7",
     "react-dropzone": "^14.2.3",
     "react-input-mask": "^2.0.4",
@@ -138,6 +139,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "28.1.8",
+    "@types/lodash.pick": "4.4.7",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-input-mask": "2.0.5",

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

@@ -8,7 +8,20 @@ import { Label } from "../Typography/Label/Label";
 import { Column, Columns } from "../Layout/Columns";
 import { IconProps } from "..";
 import { useBentoConfig } from "../BentoConfigContext";
+import pick from "lodash.pick";
 
+const otherButtonKeys = [
+  "name",
+  "value",
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+] as const;
+
+export type OtherButtonKeys = typeof otherButtonKeys[number];
 export type ButtonSize = "small" | "medium" | "large";
 type Props = {
   label: LocalizedString;
@@ -19,7 +32,8 @@ type Props = {
   size?: ButtonSize;
   icon?: (props: IconProps) => JSX.Element;
   iconPosition?: "leading" | "trailing";
-} & Omit<AriaButtonProps<"button">, "onPress">;
+} & Omit<AriaButtonProps<"button">, "onPress"> &
+  Pick<React.HTMLProps<HTMLButtonElement>, OtherButtonKeys>;
 
 /**
  * A button
@@ -41,6 +55,8 @@ export function Button(props: Props) {
     internal_unsafe__bypassUsePress,
   } = props;
 
+  const otherButtonProps = pick(props, otherButtonKeys);
+
   const size = props.size ?? config.defaultSize;
 
   return (
@@ -54,6 +70,7 @@ export function Button(props: Props) {
         active: false,
       })}
       {...buttonProps}
+      {...otherButtonProps}
       color={undefined}
       onKeyDown={onKeyDown}
       onKeyUp={onKeyUp}

packages/bento-design-system/src/Icons/IconEye.tsx

@@ -5,13 +5,13 @@ export function IconEye(props: IconProps) {
   return (
     <svg {...svgIconProps(props)}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M12 9.82982C11.3962 9.82982 10.8171 10.0697 10.3902 10.4966C9.96324 10.9236 9.72339 11.5026 9.72339 12.1064C9.72339 12.7102 9.96324 13.2893 10.3902 13.7162C10.8171 14.1432 11.3962 14.383 12 14.383C12.6038 14.383 13.1829 14.1432 13.6098 13.7162C14.0367 13.2893 14.2766 12.7102 14.2766 12.1064C14.2766 11.5026 14.0367 10.9236 13.6098 10.4966C13.1829 10.0697 12.6038 9.82982 12 9.82982ZM8.78038 8.88682C9.63428 8.03293 10.7924 7.55322 12 7.55322C13.2076 7.55322 14.3657 8.03293 15.2196 8.88682C16.0735 9.74071 16.5532 10.8988 16.5532 12.1064C16.5532 13.314 16.0735 14.4721 15.2196 15.326C14.3657 16.1799 13.2076 16.6596 12 16.6596C10.7924 16.6596 9.63428 16.1799 8.78038 15.326C7.92649 14.4721 7.44678 13.314 7.44678 12.1064C7.44678 10.8988 7.92649 9.74071 8.78038 8.88682Z"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M2.33808 12.1064C3.74446 16.0864 7.54152 18.9363 12 18.9363C16.4595 18.9363 20.2556 16.0865 21.6619 12.1064C20.2556 8.12639 16.4595 5.27661 12 5.27661C7.54152 5.27661 3.74446 8.12645 2.33808 12.1064ZM0.0522882 11.7654C1.64722 6.68641 6.39245 3 12 3C17.6088 3 22.3528 6.68647 23.9477 11.7654C24.0174 11.9874 24.0174 12.2255 23.9477 12.4475C22.3528 17.5264 17.6088 21.2129 12 21.2129C6.39245 21.2129 1.64722 17.5265 0.0522882 12.4475C-0.0174294 12.2255 -0.0174294 11.9874 0.0522882 11.7654Z"
       />
     </svg>

packages/bento-design-system/src/Icons/IconEyeClosed.tsx

@@ -5,8 +5,8 @@ export function IconEyeClosed(props: IconProps) {
   return (
     <svg {...svgIconProps(props)}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M0.95141 1.33337C1.3959 0.888877 2.11657 0.888877 2.56106 1.33337L6.02231 4.79462C7.85213 3.79811 9.90736 3.27369 12.0008 3.27639C17.6087 3.27673 22.3518 6.96276 23.9476 12.0407C24.0176 12.2633 24.0174 12.502 23.9472 12.7245C23.2068 15.0704 21.7969 17.1367 19.9051 18.6775L23.0486 21.8209C23.4931 22.2654 23.4931 22.9861 23.0486 23.4306C22.6041 23.875 21.8834 23.875 21.4389 23.4306L17.356 19.3477L17.3552 19.3468L13.6094 15.6022C13.5993 15.592 13.5894 15.5817 13.5797 15.5713L8.78002 10.7728C8.76987 10.7626 8.75994 10.7523 8.75021 10.7418L0.95141 2.94302C0.506917 2.49853 0.506917 1.77786 0.95141 1.33337ZM11.4102 10.1834L14.1987 12.9712C14.2497 12.7808 14.2761 12.583 14.2761 12.3825C14.2761 11.7787 14.0362 11.1996 13.6093 10.7727C13.1823 10.3457 12.6032 10.1058 11.9994 10.1058C11.7987 10.1058 11.6008 10.1323 11.4102 10.1834ZM15.9216 14.6949C16.3312 14.0001 16.5525 13.2027 16.5525 12.3825C16.5525 11.175 16.0728 10.0169 15.2189 9.16302C14.3651 8.30915 13.207 7.82946 11.9994 7.82946C11.1795 7.82946 10.3823 8.05065 9.68767 8.45998L7.71711 6.48942C9.05425 5.87276 10.5146 5.55078 11.9985 5.55278L12 5.55278C16.4587 5.55278 20.2544 8.40188 21.6618 12.3813C21.0048 14.234 19.8311 15.8558 18.2851 17.0576L15.9216 14.6949ZM3.60434 8.027C4.10547 8.4065 4.20407 9.12039 3.82456 9.62151C3.18942 10.4602 2.68817 11.3914 2.33796 12.382C3.74525 16.3617 7.54103 19.2111 12 19.2111C12.6448 19.2116 13.2891 19.1516 13.9226 19.0318C14.5403 18.915 15.1357 19.321 15.2525 19.9387C15.3693 20.5563 14.9633 21.1517 14.3456 21.2685C13.572 21.4148 12.7864 21.4881 11.9991 21.4875C6.39124 21.4871 1.64821 17.8011 0.0523598 12.7232C-0.0174644 12.501 -0.017453 12.2628 0.0523925 12.0406C0.482287 10.6732 1.14444 9.38995 2.00983 8.24722C2.38933 7.74609 3.10322 7.64749 3.60434 8.027Z"
       />
     </svg>

packages/bento-design-system/src/TextArea/TextArea.tsx

@@ -12,7 +12,7 @@ type Props = FieldProps<string> & {
   placeholder: LocalizedString;
   isReadOnly?: boolean;
   rows?: number;
-};
+} & Pick<React.HTMLProps<HTMLTextAreaElement>, "onKeyDown" | "onKeyUp">;
 
 export function TextArea(props: Props) {
   const config = useBentoConfig().input;

packages/bento-design-system/src/TextField/TextField.tsx

@@ -17,7 +17,7 @@ type Props = FieldProps<string> & {
   rightAccessory?: Children;
   showPasswordLabel?: never;
   hidePasswordLabel?: never;
-};
+} & Pick<React.HTMLProps<HTMLInputElement>, "onKeyDown" | "onKeyUp">;
 
 export function TextField(props: Props) {
   const config = useBentoConfig().input;

packages/storybook/stories/Components/Form.stories.tsx

@@ -90,10 +90,14 @@ export const multipleSections = createStory({
   submitButton: {
     onPress: action("Submit"),
     label: "Sign up",
+    name: "action",
+    value: "submit",
   },
   secondaryButton: {
     onPress: action("Cancel"),
     label: "Never mind",
+    name: "action",
+    value: "cancel",
   },
   children: [
     <FormSection title="Personal information">