Commit 7d4c5145 by Andreas Opferkuch Committed by GitHub

TagsInput: Make placeholder configurable (#30718)

PLUS
- width prop isn't actually used and thus might give users of this component the wrong idea, so I removed it from the type (and in `DataSourceHttpSettings`)
- Added storybook props table
parent 8bf09161
......@@ -160,7 +160,6 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
}
width={20}
/>
</div>
)}
......
......@@ -6,3 +6,6 @@ import { TagsInput } from './TagsInput';
# TagsInput
A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
### Props
<Props of={TagsInput} />
......@@ -6,8 +6,8 @@ import { Input } from '../Forms/Legacy/Input/Input';
import { TagItem } from './TagItem';
interface Props {
placeholder?: string;
tags?: string[];
width?: number;
onChange: (tags: string[]) => void;
}
......@@ -80,6 +80,7 @@ export class TagsInput extends PureComponent<Props, State> {
};
render() {
const { placeholder = 'Add name' } = this.props;
const { tags, newTag } = this.state;
const getStyles = stylesFactory(() => ({
......@@ -104,7 +105,7 @@ export class TagsInput extends PureComponent<Props, State> {
`
)}
>
<Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
<Input placeholder={placeholder} onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
<Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md">
Add
</Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment