fix: update icon button types and docs (#18658)

Author: adamalston

packages/react/src/components/Button/Button.tsx

@@ -205,6 +205,14 @@ const Button: ButtonComponent = React.forwardRef(
       }
 
       return (
+        // @ts-expect-error - `IconButton` does not support all `size`s that
+        // `Button` supports.
+        //
+        // TODO: What should be done here?
+        // 1. Should the `IconButton` not be rendered if the `size` is not
+        //    supported?
+        // 2. Should an error be thrown?
+        // 3. Something else?
         <IconButton
           {...rest}
           ref={ref}

packages/react/src/components/Button/ButtonBase.tsx

@@ -45,6 +45,7 @@ const ButtonBase = React.forwardRef(function ButtonBase<
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive, // TODO: V12 - Remove this class
     [`${prefix}--btn--md`]: size === 'md' && !isExpressive, // TODO: V12 - Remove this class
+    [`${prefix}--btn--lg`]: size === 'lg' && !isExpressive, // TODO: V12 - Remove this class
     [`${prefix}--btn--xl`]: size === 'xl', // TODO: V12 - Remove this class
     [`${prefix}--btn--2xl`]: size === '2xl', // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,

packages/react/src/components/Button/__tests__/Button-test.js

@@ -97,11 +97,7 @@ describe('Button', () => {
   ])(
     'should set the expected classes for the button of kind: `%s`',
     (kind, className) => {
-      render(
-        <Button className={className} kind={kind}>
-          test
-        </Button>
-      );
+      render(<Button kind={kind}>test</Button>);
       expect(screen.getByText('test')).toHaveClass(className);
     }
   );
@@ -115,11 +111,7 @@ describe('Button', () => {
   ])(
     'should set the expected classes for the button of size: `%s`',
     (size, className) => {
-      render(
-        <Button className={className} size={size}>
-          test
-        </Button>
-      );
+      render(<Button size={size}>test</Button>);
       expect(screen.getByText('test')).toHaveClass(className);
     }
   );

packages/react/src/components/IconButton/index.tsx

@@ -161,9 +161,9 @@ export interface IconButtonProps
   rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
 
   /**
-   * Specify the size of the Button. Defaults to `md`.
+   * Specify the size of the Button.
    */
-  size?: ButtonSize;
+  size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
 
   /**
    * Optionally specify a `target` when using an `<a>` element.
@@ -381,7 +381,7 @@ IconButton.propTypes = {
   rel: PropTypes.string,
 
   /**
-   * Specify the size of the Button. Defaults to `md`.
+   * Specify the size of the Button.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),