@ebay/skin 18.0.0-next.0 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/breadcrumbs/breadcrumbs.css +2 -2
- package/dist/bundles/skin-default.css +34 -29
- package/dist/bundles/skin-default.css.map +1 -1
- package/dist/bundles/skin-full.css +34 -29
- package/dist/bundles/skin-full.css.map +1 -1
- package/dist/bundles/skin-headless.css +34 -29
- package/dist/bundles/skin-headless.css.map +1 -1
- package/dist/button/button.css +2 -2
- package/dist/carousel/carousel.css +3 -8
- package/dist/carousel/carousel.css.map +1 -1
- package/dist/combobox/combobox.css +2 -2
- package/dist/filter-menu/filter-menu.css +8 -8
- package/dist/filter-menu/filter-menu.css.map +1 -1
- package/dist/filter-menu-button/filter-menu-button.css +9 -9
- package/dist/icon/icon.css +9 -0
- package/dist/icon/icon.css.map +1 -1
- package/dist/lightbox-dialog/lightbox-dialog.css +1 -1
- package/dist/select/select.css +1 -1
- package/dist/toggle-button/toggle-button.css +1 -1
- package/dist/toggle-button-group/toggle-button-group.css +1 -1
- package/lint.log +3 -3
- package/package.json +1 -1
- package/src/sass/breadcrumbs/breadcrumbs.scss +2 -2
- package/src/sass/button/button.scss +2 -2
- package/src/sass/carousel/carousel.scss +2 -9
- package/src/sass/combobox/combobox.scss +2 -2
- package/src/sass/drawer-dialog/stories/drawer-dialog.stories.js +1 -1
- package/src/sass/filter-menu/filter-menu.scss +8 -9
- package/src/sass/filter-menu/stories/filter-menu.stories.js +24 -24
- package/src/sass/filter-menu-button/filter-menu-button.scss +9 -9
- package/src/sass/filter-menu-button/stories/filter-menu-button.stories.js +116 -116
- package/src/sass/fullscreen-dialog/stories/fullscreen-dialog.stories.js +1 -1
- package/src/sass/icon/icon.scss +9 -0
- package/src/sass/lightbox-dialog/lightbox-dialog.scss +1 -1
- package/src/sass/select/select.scss +1 -1
- package/src/sass/textbox/stories/icon.stories.js +5 -3
- package/src/sass/toggle-button/toggle-button.scss +1 -1
- package/src/sass/toggle-button-group/stories/list-layout.stories.js +133 -0
- package/src/sass/toggle-button-group/toggle-button-group.scss +1 -1
- package/.changeset/bright-kiwis-repeat.md +0 -5
- package/.changeset/chilled-games-stare.md +0 -5
- package/.changeset/gold-radios-reply.md +0 -5
- package/.changeset/light-lions-explode.md +0 -5
- package/.changeset/pre.json +0 -15
- package/.changeset/ten-rockets-double.md +0 -5
- package/.changeset/wild-donkeys-attack.md +0 -5
|
@@ -972,7 +972,7 @@ nav.breadcrumbs>ul>li svg{
|
|
|
972
972
|
margin-right:3px;
|
|
973
973
|
}
|
|
974
974
|
|
|
975
|
-
nav.breadcrumbs>ul>li svg.icon--
|
|
975
|
+
nav.breadcrumbs>ul>li svg.icon--12{
|
|
976
976
|
margin-left:var(--spacing-75);
|
|
977
977
|
margin-right:var(--spacing-75);
|
|
978
978
|
}
|
|
@@ -1033,7 +1033,7 @@ nav.breadcrumbs .fake-menu-button__menu,nav.breadcrumbs .menu-button__menu{
|
|
|
1033
1033
|
font-size:var(--font-size-default);
|
|
1034
1034
|
}
|
|
1035
1035
|
|
|
1036
|
-
[dir=rtl] nav.breadcrumbs svg.icon--
|
|
1036
|
+
[dir=rtl] nav.breadcrumbs svg.icon--12{
|
|
1037
1037
|
transform:rotate(180deg);
|
|
1038
1038
|
}
|
|
1039
1039
|
|
|
@@ -1216,7 +1216,7 @@ button.btn--primary.btn--destructive .progress-spinner{
|
|
|
1216
1216
|
--color-spinner-icon-foreground:#ec7089;
|
|
1217
1217
|
}
|
|
1218
1218
|
|
|
1219
|
-
a.fake-btn[aria-expanded=true] svg.icon--
|
|
1219
|
+
a.fake-btn[aria-expanded=true] svg.icon--12,button.btn[aria-expanded=true] svg.icon--12{
|
|
1220
1220
|
transform:rotate(180deg);
|
|
1221
1221
|
}
|
|
1222
1222
|
|
|
@@ -1600,18 +1600,14 @@ div.carousel{
|
|
|
1600
1600
|
}
|
|
1601
1601
|
.carousel__control--prev{
|
|
1602
1602
|
left:calc(var(--spacing-200)*-1);
|
|
1603
|
+
-webkit-margin-end:1px;
|
|
1604
|
+
margin-inline-end:1px;
|
|
1603
1605
|
}
|
|
1604
1606
|
.carousel__control--next{
|
|
1605
1607
|
right:calc(var(--spacing-200)*-1);
|
|
1606
|
-
}
|
|
1607
|
-
.carousel__control .icon--chevron-right-12{
|
|
1608
1608
|
-webkit-margin-start:1px;
|
|
1609
1609
|
margin-inline-start:1px;
|
|
1610
1610
|
}
|
|
1611
|
-
.carousel__control .icon--chevron-left-12{
|
|
1612
|
-
-webkit-margin-end:1px;
|
|
1613
|
-
margin-inline-end:1px;
|
|
1614
|
-
}
|
|
1615
1611
|
.carousel__control svg{
|
|
1616
1612
|
color:var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
|
|
1617
1613
|
}
|
|
@@ -1672,7 +1668,7 @@ span.carousel,span.carousel__container{
|
|
|
1672
1668
|
left:calc(var(--spacing-200)*-1);
|
|
1673
1669
|
right:unset;
|
|
1674
1670
|
}
|
|
1675
|
-
[dir=rtl] .carousel__control .icon--
|
|
1671
|
+
[dir=rtl] .carousel__control .icon--12{
|
|
1676
1672
|
transform:rotate(180deg);
|
|
1677
1673
|
}
|
|
1678
1674
|
@supports not ((-webkit-scroll-snap-coordinate:0 0) or (-ms-scroll-snap-coordinate:0 0) or (scroll-snap-coordinate:0 0) or (scroll-snap-align:start)){
|
|
@@ -2343,11 +2339,11 @@ span.combobox{
|
|
|
2343
2339
|
display:block;
|
|
2344
2340
|
}
|
|
2345
2341
|
|
|
2346
|
-
.combobox--expanded svg.icon--
|
|
2342
|
+
.combobox--expanded svg.icon--12{
|
|
2347
2343
|
transform:rotate(180deg);
|
|
2348
2344
|
}
|
|
2349
2345
|
|
|
2350
|
-
.combobox__control>svg.icon--
|
|
2346
|
+
.combobox__control>svg.icon--12{
|
|
2351
2347
|
color:var(--combobox-textbox-icon-color, var(--color-foreground-primary));
|
|
2352
2348
|
pointer-events:none;
|
|
2353
2349
|
position:absolute;
|
|
@@ -3501,19 +3497,19 @@ button.filter-menu-form__footer[type=submit]:hover,button.filter-menu__footer:ho
|
|
|
3501
3497
|
margin-left:8px;
|
|
3502
3498
|
}
|
|
3503
3499
|
|
|
3504
|
-
.filter-menu__item[role=menuitemcheckbox] svg.icon--
|
|
3500
|
+
.filter-menu__item[role=menuitemcheckbox] svg.icon--checked,.filter-menu__item[role=menuitemradio] svg.icon--checked{
|
|
3505
3501
|
display:none;
|
|
3506
3502
|
}
|
|
3507
3503
|
|
|
3508
|
-
.filter-menu__item[role=menuitemcheckbox] svg.icon--
|
|
3504
|
+
.filter-menu__item[role=menuitemcheckbox] svg.icon--unchecked,.filter-menu__item[role=menuitemradio] svg.icon--unchecked{
|
|
3509
3505
|
display:block;
|
|
3510
3506
|
}
|
|
3511
3507
|
|
|
3512
|
-
.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--
|
|
3508
|
+
.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
|
|
3513
3509
|
display:none;
|
|
3514
3510
|
}
|
|
3515
3511
|
|
|
3516
|
-
.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--
|
|
3512
|
+
.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
|
|
3517
3513
|
display:block;
|
|
3518
3514
|
}
|
|
3519
3515
|
div.filter-menu__item[role^=menuitem]:focus:not(:focus-visible){
|
|
@@ -3565,7 +3561,7 @@ button.filter-menu-button__button:active,button.filter-menu-button__button:focus
|
|
|
3565
3561
|
.filter-menu-button__button-cell{
|
|
3566
3562
|
display:flex;
|
|
3567
3563
|
}
|
|
3568
|
-
.filter-menu-button__button-cell svg.icon--
|
|
3564
|
+
.filter-menu-button__button-cell svg.icon--12{
|
|
3569
3565
|
align-self:center;
|
|
3570
3566
|
color:var(--filter-menu-button-icon-color, var(--color-foreground-primary));
|
|
3571
3567
|
-webkit-margin-start:8px;
|
|
@@ -3644,26 +3640,26 @@ span.filter-menu-button__checkbox,span.filter-menu-button__radio{
|
|
|
3644
3640
|
width:18px;
|
|
3645
3641
|
}
|
|
3646
3642
|
|
|
3647
|
-
span.filter-menu-button__checkbox svg.icon--
|
|
3643
|
+
span.filter-menu-button__checkbox svg.icon--unchecked{
|
|
3648
3644
|
color:var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
|
|
3649
3645
|
display:block;
|
|
3650
3646
|
height:18px;
|
|
3651
3647
|
width:18px;
|
|
3652
3648
|
}
|
|
3653
|
-
span.filter-menu-button__checkbox svg.icon--
|
|
3649
|
+
span.filter-menu-button__checkbox svg.icon--checked{
|
|
3654
3650
|
color:var(--filter-menu-item-checked-color, var(--color-foreground-primary));
|
|
3655
3651
|
display:none;
|
|
3656
3652
|
height:18px;
|
|
3657
3653
|
width:18px;
|
|
3658
3654
|
}
|
|
3659
3655
|
|
|
3660
|
-
span.filter-menu-button__radio svg.icon--
|
|
3656
|
+
span.filter-menu-button__radio svg.icon--unchecked{
|
|
3661
3657
|
color:var(--filter-menu-item-unchecked-color, var(--color-foreground-primary));
|
|
3662
3658
|
display:block;
|
|
3663
3659
|
height:18px;
|
|
3664
3660
|
width:18px;
|
|
3665
3661
|
}
|
|
3666
|
-
span.filter-menu-button__radio svg.icon--
|
|
3662
|
+
span.filter-menu-button__radio svg.icon--checked{
|
|
3667
3663
|
color:var(--filter-menu-item-checked-color, var(--color-foreground-primary));
|
|
3668
3664
|
display:none;
|
|
3669
3665
|
height:18px;
|
|
@@ -3764,17 +3760,17 @@ button.filter-menu-button__footer:focus,button.filter-menu-button__footer:hover{
|
|
|
3764
3760
|
margin-left:8px;
|
|
3765
3761
|
}
|
|
3766
3762
|
|
|
3767
|
-
.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--
|
|
3763
|
+
.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked{
|
|
3768
3764
|
display:none;
|
|
3769
3765
|
}
|
|
3770
|
-
.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--
|
|
3766
|
+
.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked{
|
|
3771
3767
|
display:block;
|
|
3772
3768
|
}
|
|
3773
3769
|
|
|
3774
|
-
.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--
|
|
3770
|
+
.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
|
|
3775
3771
|
display:none;
|
|
3776
3772
|
}
|
|
3777
|
-
.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--
|
|
3773
|
+
.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
|
|
3778
3774
|
display:block;
|
|
3779
3775
|
}
|
|
3780
3776
|
div.filter-menu-button__item[role^=menuitem]:focus:not(:focus-visible){
|
|
@@ -5155,6 +5151,15 @@ svg.icon--64-colored{
|
|
|
5155
5151
|
svg.icon--disabled{
|
|
5156
5152
|
filter:var(--color-icon-disabled-filter);
|
|
5157
5153
|
}
|
|
5154
|
+
svg.icon--attention-filled{
|
|
5155
|
+
color:var(--color-foreground-attention);
|
|
5156
|
+
}
|
|
5157
|
+
svg.icon--confirmation-filled{
|
|
5158
|
+
color:var(--color-foreground-confirmation);
|
|
5159
|
+
}
|
|
5160
|
+
svg.icon--information-filled{
|
|
5161
|
+
color:var(--color-foreground-information);
|
|
5162
|
+
}
|
|
5158
5163
|
a.icon-link{
|
|
5159
5164
|
align-items:center;
|
|
5160
5165
|
display:inline-flex;
|
|
@@ -5733,7 +5738,7 @@ button.icon-btn.lightbox-dialog__prev{
|
|
|
5733
5738
|
max-height:95%;
|
|
5734
5739
|
}
|
|
5735
5740
|
|
|
5736
|
-
[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--
|
|
5741
|
+
[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
|
|
5737
5742
|
transform:rotate(180deg);
|
|
5738
5743
|
}
|
|
5739
5744
|
|
|
@@ -8031,7 +8036,7 @@ span.select{
|
|
|
8031
8036
|
vertical-align:middle;
|
|
8032
8037
|
}
|
|
8033
8038
|
|
|
8034
|
-
.select svg.icon--
|
|
8039
|
+
.select svg.icon--12{
|
|
8035
8040
|
height:100%;
|
|
8036
8041
|
pointer-events:none;
|
|
8037
8042
|
position:absolute;
|
|
@@ -9089,7 +9094,7 @@ button.toast-dialog__close>svg{
|
|
|
9089
9094
|
min-width:var(--toggle-button-list-width-min);
|
|
9090
9095
|
}
|
|
9091
9096
|
|
|
9092
|
-
.toggle-button--list-layout .toggle-button__content,.toggle-button--list-layout .toggle-button__image-container{
|
|
9097
|
+
.toggle-button--list-layout .toggle-button__content:not(:only-child),.toggle-button--list-layout .toggle-button__image-container{
|
|
9093
9098
|
align-self:self-start;
|
|
9094
9099
|
}
|
|
9095
9100
|
|
|
@@ -9202,7 +9207,7 @@ button.toast-dialog__close>svg{
|
|
|
9202
9207
|
min-width:auto;
|
|
9203
9208
|
}
|
|
9204
9209
|
|
|
9205
|
-
.toggle-button-group--list-layout .toggle-button__content,.toggle-button-group--list-layout .toggle-button__image-container{
|
|
9210
|
+
.toggle-button-group--list-layout .toggle-button__content:not(:only-child),.toggle-button-group--list-layout .toggle-button__image-container{
|
|
9206
9211
|
align-self:flex-start;
|
|
9207
9212
|
}
|
|
9208
9213
|
|