Feat(web, web-react, web-twig): Attachment image object fit #DS-1005

packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx

@@ -7,21 +7,29 @@ type AttachmentImagePreviewProps = {
   imagePreview: string;
   label: string;
   meta?: FileMetadata;
+  imageObjectFit?: 'contain' | 'cover';
 };
 
-const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {
-  const { classProps } = useFileUploaderStyleProps({ meta });
-  const { imageCropStyles } = classProps;
+const AttachmentImagePreview = ({ label, imagePreview, meta, imageObjectFit }: AttachmentImagePreviewProps) => {
+  const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
+  const { imageCropStyles, attachmentStyles } = classProps;
 
   return (
     <span className={classProps.attachment.image}>
-      <img src={imagePreview} width={IMAGE_DIMENSION} height={IMAGE_DIMENSION} alt={label} style={imageCropStyles} />
+      <img
+        src={imagePreview}
+        width={IMAGE_DIMENSION}
+        height={IMAGE_DIMENSION}
+        alt={label}
+        style={{ ...imageCropStyles, ...attachmentStyles }}
+      />
     </span>
   );
 };
 
 AttachmentImagePreview.defaultProps = {
   meta: undefined,
+  imageObjectFit: 'cover',
 };
 
 export default AttachmentImagePreview;

packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx

@@ -22,13 +22,14 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
     hasImagePreview,
     iconName = DEFAULT_ICON_NAME,
     id,
+    imageObjectFit,
     label,
+    meta,
     name,
     onDismiss,
     onEdit,
     onError,
     removeText,
-    meta,
     ...restProps
   } = props;
   const [imagePreview, setImagePreview] = useState<string>('');
@@ -83,7 +84,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
       className={classNames(classProps.attachment.root, styleProps.className)}
     >
       {hasImagePreview && imagePreview ? (
-        <AttachmentImagePreview label={label} imagePreview={imagePreview} meta={meta} />
+        <AttachmentImagePreview label={label} imagePreview={imagePreview} meta={meta} imageObjectFit={imageObjectFit} />
       ) : (
         <Icon name={iconName} aria-hidden="true" />
       )}

packages/web-react/src/components/FileUploader/README.md

