feat(IconButton): Adjust IconButton size. Deprecate size="large" an…

…d `children` (#2576)

.changeset/lucky-buckets-shout.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-button': patch
+---
+
+IconButton: adjust size, deprecate `size="large"` and `children` props.

packages/components/button/examples/IconButtonExample.tsx

@@ -24,16 +24,19 @@ export default function IconButtonExample() {
       </Stack>
       <Stack>
         <IconButton
+          size="small"
           variant="secondary"
           aria-label="Select the date"
           icon={<CalendarIcon size="tiny" />}
         />
         <IconButton
+          size="small"
           variant="transparent"
           aria-label="Select the date"
           icon={<CalendarIcon size="tiny" />}
         />
         <IconButton
+          size="small"
           variant="primary"
           aria-label="Select the date"
           icon={<CalendarIcon size="tiny" />}

packages/components/button/src/IconButton/IconButton.styles.ts

@@ -0,0 +1,33 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+import { ButtonSize } from '../types';
+
+function sizeToStyles(size: ButtonSize) {
+  switch (size) {
+    case 'small': {
+      return {
+        padding: tokens.spacing2Xs,
+        minHeight: '32px',
+        minWidth: '32px',
+      };
+    }
+    case 'medium': {
+      return {
+        padding: tokens.spacingXs,
+        minHeight: '40px',
+        minWidth: '40px',
+      };
+    }
+    default: {
+      return {};
+    }
+  }
+}
+
+export function getStyles({ size }: { size: ButtonSize }) {
+  return {
+    iconButton: css({
+      ...sizeToStyles(size),
+    }),
+  };
+}

packages/components/button/src/IconButton/IconButton.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
+import { cx } from 'emotion';
 import type {
   PolymorphicProps,
   PolymorphicComponent,
   ExpandProps,
 } from '@contentful/f36-core';
 import { Button } from '../Button';
 import type { ButtonInternalProps } from '../types';
+import { getStyles } from './IconButton.styles';
 
 interface IconButtonInternalProps
-  extends Omit<ButtonInternalProps, 'startIcon' | 'endIcon'> {
+  extends Omit<
+    ButtonInternalProps,
+    'startIcon' | 'endIcon' | 'children' | 'size'
+  > {
   /**
    * Expects any of the icon components
    */
@@ -17,6 +22,15 @@ interface IconButtonInternalProps
    * Aria label is required when using icon only
    */
   'aria-label': string;
+  /**
+   * @deprecated Use <Button /> component instead
+   */
+  children?: ButtonInternalProps['children'];
+  /**
+   * Determines size variation of IconButton component
+   * Note: 'large' is @deprecated
+   * */
+  size?: ButtonInternalProps['size'];
 }
 
 const ICON_BUTTON_DEFAULT_TAG = 'button';
@@ -32,14 +46,20 @@ function _IconButton<
     testId = 'cf-ui-icon-button',
     variant = 'transparent',
     icon,
+    className,
+    size = 'medium',
     ...otherProps
   } = props;
 
+  const styles = getStyles({ size });
+
   return (
     <Button
       testId={testId}
       ref={ref}
       variant={variant}
+      className={cx(styles.iconButton, className)}
+      size={size}
       {...otherProps}
       startIcon={icon}
     />

packages/components/button/stories/IconButton.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta } from '@storybook/react/types-6-0';
 import { SectionHeading, Paragraph } from '@contentful/f36-typography';
 import { Flex, Stack, Box } from '@contentful/f36-core';
+import { TextInput } from '@contentful/f36-forms';
 import { Icon } from '@contentful/f36-icon';
 import * as icons from '@contentful/f36-icons';
 
@@ -70,6 +71,56 @@ export const ColoredIconInTransparentIconButton = () => {
     </Flex>
   );
 };
+
+export const WithTextInput = () => {
+  return (
+    <Stack flexDirection="column">
+      <TextInput.Group>
+        <TextInput aria-label="Content type name" defaultValue="blog" />
+        <IconButton
+          variant="secondary"
+          icon={<icons.LockIcon />}
+          aria-label="Unlock"
+        />
+      </TextInput.Group>
+      <TextInput.Group>
+        <TextInput
+          size="small"
+          aria-label="Content type name"
+          defaultValue="blog"
+        />
+        <IconButton
+          size="small"
+          variant="secondary"
+          icon={<icons.LockIcon />}
+          aria-label="Unlock"
+        />
+      </TextInput.Group>
+      <TextInput.Group spacing="spacingS">
+        <TextInput aria-label="Content type name" defaultValue="blog" />
+        <IconButton
+          variant="secondary"
+          icon={<icons.LockIcon />}
+          aria-label="Unlock"
+        />
+      </TextInput.Group>
+      <TextInput.Group spacing="spacingS">
+        <TextInput
+          size="small"
+          aria-label="Content type name"
+          defaultValue="blog"
+        />
+        <IconButton
+          size="small"
+          variant="secondary"
+          icon={<icons.LockIcon />}
+          aria-label="Unlock"
+        />
+      </TextInput.Group>
+    </Stack>
+  );
+};
+
 export const Overview = () => (
   <>
     <Flex flexDirection="column" marginBottom="spacingL">
@@ -135,13 +186,6 @@ export const Overview = () => (
           aria-label="Plus"
           size="medium"
         />
-
-        <IconButton
-          variant="primary"
-          icon={<Icon as={icons.PlusIcon} />}
-          aria-label="Plus"
-          size="large"
-        />
       </Stack>
     </Flex>
   </>