Skip to content

Commit 4ea3b9c

Browse files
macandcheesebenelan
macandcheese
authored and
benelan
committed
fix(split-button): Fix duplicate border when href is set (#11976)
**Related Issue:** #11909 ## Summary Fix for duplicate border - there was a `<button>` style set in Button without a corresponding `<a>` style. Adds local demo and Chromatic tests. | Before | After | | -------- | ------- | | ![Screenshot 2025-04-17 at 9 43 31 AM](https://github.com/user-attachments/assets/75ed4114-6951-4357-bdd9-eca572fa9256) | ![Screenshot 2025-04-17 at 9 43 53 AM](https://github.com/user-attachments/assets/69cf5a25-e432-4897-ade8-b5175fc8c5f2) |
1 parent 94d1882 commit 4ea3b9c

File tree

3 files changed

+208
-2
lines changed

3 files changed

+208
-2
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -567,13 +567,17 @@
567567
}
568568

569569
:host([appearance="outline-fill"][split-child="primary"]) button,
570-
:host([appearance="outline"][split-child="primary"]) button {
570+
:host([appearance="outline"][split-child="primary"]) button,
571+
:host([appearance="outline-fill"][split-child="primary"]) a,
572+
:host([appearance="outline"][split-child="primary"]) a {
571573
border-inline-end-width: 0;
572574
border-inline-start-width: theme("borderWidth.DEFAULT");
573575
}
574576

575577
:host([appearance="outline-fill"][split-child="secondary"]) button,
576-
:host([appearance="outline"][split-child="secondary"]) button {
578+
:host([appearance="outline"][split-child="secondary"]) button,
579+
:host([appearance="outline-fill"][split-child="secondary"]) a,
580+
:host([appearance="outline"][split-child="secondary"]) a {
577581
border-inline-start-width: 0;
578582
border-inline-end-width: theme("borderWidth.DEFAULT");
579583
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,23 @@ export const primaryAsALink = (): string =>
304304
</calcite-dropdown-group>
305305
</calcite-split-button>`;
306306

307+
export const primaryAsALinkAppearanceOutline = (): string =>
308+
html` <calcite-split-button
309+
appearance="outline"
310+
scale="m"
311+
primary-text="Primary Option"
312+
dropdown-icon-type="overflow"
313+
href="split-button.html"
314+
rel="external"
315+
target="_blank"
316+
>
317+
<calcite-dropdown-group selection-mode="none">
318+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
319+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
320+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
321+
</calcite-dropdown-group>
322+
</calcite-split-button>`;
323+
307324
export const primaryAsADownload = (): string =>
308325
html` <calcite-split-button
309326
download
@@ -319,3 +336,20 @@ export const primaryAsADownload = (): string =>
319336
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
320337
</calcite-dropdown-group>
321338
</calcite-split-button>`;
339+
340+
export const primaryAsADownloadAppearanceOutlineFill = (): string =>
341+
html` <calcite-split-button
342+
download
343+
appearance="outline-fill"
344+
scale="m"
345+
primary-text="Primary Option"
346+
primary-icon-start="download"
347+
dropdown-icon-type="overflow"
348+
href="/"
349+
>
350+
<calcite-dropdown-group selection-mode="none">
351+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
352+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
353+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
354+
</calcite-dropdown-group>
355+
</calcite-split-button>`;

‎packages/calcite-components/src/demos/split-button.html

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5686,6 +5686,174 @@
56865686
</div>
56875687
</div>
56885688

5689+
<div class="parent-flex">
5690+
<div class="child-flex right-aligned-text">When primary is link</div>
5691+
<div class="child-flex">
5692+
<calcite-split-button
5693+
appearance="outline"
5694+
dropdown-icon-type="chevron"
5695+
scale="s"
5696+
primary-text="Primary Option"
5697+
href="/"
5698+
rel="external"
5699+
target="_blank"
5700+
>
5701+
<calcite-dropdown-group selection-mode="none">
5702+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5703+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5704+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5705+
</calcite-dropdown-group>
5706+
</calcite-split-button>
5707+
</div>
5708+
5709+
<div class="child-flex">
5710+
<calcite-split-button
5711+
appearance="outline"
5712+
dropdown-icon-type="chevron"
5713+
scale="m"
5714+
primary-text="Primary Option"
5715+
href="/"
5716+
rel="external"
5717+
target="_blank"
5718+
>
5719+
<calcite-dropdown-group selection-mode="none">
5720+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5721+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5722+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5723+
</calcite-dropdown-group>
5724+
</calcite-split-button>
5725+
</div>
5726+
5727+
<div class="child-flex">
5728+
<calcite-split-button
5729+
appearance="outline"
5730+
dropdown-icon-type="chevron"
5731+
scale="l"
5732+
primary-text="Primary Option"
5733+
href="/"
5734+
rel="external"
5735+
target="_blank"
5736+
>
5737+
<calcite-dropdown-group selection-mode="none">
5738+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5739+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5740+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5741+
</calcite-dropdown-group>
5742+
</calcite-split-button>
5743+
</div>
5744+
</div>
5745+
<div class="parent-flex">
5746+
<div class="child-flex right-aligned-text">When primary is link</div>
5747+
<div class="child-flex">
5748+
<calcite-split-button
5749+
appearance="outline-fill"
5750+
dropdown-icon-type="chevron"
5751+
scale="s"
5752+
primary-text="Primary Option"
5753+
href="/"
5754+
rel="external"
5755+
target="_blank"
5756+
>
5757+
<calcite-dropdown-group selection-mode="none">
5758+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5759+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5760+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5761+
</calcite-dropdown-group>
5762+
</calcite-split-button>
5763+
</div>
5764+
5765+
<div class="child-flex">
5766+
<calcite-split-button
5767+
appearance="outline-fill"
5768+
dropdown-icon-type="chevron"
5769+
scale="m"
5770+
primary-text="Primary Option"
5771+
href="/"
5772+
rel="external"
5773+
target="_blank"
5774+
>
5775+
<calcite-dropdown-group selection-mode="none">
5776+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5777+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5778+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5779+
</calcite-dropdown-group>
5780+
</calcite-split-button>
5781+
</div>
5782+
5783+
<div class="child-flex">
5784+
<calcite-split-button
5785+
appearance="outline-fill"
5786+
dropdown-icon-type="chevron"
5787+
scale="l"
5788+
primary-text="Primary Option"
5789+
href="/"
5790+
rel="external"
5791+
target="_blank"
5792+
>
5793+
<calcite-dropdown-group selection-mode="none">
5794+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5795+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5796+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5797+
</calcite-dropdown-group>
5798+
</calcite-split-button>
5799+
</div>
5800+
</div>
5801+
<div class="parent-flex">
5802+
<div class="child-flex right-aligned-text">When primary is link</div>
5803+
<div class="child-flex">
5804+
<calcite-split-button
5805+
appearance="transparent"
5806+
dropdown-icon-type="chevron"
5807+
scale="s"
5808+
primary-text="Primary Option"
5809+
href="/"
5810+
rel="external"
5811+
target="_blank"
5812+
>
5813+
<calcite-dropdown-group selection-mode="none">
5814+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5815+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5816+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5817+
</calcite-dropdown-group>
5818+
</calcite-split-button>
5819+
</div>
5820+
5821+
<div class="child-flex">
5822+
<calcite-split-button
5823+
appearance="transparent"
5824+
dropdown-icon-type="chevron"
5825+
scale="m"
5826+
primary-text="Primary Option"
5827+
href="/"
5828+
rel="external"
5829+
target="_blank"
5830+
>
5831+
<calcite-dropdown-group selection-mode="none">
5832+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5833+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5834+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5835+
</calcite-dropdown-group>
5836+
</calcite-split-button>
5837+
</div>
5838+
5839+
<div class="child-flex">
5840+
<calcite-split-button
5841+
appearance="transparent"
5842+
dropdown-icon-type="chevron"
5843+
scale="l"
5844+
primary-text="Primary Option"
5845+
href="/"
5846+
rel="external"
5847+
target="_blank"
5848+
>
5849+
<calcite-dropdown-group selection-mode="none">
5850+
<calcite-dropdown-item>Option 2</calcite-dropdown-item>
5851+
<calcite-dropdown-item>Option 3</calcite-dropdown-item>
5852+
<calcite-dropdown-item>Option 4</calcite-dropdown-item>
5853+
</calcite-dropdown-group>
5854+
</calcite-split-button>
5855+
</div>
5856+
</div>
56895857
<hr />
56905858

56915859
<!--

0 commit comments

Comments
 (0)