Updating props to optional and providing defaults (#20448)

ui/components/component-library/button-link/README.mdx

@@ -15,10 +15,6 @@ The `ButtonLink` is an extension of `ButtonBase` to support link styles
 
 <ArgsTable of={ButtonLink} />
 
-The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
-
-<ArgsTable of={ButtonBase} />
-
 ### Size
 
 Use the `size` prop and the `ButtonLinkSize` enum from `./ui/components/component-library` to change the size of `ButtonLink`. Defaults to `ButtonLinkSize.Auto`

ui/components/component-library/button-link/button-link.tsx

@@ -15,9 +15,9 @@ export const ButtonLink: ButtonLinkComponent = React.forwardRef(
     {
       className,
       color,
-      danger,
+      danger = false,
-      disabled,
+      disabled = false,
-      loading,
+      loading = false,
       size = ButtonLinkSize.Auto,
       ...props
     }: ButtonLinkProps<C>,

ui/components/component-library/button-link/button-link.types.ts

@@ -16,20 +16,20 @@ export interface ButtonLinkStyleUtilityProps
   /**
    * Boolean to change button type to Danger when true
    */
-  danger: boolean;
+  danger?: boolean;
   /**
    * Boolean to disable button
    */
-  disabled: boolean;
+  disabled?: boolean;
   /**
    * Boolean to show loading spinner in button
    */
-  loading: boolean;
+  loading?: boolean;
   /**
    * Possible size values: 'ButtonLinkSize.Auto'(auto), 'ButtonLinkSize.Sm'(32px), 'ButtonLinkSize.Md'(40px), 'ButtonLinkSize.Lg'(48px), 'ButtonLinkSize.Inherit'(inherits parents font-size)
    * Default value is 'ButtonLinkSize.Auto'.
    */
-  size: ButtonLinkSize;
+  size?: ButtonLinkSize;
 }
 
 export type ButtonLinkProps<C extends React.ElementType> =

ui/components/component-library/button-primary/button-primary.tsx

@@ -18,8 +18,8 @@ export const ButtonPrimary: ButtonPrimaryComponent = React.forwardRef(
   <C extends React.ElementType = 'button' | 'a'>(
     {
       className,
-      danger,
+      danger = false,
-      disabled,
+      disabled = false,
       size = ButtonPrimarySize.Md,
       ...props
     }: ButtonPrimaryProps<C>,

ui/components/component-library/button-primary/button-primary.types.ts

@@ -13,21 +13,21 @@ export interface ButtonPrimaryStyleUtilityProps
   /**
    * Boolean to change button type to Danger when true
    */
-  danger: boolean;
+  danger?: boolean;
   /**
    * Boolean to disable button
    */
-  disabled: boolean;
+  disabled?: boolean;
   /**
    * Boolean to show loading spinner in button
    */
-  loading: boolean;
+  loading?: boolean;
   /**
    * Possible size values: 'ButtonPrimarySize.Sm'(32px),
    * 'ButtonPrimarySize.Md'(40px), 'ButtonPrimarySize.Lg'(48px)
    * Default value is 'ButtonPrimarySize.Auto'.
    */
-  size: ButtonPrimarySize;
+  size?: ButtonPrimarySize;
 }
 
 export type ButtonPrimaryProps<C extends React.ElementType> =

ui/components/component-library/button-secondary/button-secondary.tsx

@@ -14,8 +14,8 @@ export const ButtonSecondary: ButtonSecondaryComponent = React.forwardRef(
   <C extends React.ElementType = 'button' | 'a'>(
     {
       className = '',
-      danger,
+      danger = false,
-      disabled,
+      disabled = false,
       size = ButtonSecondarySize.Md,
       ...props
     }: ButtonSecondaryProps<C>,
@@ -28,8 +28,8 @@ export const ButtonSecondary: ButtonSecondaryComponent = React.forwardRef(
         borderColor={buttonColor}
         color={buttonColor}
         className={classnames(className, 'mm-button-secondary', {
-          'mm-button-secondary--type-danger': Boolean(danger),
+          'mm-button-secondary--type-danger': danger,
-          'mm-button-secondary--disabled': Boolean(disabled),
+          'mm-button-secondary--disabled': disabled,
         })}
         size={size}
         ref={ref}