diff --git a/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.module.scss b/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.module.scss index 921a976..926f2af 100644 --- 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 index d87ef67..fbb03f5 100644 --- 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 index cfbc5e8..ab88b22 100644 --- a/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx +++ b/src/components/forms/fields/InputFieldWithTags/InputFieldWithTags.tsx @@ -40,7 +40,7 @@ export type InputFieldWithTagsProps = Omit, '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) => onRemoveTag(idx)}/>) )} - +
+ +
);