Skip to content

Commit ec38384

Browse files
NikGurevNikGurev
authored
fix(dropdown): icon in disabled state (#DS-3081) (koobiq#430)
1 parent 766f876 commit ec38384

File tree

12 files changed

+456
-143
lines changed

12 files changed

+456
-143
lines changed

‎packages/components/dropdown/_dropdown-theme.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
background: var(--kbq-list-#{$style-name}-container-background);
66
color: var(--kbq-list-#{$style-name}-text-color);
77

8+
.kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
9+
color: var(--kbq-list-#{$style-name}-text-color);
10+
}
11+
812
.kbq-dropdown-item__caption {
913
color: var(--kbq-list-#{$style-name}-caption-color);
1014
}

‎packages/components/dropdown/dropdown.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
<!-- example(dropdown-overview) -->
22

3+
### Disabled trigger
4+
5+
<!-- example(dropdown-disabled) -->
6+
7+
### Open by arrow down ↓
8+
9+
<!-- example(dropdown-open-by-arrow-down) -->
10+
11+
### Lazy load data
12+
13+
<!-- example(dropdown-lazyload-data) -->
14+
315
### Nested elements
416

517
<!-- example(dropdown-nested) -->

‎packages/docs-examples/components/dropdown/dropdown-disabled/dropdown-disabled-example.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<kbq-checkbox
2+
class="layout-margin-right-l"
3+
[(ngModel)]="disabled"
4+
>
5+
toggle disabled state
6+
</kbq-checkbox>
7+
8+
<button
9+
kbq-button
10+
[disabled]="disabled"
11+
[kbqDropdownTriggerFor]="appDropdown"
12+
>
13+
dropdown
14+
<i kbq-icon="kbq-chevron-down-s_16"></i>
15+
</button>
16+
17+
<kbq-dropdown
18+
#appDropdown="kbqDropdown"
19+
style="max-width: 200px"
20+
>
21+
<button kbq-dropdown-item>Text Normal</button>
22+
23+
<button kbq-dropdown-item>
24+
<i
25+
kbq-icon="kbq-info-circle_16"
26+
[color]="'contrast'"
27+
></i>
28+
Text Normal
29+
</button>
30+
31+
<button kbq-dropdown-item>
32+
Text Normal
33+
<div class="kbq-dropdown-item__caption">Caption</div>
34+
</button>
35+
36+
<button kbq-dropdown-item>
37+
<i
38+
kbq-icon="kbq-info-circle_16"
39+
[color]="'contrast'"
40+
></i>
41+
Text Normal
42+
<div class="kbq-dropdown-item__caption">Caption</div>
43+
</button>
44+
45+
<button kbq-dropdown-item>
46+
<i
47+
kbq-icon="kbq-circle-xs_16"
48+
[color]="'contrast'"
49+
></i>
50+
Text Normal
51+
</button>
52+
53+
<button
54+
kbq-dropdown-item
55+
kbq-title
56+
>
57+
Text Normal and very long text Text Normal and very long text Text Normal and very long text Text Normal and
58+
very long text
59+
</button>
60+
61+
<kbq-divider />
62+
63+
<div class="kbq-dropdown__group-header">Header</div>
64+
65+
<button
66+
disabled
67+
kbq-dropdown-item
68+
>
69+
Disabled
70+
</button>
71+
72+
<kbq-divider />
73+
74+
<div class="kbq-dropdown__group-header kbq-dropdown__group-header_small">Subheading</div>
75+
76+
<button
77+
disabled
78+
kbq-dropdown-item
79+
>
80+
<i
81+
kbq-icon="kbq-circle-xs_16"
82+
[color]="'contrast'"
83+
></i>
84+
Disabled with icon
85+
</button>
86+
87+
<kbq-divider />
88+
89+
<button kbq-dropdown-item>Point 2</button>
90+
91+
<button kbq-dropdown-item>Point 3</button>
92+
93+
<button kbq-dropdown-item>Link</button>
94+
</kbq-dropdown>

‎packages/docs-examples/components/dropdown/dropdown-disabled/dropdown-disabled-example.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
import { KbqButtonModule } from '@koobiq/components/button';
4+
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
5+
import { KbqDividerModule } from '@koobiq/components/divider';
6+
import { KbqDropdownModule } from '@koobiq/components/dropdown';
7+
import { KbqIconModule } from '@koobiq/components/icon';
8+
import { KbqTitleModule } from '@koobiq/components/title';
9+
10+
/**
11+
* @title Dropdown disabled
12+
*/
13+
@Component({
14+
standalone: true,
15+
selector: 'dropdown-disabled-example',
16+
imports: [
17+
KbqDropdownModule,
18+
FormsModule,
19+
KbqCheckboxModule,
20+
KbqDividerModule,
21+
KbqButtonModule,
22+
KbqIconModule,
23+
KbqTitleModule
24+
],
25+
templateUrl: 'dropdown-disabled-example.html'
26+
})
27+
export class DropdownDisabledExample {
28+
disabled = false;
29+
}

‎packages/docs-examples/components/dropdown/dropdown-lazyload-data/dropdown-lazyload-data-example.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<kbq-form-field class="layout-margin-bottom-l">
2+
<input
3+
kbqInput
4+
style="max-width: 200px"
5+
type="text"
6+
[(ngModel)]="someValue"
7+
/>
8+
</kbq-form-field>
9+
10+
<button
11+
kbq-button
12+
[kbqDropdownTriggerData]="{ someValue: someValue }"
13+
[kbqDropdownTriggerFor]="appDropdownLazy"
14+
>
15+
dropdown lazy
16+
<i kbq-icon="kbq-chevron-down-s_16"></i>
17+
</button>
18+
19+
<kbq-dropdown #appDropdownLazy="kbqDropdown">
20+
<ng-template
21+
kbqDropdownContent
22+
let-someValue="someValue"
23+
>
24+
<button kbq-dropdown-item>dropdown</button>
25+
<button kbq-dropdown-item>
26+
Point 1
27+
<span class="kbq-dropdown-item__caption">Some info</span>
28+
</button>
29+
<button kbq-dropdown-item>Value: {{ someValue }}</button>
30+
</ng-template>
31+
</kbq-dropdown>

‎packages/docs-examples/components/dropdown/dropdown-lazyload-data/dropdown-lazyload-data-example.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
import { KbqButtonModule } from '@koobiq/components/button';
4+
import { KbqDropdownModule } from '@koobiq/components/dropdown';
5+
import { KbqFormFieldModule } from '@koobiq/components/form-field';
6+
import { KbqIconModule } from '@koobiq/components/icon';
7+
import { KbqInputModule } from '@koobiq/components/input';
8+
9+
/**
10+
* @title Dropdown lazy load data
11+
*/
12+
@Component({
13+
standalone: true,
14+
selector: 'dropdown-lazyload-data-example',
15+
imports: [
16+
KbqDropdownModule,
17+
FormsModule,
18+
KbqButtonModule,
19+
KbqIconModule,
20+
KbqFormFieldModule,
21+
KbqInputModule
22+
],
23+
templateUrl: 'dropdown-lazyload-data-example.html'
24+
})
25+
export class DropdownLazyloadDataExample {
26+
someValue = 'Lazy Value';
27+
}

‎packages/docs-examples/components/dropdown/dropdown-open-by-arrowdown/dropdown-open-by-arrow-down-example.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<kbq-checkbox
2+
class="layout-margin-right-l"
3+
[(ngModel)]="openByArrowDown"
4+
>
5+
toggle openByArrowDown
6+
</kbq-checkbox>
7+
8+
<button
9+
kbq-button
10+
[kbqDropdownTriggerFor]="appDropdown"
11+
[openByArrowDown]="openByArrowDown"
12+
>
13+
dropdown
14+
<i kbq-icon="kbq-chevron-down-s_16"></i>
15+
</button>
16+
17+
<kbq-dropdown
18+
#appDropdown="kbqDropdown"
19+
style="max-width: 200px"
20+
>
21+
<button kbq-dropdown-item>Text Normal</button>
22+
23+
<button kbq-dropdown-item>
24+
<i
25+
kbq-icon="kbq-info-circle_16"
26+
[color]="'contrast'"
27+
></i>
28+
Text Normal
29+
</button>
30+
31+
<button kbq-dropdown-item>
32+
Text Normal
33+
<div class="kbq-dropdown-item__caption">Caption</div>
34+
</button>
35+
36+
<button kbq-dropdown-item>
37+
<i
38+
kbq-icon="kbq-info-circle_16"
39+
[color]="'contrast'"
40+
></i>
41+
Text Normal
42+
<div class="kbq-dropdown-item__caption">Caption</div>
43+
</button>
44+
45+
<button kbq-dropdown-item>
46+
<i
47+
kbq-icon="kbq-circle-xs_16"
48+
[color]="'contrast'"
49+
></i>
50+
Text Normal
51+
</button>
52+
53+
<button
54+
kbq-dropdown-item
55+
kbq-title
56+
>
57+
Text Normal and very long text Text Normal and very long text Text Normal and very long text Text Normal and
58+
very long text
59+
</button>
60+
61+
<kbq-divider />
62+
63+
<div class="kbq-dropdown__group-header">Header</div>
64+
65+
<button
66+
disabled
67+
kbq-dropdown-item
68+
>
69+
Disabled
70+
</button>
71+
72+
<kbq-divider />
73+
74+
<div class="kbq-dropdown__group-header kbq-dropdown__group-header_small">Subheading</div>
75+
76+
<button
77+
disabled
78+
kbq-dropdown-item
79+
>
80+
<i
81+
kbq-icon="kbq-circle-xs_16"
82+
[color]="'contrast'"
83+
></i>
84+
Disabled with icon
85+
</button>
86+
87+
<kbq-divider />
88+
<button kbq-dropdown-item>Point 2</button>
89+
</kbq-dropdown>

‎packages/docs-examples/components/dropdown/dropdown-open-by-arrowdown/dropdown-open-by-arrow-down-example.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
import { KbqButtonModule } from '@koobiq/components/button';
4+
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
5+
import { KbqDividerModule } from '@koobiq/components/divider';
6+
import { KbqDropdownModule } from '@koobiq/components/dropdown';
7+
import { KbqFormFieldModule } from '@koobiq/components/form-field';
8+
import { KbqIconModule } from '@koobiq/components/icon';
9+
import { KbqInputModule } from '@koobiq/components/input';
10+
import { KbqTitleModule } from '@koobiq/components/title';
11+
12+
/**
13+
* @title Dropdown open by arrow down
14+
*/
15+
@Component({
16+
standalone: true,
17+
selector: 'dropdown-open-by-arrow-down-example',
18+
imports: [
19+
KbqDropdownModule,
20+
FormsModule,
21+
KbqCheckboxModule,
22+
KbqDividerModule,
23+
KbqButtonModule,
24+
KbqIconModule,
25+
KbqTitleModule,
26+
KbqFormFieldModule,
27+
KbqInputModule
28+
],
29+
templateUrl: 'dropdown-open-by-arrow-down-example.html'
30+
})
31+
export class DropdownOpenByArrowDownExample {
32+
openByArrowDown = true;
33+
}

0 commit comments

Comments
 (0)