IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-16 03:32:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TagsInput: Fix layout issue with tags input (#33907)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-05-11 11:43:36 +02:00 committed by GitHub
parent e98a8bd11b
commit d2a1b8fd95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
View File

@ -47,27 +47,28 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />;
})}
</div>
<Input
placeholder={placeholder}
onChange={onNameChange}
value={newTagName}
onKeyUp={onKeyboardAdd}
suffix={
newTagName.length > 0 && (
<Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
Add
</Button>
)
}
/>
<div>
<Input
placeholder={placeholder}
onChange={onNameChange}
value={newTagName}
onKeyUp={onKeyboardAdd}
suffix={
newTagName.length > 0 && (
<Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
Add
</Button>
)
}
/>
</div>
</div>
);
};
const getStyles = (theme: GrafanaTheme) => ({
wrapper: css`
height: ${theme.spacing.formInputHeight}px;
min-height: ${theme.spacing.formInputHeight}px;
align-items: center;
display: flex;
flex-wrap: wrap;