From 20f4d773c4c29562caee2eb67fc030b12854d98a Mon Sep 17 00:00:00 2001
From: Charles Perinet <cperinet@palantir.com>
Date: Wed, 29 Jan 2020 18:43:00 +0000
Subject: [PATCH 1/7] Button Outline

---
 packages/core/src/common/classes.ts           |  1 +
 .../core/src/components/button/_button.scss   |  7 +++
 .../core/src/components/button/_common.scss   | 57 +++++++++++++++++++
 .../src/components/button/abstractButton.tsx  |  6 +-
 .../examples/core-examples/buttonsExample.tsx |  4 ++
 5 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index 14740fab0a..d31f2955f1 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -35,6 +35,7 @@ export const INTERACTIVE = `${NS}-interactive`;
 export const LARGE = `${NS}-large`;
 export const LOADING = `${NS}-loading`;
 export const MINIMAL = `${NS}-minimal`;
+export const OUTLINE = `${NS}-outline`;
 export const MULTILINE = `${NS}-multiline`;
 export const ROUND = `${NS}-round`;
 export const SMALL = `${NS}-small`;
diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
index 15f9d78745..be9072c172 100644
--- a/packages/core/src/components/button/_button.scss
+++ b/packages/core/src/components/button/_button.scss
@@ -19,6 +19,7 @@ Markup:
 .#{$ns}-intent-warning - Warning intent
 .#{$ns}-intent-danger - Danger intent
 .#{$ns}-minimal - More subtle appearance
+.#{$ns}-outline - Subtle yet structured appearance
 .#{$ns}-large - Larger size
 .#{$ns}-small - Smaller size
 .#{$ns}-fill - Fill parent container
@@ -163,6 +164,12 @@ Styleguide button
   &.#{$ns}-minimal {
     @include pt-button-minimal();
   }
+
+  // outline is based on the styles of minimal
+  &.#{$ns}-outline {
+    @include pt-button-minimal();
+    @include pt-button-outline();
+  }
 }
 
 a.#{$ns}-button {
diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index 10c82fbbfc..9e727928f6 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -85,6 +85,10 @@ $dark-minimal-button-background-color: none !default;
 $dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
 $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 
+$button-outline-width: 1px !default;
+$button-outline-border-intent-opacity: 0.6 !default;
+$button-outline-border-disabled-intent-opacity: 0.2 !default;
+
 // "intent": (default, hover, active colors)
 $button-intents: (
   "primary": ($pt-intent-primary, $blue2, $blue1),
@@ -448,3 +452,56 @@ $button-intents: (
   }
 }
 
