From 8df59aba00d62a72d50cb0ad3e94ceed63f36ce3 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Wed, 23 Aug 2023 15:28:14 -0700
Subject: [PATCH] fix(split-button): update divider and borders to follow
 design spec (#7568)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** #6364

## Summary

✨💅✨

**Note**: this also applies `border-1` to `calcite-button` with
`appearance="outline-fill"`.
---
 .../src/components/button/button.scss         |  2 +-
 .../src/components/button/button.stories.ts   | 23 +++++++++-
 .../components/split-button/split-button.scss |  9 ++--
 .../split-button/split-button.stories.ts      | 44 +++++++++++++++++--
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 59fb04da5ff..0c9939090f8 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -367,7 +367,7 @@
   button,
   a {
     @apply text-color-1 bg-foreground-1;
-    border-color: theme("backgroundColor.foreground.3");
+    border-color: theme("borderColor.color.1");
     &:hover {
       box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
     }
diff --git a/packages/calcite-components/src/components/button/button.stories.ts b/packages/calcite-components/src/components/button/button.stories.ts
index db7dfa66701..911613a18af 100644
--- a/packages/calcite-components/src/components/button/button.stories.ts
+++ b/packages/calcite-components/src/components/button/button.stories.ts
@@ -157,5 +157,24 @@ export const darkModeRTL_TestOnly = (): string => html`
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const outlineNeutralBorderColor_TestOnly = (): string =>
-  html`<calcite-button appearance="outline" kind="neutral">Test</calcite-button>`;
+export const appearanceAndKindCombinations_TestOnly = (): string => html`
+  <calcite-button scale="s" appearance="outline" kind="brand">outline+brand</calcite-button>
+  <calcite-button scale="s" appearance="outline" kind="danger">outline+danger</calcite-button>
+  <calcite-button scale="s" appearance="outline" kind="inverse">outline+inverse</calcite-button>
+  <calcite-button scale="s" appearance="outline" kind="neutral">outline+neutral</calcite-button>
+
+  <calcite-button scale="s" appearance="outline-fill" kind="brand">outline-fill+brand</calcite-button>
+  <calcite-button scale="s" appearance="outline-fill" kind="danger">outline-fill+danger</calcite-button>
+  <calcite-button scale="s" appearance="outline-fill" kind="inverse">outline-fill+inverse</calcite-button>
+  <calcite-button scale="s" appearance="outline-fill" kind="neutral">outline-fill+neutral</calcite-button>
+
+  <calcite-button scale="s" appearance="solid" kind="brand">solid+brand</calcite-button>
+  <calcite-button scale="s" appearance="solid" kind="danger">solid+danger</calcite-button>
+  <calcite-button scale="s" appearance="solid" kind="inverse">solid+inverse</calcite-button>
+  <calcite-button scale="s" appearance="solid" kind="neutral">solid+neutral</calcite-button>
+
+  <calcite-button scale="s" appearance="transparent" kind="brand">transparent+brand</calcite-button>
+  <calcite-button scale="s" appearance="transparent" kind="danger">transparent+danger</calcite-button>
+  <calcite-button scale="s" appearance="transparent" kind="inverse">transparent+inverse</calcite-button>
+  <calcite-button scale="s" appearance="transparent" kind="neutral">transparent+neutral</calcite-button>
+`;
diff --git a/packages/calcite-components/src/components/split-button/split-button.scss b/packages/calcite-components/src/components/split-button/split-button.scss
index e9000a0dfa2..4ae15eae7cf 100644
--- a/packages/calcite-components/src/components/split-button/split-button.scss
+++ b/packages/calcite-components/src/components/split-button/split-button.scss
@@ -33,12 +33,15 @@
 :host([appearance="transparent"]) {
   &:host([kind="brand"]) {
     --calcite-split-button-divider: theme("colors.brand");
+    --calcite-split-button-background: transparent;
   }
   &:host([kind="danger"]) {
     --calcite-split-button-divider: theme("colors.danger");
+    --calcite-split-button-background: transparent;
   }
   &:host([kind="neutral"]) {
     --calcite-split-button-divider: theme("colors.color.1");
+    --calcite-split-button-background: transparent;
   }
   &:host([kind="inverse"]) {
     --calcite-split-button-divider: theme("colors.background.foreground.1");
@@ -46,8 +49,7 @@
   }
 }
 
-:host([appearance="outline"]),
-:host([appearance="transparent"]) {
+:host([appearance="outline"]) {
   --calcite-split-button-background: transparent;
 }
 
@@ -64,7 +66,8 @@
     --calcite-split-button-divider: theme("colors.danger");
   }
   &:host([kind="neutral"]) {
-    --calcite-split-button-divider: theme("colors.background.foreground.3");
+    --calcite-split-button-divider: theme("borderColor.color.1");
+    --calcite-split-button-background: theme("borderColor.color.1");
   }
   &:host([kind="inverse"]) {
     --calcite-split-button-divider: var(--calcite-ui-inverse);
diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts
index 96e65629dd3..7b7fab0a5ac 100644
--- a/packages/calcite-components/src/components/split-button/split-button.stories.ts
+++ b/packages/calcite-components/src/components/split-button/split-button.stories.ts
@@ -120,6 +120,44 @@ export const disabled_TestOnly = (): string => html`<calcite-split-button disabl
   </calcite-dropdown-group>
 </calcite-split-button>`;
 
-export const transparentWithInverseKind_TestOnly = (): string =>
-  html`<calcite-split-button scale="s" primary-text="Button" appearance="transparent" kind="inverse">
-  </calcite-split-button>`;
+export const appearanceAndKindCombinations_TestOnly = (): string => html`
+  <calcite-split-button primary-text="outline+brand" appearance="outline" kind="brand"></calcite-split-button>
+  <calcite-split-button primary-text="outline+danger" appearance="outline" kind="danger"></calcite-split-button>
+  <calcite-split-button primary-text="outline+inverse" appearance="outline" kind="inverse"></calcite-split-button>
+  <calcite-split-button primary-text="outline+neutral" appearance="outline" kind="neutral"></calcite-split-button>
+
+  <calcite-split-button primary-text="outline-fill+brand" appearance="outline-fill" kind="brand"></calcite-split-button>
+  <calcite-split-button
+    primary-text="outline-fill+danger"
+    appearance="outline-fill"
+    kind="danger"
+  ></calcite-split-button>
+  <calcite-split-button
+    primary-text="outline-fill+inverse"
+    appearance="outline-fill"
+    kind="inverse"
+  ></calcite-split-button>
+  <calcite-split-button
+    primary-text="outline-fill+neutral"
+    appearance="outline-fill"
+    kind="neutral"
+  ></calcite-split-button>
+
+  <calcite-split-button primary-text="solid+brand" appearance="solid" kind="brand"></calcite-split-button>
+  <calcite-split-button primary-text="solid+danger" appearance="solid" kind="danger"></calcite-split-button>
+  <calcite-split-button primary-text="solid+inverse" appearance="solid" kind="inverse"></calcite-split-button>
+  <calcite-split-button primary-text="solid+neutral" appearance="solid" kind="neutral"></calcite-split-button>
+
+  <calcite-split-button primary-text="transparent+brand" appearance="transparent" kind="brand"></calcite-split-button>
+  <calcite-split-button primary-text="transparent+danger" appearance="transparent" kind="danger"></calcite-split-button>
+  <calcite-split-button
+    primary-text="transparent+inverse"
+    appearance="transparent"
+    kind="inverse"
+  ></calcite-split-button>
+  <calcite-split-button
+    primary-text="transparent+neutral"
+    appearance="transparent"
+    kind="neutral"
+  ></calcite-split-button>
+`;