Feat(web,web-react,web-twig): Allow multiline validationText in FileU…

…ploaderInput #DS-737
lmc-eu · May 25, 2023 · 6724d7a · 6724d7a
1 parent 9759666
commit 6724d7a
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 16 deletions.
diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md
@@ -73,6 +73,10 @@ const { fileQueue, addToQueue, clearQueue, onDismiss } = useFileQueue();
   <FileUploaderInput isRequired validationState="success" validationText="Validation message" />
   <FileUploaderList />
 </FileUploader>
+<FileUploader>
+  <FileUploaderInput isRequired validationState="success" validationText={["Validation message", "Second validation message"]} />
+  <FileUploaderList />
+</FileUploader>
 ```
 
 ### Input behavior when the queue is filled
@@ -307,7 +311,7 @@ The rest of the properties are created from the default `<div>` element. [More a
 | `iconName`           | `string`                             | `upload` | ✕        | Icon used in the drop zone                                                                                                                                      |
 | `isRequired`         | `boolean`                            | -        | ✕        | Whether is field required                                                                                                                                       |
 | `validationState`    | `ValidationState`                    | -        | ✕        | Validation state                                                                                                                                                |
-| `validationText`     | `string`                             | -        | ✕        | Validation status text                                                                                                                                          |
+| `validationText`     | `string`, `string[]`                 | -        | ✕        | Validation status text                                                                                                                                          |
 | `maxFileSize`        | `number`                             | 1000000  | ✕        | The maximum size of the uploaded file                                                                                                                           |
 | `maxUploadedFiles`   | `number`                             | 10       | ✕        | Maximum file upload queue size                                                                                                                                  |
 | `isMultiple`         | `boolean`                            | -        | ✕        | When multiple files can be selected at once                                                                                                                     |
@@ -390,7 +394,7 @@ via `inputProps` and `listProps`.
 | `onInputError`        | `FileUploaderErrorCallbackType`         | -        | ✕        | Callback on error condition                         |
 | `onChange`            | `(fileQueue: FileQueueMapType) => void` | -        | ✕        | Callback on change in fileQueue                     |
 | `validationState`     | `ValidationState`                       | -        | ✕        | Validation state                                    |
-| `validationText`      | `string`                                | -        | ✕        | Validation status text                              |
+| `validationText`      | `string`, `string[]`                    | -        | ✕        | Validation status text                              |
 | `UNSAFE_className`    | `string`                                | -        | ✕        | UncontrolledFileUploader custom class name          |
 | `UNSAFE_style`        | `CSSProperties`                         | -        | ✕        | UncontrolledFileUploader custom style               |
 

diff --git a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
@@ -1,9 +1,12 @@
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { validationTextPropsTest } from '../../../../tests/providerTests/validationTextPropsTest';
 import FileUploaderInput from '../FileUploaderInput';
 
 describe('FileUploaderInput', () => {
   classNamePrefixProviderTest(FileUploaderInput, 'FileUploaderInput');
 
   restPropsTest(FileUploaderInput, 'div');
+
+  validationTextPropsTest(FileUploaderInput, '.FileUploaderInput__validationText');
 });
diff --git a/packages/web-react/tests/providerTests/validationTextPropsTest.tsx b/packages/web-react/tests/providerTests/validationTextPropsTest.tsx
@@ -9,7 +9,17 @@ export const validationTextPropsTest = (
   type: TextFieldType | null = null,
 ) => {
   it('should have message', async () => {
-    const dom = render(<Component id="component" label="Label" type={type as TextFieldType} message="text" />);
+    const dom = render(
+      <Component
+        id="component"
+        label="Label"
+        type={type as TextFieldType}
+        /** @deprecated Will be removed in the next major version. */
+        message="text"
+        validationState="danger"
+        validationText="text"
+      />,
+    );
 
     await waitFor(() => {
       const element = dom.container.querySelector(className) as HTMLElement;
@@ -19,7 +29,15 @@ export const validationTextPropsTest = (
 
   it('should have multiline message as a list', async () => {
     const dom = render(
-      <Component id="component" label="Label" type={type as TextFieldType} message={['foo', 'bar']} />,
+      <Component
+        id="component"
+        label="Label"
+        type={type as TextFieldType}
+        /** @deprecated Will be removed in the next major version. */
+        message={['foo', 'bar']}
+        validationState="danger"
+        validationText={['foo', 'bar']}
+      />,
     );
 
     await waitFor(() => {

diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
@@ -92,12 +92,17 @@
         {% endif %}
     </div>
     {% if _validationText or _unsafeValidationText %}
-        <div class="{{ _validationTextClassName }}">
-            {% if _validationText %}
-                {{ _validationText }}
-            {% else %}
-                {{ _unsafeValidationText | raw }}
-            {% endif %}
-        </div>
+        {%- if (_validationText and _validationText is iterable) or (_unsafeValidationText and _unsafeValidationText is iterable) -%}
+            <ul class="{{ _validationTextClassName }}">
+                {% set _list = _unsafeValidationText ? _unsafeValidationText : _validationText %}
+                {% for _item in _list %}
+                    <li>{{ _unsafeValidationText ? _item | raw : _item }}</li>
+                {% endfor %}
+            </ul>
+        {% else %}
+            <div class="{{ _validationTextClassName }}">
+                {{ _unsafeValidationText ? _unsafeValidationText | raw : _validationText }}
+            </div>
+        {%- endif -%}
     {% endif %}
 </div>
diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md
@@ -176,9 +176,9 @@ When validated on server:
 | `queueLimitBehavior`    | `'hide', 'disable', 'none'`                    | `none`                  | no       | Input behavior when the file queue is filled                          |
 | `UNSAFE_helperText`     | `string`                                       | `null`                  | no\*\*   | Unescaped custom helper text                                          |
 | `UNSAFE_label`          | `string`                                       | `null`                  | no\*     | Unescaped label text (allows HTML)                                    |
-| `UNSAFE_validationText` | `string`                                       | `null`                  | no\*\*   | Unescaped validation text                                             |
+| `UNSAFE_validationText` | `string`, `string[]`                           | `null`                  | no\*\*   | Unescaped validation text                                             |
 | `validationState`       | [Validation dictionary][dictionary-validation] | `null`                  | no       | Type of validation state                                              |
-| `validationText`        | `string`                                       | `null`                  | no\*\*   | Validation text                                                       |
+| `validationText`        | `string`, `string[]`                           | `null`                  | no\*\*   | Validation text                                                       |
 
 \*: To keep the component accessible, a label is always required. You can use the `label` for simple text or `UNSAFE_label` for HTML content.
 \*\*: Props with and without `UNSAFE_` prefix are mutually exclusive.

diff --git a/...twig/src/Resources/components/FileUploader/stories/FileUploaderInputValidationStates.twig b/...twig/src/Resources/components/FileUploader/stories/FileUploaderInputValidationStates.twig
@@ -47,7 +47,7 @@
                 label="Label"
                 name="example-validation-danger"
                 validationState="danger"
-                validationText="Danger validation message"
+                validationText="{{ [ 'Danger validation message', 'Second Danger validation message' ] }}"
             />
             <FileUploaderList />
         </FileUploader>

diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html
@@ -71,7 +71,7 @@
         </div>
       </div>
       <div class="FileUploaderInput__validationText">
-        Error message
+        <span>UNSAFE validation text</span>
       </div>
     </div>
   </body>

diff --git a/packages/web/src/scss/components/FileUploader/index.html b/packages/web/src/scss/components/FileUploader/index.html
@@ -458,7 +458,10 @@ <h3 id="attachments-fileUploadWithAttachment" hidden>Attachments</h3>
           </label>
           <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
         </div>
-        <div class="FileUploaderInput__validationText">Danger validation message</div>
+        <ul class="FileUploaderInput__validationText">
+          <li>Danger validation message</li>
+          <li>Second Danger validation message</li>
+        </ul>
       </div>
       <!-- FileUploaderInput: end -->