From 1d61da4eb2c8d99893b3b343859d12c6c6e9fbb4 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Tue, 13 Mar 2018 14:04:46 -0700
Subject: [PATCH 1/2] Tag remove button renders Icon

---
 packages/core/src/components/tag/_common.scss | 10 +++++--
 packages/core/src/components/tag/tag.tsx      | 28 +++++++++----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/components/tag/_common.scss b/packages/core/src/components/tag/_common.scss
index bbbcfff2b2..b506095e85 100644
--- a/packages/core/src/components/tag/_common.scss
+++ b/packages/core/src/components/tag/_common.scss
@@ -82,7 +82,6 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
 }
 
 @mixin pt-tag-remove() {
-  @include pt-icon();
   position: absolute;
   top: 0;
   right: 0;
@@ -103,12 +102,17 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
     opacity: 1;
   }
 
-  &::before {
+  // CSS API support
+  &:empty::before {
+    @include pt-icon();
     content: $pt-icon-small-cross;
   }
 
   .pt-large & {
-    @include pt-icon-sized($pt-icon-size-large);
     padding: $tag-padding-large;
+
+    &:empty::before {
+      @include pt-icon-sized($pt-icon-size-large);
+    }
   }
 }
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
index 495f716eea..ddd8ef3960 100644
--- a/packages/core/src/components/tag/tag.tsx
+++ b/packages/core/src/components/tag/tag.tsx
@@ -7,10 +7,8 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Utils } from "../../common";
-import { IIntentProps, IProps, removeNonHTMLProps } from "../../common/props";
-
-import * as Classes from "../../common/classes";
+import { Classes, IIntentProps, IProps, Utils } from "../../common";
+import { Icon } from "../icon/icon";
 
 export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -31,26 +29,28 @@ export class Tag extends React.PureComponent<ITagProps, {}> {
     public static displayName = "Blueprint2.Tag";
 
     public render() {
-        const { active, className, intent, onRemove } = this.props;
+        const { active, children, className, intent, onRemove, ...htmlProps } = this.props;
+        const isRemovable = Utils.isFunction(onRemove);
         const tagClasses = classNames(
             Classes.TAG,
             Classes.intentClass(intent),
             {
-                [Classes.TAG_REMOVABLE]: onRemove != null,
+                [Classes.TAG_REMOVABLE]: isRemovable,
                 [Classes.ACTIVE]: active,
             },
             className,
         );
-        const button = Utils.isFunction(onRemove) ? (
-            <button type="button" className={Classes.TAG_REMOVE} onClick={this.onRemoveClick} />
-        ) : (
-            undefined
-        );
+        const isLarge = tagClasses.indexOf(Classes.LARGE) >= 0;
+        const removeButton = isRemovable ? (
+            <button type="button" className={Classes.TAG_REMOVE} onClick={this.onRemoveClick}>
+                <Icon icon="small-cross" iconSize={isLarge ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD} />
+            </button>
+        ) : null;
 
         return (
-            <span {...removeNonHTMLProps(this.props)} className={tagClasses}>
-                {this.props.children}
-                {button}
+            <span {...htmlProps} className={tagClasses}>
+                {children}
+                {removeButton}
             </span>
         );
     }

From db09db15803f92c9798f96176797eca5c569f989 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Tue, 13 Mar 2018 14:05:10 -0700
Subject: [PATCH 2/2] add options to TagExample, move to top of docs

---
 packages/core/src/components/tag/tag.md       |  3 +-
 .../src/examples/core-examples/tagExample.tsx | 86 +++++++++++--------
 2 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/packages/core/src/components/tag/tag.md b/packages/core/src/components/tag/tag.md
index 14af2d4d43..33e9c9706d 100644
--- a/packages/core/src/components/tag/tag.md
+++ b/packages/core/src/components/tag/tag.md
@@ -2,6 +2,8 @@
 
 Tags are great for lists of strings.
 
+@reactExample TagExample
+
 @## CSS API
 
 An optional "remove" button can be added inside a tag as a `button.pt-tag-remove`. Also add the
@@ -41,4 +43,3 @@ Blueprint class name.
 
 @interface ITagProps
 
-@reactExample TagExample
diff --git a/packages/docs-app/src/examples/core-examples/tagExample.tsx b/packages/docs-app/src/examples/core-examples/tagExample.tsx
index 5a73ac1f43..fb11fbba84 100644
--- a/packages/docs-app/src/examples/core-examples/tagExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/tagExample.tsx
@@ -6,53 +6,63 @@
 
 import * as React from "react";
 
-import { Classes, Intent, Tag } from "@blueprintjs/core";
-import { BaseExample } from "@blueprintjs/docs-theme";
+import { Button, Classes, Intent, Switch, Tag } from "@blueprintjs/core";
+import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
+import classNames from "classnames";
+import { IntentSelect } from "./common/intentSelect";
 
-export class TagExample extends BaseExample<{ showTag?: boolean }> {
-    public state = {
-        showTag: true,
+export interface ITagExampleState {
+    intent: Intent;
+    large: boolean;
+    minimal: boolean;
+    removable: boolean;
+    tags: string[];
+}
+
+export class TagExample extends BaseExample<ITagExampleState> {
+    public state: ITagExampleState = {
+        intent: Intent.NONE,
+        large: false,
+        minimal: false,
+        removable: false,
+        tags: INITIAL_TAGS,
     };
 
     protected className = "docs-tag-example";
 
-    protected renderExample() {
-        return (
-            <div>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @jkillian
-                </Tag>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @adahiya
-                </Tag>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @ggray
-                </Tag>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @allorca
-                </Tag>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @bdwyer
-                </Tag>
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY}>
-                    @piotrk
-                </Tag>
-                {this.maybeRenderTag()}
-            </div>
-        );
-    }
+    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
+    private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
+    private handleRemovableChange = handleBooleanChange(removable => this.setState({ removable }));
 
-    private maybeRenderTag() {
-        if (this.state.showTag) {
+    protected renderExample() {
+        const { intent, large, minimal, removable } = this.state;
+        const tagClasses = classNames({ [Classes.LARGE]: large, [Classes.MINIMAL]: minimal });
+        const tags = this.state.tags.map(tag => {
+            const onRemove = () => this.setState({ tags: this.state.tags.filter(t => t !== tag) });
             return (
-                <Tag className={Classes.MINIMAL} intent={Intent.PRIMARY} onRemove={this.deleteTag}>
-                    @dlipowicz
+                <Tag key={tag} className={tagClasses} intent={intent} onRemove={removable && onRemove}>
+                    {tag}
                 </Tag>
             );
-        } else {
-            return undefined;
-        }
+        });
+        return <div>{tags}</div>;
     }
 
-    private deleteTag = () => this.setState({ showTag: false });
+    protected renderOptions() {
+        const { intent, large, minimal, removable } = this.state;
+        return [
+            [
+                <Switch key="large" label="Large" checked={large} onChange={this.handleLargeChange} />,
+                <Switch key="minimal" label="Minimal" checked={minimal} onChange={this.handleMinimalChange} />,
+                <Switch key="removable" label="Removable" checked={removable} onChange={this.handleRemovableChange} />,
+            ],
+            [<IntentSelect key="intent" intent={intent} onChange={this.handleIntentChange} />],
+            [<Button key="reset" text="Reset tags" onClick={this.resetTags} />],
+        ];
+    }
+
+    private resetTags = () => this.setState({ tags: INITIAL_TAGS });
 }
+
+const INITIAL_TAGS = ["@jkillian", "@adahiya", "@ggray", "@allorca", "@bdwyer", "@piotrk"];