@@ -416,6 +416,7 @@ The rest of the properties are created from the default `<ul>` element. [More ab
 | `hasImagePreview`  | `bool`                               | false    | ✕        | Show image preview                                                          |
 | `iconName`         | `string`                             | `file`   | ✕        | Icon shown along the file                                                   |
 | `id`               | `string`                             | —        | ✔        | FileUploaderAttachment id                                                   |
+| `imageObjectFit`   | [`cover` \| `contain`]               | `cover`  | ✕        | Defines FileUploaderAttachment image fit in container                       |
 | `label`            | `string`                             | —        | ✔        | File name                                                                   |
 | `name`             | `string`                             | —        | ✔        | Input field name                                                            |
 | `onDismiss`        | `(key: string) => FileQueueMapType`  | —        | ✔        | Callback to delete an item from the queue                                   |

packages/web-react/src/components/FileUploader/demo/constants.ts

@@ -1,2 +1,5 @@
 export const DEMO_ATTACHMENT_BASE64_IMAGE =
   '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';
+
+export const DEMO_ATTACHMENT_BASE64_IMAGE_40X52 =
+  '/9j/4AAQSkZJRgABAQEASABIAAD/4QDeRXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABwAAkAcABAAAADAyMTABkQcABAAAAAECAwCGkgcAFgAAAMAAAAAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAIIAAAADoAQAAQAAAKIAAAAAAAAAQVNDSUkAAABQaWNzdW0gSUQ6IDgyM//bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIADIAKAMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAAABgQFAgMHAf/EADQQAAEEAQMCBAMECwAAAAAAAAECAwQRAAUSIQYxE0FRcSJhgTJCkbEUFiQzNDVygqGywf/EABkBAAIDAQAAAAAAAAAAAAAAAAMEAAECBf/EACQRAAEDAwQBBQAAAAAAAAAAAAEAAgMEERITITFBcTIzUaHB/9oADAMBAAIRAxEAPwDju2jRvddVkhMN5VUAAogd+3z9slkRXtocQQpNCxdqHtl890q3Gdaf/SVttJVS33kjwyKs7avkdqPPnkuTwgMsTvwozPTcN5hRDz26uF8fllDKiL0+S4y6hK64Sokjg9iM6LD03TVS3YG6a7O8Iux/Ak0HQBZ2/d8jwfTFrq+C7AlxUuAqUpsgqUE3YPINcWPl64Nhe11nLpVJppIsom2I+0p4ZKjQ1y0rLYIKee3B5wwy5eQ7U/T9RXD1FD7dJcYeS40rbdG/PHzqydM8BEJpyCEziHEpDZQUgAEhfkoEjjEWHbupNuNAJdBBS4B5jtY9cZpry9R6pYTqTjklxLSEpJN8fFeUYzp6i3DIM9P5WnpbqA9O6m4JUKO4vwtrSlJ4FkmrN1ZJ5yXqsL9aNKRqURkNJS4sSIzfxBlw8Ejz2kge1+2VOs6lGbS3HVDS88hI2PBe2qJ+0Ob/AMZP6U6kjwpwkaon9l8Pw5KUJ5WhVgGh5g8X6EemZaHOIJCJIWBpAKVH3XooQ0hbiHEjYQU7cMuOqY/jJRNhh1TC1UbNkel+pqucMLIwxuxKUjIe24WvRlxnZvibKbPCgquTRrGiA2yrqETeAhuIgAmh8QPfOeQpojBQWkkHnjzxn0/WSiGpLqUpTLTyofcSCQK+tYWUh1Pg3lSBpZUZHhUk55D8t9TdVvURY+fGV6XFpdu1Hggj5ZtV2Sq+e15ghWyQ2rvShftljYhQm4N0x6BMafaUy+rfuRs2KPCvTj17j8MMWVLXDmOBs0ULIB+uGMsqYgLSDcJN9NITlGdio+Xp/kcD+/8A2OGGK0/abn68/hVYj91+GYn7Q+n5jDDLCtez/wCPe/q/5hhhgpPWVqL22+Av/9k=';

packages/web-react/src/components/FileUploader/stories/FileUploaderAttachment.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { DEMO_ATTACHMENT_BASE64_IMAGE } from '../demo/constants';
+import { DEMO_ATTACHMENT_BASE64_IMAGE_40X52 } from '../demo/constants';
 import { base64ToByteArray, FileUploader, FileUploaderAttachment } from '..';
 
-const byteArray = base64ToByteArray(DEMO_ATTACHMENT_BASE64_IMAGE);
+const byteArray = base64ToByteArray(DEMO_ATTACHMENT_BASE64_IMAGE_40X52);
 
 const meta: Meta<typeof FileUploaderAttachment> = {
   title: 'Components/FileUploader',

packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts

@@ -5,15 +5,16 @@ import { useClassNamePrefix } from '../../hooks';
 import { FileMetadata, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
 
 export interface FileUploaderStyleProps extends Validation {
-  isDragAndDropSupported?: boolean;
-  isLabelHidden?: boolean;
+  imageObjectFit?: 'contain' | 'cover';
   isDisabled?: boolean;
   isDisabledByQueueLimitBehavior?: boolean;
+  isDragAndDropSupported?: boolean;
   isDragging?: boolean;
   isDropZoneHidden?: boolean;
   isFluid?: boolean;
-  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
+  isLabelHidden?: boolean;
   meta?: FileMetadata;
+  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
 }
 
 type ImageCropCSS = {
@@ -23,6 +24,10 @@ type ImageCropCSS = {
   [FileUploaderCropCSS.HEIGHT]?: string;
 } & CSSProperties;
 
+type ImageObjectFit = {
+  '--file-uploader-attachment-image-object-fit': string;
+};
+
 export interface FileUploaderStyleReturn {
   /** className props */
   classProps: {
@@ -49,6 +54,7 @@ export interface FileUploaderStyleReturn {
       slot: string;
     };
     imageCropStyles?: ImageCropCSS;
+    attachmentStyles?: ImageObjectFit;
   };
 }
 
@@ -79,8 +85,9 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
   const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
   const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;
 
-  const { meta } = props || {};
+  const { meta, imageObjectFit } = props || {};
   let imageCropCSS: ImageCropCSS | undefined;
+  let imageObjectFitCSS: ImageObjectFit | undefined;
   const hasCoords = meta && meta.x != null && meta.y != null && meta.width != null && meta.height != null;
 
   if (hasCoords) {
@@ -94,6 +101,12 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
     };
   }
 
+  if (imageObjectFit) {
+    imageObjectFitCSS = {
+      '--file-uploader-attachment-image-object-fit': imageObjectFit,
+    };
+  }
+
   return {
     classProps: {
       root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props?.isFluid }),
@@ -129,6 +142,7 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
         slot: fileUploaderAttachmentSlotClass,
       },
       ...(hasCoords && { imageCropStyles: imageCropCSS }),
+      ...(imageObjectFit && { attachmentStyles: imageObjectFitCSS }),
     },
   };
 };

packages/web-react/src/types/fileUploader.ts

@@ -97,6 +97,7 @@ export interface FileUploaderAttachmentBaseProps extends Omit<SpiritLItemElement
   hasImagePreview?: boolean;
   iconName?: string;
   id: string;
