Add hideLabel prop to ImageInput

sumup-oss · Oct 15, 2024 · 2f89c79 · 2f89c79
1 parent cfaad3a
commit 2f89c79
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/.changeset/happy-glasses-work.md b/.changeset/happy-glasses-work.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a `hideLabel` prop to the ImageInput component. It defaults to `true` to match the existing behavior.
diff --git a/packages/circuit-ui/components/Field/Field.module.css b/packages/circuit-ui/components/Field/Field.module.css
@@ -8,13 +8,12 @@
 .label,
 .legend {
   display: block;
-  font-size: var(--cui-typography-body-two-font-size);
-  line-height: var(--cui-typography-body-two-line-height);
 }
 
 .label-text {
-  display: inline-block;
   margin-bottom: var(--cui-spacings-bit);
+  font-size: var(--cui-typography-body-two-font-size);
+  line-height: var(--cui-typography-body-two-line-height);
 }
 
 [disabled] .label-text,

diff --git a/packages/circuit-ui/components/Field/Field.tsx b/packages/circuit-ui/components/Field/Field.tsx
@@ -122,13 +122,15 @@ export function FieldLabelText({
   hideLabel,
   optionalLabel,
   required,
+  ...props
 }: FieldLabelTextProps) {
   return (
     <span
       className={clsx(
         classes['label-text'],
         hideLabel && utilClasses.hideVisually,
       )}
+      {...props}
     >
       {label}
       {optionalLabel && !required ? (

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx
@@ -105,7 +105,9 @@ describe('ImageInput', () => {
      */
     it('should support dragging and dropping an image', async () => {
       render(<StatefulInput />);
-      const labelEl = screen.getByText(defaultProps.label);
+      const labelEl = screen.getByText(defaultProps.label, {
+        ignore: '[aria-hidden="true"]',
+      });
 
       fireEvent.drop(labelEl, { dataTransfer: { files: [file] } });
 

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -33,6 +33,7 @@ import {
   FieldWrapper,
   FieldLabel,
   FieldValidationHint,
+  FieldLabelText,
 } from '../Field/index.js';
 import { IconButton } from '../Button/index.js';
 import { Spinner } from '../Spinner/index.js';
@@ -89,6 +90,15 @@ export interface ImageInputProps
    * An information or error message, displayed below the input.
    */
   validationHint?: string;
+  /**
+   * Label to indicate that the input is optional. Only displayed when the
+   * `required` prop is falsy.
+   */
+  optionalLabel?: string;
+  /**
+   * Visually hide the label. Default: `true`.
+   */
+  hideLabel?: boolean;
 }
 
 /**
@@ -104,7 +114,10 @@ export const ImageInput = ({
   disabled,
   validationHint,
   invalid = false,
+  required,
+  optionalLabel,
   loadingLabel,
+  hideLabel = true,
   'component': Component,
   className,
   style,
@@ -231,6 +244,13 @@ export const ImageInput = ({
 
   return (
     <FieldWrapper className={className} style={style} disabled={disabled}>
+      <FieldLabelText
+        label={label}
+        hideLabel={hideLabel}
+        optionalLabel={optionalLabel}
+        required={required}
+        aria-hidden="true"
+      />
       <div onPaste={handlePaste} className={classes.base}>
         <input
           className={clsx(classes.input, utilClasses.hideVisually)}
@@ -240,6 +260,7 @@ export const ImageInput = ({
           accept="image/*"
           onChange={handleInputChange}
           onClick={handleClick}
+          required={required}
           disabled={disabled || isLoading}
           aria-invalid={invalid && 'true'}
           aria-describedby={descriptionIds}