UISACQCOMP-243 Add labelless prop to FieldTags component to hide label

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Move reusable version history hook useVersionHistoryValueResolvers to the ACQ lib. Refs UISACQCOMP-235.
 * Move reusable claiming code from `ui-receiving` to the shared library. Refs UISACQCOMP-236.
 * Support `CLAIMS` export type in the `useIntegrationConfigs` hook. Refs UISACQCOMP-238.
+* Add `labelless`, `fullWidth`, `marginBottom0` props to `FieldTags` component. Refs UISACQCOMP-243.
 
 ## [6.0.4](https://github.com/folio-org/stripes-acq-components/tree/v6.0.4) (2025-01-21)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v6.0.3...v6.0.4)

lib/FieldTags/FieldTagsContainer.js

@@ -14,9 +14,13 @@
 
 const FieldTagsContainer = ({
   formValues,
+  fullWidth,
+  labelless = false,
+  marginBottom0,
   mutator,
   name,
   resources,
+  ...props
 }) => {
   const allTags = get(resources, ['tags', 'records'], []);
   const tagSettings = get(resources, ['configTags', 'records'], []);
@@ -29,7 +33,7 @@
         description: tag,
       })
     ),
     [],
   );
 
   if (!tagsEnabled) return null;
@@ -38,8 +42,12 @@
     <FieldTagsFinal
       allTags={allTags}
       formValues={formValues}
+      fullWidth={fullWidth}
+      labelless={labelless}
+      marginBottom0={marginBottom0}
       name={name}
       onAdd={onAdd}
+      {...props}
     />
   );
 };
@@ -51,6 +59,9 @@
 
 FieldTagsContainer.propTypes = {
   formValues: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  labelless: PropTypes.bool,
+  marginBottom0: PropTypes.bool,
   mutator: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   resources: PropTypes.object.isRequired,

lib/FieldTags/FieldTagsFinal.js

@@ -26,8 +26,12 @@
 const FieldTagsFinal = ({
   allTags,
   formValues,
+  fullWidth,
+  labelless = false,
+  marginBottom0,
   name,
   onAdd,
+  ...props
 }) => {
   const { change } = useForm();
   const addTag = useCallback(
@@ -40,7 +44,7 @@
         onAdd(tag);
       }
     },
     [name, onAdd],
   );
 
   const addAction = useMemo(() => ({ onSelect: addTag, render: renderTag }), [addTag]);
@@ -63,17 +67,23 @@
       emptyMessage=" "
       filter={filterArrayValues}
       formatter={formatter}
+      fullWidth={fullWidth}
       itemToString={itemToString}
-      label={label}
+      label={!labelless && label}
+      marginBottom0={marginBottom0}
       name={name}
       validateFields={[]}
+      {...props}
     />
   );
 };
 
 FieldTagsFinal.propTypes = {
   allTags: PropTypes.arrayOf(PropTypes.object),
   formValues: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  labelless: PropTypes.bool,
+  marginBottom0: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onAdd: PropTypes.func.isRequired,
 };

lib/FileUploader/FileUploader.js

@@ -30,7 +30,10 @@ const FileUploader = ({ onSelectFile }) => {
         ({ getRootProps, getInputProps, open }) => (
           <div {...getRootProps(defaultRootProps)}>
             <div className={css.fileUploader}>
-              <input {...getInputProps()} />
+              <input
+                data-testid="file-uploader-input"
+                {...getInputProps()}
+              />
 
               <div className={css.fileUploaderTitle}>
                 <FormattedMessage id="stripes-acq-components.fileUploader.dropFile" />