fix(split-button): update divider and borders to follow design spec (#…

…7568) **Related Issue:** #6364 ## Summary ✨💅✨ **Note**: this also applies `border-1` to `calcite-button` with `appearance="outline-fill"`.
Esri · Aug 23, 2023 · 8df59ab · 8df59ab
1 parent 2e36eb3
commit 8df59ab
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
diff --git 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
@@ -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
@@ -33,21 +33,23 @@
 :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");
     --calcite-split-button-background: transparent;
   }
 }
 
-: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
@@ -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>
+`;