Size prop added to ImageInput component

.changeset/nice-toys-reply.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Adjusted the border radius of the `Avatar` component when `size="giga"` and `variant="object"`.

.changeset/purple-months-float.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added an optional `size` prop to the `ImageInput` component to change the action button's size.

docs/features/theme.stories.mdx

@@ -153,13 +153,14 @@ theme.iconSizes.[kilo|mega|giga]
 ## Border radius
 
 ```
-theme.borderRadius.[kilo|mega|giga|circle|pill]
+theme.borderRadius.[bit|byte|kilo|mega|circle|pill]
 ```
 
 <Preview>
+  <BorderRadius size="bit" />
+  <BorderRadius size="byte" />
   <BorderRadius size="kilo" />
   <BorderRadius size="mega" />
-  <BorderRadius size="giga" />
   <BorderRadius size="circle" />
   <BorderRadius size="pill" style={{ height: '16px' }} />
 </Preview>

packages/circuit-ui/components/Avatar/Avatar.tsx

@@ -19,6 +19,9 @@ import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
 
+type AvatarSize = 'giga' | 'yotta';
+type AvatarVariant = 'object' | 'identity';
+
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /**
    * The source URL of the Avatar image.
@@ -33,11 +36,11 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
    * The variant of the Avatar, either identity or object. Refer to the docs for usage guidelines.
    * The variant also changes which placeholder is rendered when the `src` prop is not provided.
    */
-  variant?: 'object' | 'identity';
+  variant?: AvatarVariant;
   /**
    * One of two available sizes for the Avatar, either giga or yotta.
    */
-  size?: 'giga' | 'yotta';
+  size?: AvatarSize;
 }
 
 const avatarSizes = {
@@ -52,26 +55,45 @@ const placeholders = {
     '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><path fill="white" d="M48 18c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM47.9998 88C61.53 88 73.4913 81.2822 80.73 71c-7.2387-10.2822-19.2-17-32.7303-17-13.5302 0-25.4914 6.7178-32.7302 17 7.2388 10.2822 19.2 17 32.7303 17z"/></svg>',
 };
 
-const baseStyles = ({
-  theme,
-  variant,
-  size = 'yotta',
-}: AvatarProps & StyleProps) => css`
+type StyledImageProps = Omit<AvatarProps, 'size' | 'variant'> & {
+  size: AvatarSize;
+  variant: AvatarVariant;
+};
+
+const baseStyles = ({ theme, size }: StyledImageProps & StyleProps) => css`
   display: block;
   width: ${avatarSizes[size]};
   height: ${avatarSizes[size]};
   box-shadow: 0 0 0 ${theme.borderWidth.kilo} rgba(0, 0, 0, 0.1);
+
   background-color: ${theme.colors.n300};
-  border-radius: ${variant === 'identity'
-    ? theme.borderRadius.circle
-    : theme.borderRadius.kilo};
   object-fit: cover;
   object-position: center;
 `;
 
+const borderStyles = ({
+  theme,
+  variant,
+  size,
+}: StyledImageProps & StyleProps) => {
+  let styles = css`
+    border-radius: ${theme.borderRadius.kilo};
+  `;
+  if (variant === 'identity') {
+    styles = css`
+      border-radius: ${theme.borderRadius.circle};
+    `;
+  } else if (size === 'giga') {
+    styles = css`
+      border-radius: ${theme.borderRadius.byte};
+    `;
+  }
+  return styles;
+};
+
 const StyledImage = styled('img', {
   shouldForwardProp: (prop) => isPropValid(prop),
-})<AvatarProps>(baseStyles);
+})<StyledImageProps>(baseStyles, borderStyles);
 
 /**
  * The Avatar component displays an identity or an object image.
@@ -80,7 +102,7 @@ export const Avatar = ({
   src,
   alt = '',
   variant = 'object',
-  size,
+  size = 'yotta',
   ...props
 }: AvatarProps): JSX.Element => {
   const placeholder = `data:image/svg+xml;utf8,${placeholders[variant]}`;

packages/circuit-ui/components/Avatar/__snapshots__/Avatar.spec.tsx.snap

@@ -7,9 +7,9 @@ exports[`Avatar styles should render the giga size 1`] = `
   height: 48px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 12px;
   object-fit: cover;
   object-position: center;
+  border-radius: 8px;
 }
 
 <div>
@@ -28,9 +28,9 @@ exports[`Avatar styles should render the identity variant placeholder 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 100%;
   object-fit: cover;
   object-position: center;
+  border-radius: 100%;
 }
 
 <div>
@@ -49,9 +49,9 @@ exports[`Avatar styles should render the identity variant with an image 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 100%;
   object-fit: cover;
   object-position: center;
+  border-radius: 100%;
 }
 
 <div>
