[Tag] fill & [TagInput] intent props (#3237)

* add Tag fill prop

* add TagInput intent prop

* add tag fill styles & example switch

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<ITagInputProps, ITagInputSta
     }
 
     public render() {
-        const { className, disabled, fill, inputProps, large, leftIcon, placeholder, values } = this.props;
+        const { className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } = this.props;
 
         const classes = classNames(
             Classes.INPUT,
@@ -222,6 +222,7 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
                 [Classes.FILL]: fill,
                 [Classes.LARGE]: large,
             },
+            Classes.intentClass(intent),
             className,
         );
         const isLarge = classes.indexOf(Classes.LARGE) > NONE;

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();
 

packages/core/src/components/tag/tag.tsx

@@ -19,6 +19,12 @@ export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HT
      */
     active?: boolean;
 
+    /**
+     * Whether the tag should take up the full width of its container.
+     * @default false
+     */
+    fill?: boolean;
+
     /** Name of a Blueprint UI icon (or an icon element) to render before the children. */
     icon?: IconName | MaybeElement;
 
@@ -83,6 +89,7 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
             active,
             children,
             className,
+            fill,
             icon,
             intent,
             interactive,
@@ -101,6 +108,7 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
             Classes.intentClass(intent),
             {
                 [Classes.ACTIVE]: active,
+                [Classes.FILL]: fill,
                 [Classes.INTERACTIVE]: interactive,
                 [Classes.LARGE]: large,
                 [Classes.MINIMAL]: minimal,

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<IExampleProps, ITagExampleState> {
     public state: ITagExampleState = {
+        fill: false,
         icon: false,
         intent: Intent.NONE,
         interactive: false,
@@ -35,6 +37,7 @@ export class TagExample extends React.PureComponent<IExampleProps, ITagExampleSt
         tags: INITIAL_TAGS,
     };
 
+    private handleFillChange = handleBooleanChange(fill => 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<IExampleProps, ITagExampleSt
     }
 
     private renderOptions() {
-        const { icon, intent, interactive, large, minimal, removable, rightIcon, round } = this.state;
+        const { fill, icon, intent, interactive, large, minimal, removable, rightIcon, round } = this.state;
         return (
             <>
                 <H5>Props</H5>
+                <Switch label="Fill" checked={fill} onChange={this.handleFillChange} />
                 <Switch label="Large" checked={large} onChange={this.handleLargeChange} />
                 <Switch label="Minimal" checked={minimal} onChange={this.handleMinimalChange} />
                 <Switch label="Interactive" checked={interactive} onChange={this.handleInteractiveChange} />

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,24 +42,26 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
         addOnPaste: true,
         disabled: false,
         fill: false,
-        intent: false,
+        intent: "none",
         large: false,
         leftIcon: true,
-        minimal: false,
+        tagIntents: false,
+        tagMinimal: false,
         values: VALUES,
     };
 
     private handleAddOnBlurChange = handleBooleanChange(addOnBlur => this.setState({ addOnBlur }));
     private handleAddOnPasteChange = handleBooleanChange(addOnPaste => 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 = (
             <Button
@@ -72,9 +76,9 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
         // NOTE: avoid this pattern in your app (use this.getTagProps instead); this is only for
         // example purposes!!
         const getTagProps = (_v: string, index: number): ITagProps => ({
-            intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
+            intent: tagIntents ? INTENTS[index % INTENTS.length] : Intent.NONE,
             large: props.large,
-            minimal,
+            minimal: tagMinimal,
         });
 
         return (
@@ -102,9 +106,18 @@ export class TagInputExample extends React.PureComponent<IExampleProps, ITagInpu
                 <Switch label="Add on blur" checked={this.state.addOnBlur} onChange={this.handleAddOnBlurChange} />
                 <Switch label="Add on paste" checked={this.state.addOnPaste} onChange={this.handleAddOnPasteChange} />
                 <Switch label="Fill container width" checked={this.state.fill} onChange={this.handleFillChange} />
+                <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
                 <H5>Tag props</H5>
-                <Switch label="Use minimal tags" checked={this.state.minimal} onChange={this.handleMinimalChange} />
-                <Switch label="Cycle through intents" checked={this.state.intent} onChange={this.handleIntentChange} />
+                <Switch
+                    label="Use minimal tags"
+                    checked={this.state.tagMinimal}
+                    onChange={this.handleTagMinimalChange}
+                />
+                <Switch
+                    label="Cycle through intents"
+                    checked={this.state.tagIntents}
+                    onChange={this.handleTagIntentsChange}
+                />
             </>
         );
     }