Fix line wrap + visual adjustments

fortanix · Nov 21, 2024 · 20f4756 · 20f4756
1 parent 91eac39
commit 20f4756
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.module.scss b/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.module.scss
@@ -11,6 +11,7 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
+    padding-bottom: 1px;
     border-bottom: 1px solid bk.$theme-form-rule-default;
 
     .bk-input-field-with-tags__label {
@@ -34,6 +35,15 @@
   .bk-input-field-with-tags__container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     gap: bk.$spacing-2;
   }
+
+  .bk-input-field-with-tags__input-container {
+    flex-grow: 1;
+
+    input {
+      width: 100%;
+    }
+  }
 }
diff --git a/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.stories.tsx b/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.stories.tsx
@@ -20,6 +20,10 @@ export default {
   component: InputFieldWithTags,
   parameters: {
     layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ymWCnsGfIsC2zCz17Ur11Z/Design-System-UX?node-id=3606-101183&node-type=instance&m=dev',
+    }
   },
   tags: ['autodocs'],
   argTypes: {

diff --git a/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx b/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx
@@ -40,7 +40,7 @@ export type InputFieldWithTagsProps = Omit<ComponentProps<'input'>, 'value'> & {
   onUpdateTags?: undefined | ((tags: string[]) => void),
 };
 /**
- * Input field.
+ * Input field with tags. Enter creates a new tag, backspace erases last tag.
  */
 export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
   const {
@@ -115,16 +115,18 @@ export const InputFieldWithTags = (props: InputFieldWithTagsProps) => {
           // biome-ignore lint/suspicious/noArrayIndexKey: no other unique identifier available
           tags.map((tag, idx) => <Tag key={idx} content={tag} onRemove={() => onRemoveTag(idx)}/>)
         )}
-        <Input
-          {...inputProps}
-          unstyled={true}
-          id={controlId}
-          form={formContext.formId}
-          className={cx(cl['bk-input-field-with-tags__control'], inputProps.className)}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          value={value}
-        />
+        <div className={cl['bk-input-field-with-tags__input-container']}>
+          <Input
+            {...inputProps}
+            unstyled={true}
+            id={controlId}
+            form={formContext.formId}
+            className={cx(cl['bk-input-field-with-tags__control'], inputProps.className)}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            value={value}
+          />
+        </div>
       </div>
     </div>
   );