diff --git a/packages/core/src/components/tag-input/tagInput.tsx b/packages/core/src/components/tag-input/tagInput.tsx index ad4f9fb89e..6bba2a64a2 100644 --- a/packages/core/src/components/tag-input/tagInput.tsx +++ b/packages/core/src/components/tag-input/tagInput.tsx @@ -10,12 +10,12 @@ import * as React from "react"; import { AbstractPureComponent } from "../../common/abstractPureComponent"; import * as Classes from "../../common/classes"; import * as Keys from "../../common/keys"; -import { DISPLAYNAME_PREFIX, HTMLInputProps, IProps, MaybeElement } from "../../common/props"; +import { DISPLAYNAME_PREFIX, HTMLInputProps, IIntentProps, IProps, MaybeElement } from "../../common/props"; import * as Utils from "../../common/utils"; import { Icon, IconName } from "../icon/icon"; import { ITagProps, Tag } from "../tag/tag"; -export interface ITagInputProps extends IProps { +export interface ITagInputProps extends IIntentProps, IProps { /** * If true, `onAdd` will be invoked when the input loses focus. * Otherwise, `onAdd` is only invoked when `enter` is pressed. @@ -211,7 +211,7 @@ export class TagInput extends AbstractPureComponent NONE; diff --git a/packages/core/src/components/tag/_tag.scss b/packages/core/src/components/tag/_tag.scss index 1fa0583dfe..504ee2cf34 100644 --- a/packages/core/src/components/tag/_tag.scss +++ b/packages/core/src/components/tag/_tag.scss @@ -50,6 +50,11 @@ Styleguide tag } } + &.#{$ns}-fill { + display: flex; + width: 100%; + } + &.#{$ns}-minimal { @include pt-tag-minimal(); diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx index b124183f13..fef6687245 100644 --- a/packages/core/src/components/tag/tag.tsx +++ b/packages/core/src/components/tag/tag.tsx @@ -19,6 +19,12 @@ export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes { active, children, className, + fill, icon, intent, interactive, @@ -101,6 +108,7 @@ export class Tag extends React.PureComponent { Classes.intentClass(intent), { [Classes.ACTIVE]: active, + [Classes.FILL]: fill, [Classes.INTERACTIVE]: interactive, [Classes.LARGE]: large, [Classes.MINIMAL]: minimal, diff --git a/packages/docs-app/src/examples/core-examples/tagExample.tsx b/packages/docs-app/src/examples/core-examples/tagExample.tsx index f29d8d3774..51c4684c31 100644 --- a/packages/docs-app/src/examples/core-examples/tagExample.tsx +++ b/packages/docs-app/src/examples/core-examples/tagExample.tsx @@ -11,6 +11,7 @@ import { Example, handleBooleanChange, handleStringChange, IExampleProps } from import { IntentSelect } from "./common/intentSelect"; export interface ITagExampleState { + fill: boolean; icon: boolean; intent: Intent; interactive: boolean; @@ -24,6 +25,7 @@ export interface ITagExampleState { export class TagExample extends React.PureComponent { public state: ITagExampleState = { + fill: false, icon: false, intent: Intent.NONE, interactive: false, @@ -35,6 +37,7 @@ export class TagExample extends React.PureComponent this.setState({ fill })); private handleIconChange = handleBooleanChange(icon => this.setState({ icon })); private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent })); private handleInteractiveChange = handleBooleanChange(interactive => this.setState({ interactive })); @@ -68,10 +71,11 @@ export class TagExample extends React.PureComponent
Props
+ diff --git a/packages/docs-app/src/examples/core-examples/tagInputExample.tsx b/packages/docs-app/src/examples/core-examples/tagInputExample.tsx index e7069e9f0f..e90e7fa5ec 100644 --- a/packages/docs-app/src/examples/core-examples/tagInputExample.tsx +++ b/packages/docs-app/src/examples/core-examples/tagInputExample.tsx @@ -7,7 +7,8 @@ import * as React from "react"; import { Button, H5, Intent, ITagProps, Switch, TagInput } from "@blueprintjs/core"; -import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme"; +import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme"; +import { IntentSelect } from "./common/intentSelect"; const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING]; @@ -27,10 +28,11 @@ export interface ITagInputExampleState { addOnPaste: boolean; disabled: boolean; fill: boolean; - intent: boolean; + intent: Intent; large: boolean; leftIcon: boolean; - minimal: boolean; + tagIntents: boolean; + tagMinimal: boolean; values: React.ReactNode[]; } @@ -40,10 +42,11 @@ export class TagInputExample extends React.PureComponent this.setState({ addOnPaste })); private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled })); private handleFillChange = handleBooleanChange(fill => this.setState({ fill })); - private handleIntentChange = handleBooleanChange(intent => this.setState({ intent })); + private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent })); private handleLargeChange = handleBooleanChange(large => this.setState({ large })); private handleLeftIconChange = handleBooleanChange(leftIcon => this.setState({ leftIcon })); - private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal })); + private handleTagIntentsChange = handleBooleanChange(tagIntents => this.setState({ tagIntents })); + private handleTagMinimalChange = handleBooleanChange(tagMinimal => this.setState({ tagMinimal })); public render() { - const { minimal, values, ...props } = this.state; + const { tagIntents, tagMinimal, values, ...props } = this.state; const clearButton = (