fix(button): fix recent issues (#3895)

* fix(button): fix typescript issue * fix(button): test issue * chore: add typedocs changes
twilio-labs · May 8, 2024 · ec901c2 · ec901c2
1 parent 1177b8f
commit ec901c2
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 38 deletions.
diff --git a/packages/paste-core/components/button/src/Button.tsx b/packages/paste-core/components/button/src/Button.tsx
@@ -236,18 +236,8 @@ const getButtonComponent = (
  * @see [Accessiblity](https://paste.twilio.design/components/button#button-vs-anchor-link)
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({
-    element = "BUTTON",
-    i18nExternalLinkLabel = "(link takes you to an external page)",
-    as = 'button',
-    fullWidth = false,
-    disabled = false,
-    loading = false,
-    type = 'button',
-    variant = 'primary',
-    ...props
-  }, ref) => {
-    const { size, children, ...rest } = props;
+  ({ element = "BUTTON", i18nExternalLinkLabel = "(link takes you to an external page)", ...props }, ref) => {
+    const { size, variant, children, disabled, loading, ...rest } = props;
     const [hovered, setHovered] = React.useState(false);
     const arrowIconStyles = useSpring({
       translateX: hovered ? "4px" : "0px",
@@ -262,16 +252,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       return getButtonSize(variant, children, size);
     }, [size, variant, children]);
 
-    handlePropValidation({
-      as,
-      fullWidth,
-      disabled,
-      loading,
-      type,
-      variant,
-      ...props,
-      size: smartDefaultSize
-    });
+    handlePropValidation({ ...props, size: smartDefaultSize });
 
     const buttonState = getButtonState(disabled, loading);
     const showLoading = buttonState === "loading";
@@ -281,7 +262,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Automatically inject AnchorForwardIcon for link's dressed as buttons when possible
     let injectIconChildren = children;
-    if (as === "a" && props.href != null && typeof children === "string" && variant !== "reset") {
+    if (props.as === "a" && props.href != null && typeof children === "string" && variant !== "reset") {
       injectIconChildren = (
         <>
           {children}
@@ -328,6 +309,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
+Button.defaultProps = {
+  as: "button",
+  fullWidth: false,
+  disabled: false,
+  loading: false,
+  type: "button",
+  variant: "primary",
+};
+
 Button.displayName = "Button";
 
 export type { ButtonProps };

diff --git a/packages/paste-core/components/button/src/types.ts b/packages/paste-core/components/button/src/types.ts
@@ -1,4 +1,4 @@
-import type { BoxProps } from "@twilio-paste/box";
+import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 
 type ButtonTypes = "submit" | "button" | "reset";
@@ -30,16 +30,15 @@ type ButtonBaseVariants =
   | "inverse";
 type ButtonResetVariant = "reset";
 /**
-  * All Button variants. Includes reset. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)
-  *
-  * @summary List of all of the differnt button appearances.
-  */
+ * All Button variants. Includes reset. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)
+ *
+ * @summary List of all of the differnt button appearances.
+ */
 export type ButtonVariants = ButtonResetVariant | ButtonBaseVariants;
 /** The various states of interactivity for the button. */
 export type ButtonStates = "disabled" | "loading" | "default";
 export type ButtonTabIndexes = 0 | -1;
 
-
 export interface ButtonContentsProps {
   /** The various states of interactivity for the button. */
   buttonState: ButtonStates;
@@ -105,11 +104,14 @@ export interface DirectButtonProps extends HTMLPasteProps<"button"> {
   variant: ButtonVariants;
 }
 
-type VariantsButtonProps = {
+type BaseVariantsButtonProps = {
   /**
    * The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)
    */
-  variant?: ButtonBaseVariants | ButtonResetVariant;
+  variant?: ButtonBaseVariants;
+};
+type ResetVariantButtonProps = Omit<BoxStyleProps, "size"> & {
+  variant?: ButtonResetVariant;
 };
 
 export type ButtonProps = Omit<DirectButtonProps, "buttonState" | "i18nExternalLinkLabel" | "loading" | "size"> & {
@@ -127,4 +129,4 @@ export type ButtonProps = Omit<DirectButtonProps, "buttonState" | "i18nExternalL
    * @default 'default'
    */
   size?: ButtonSizes;
-} & (VariantsButtonProps);
+} & (BaseVariantsButtonProps | ResetVariantButtonProps);
diff --git a/packages/paste-core/components/button/type-docs.json b/packages/paste-core/components/button/type-docs.json
@@ -4,7 +4,8 @@
       "type": "| \"link\"\n  | \"reset\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",

diff --git a/packages/paste-core/components/file-picker/type-docs.json b/packages/paste-core/components/file-picker/type-docs.json
@@ -1790,7 +1790,8 @@
       "type": "| \"link\"\n  | \"reset\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",

diff --git a/packages/paste-core/components/menu/type-docs.json b/packages/paste-core/components/menu/type-docs.json
@@ -597,7 +597,8 @@
       "type": "| \"reset\"\n  | \"link\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",

diff --git a/packages/paste-core/components/minimizable-dialog/type-docs.json b/packages/paste-core/components/minimizable-dialog/type-docs.json
@@ -1833,7 +1833,8 @@
       "type": "| \"link\"\n  | \"reset\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",

diff --git a/packages/paste-core/components/popover/type-docs.json b/packages/paste-core/components/popover/type-docs.json
@@ -1852,7 +1852,8 @@
       "type": "| \"link\"\n  | \"reset\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",

diff --git a/packages/paste-core/components/side-modal/type-docs.json b/packages/paste-core/components/side-modal/type-docs.json
@@ -1594,7 +1594,8 @@
       "type": "| \"link\"\n  | \"reset\"\n  | \"primary\"\n  | \"primary_icon\"\n  | \"secondary\"\n  | \"secondary_icon\"\n  | \"destructive\"\n  | \"destructive_icon\"\n  | \"destructive_link\"\n  | \"destructive_secondary\"\n  | \"inverse_link\"\n  | \"inverse\"",
       "defaultValue": "'primary'",
       "required": true,
-      "externalProp": false
+      "externalProp": false,
+      "description": "The different appearance variants for a button. [Avoid using link variants when possible.](https://paste.twilio.design/components/button#button-vs-anchor-link)"
     },
     "about": {
       "type": "string",