+  imageObjectFit?: 'contain' | 'cover';
   label: string;
   meta?: FileMetadata;
   name: string;

packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig

@@ -4,6 +4,7 @@
 {%- set _fileName = props.fileName | default(null) -%}
 {%- set _generateImagePreview = props.generateImagePreview | default(false) -%}
 {%- set _iconName = props.iconName | default('file') -%}
+{%- set _imageObjectFit = props.imageObjectFit | default(null) -%}
 {%- set _imagePreview = props.imagePreview | default(null) -%}
 {%- set _onEdit = props.onEdit | default(null) -%}
 {%- set _removeText = props.removeText | default('Remove') -%}
@@ -18,6 +19,7 @@
 
 {# Attributes #}
 {%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%}
+{%- set _imageObjectFitAttr = _imageObjectFit ? 'data-spirit-image-object-fit=' ~ _imageObjectFit : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -33,7 +35,7 @@
 >
     {% if _generateImagePreview or _imagePreview %}
         <span class="{{ _imageClassName }}">
-            <img src="{{ _imagePreview }}" width="54" height="54" alt="{{- _fileName -}}" />
+            <img src="{{ _imagePreview }}" {{ _imageObjectFitAttr }} width="54" height="54" alt="{{- _fileName -}}" />
         </span>
     {% endif %}
     {% if not _imagePreview %}

packages/web-twig/src/Resources/components/FileUploader/README.md

@@ -6,10 +6,26 @@ FileUploader allows users to pick one or more files to upload.
 
 FileUploader is a composition of a few subcomponents:
 
-- [FileUploader](#fileuploader-1)
+- [FileUploader](#fileuploader)
+  - [JavaScript Plugin](#javascript-plugin)
+  - [FileUploader](#fileuploader-1)
+    - [Fluid Width](#fluid-width)
+    - [API](#api)
   - [FileUploaderInput](#fileuploaderinput)
+    - [Selecting Multiple Files at Once](#selecting-multiple-files-at-once)
+    - [Maximum File Size (JavaScript)](#maximum-file-size-javascript)
+    - [Maximum Number of Files in Queue (JavaScript)](#maximum-number-of-files-in-queue-javascript)
+    - [Input Behavior When the Queue is Filled (JavaScript)](#input-behavior-when-the-queue-is-filled-javascript)
+    - [Allowed File Types](#allowed-file-types)
+    - [Required Input](#required-input)
+    - [Validation States](#validation-states)
+    - [Disabled State](#disabled-state)
+    - [API](#api-1)
   - [FileUploaderList](#fileuploaderlist)
-    - [FileUploaderAttachment](#fileuploaderattachment)
+    - [API](#api-2)
+  - [FileUploaderAttachment](#fileuploaderattachment)
+    - [API](#api-3)
+  - [Composition](#composition)
 
 ## JavaScript Plugin
 
@@ -283,15 +299,16 @@ With image preview:
 
 ### API
 
-| Name                   | Type     | Default  | Required | Description                                                                                        |
-| ---------------------- | -------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
-| `editText`             | `string` | `Edit`   | ✕        | Edit button text                                                                                   |
-| `fileName`             | `string` | `null`   | ✕        | File name                                                                                          |
-| `generateImagePreview` | `bool`   | `false`  | ✕        | If true and used in the attachment template, the JS plugin will try to show a preview of the image |
-| `iconName`             | `string` | `file`   | ✕        | Icon shown along the file                                                                          |
-| `imagePreview`         | `string` | `null`   | ✕        | URL or base64 of an image                                                                          |
-| `onEdit`               | `func`   | `null`   | ✕        | Function to trigger on click on edit button                                                        |
-| `removeText`           | `string` | `Remove` | ✕        | Remove button text                                                                                 |
+| Name                   | Type                   | Default  | Required | Description                                                                                        |
+| ---------------------- | ---------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `editText`             | `string`               | `Edit`   | ✕        | Edit button text                                                                                   |
+| `fileName`             | `string`               | `null`   | ✕        | File name                                                                                          |
+| `generateImagePreview` | `bool`                 | `false`  | ✕        | If true and used in the attachment template, the JS plugin will try to show a preview of the image |
+| `iconName`             | `string`               | `file`   | ✕        | Icon shown along the file                                                                          |
+| `imagePreview`         | `string`               | `null`   | ✕        | URL or base64 of an image                                                                          |
+| `imageObjectFit`       | [`cover` \| `contain`] | `cover`  | ✕        | Defines FileUploaderAttachment image fit in container                                              |
+| `onEdit`               | `func`                 | `null`   | ✕        | Function to trigger on click on edit button                                                        |
+| `removeText`           | `string`               | `Remove` | ✕        | Remove button text                                                                                 |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,