Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit c91ba95

Browse files
ArtBlueArtBlue
authored
Merge pull request #1903 from eBay/15.1.0
15.1.0 release
2 parents 9a63ee8 + 0231956 commit c91ba95

File tree

70 files changed

+20575
-23905
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+20575
-23905
lines changed

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@ Fixes #
2424
<!-- For CSS changes -->
2525
- [ ] I regenerated all CSS files under dist folder
2626
- [ ] I tested the UI in all supported browsers
27+
- [ ] I did a visual regression check of the components impacted by doing a Percy build and approved the build
2728
- [ ] I tested the UI in dark mode and RTL mode
2829
- [ ] I added/updated/removed Storybook coverage as appropriate

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ docs/static/*.min.css
1313
!docs/static/docs.min.css
1414
.storybook/preview-head.html
1515
.idea
16+
.storybook-percy

‎.stylelintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"selector-class-pattern": null,
2222
"alpha-value-notation": "number",
2323
"value-no-vendor-prefix": null,
24+
"import-notation": "string",
2425
"value-keyword-case": [
2526
"lower",
2627
{

‎dist/combobox/combobox.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@ span.combobox {
7777
.combobox__option[role^="option"]:active {
7878
font-weight: bold;
7979
}
80+
.combobox__option[role^="option"]:disabled,
81+
.combobox__option[role^="option"][aria-disabled="true"] {
82+
color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
83+
background-color: unset;
84+
font-weight: unset;
85+
}
8086
.combobox__option[role^="option"]:first-child {
8187
border-top-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
8288
border-top-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));

‎dist/drawer-dialog/drawer-dialog.css‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
.drawer-dialog__header {
2121
display: flex;
2222
flex-shrink: 0;
23-
margin: 16px 16px 0;
23+
margin: 20px 16px 0;
2424
position: relative;
2525
}
2626
.drawer-dialog__header h1,
@@ -32,10 +32,16 @@
3232
align-self: center;
3333
flex: 1 1 auto;
3434
margin: 0;
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
white-space: nowrap;
3538
}
3639
.drawer-dialog__header > :last-child:not(:only-child) {
3740
margin-left: 16px;
3841
}
42+
.drawer-dialog__header .fake-link {
43+
text-decoration: none;
44+
}
3945
.drawer-dialog__handle {
4046
background-color: transparent;
4147
border: none;
@@ -48,12 +54,12 @@
4854
z-index: 2;
4955
}
5056
.drawer-dialog__handle::after {
51-
background-color: var(--dialog-handle-color, var(--color-foreground-secondary));
52-
border-radius: 5px;
57+
background-color: var(--dialog-handle-color, var(--color-stroke-default));
58+
border-radius: 3px;
5359
content: "";
5460
display: block;
55-
height: 3px;
56-
width: 20px;
61+
height: 2px;
62+
width: 24px;
5763
}
5864
.drawer-dialog__main {
5965
box-sizing: border-box;
@@ -82,7 +88,7 @@
8288
.drawer-dialog__footer > :not(:first-child) {
8389
margin-left: 8px;
8490
}
85-
button.drawer-dialog__close {
91+
button.icon-button.drawer-dialog__close {
8692
background-color: transparent;
8793
border: 0;
8894
height: auto;

‎dist/filter-menu-button/filter-menu-button.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,18 @@ span.filter-menu-button__radio svg.icon--radio-checked {
167167
.filter-menu-button__item:hover {
168168
background-color: var(--color-state-primary-hover, color-state-primary-hover);
169169
}
170+
.filter-menu-button__item:disabled,
171+
.filter-menu-button__item[aria-disabled="true"] {
172+
color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
173+
}
174+
.filter-menu-button__item:disabled span > svg,
175+
.filter-menu-button__item[aria-disabled="true"] span > svg {
176+
color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
177+
}
178+
.filter-menu-button__item:disabled:hover,
179+
.filter-menu-button__item[aria-disabled="true"]:hover {
180+
background-color: inherit;
181+
}
170182
.filter-menu-button__item:hover {
171183
background-color: var(--color-state-primary-hover);
172184
}
@@ -215,6 +227,18 @@ button.filter-menu-button__footer {
215227
button.filter-menu-button__footer:hover {
216228
background-color: var(--color-state-primary-hover, color-state-primary-hover);
217229
}
230+
button.filter-menu-button__footer:disabled,
231+
button.filter-menu-button__footer[aria-disabled="true"] {
232+
color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
233+
}
234+
button.filter-menu-button__footer:disabled span > svg,
235+
button.filter-menu-button__footer[aria-disabled="true"] span > svg {
236+
color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
237+
}
238+
button.filter-menu-button__footer:disabled:hover,
239+
button.filter-menu-button__footer[aria-disabled="true"]:hover {
240+
background-color: inherit;
241+
}
218242
button.filter-menu-button__footer:focus,
219243
button.filter-menu-button__footer:hover {
220244
background-color: var(--color-state-primary-hover);

‎dist/filter-menu/filter-menu.css‎

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -25,61 +25,28 @@ span.filter-menu__radio {
2525
min-width: 18px;
2626
width: 18px;
2727
}
28-
span.filter-menu__checkbox svg.icon--checkbox-unchecked {
29-
color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
30-
display: block;
31-
height: 18px;
32-
width: 18px;
33-
}
34-
span.filter-menu__checkbox svg.icon--checkbox-checked {
35-
color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
36-
display: none;
37-
height: 18px;
38-
width: 18px;
39-
}
40-
span.filter-menu__radio svg.icon--radio-unchecked {
41-
color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
42-
display: block;
43-
height: 18px;
44-
width: 18px;
45-
}
46-
span.filter-menu__radio svg.icon--radio-checked {
47-
color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
48-
display: none;
28+
span.filter-menu__checkbox svg,
29+
span.filter-menu__radio svg {
30+
color: var(--filter-menu-item-icon-color, var(--color-foreground-primary));
4931
height: 18px;
5032
width: 18px;
5133
}
52-
.filter-menu-form__item span.checkbox {
53-
align-items: flex-start;
54-
display: flex;
55-
flex-shrink: 1;
56-
justify-content: center;
57-
}
58-
.filter-menu-form__item span.checkbox svg.checkbox__unchecked {
59-
color: var(--filter-menu-item-unchecked-color, var(--color-foreground-primary));
60-
}
61-
.filter-menu-form__item span.checkbox svg.checkbox__checked {
62-
color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
63-
}
34+
.filter-menu-form__item span.checkbox,
6435
.filter-menu-form__item span.radio {
6536
align-items: flex-start;
6637
display: flex;
6738
flex-shrink: 1;
6839
justify-content: center;
6940
}
70-
.filter-menu-form__item span.radio svg.radio__unchecked {
71-
color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
72-
}
73-
.filter-menu-form__item span.radio svg.radio__checked {
41+
.filter-menu-form__item span.checkbox .checkbox__icon > svg,
42+
.filter-menu-form__item span.radio .checkbox__icon > svg {
7443
color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
7544
}
76-
span.filter-menu__item[role="menuitemcheckbox"],
77-
span.filter-menu__item[role="menuitemradio"],
45+
span.filter-menu__item[role^="menuitem"],
7846
span.filter-menu-form__item {
7947
display: block;
8048
}
81-
.filter-menu__item[role="menuitemcheckbox"],
82-
.filter-menu__item[role="menuitemradio"],
49+
.filter-menu__item[role^="menuitem"],
8350
.filter-menu-form__item {
8451
background-color: var(--filter-menu-item-background-color, var(--color-background-primary));
8552
box-sizing: border-box;
@@ -92,13 +59,29 @@ span.filter-menu-form__item {
9259
width: 100%;
9360
padding: 8px 16px;
9461
}
95-
.filter-menu__item[role="menuitemcheckbox"]:hover,
96-
.filter-menu__item[role="menuitemradio"]:hover,
62+
.filter-menu__item[role^="menuitem"]:hover,
9763
.filter-menu-form__item:hover {
9864
background-color: var(--color-state-primary-hover, color-state-primary-hover);
9965
}
100-
.filter-menu__item[role="menuitemcheckbox"]:last-child,
101-
.filter-menu__item[role="menuitemradio"]:last-child,
66+
.filter-menu__item[role^="menuitem"]:disabled,
67+
.filter-menu-form__item:disabled,
68+
.filter-menu__item[role^="menuitem"][aria-disabled="true"],
69+
.filter-menu-form__item[aria-disabled="true"] {
70+
color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
71+
}
72+
.filter-menu__item[role^="menuitem"]:disabled span > svg,
73+
.filter-menu-form__item:disabled span > svg,
74+
.filter-menu__item[role^="menuitem"][aria-disabled="true"] span > svg,
75+
.filter-menu-form__item[aria-disabled="true"] span > svg {
76+
color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
77+
}
78+
.filter-menu__item[role^="menuitem"]:disabled:hover,
79+
.filter-menu-form__item:disabled:hover,
80+
.filter-menu__item[role^="menuitem"][aria-disabled="true"]:hover,
81+
.filter-menu-form__item[aria-disabled="true"]:hover {
82+
background-color: inherit;
83+
}
84+
.filter-menu__item[role^="menuitem"]:last-child,
10285
.filter-menu-form__item:last-child {
10386
margin-bottom: 8px;
10487
}
@@ -124,6 +107,24 @@ button.filter-menu__footer:hover,
124107
button.filter-menu-form__footer[type="submit"]:hover {
125108
background-color: var(--color-state-primary-hover, color-state-primary-hover);
126109
}
110+
button.filter-menu__footer:disabled,
111+
button.filter-menu-form__footer[type="submit"]:disabled,
112+
button.filter-menu__footer[aria-disabled="true"],
113+
button.filter-menu-form__footer[type="submit"][aria-disabled="true"] {
114+
color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
115+
}
116+
button.filter-menu__footer:disabled span > svg,
117+
button.filter-menu-form__footer[type="submit"]:disabled span > svg,
118+
button.filter-menu__footer[aria-disabled="true"] span > svg,
119+
button.filter-menu-form__footer[type="submit"][aria-disabled="true"] span > svg {
120+
color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
121+
}
122+
button.filter-menu__footer:disabled:hover,
123+
button.filter-menu-form__footer[type="submit"]:disabled:hover,
124+
button.filter-menu__footer[aria-disabled="true"]:hover,
125+
button.filter-menu-form__footer[type="submit"][aria-disabled="true"]:hover {
126+
background-color: inherit;
127+
}
127128
button.filter-menu__footer:hover,
128129
button.filter-menu-form__footer[type="submit"]:hover {
129130
background-color: var(--color-state-primary-hover);
@@ -133,6 +134,14 @@ button.filter-menu-form__footer[type="submit"]:hover {
133134
flex-grow: 1;
134135
margin-left: 8px;
135136
}
137+
.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked,
138+
.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked {
139+
display: none;
140+
}
141+
.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked,
142+
.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked {
143+
display: block;
144+
}
136145
.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked,
137146
.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked {
138147
display: none;

‎dist/floating-label/floating-label.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,18 @@ label.floating-label__label {
2323
width: calc(100% - 40px);
2424
z-index: 1;
2525
}
26+
.floating-label--opaque label.floating-label__label {
27+
background-color: var(--floating-label-background-color, var(--color-background-secondary));
28+
padding-top: 3px;
29+
top: -3px;
30+
width: calc(100% - 40px);
31+
}
2632
label.floating-label__label--focus {
2733
color: var(--color-background-inverse);
2834
}
35+
.floating-label--opaque label.floating-label__label--focus {
36+
background-color: var(--floating-label-focus-background-color, var(--color-background-primary));
37+
}
2938
.floating-label--large label.floating-label__label {
3039
transform: scale(0.75, 0.75) translate(0, 3px);
3140
}
@@ -42,6 +51,9 @@ label.floating-label__label--animate {
4251
label.floating-label__label--disabled {
4352
color: var(--floating-label-disabled-color, var(--color-foreground-disabled));
4453
}
54+
.floating-label--opaque label.floating-label__label--disabled {
55+
background-color: var(--floating-label-disabled-background-color, var(--color-background-secondary));
56+
}
4557
label.floating-label__label--invalid {
4658
color: var(--floating-label-invalid-color, var(--color-foreground-attention));
4759
}

‎dist/fullscreen-dialog/fullscreen-dialog.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@
4242
align-self: center;
4343
flex: 1 1 auto;
4444
margin: 0;
45+
overflow: hidden;
46+
text-overflow: ellipsis;
47+
white-space: nowrap;
4548
}
4649
.fullscreen-dialog__header > :last-child:not(:only-child) {
4750
margin-left: 16px;

‎dist/inline-notice/inline-notice.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ span.inline-notice {
1313
margin-top: 4px;
1414
}
1515
.inline-notice p {
16-
margin: 4px 0;
16+
margin: 3px 0;
1717
}
1818
.inline-notice a,
1919
.inline-notice button.fake-link {

0 commit comments

Comments
 (0)