From bef5068ac1d095b5de1d7461ec4f962c179b145e Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 23 Oct 2023 12:31:31 +0200 Subject: [PATCH] Feat(web-twig): Attachment image preview object fit #DS-1005 - Now accepts cover/contain value for objectFit prop to `FileUploaderAttachment` component --- .../FileUploader/FileUploaderAttachment.twig | 4 +- .../components/FileUploader/README.md | 39 +++++++++++++------ 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig index ea66b668e7..05c7729820 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig +++ b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig @@ -7,6 +7,7 @@ {%- set _imagePreview = props.imagePreview | default(null) -%} {%- set _onEdit = props.onEdit | default(null) -%} {%- set _removeText = props.removeText | default('Remove') -%} +{%- set _objectFit = props.objectFit | default('cover') -%} {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'FileUploaderAttachment' -%} @@ -18,6 +19,7 @@ {# Attributes #} {%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%} +{%- set _objectFitAttr = _objectFit ? 'data-spirit-object-fit=' ~ _objectFit : null -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} @@ -32,7 +34,7 @@ {{ _dataImagePreviewAttr | raw }} > {% if _generateImagePreview or _imagePreview %} - + {{- _fileName -}} {% endif %} diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md index 5372bd4878..6e3674bca8 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/README.md +++ b/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 | +| `objectFit` | [`cover` \| `contain`] | `cover` | ✕ | CSS value for image preview in FileUploaderAttachment | +| `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,