@@ -70,9 +70,9 @@ exports[`Avatar styles should render the object variant placeholder 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 12px;
   object-fit: cover;
   object-position: center;
+  border-radius: 12px;
 }
 
 <div>
@@ -91,9 +91,9 @@ exports[`Avatar styles should render the object variant with an image 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 12px;
   object-fit: cover;
   object-position: center;
+  border-radius: 12px;
 }
 
 <div>
@@ -112,9 +112,9 @@ exports[`Avatar styles should render the yotta size 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 12px;
   object-fit: cover;
   object-position: center;
+  border-radius: 12px;
 }
 
 <div>
@@ -133,9 +133,9 @@ exports[`Avatar styles should render with default styles 1`] = `
   height: 96px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #CCC;
-  border-radius: 12px;
   object-fit: cover;
   object-position: center;
+  border-radius: 12px;
 }
 
 <div>

packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx

@@ -71,6 +71,14 @@ describe('ImageInput', () => {
       expect(container).toMatchSnapshot();
     });
 
+    it('should render with smaller button', () => {
+      const { container } = renderImageInput({
+        ...defaultProps,
+        size: 'giga',
+      });
+      expect(container).toMatchSnapshot();
+    });
+
     it('should render a custom component', () => {
       const { container } = renderImageInput({
         ...defaultProps,

packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx

@@ -55,6 +55,18 @@ export const WithImage = (): JSX.Element => (
   />
 );
 
+export const AsGigaAvatar = (): JSX.Element => (
+  <ImageInput
+    label="Upload an image"
+    clearButtonLabel="Clear"
+    onChange={() => Promise.resolve()}
+    onClear={() => {}}
+    loadingLabel="Uploading"
+    component={({ src, alt }) => <Avatar src={src} alt={alt} size="giga" />}
+    size="giga"
+  />
+);
+
 export const Invalid = (): JSX.Element => (
   <ImageInput
     label="Upload an image"

packages/circuit-ui/components/ImageInput/ImageInput.tsx

@@ -30,10 +30,12 @@ import styled, { StyleProps } from '../../styles/styled';
 import { uniqueId } from '../../util/id';
 import { focusOutline, hideVisually } from '../../styles/style-mixins';
 import Label from '../Label';
-import IconButton from '../IconButton';
+import IconButton, { IconButtonProps } from '../IconButton';
 import Spinner from '../Spinner';
 import ValidationHint from '../ValidationHint';
 
+type Size = 'giga' | 'yotta';
+
 export interface ImageInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   /**
@@ -78,6 +80,10 @@ export interface ImageInputProps
    * An information or error message, displayed below the input.
    */
   validationHint?: string;
+  /**
+   * Changes the size of the button that controls the input. Defaults to "yotta".
+   */
+  size?: Size;
 }
 
 const InputWrapper = styled.div`
@@ -223,12 +229,30 @@ const StyledLabel = styled(Label)<StyledLabelProps>(
   addButtonStyles,
 );
 
-const ActionButton = styled(IconButton)(
-  ({ theme }) => css`
-    position: absolute;
-    right: -${theme.spacings.bit};
-    bottom: -${theme.spacings.bit};
-  `,
+const actionButtonBaseStyles = ({ theme }: StyleProps) => css`
+  position: absolute;
+  right: -${theme.spacings.bit};
+  bottom: -${theme.spacings.bit};
+`;
+
+const actionButtonSizeStyles = ({ buttonSize }: ActionButtonProps) => {
+  if (buttonSize === 'giga') {
+    return css`
+      padding: 5px;
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    `;
+  }
+  return null;
+};
+
+type ActionButtonProps = IconButtonProps & { buttonSize: Size };
+
+const ActionButton = styled(IconButton)<ActionButtonProps>(
+  actionButtonBaseStyles,
+  actionButtonSizeStyles,
 );
 
 const AddButton = styled(ActionButton)`
@@ -272,6 +296,7 @@ export const ImageInput = ({
   label,
   src,
   alt,
+  size = 'yotta',
   id: customId,
   clearButtonLabel,
   onChange,
@@ -421,6 +446,7 @@ export const ImageInput = ({
             label={clearButtonLabel}
             onClick={handleClear}
             disabled={isLoading}
+            buttonSize={size}
           >
             <Delete size="16" />
           </ActionButton>
@@ -433,6 +459,7 @@ export const ImageInput = ({
             tabIndex={-1}
             label="-" // We need to pass a label here to prevent IconButton from throwing
             disabled={isLoading}
+            buttonSize={size}
           >
             <Plus size="16" />
           </AddButton>