Skip to content

Commit 8df59ab

Browse files
jcfrancojcfranco
authored
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"`.
1 parent 2e36eb3 commit 8df59ab

File tree

4 files changed

+69
-9
lines changed

4 files changed

+69
-9
lines changed

‎packages/calcite-components/src/components/button/button.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@
367367
button,
368368
a {
369369
@apply text-color-1 bg-foreground-1;
370-
border-color: theme("backgroundColor.foreground.3");
370+
border-color: theme("borderColor.color.1");
371371
&:hover {
372372
box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
373373
}

‎packages/calcite-components/src/components/button/button.stories.ts

+21-2
Original file line numberDiff line numberDiff line change
@@ -157,5 +157,24 @@ export const darkModeRTL_TestOnly = (): string => html`
157157

158158
darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
159159

160-
export const outlineNeutralBorderColor_TestOnly = (): string =>
161-
html`<calcite-button appearance="outline" kind="neutral">Test</calcite-button>`;
160+
export const appearanceAndKindCombinations_TestOnly = (): string => html`
161+
<calcite-button scale="s" appearance="outline" kind="brand">outline+brand</calcite-button>
162+
<calcite-button scale="s" appearance="outline" kind="danger">outline+danger</calcite-button>
163+
<calcite-button scale="s" appearance="outline" kind="inverse">outline+inverse</calcite-button>
164+
<calcite-button scale="s" appearance="outline" kind="neutral">outline+neutral</calcite-button>
165+
166+
<calcite-button scale="s" appearance="outline-fill" kind="brand">outline-fill+brand</calcite-button>
167+
<calcite-button scale="s" appearance="outline-fill" kind="danger">outline-fill+danger</calcite-button>
168+
<calcite-button scale="s" appearance="outline-fill" kind="inverse">outline-fill+inverse</calcite-button>
169+
<calcite-button scale="s" appearance="outline-fill" kind="neutral">outline-fill+neutral</calcite-button>
170+
171+
<calcite-button scale="s" appearance="solid" kind="brand">solid+brand</calcite-button>
172+
<calcite-button scale="s" appearance="solid" kind="danger">solid+danger</calcite-button>
173+
<calcite-button scale="s" appearance="solid" kind="inverse">solid+inverse</calcite-button>
174+
<calcite-button scale="s" appearance="solid" kind="neutral">solid+neutral</calcite-button>
175+
176+
<calcite-button scale="s" appearance="transparent" kind="brand">transparent+brand</calcite-button>
177+
<calcite-button scale="s" appearance="transparent" kind="danger">transparent+danger</calcite-button>
178+
<calcite-button scale="s" appearance="transparent" kind="inverse">transparent+inverse</calcite-button>
179+
<calcite-button scale="s" appearance="transparent" kind="neutral">transparent+neutral</calcite-button>
180+
`;

‎packages/calcite-components/src/components/split-button/split-button.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,23 @@
3333
:host([appearance="transparent"]) {
3434
&:host([kind="brand"]) {
3535
--calcite-split-button-divider: theme("colors.brand");
36+
--calcite-split-button-background: transparent;
3637
}
3738
&:host([kind="danger"]) {
3839
--calcite-split-button-divider: theme("colors.danger");
40+
--calcite-split-button-background: transparent;
3941
}
4042
&:host([kind="neutral"]) {
4143
--calcite-split-button-divider: theme("colors.color.1");
44+
--calcite-split-button-background: transparent;
4245
}
4346
&:host([kind="inverse"]) {
4447
--calcite-split-button-divider: theme("colors.background.foreground.1");
4548
--calcite-split-button-background: transparent;
4649
}
4750
}
4851

49-
:host([appearance="outline"]),
50-
:host([appearance="transparent"]) {
52+
:host([appearance="outline"]) {
5153
--calcite-split-button-background: transparent;
5254
}
5355

@@ -64,7 +66,8 @@
6466
--calcite-split-button-divider: theme("colors.danger");
6567
}
6668
&:host([kind="neutral"]) {
67-
--calcite-split-button-divider: theme("colors.background.foreground.3");
69+
--calcite-split-button-divider: theme("borderColor.color.1");
70+
--calcite-split-button-background: theme("borderColor.color.1");
6871
}
6972
&:host([kind="inverse"]) {
7073
--calcite-split-button-divider: var(--calcite-ui-inverse);

‎packages/calcite-components/src/components/split-button/split-button.stories.ts

+41-3
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,44 @@ export const disabled_TestOnly = (): string => html`<calcite-split-button disabl
120120
</calcite-dropdown-group>
121121
</calcite-split-button>`;
122122

123-
export const transparentWithInverseKind_TestOnly = (): string =>
124-
html`<calcite-split-button scale="s" primary-text="Button" appearance="transparent" kind="inverse">
125-
</calcite-split-button>`;
123+
export const appearanceAndKindCombinations_TestOnly = (): string => html`
124+
<calcite-split-button primary-text="outline+brand" appearance="outline" kind="brand"></calcite-split-button>
125+
<calcite-split-button primary-text="outline+danger" appearance="outline" kind="danger"></calcite-split-button>
126+
<calcite-split-button primary-text="outline+inverse" appearance="outline" kind="inverse"></calcite-split-button>
127+
<calcite-split-button primary-text="outline+neutral" appearance="outline" kind="neutral"></calcite-split-button>
128+
129+
<calcite-split-button primary-text="outline-fill+brand" appearance="outline-fill" kind="brand"></calcite-split-button>
130+
<calcite-split-button
131+
primary-text="outline-fill+danger"
132+
appearance="outline-fill"
133+
kind="danger"
134+
></calcite-split-button>
135+
<calcite-split-button
136+
primary-text="outline-fill+inverse"
137+
appearance="outline-fill"
138+
kind="inverse"
139+
></calcite-split-button>
140+
<calcite-split-button
141+
primary-text="outline-fill+neutral"
142+
appearance="outline-fill"
143+
kind="neutral"
144+
></calcite-split-button>
145+
146+
<calcite-split-button primary-text="solid+brand" appearance="solid" kind="brand"></calcite-split-button>
147+
<calcite-split-button primary-text="solid+danger" appearance="solid" kind="danger"></calcite-split-button>
148+
<calcite-split-button primary-text="solid+inverse" appearance="solid" kind="inverse"></calcite-split-button>
149+
<calcite-split-button primary-text="solid+neutral" appearance="solid" kind="neutral"></calcite-split-button>
150+
151+
<calcite-split-button primary-text="transparent+brand" appearance="transparent" kind="brand"></calcite-split-button>
152+
<calcite-split-button primary-text="transparent+danger" appearance="transparent" kind="danger"></calcite-split-button>
153+
<calcite-split-button
154+
primary-text="transparent+inverse"
155+
appearance="transparent"
156+
kind="inverse"
157+
></calcite-split-button>
158+
<calcite-split-button
159+
primary-text="transparent+neutral"
160+
appearance="transparent"
161+
kind="neutral"
162+
></calcite-split-button>
163+
`;

0 commit comments

Comments
 (0)