+@mixin pt-button-outline() {
+  border: $button-outline-width solid rgba($pt-text-color, 0.2);
+  box-sizing: border-box;
+
+  &:disabled,
+  &.#{$ns}-disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled:hover {
+    border-color: rgba($pt-text-color-disabled, 0.1);
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-button-outline();
+  }
+
+  @each $intent, $colors in $button-intents {
+    &.#{$ns}-intent-#{$intent} {
+      @include pt-button-outline-intent(
+        map-get($pt-intent-text-colors, $intent),
+        map-get($pt-dark-intent-text-colors, $intent)
+      );
+    }
+  }
+}
+
+@mixin pt-dark-button-outline() {
+  border-color: rgba($white, 0.4);
+
+  &:disabled,
+  &:disabled:hover,
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
+    border-color: rgba($white, 0.2);
+  }
+}
+
+@mixin pt-button-outline-intent( $text-color, $dark-text-color) {
+  border-color: rgba($text-color, $button-outline-border-intent-opacity);
+
+  &:disabled,
+  &.#{$ns}-disabled {
+    border-color: rgba($text-color, $button-outline-border-disabled-intent-opacity);
+  }
+
+  .#{$ns}-dark & {
+    border-color: rgba($dark-text-color, $button-outline-border-intent-opacity);
+
+    &:disabled,
+    &.#{$ns}-disabled {
+      border-color: rgba($dark-text-color, $button-outline-border-disabled-intent-opacity);
+    }
+  }
+}
diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index 36b31324be..c5dc30c839 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -57,6 +57,9 @@ export interface IButtonProps extends IActionProps {
     /** Whether this button should use minimal styles. */
     minimal?: boolean;
 
+    /** Wheather this button should use outline styles. */
+    outline?: boolean;
+
     /** Name of a Blueprint UI icon (or an icon element) to render after the text. */
     rightIcon?: IconName | MaybeElement;
 
@@ -96,7 +99,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     public abstract render(): JSX.Element;
 
     protected getCommonButtonProps() {
-        const { alignText, fill, large, loading, minimal, small, tabIndex } = this.props;
+        const { alignText, fill, large, loading, outline, minimal, small, tabIndex } = this.props;
         const disabled = this.props.disabled || loading;
 
         const className = classNames(
@@ -108,6 +111,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
                 [Classes.LARGE]: large,
                 [Classes.LOADING]: loading,
                 [Classes.MINIMAL]: minimal,
+                [Classes.OUTLINE]: outline,
                 [Classes.SMALL]: small,
             },
             Classes.alignmentClass(alignText),
diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index d756f8537b..d1a294137d 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -29,6 +29,7 @@ export interface IButtonsExampleState {
     loading: boolean;
     large: boolean;
     minimal: boolean;
+    outline: boolean;
     wiggling: boolean;
 }
 
@@ -41,6 +42,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
         large: false,
         loading: false,
         minimal: false,
+        outline: false,
         wiggling: false,
     };
 
@@ -50,6 +52,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
+    private handleOutlineChange = handleBooleanChange(outline => this.setState({ outline }));
     private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
 
     private wiggleTimeoutId: number;
@@ -69,6 +72,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Loading" checked={this.state.loading} onChange={this.handleLoadingChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
+                <Switch label="Outline" checked={this.state.outline} onChange={this.handleOutlineChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
                 <H5>Example</H5>
                 <Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />

From 17502b1f5c1074ef412592ceaf904fc232b8f577 Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:14:14 +0000
Subject: [PATCH 2/7] Fix whitre space

---
 packages/core/src/components/button/_common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index 9e727928f6..3c66bc0cb7 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -488,7 +488,7 @@ $button-intents: (
   }
 }
 
-@mixin pt-button-outline-intent( $text-color, $dark-text-color) {
+@mixin pt-button-outline-intent($text-color, $dark-text-color) {
   border-color: rgba($text-color, $button-outline-border-intent-opacity);
 
   &:disabled,

From ca201d6675b12608ce708e994c63af5e5a56f75e Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:14:54 +0000
Subject: [PATCH 3/7] Fix typo

---
 packages/core/src/components/button/abstractButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index c5dc30c839..d9ed460e8b 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -57,7 +57,7 @@ export interface IButtonProps extends IActionProps {
     /** Whether this button should use minimal styles. */
     minimal?: boolean;
 
-    /** Wheather this button should use outline styles. */
+    /** Whether this button should use outline styles. */
     outline?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render after the text. */

From ddc295c5a3e886c849cc81dabf8bacf04bd1032a Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:26:11 +0000
Subject: [PATCH 4/7] Rename outline to outlined

---
 packages/core/src/common/classes.ts           |  2 +-
 .../core/src/components/button/_button.scss   |  6 ++---
 .../core/src/components/button/_common.scss   | 22 +++++++++----------
 .../src/components/button/abstractButton.tsx  |  8 +++----
 .../examples/core-examples/buttonsExample.tsx |  8 +++----
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index d31f2955f1..b46f668bf0 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -35,7 +35,7 @@ export const INTERACTIVE = `${NS}-interactive`;
 export const LARGE = `${NS}-large`;
 export const LOADING = `${NS}-loading`;
 export const MINIMAL = `${NS}-minimal`;
-export const OUTLINE = `${NS}-outline`;
+export const OUTLINED = `${NS}-outlined`;
 export const MULTILINE = `${NS}-multiline`;
 export const ROUND = `${NS}-round`;
 export const SMALL = `${NS}-small`;
diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
index be9072c172..d674046e3e 100644
--- a/packages/core/src/components/button/_button.scss
+++ b/packages/core/src/components/button/_button.scss
@@ -19,7 +19,7 @@ Markup:
 .#{$ns}-intent-warning - Warning intent
 .#{$ns}-intent-danger - Danger intent
 .#{$ns}-minimal - More subtle appearance
-.#{$ns}-outline - Subtle yet structured appearance
+.#{$ns}-outlined - Subtle yet structured appearance
 .#{$ns}-large - Larger size
 .#{$ns}-small - Smaller size
 .#{$ns}-fill - Fill parent container
@@ -166,9 +166,9 @@ Styleguide button
   }
 
   // outline is based on the styles of minimal
-  &.#{$ns}-outline {
+  &.#{$ns}-outlined {
     @include pt-button-minimal();
-    @include pt-button-outline();
+    @include pt-button-outlined();
   }
 }
 
diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index 3c66bc0cb7..d3070ca526 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -85,9 +85,9 @@ $dark-minimal-button-background-color: none !default;
 $dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
 $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 
-$button-outline-width: 1px !default;
-$button-outline-border-intent-opacity: 0.6 !default;
-$button-outline-border-disabled-intent-opacity: 0.2 !default;
+$button-outlined-width: 1px !default;
+$button-outlined-border-intent-opacity: 0.6 !default;
+$button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
 // "intent": (default, hover, active colors)
 $button-intents: (
@@ -452,8 +452,8 @@ $button-intents: (
   }
 }
 
-@mixin pt-button-outline() {
-  border: $button-outline-width solid rgba($pt-text-color, 0.2);
+@mixin pt-button-outlined() {
+  border: $button-outlined-width solid rgba($pt-text-color, 0.2);
   box-sizing: border-box;
 
   &:disabled,
@@ -464,7 +464,7 @@ $button-intents: (
   }
 
   .#{$ns}-dark & {
-    @include pt-dark-button-outline();
+    @include pt-dark-button-outlined();
   }
 
   @each $intent, $colors in $button-intents {
@@ -477,7 +477,7 @@ $button-intents: (
   }
 }
 
-@mixin pt-dark-button-outline() {
+@mixin pt-dark-button-outlined() {
   border-color: rgba($white, 0.4);
 
   &:disabled,
@@ -489,19 +489,19 @@ $button-intents: (
 }
 
 @mixin pt-button-outline-intent($text-color, $dark-text-color) {
-  border-color: rgba($text-color, $button-outline-border-intent-opacity);
+  border-color: rgba($text-color, $button-outlined-border-intent-opacity);
 
   &:disabled,
   &.#{$ns}-disabled {
-    border-color: rgba($text-color, $button-outline-border-disabled-intent-opacity);
+    border-color: rgba($text-color, $button-outlined-border-disabled-intent-opacity);
   }
 
   .#{$ns}-dark & {
-    border-color: rgba($dark-text-color, $button-outline-border-intent-opacity);
+    border-color: rgba($dark-text-color, $button-outlined-border-intent-opacity);
 
     &:disabled,
     &.#{$ns}-disabled {
-      border-color: rgba($dark-text-color, $button-outline-border-disabled-intent-opacity);
+      border-color: rgba($dark-text-color, $button-outlined-border-disabled-intent-opacity);
     }
   }
 }
diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index d9ed460e8b..0dc9e3c5d9 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -57,8 +57,8 @@ export interface IButtonProps extends IActionProps {
     /** Whether this button should use minimal styles. */
     minimal?: boolean;
 
-    /** Whether this button should use outline styles. */
-    outline?: boolean;
+    /** Whether this button should use outlined styles. */
+    outlined?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render after the text. */
     rightIcon?: IconName | MaybeElement;
@@ -99,7 +99,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     public abstract render(): JSX.Element;
 
     protected getCommonButtonProps() {
-        const { alignText, fill, large, loading, outline, minimal, small, tabIndex } = this.props;
+        const { alignText, fill, large, loading, outlined, minimal, small, tabIndex } = this.props;
         const disabled = this.props.disabled || loading;
 
         const className = classNames(
@@ -111,7 +111,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
                 [Classes.LARGE]: large,
                 [Classes.LOADING]: loading,
                 [Classes.MINIMAL]: minimal,
-                [Classes.OUTLINE]: outline,
+                [Classes.OUTLINED]: outlined,
                 [Classes.SMALL]: small,
             },
             Classes.alignmentClass(alignText),
diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index d1a294137d..4acec8233d 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -29,7 +29,7 @@ export interface IButtonsExampleState {
     loading: boolean;
     large: boolean;
     minimal: boolean;
-    outline: boolean;
+    outlined: boolean;
     wiggling: boolean;
 }
 
@@ -42,7 +42,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
         large: false,
         loading: false,
         minimal: false,
-        outline: false,
+        outlined: false,
         wiggling: false,
     };
 
@@ -52,7 +52,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
-    private handleOutlineChange = handleBooleanChange(outline => this.setState({ outline }));
+    private handleOutlineChange = handleBooleanChange(outlined => this.setState({ outlined }));
     private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
 
     private wiggleTimeoutId: number;
@@ -72,7 +72,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Loading" checked={this.state.loading} onChange={this.handleLoadingChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
-                <Switch label="Outline" checked={this.state.outline} onChange={this.handleOutlineChange} />
+                <Switch label="Outline" checked={this.state.outlined} onChange={this.handleOutlineChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
                 <H5>Example</H5>
                 <Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />

From 464b07089dd385a3745847507679ffdb241982aa Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:41:10 +0000
Subject: [PATCH 5/7] Nit

---
 packages/core/src/components/button/_common.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index d3070ca526..af8c0f8810 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -469,7 +469,7 @@ $button-intents: (
 
   @each $intent, $colors in $button-intents {
     &.#{$ns}-intent-#{$intent} {
-      @include pt-button-outline-intent(
+      @include pt-button-outlined-intent(
         map-get($pt-intent-text-colors, $intent),
         map-get($pt-dark-intent-text-colors, $intent)
       );
@@ -488,7 +488,7 @@ $button-intents: (
   }
 }
 
-@mixin pt-button-outline-intent($text-color, $dark-text-color) {
+@mixin pt-button-outlined-intent($text-color, $dark-text-color) {
   border-color: rgba($text-color, $button-outlined-border-intent-opacity);
 
   &:disabled,

From 64bb08ced01bf66c20f44bca90c815974469ae14 Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:42:39 +0000
Subject: [PATCH 6/7] Nit

---
 packages/docs-app/src/examples/core-examples/buttonsExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index 4acec8233d..87e8c384c6 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -72,7 +72,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Loading" checked={this.state.loading} onChange={this.handleLoadingChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
-                <Switch label="Outline" checked={this.state.outlined} onChange={this.handleOutlineChange} />
+                <Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlineChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
                 <H5>Example</H5>
                 <Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />

From 04e1282c2117f9e0574d72cc21b3315d67f9e91a Mon Sep 17 00:00:00 2001
From: Charles Perinet <charles.perinet@gmail.com>
Date: Mon, 3 Feb 2020 18:43:29 +0000
Subject: [PATCH 7/7] Nit

---
 .../docs-app/src/examples/core-examples/buttonsExample.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
index 87e8c384c6..c5d9ac8120 100644
--- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx
@@ -52,7 +52,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
-    private handleOutlineChange = handleBooleanChange(outlined => this.setState({ outlined }));
+    private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
     private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
 
     private wiggleTimeoutId: number;
@@ -72,7 +72,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Loading" checked={this.state.loading} onChange={this.handleLoadingChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
-                <Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlineChange} />
+                <Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlinedChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
                 <H5>Example</H5>
                 <Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />