Skip to content

Commit d73eafa

Browse files
lskramarovlskramarov
authored
fix(split-button): incorrect styles for one button (#DS-4312) (#1101)
1 parent 78ce71c commit d73eafa

3 files changed

Lines changed: 63 additions & 52 deletions

File tree

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

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -9,74 +9,76 @@
99

1010
border-radius: var(--kbq-size-border-radius);
1111

12-
& .kbq-button:first-child {
13-
padding-right: 10px;
14-
}
12+
&.kbq-split-button_styles-for-nested {
13+
& .kbq-button:first-child {
14+
padding-right: 10px;
15+
}
1516

16-
& .kbq-button:first-child,
17-
& .kbq-button-icon:first-child {
18-
min-width: 0;
17+
& .kbq-button:first-child,
18+
& .kbq-button-icon:first-child {
19+
min-width: 0;
1920

20-
border-right: none;
21+
border-right: none;
2122

22-
border-top-right-radius: unset;
23-
border-bottom-right-radius: unset;
23+
border-top-right-radius: unset;
24+
border-bottom-right-radius: unset;
2425

25-
& .kbq-button-wrapper {
26-
@include common.kbq-truncate-line();
26+
& .kbq-button-wrapper {
27+
@include common.kbq-truncate-line();
28+
}
2729
}
28-
}
2930

30-
& .kbq-button:last-child,
31-
& .kbq-button-icon:last-child {
32-
border-left: none;
31+
& .kbq-button:last-child,
32+
& .kbq-button-icon:last-child {
33+
border-left: none;
3334

34-
border-top-left-radius: unset;
35-
border-bottom-left-radius: unset;
35+
border-top-left-radius: unset;
36+
border-bottom-left-radius: unset;
3637

37-
&::before {
38-
display: none;
38+
&::before {
39+
display: none;
3940

40-
content: '';
41-
position: absolute;
42-
left: 0;
43-
top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));
41+
content: '';
42+
position: absolute;
43+
left: 0;
44+
top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));
4445

45-
width: 1px;
46-
height: var(--kbq-size-l);
46+
width: 1px;
47+
height: var(--kbq-size-l);
48+
}
4749
}
48-
}
4950

50-
& .kbq-button,
51-
& .kbq-button-icon {
52-
&:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
53-
& + .kbq-button,
54-
& + .kbq-button-icon {
55-
&:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
56-
&::before {
57-
display: block;
51+
& .kbq-button,
52+
& .kbq-button-icon {
53+
&:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
54+
& + .kbq-button,
55+
& + .kbq-button-icon {
56+
&:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
57+
&::before {
58+
display: block;
59+
}
5860
}
5961
}
6062
}
61-
}
6263

63-
&.kbq-progress {
64-
& + .kbq-button,
65-
& + .kbq-button-icon {
66-
&.kbq-progress::before {
67-
display: block;
64+
&.kbq-progress {
65+
& + .kbq-button,
66+
& + .kbq-button-icon {
67+
&.kbq-progress::before {
68+
display: block;
69+
}
6870
}
6971
}
70-
}
7172

72-
&[disabled] + [disabled]::before {
73-
display: block;
73+
&[disabled] + [disabled]::before {
74+
display: block;
75+
}
7476
}
75-
}
7677

77-
& .kbq-button-icon + .kbq-button-icon {
78-
padding-left: var(--kbq-size-xxs);
79-
padding-right: var(--kbq-size-xxs);
78+
& .kbq-button-icon + .kbq-button-icon {
79+
padding-left: var(--kbq-size-xxs);
80+
padding-right: var(--kbq-size-xxs);
81+
}
8082
}
8183
}
8284

‎packages/components/split-button/split-button.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,23 @@ import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
1515

1616
@Component({
1717
standalone: true,
18-
selector: 'kbq-split-button',
18+
selector: 'kbq-split-button, [kbq-split-button]',
1919
templateUrl: './split-button.html',
2020
styleUrls: ['./split-button.scss'],
2121
host: {
22-
class: 'kbq-split-button'
22+
class: 'kbq-split-button',
23+
'[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1'
2324
},
2425
changeDetection: ChangeDetectionStrategy.OnPush,
2526
encapsulation: ViewEncapsulation.None
2627
})
2728
export class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
2829
private nativeElement = kbqInjectNativeElement();
29-
@ContentChildren(KbqButton) private buttons: QueryList<KbqButton>;
30-
@ContentChild(KbqDropdownTrigger) private dropdownTrigger: KbqDropdownTrigger;
30+
31+
/** @docs-private */
32+
@ContentChildren(KbqButton) protected buttons: QueryList<KbqButton>;
33+
/** @docs-private */
34+
@ContentChild(KbqDropdownTrigger) protected dropdownTrigger: KbqDropdownTrigger;
3135

3236
/** Sets the width of the dropdown to the width of the trigger. Default is false */
3337
@Input() panelAutoWidth: boolean = false;

‎tools/public_api_guard/components/split-button.api.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,25 @@
66

77
import { AfterContentInit } from '@angular/core';
88
import * as i0 from '@angular/core';
9+
import { KbqButton } from '@koobiq/components/button';
910
import { KbqButtonStyles } from '@koobiq/components/button';
1011
import { KbqColorDirective } from '@koobiq/components/core';
1112
import { KbqComponentColors } from '@koobiq/components/core';
13+
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
14+
import { QueryList } from '@angular/core';
1215
import { ThemePalette } from '@koobiq/components/core';
1316

1417
// @public (undocumented)
1518
export class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
1619
constructor();
20+
protected buttons: QueryList<KbqButton>;
1721
get color(): KbqComponentColors | ThemePalette | string;
1822
set color(value: KbqComponentColors | ThemePalette | string);
1923
get disabled(): boolean;
2024
set disabled(value: boolean);
2125
// (undocumented)
2226
protected _disabled: boolean;
27+
protected dropdownTrigger: KbqDropdownTrigger;
2328
get kbqStyle(): string;
2429
set kbqStyle(value: KbqButtonStyles | string);
2530
// (undocumented)
@@ -28,7 +33,7 @@ export class KbqSplitButton extends KbqColorDirective implements AfterContentIni
2833
ngAfterContentInit(): void;
2934
panelAutoWidth: boolean;
3035
// (undocumented)
31-
static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
36+
static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button, [kbq-split-button]", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
3237
// (undocumented)
3338
static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButton, never>;
3439
}

0 commit comments

Comments
 (0)