file form improvements

IQSS · Jun 28, 2024 · 4044038 · 4044038
1 parent be645cd
commit 4044038
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -1,6 +1,6 @@
 import { Button, Col, Form, Modal, SelectMultiple } from '@iqss/dataverse-design-system'
 import styles from './AddTagsModal.module.scss'
-import { FormEvent, useState, KeyboardEvent } from 'react'
+import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
 
 interface AddTagsModalProps {
@@ -20,6 +20,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
   const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
   const [tag, setTag] = useState('')
   const handleClose = (saved: boolean) => update({ saved: saved, tags: tagsToAdd })
+  const tagsSelectId = useId()
   const addTagOption = () => {
     if (tag && !availableTags.includes(tag)) {
       setTagOptions([...availableTags, tag])
@@ -42,14 +43,15 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
         <div className={styles.add_tags_form}>
           <Form>
             <Form.Group>
-              <Form.Group.Label column sm={3}>
+              <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
                 {t('fileForm.tags')}
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
                   <SelectMultiple
                     options={availableTags}
-                    onChange={(newTags) => setTagsToAdd(newTags)}></SelectMultiple>
+                    onChange={(newTags) => setTagsToAdd(newTags)}
+                    inputButtonId={tagsSelectId}></SelectMultiple>
                 </div>
               </Col>
             </Form.Group>

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
@@ -6,10 +6,12 @@
 
 .tags {
     display: flex;
+    gap: 0.5rem;
 }
 
 .edit_tags_btn {
     margin: 0;
+    padding-inline: 8px;
 }
 
 .tags_select{

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,7 +1,7 @@
 import { Button, Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
-import { FormEvent } from 'react'
+import { FormEvent, useId } from 'react'
 import { Plus } from 'react-bootstrap-icons'
 import { useTranslation } from 'react-i18next'
 
@@ -14,6 +14,7 @@ interface FileFormProps {
 
 export function FileForm({ file, updateFiles, availableTags, editTagOptions }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
+  const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
     updateFiles([file])
@@ -78,25 +79,24 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
           </Col>
         </Form.Group>
         <Form.Group>
-          <Form.Group.Label column sm={3}>
+          <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
             {t('fileForm.tags')}
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
             <div className={styles.tags_select} title={t('fileForm.selectTags')}>
               <SelectMultiple
                 options={availableTags}
                 defaultValue={file.tags}
-                onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
+                onChange={(newTags) => setTags(file, newTags)}
+                inputButtonId={tagsSelectId}></SelectMultiple>
             </div>
             <Button
               className={styles.edit_tags_btn}
               variant="secondary"
               type="button"
-              {...{ size: 'sm' }}
-              withSpacing
               title={t('fileForm.editTagOptions')}
               onClick={editTagOptions}>
-              <Plus className={styles.icon} title={t('fileForm.plus')} />
+              <Plus title={t('fileForm.plus')} size={20} />
             </Button>
           </Col>
         </Form.Group>