Merge pull request #2500 from eBay/18.5.0

Release PR for 18.5.0

.changeset/big-plums-applaud.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(filter-menu): added search header

.changeset/flat-snakes-sell.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(eek): added large size and fixed regular arrow

.changeset/light-pots-wink.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(list): added inremental list and radio fieldset in list

.changeset/nervous-pianos-shout.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(ccd): new component

.changeset/selfish-flowers-kneel.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(table): added loading state

.changeset/tidy-rockets-chew.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(accordion): new component

.changeset/wicked-taxis-relate.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(filter-menu): fixed cascade

dist/accordion/accordion.css

@@ -0,0 +1,58 @@
+ul.accordion {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+ul.accordion ::marker {
+    font-size: 0;
+}
+
+ul.accordion li:not(:last-child) {
+    border-bottom: 1px solid var(--color-stroke-subtle);
+}
+
+ul.accordion summary.details__summary {
+    border-radius: 0;
+    display: flex;
+    font-size: var(--font-size-medium);
+    justify-content: space-between;
+    min-height: 48px;
+    padding: 12px 16px;
+}
+
+ul.accordion details .details__content {
+    margin: 0 16px 6px;
+    opacity: 0;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition:
+        opacity 0.5s cubic-bezier(0.3, 0, 0, 1),
+        transform 0.5s cubic-bezier(0.3, 0, 0, 1);
+}
+
+ul.accordion details[open] .details__content {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+ul.accordion--large summary.details__summary {
+    font-size: var(--font-size-large-1);
+    min-height: 52px;
+}
+
+ul.accordion details svg.details__expand,
+ul.accordion details[open] svg.details__collapse {
+    display: inline-block;
+}
+
+ul.accordion details svg.details__collapse,
+ul.accordion details[open] svg.details__expand {
+    display: none;
+}
+
+@media (prefers-reduced-motion) {
+    ul.accordion details .details__content,
+    ul.accordion details[open] .details__content {
+        transition: none;
+    }
+}

dist/ccd/ccd.css

@@ -0,0 +1,38 @@
+.ccd {
+    display: inline-flex;
+    gap: 8px;
+}
+
+.ccd__charger-icon {
+    height: 78px;
+    width: 58px;
+}
+
+.ccd__description-figure {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 55px;
+}
+
+.ccd__top-icon {
+    height: 24px;
+    width: 35px;
+}
+
+.ccd__body {
+    align-items: center;
+    border: 1px solid var(--color-foreground-primary);
+    border-radius: 1.5px;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.4375rem;
+    font-weight: var(--font-weight-bold);
+    gap: 2px;
+    height: 53px;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 53px;
+}

dist/eek/eek.css

@@ -7,6 +7,10 @@
     position: relative;
 }
 
+.eek--large {
+    height: 32px;
+}
+
 .eek__container {
     align-items: center;
     border: 1px solid #000;
@@ -19,6 +23,10 @@
     width: 9px;
 }
 
+.eek--large .icon--eek-arrow {
+    width: 12.5px;
+}
+
 .eek__arrow {
     overflow: hidden;
     width: 17px;
@@ -105,6 +113,10 @@
         -0.5px -0.5px 0 #000;
 }
 
+.eek--large .eek__rating {
+    font-size: 24px;
+}
+
 .eek__rating-range {
     align-items: center;
     background-color: #fff;
@@ -116,13 +128,28 @@
     padding: 0 1px;
 }
 
+.eek--large .eek__rating-range {
+    height: 28px;
+}
+
 .eek__rating-range > .icon--eek-range-arrow {
     height: 6px;
     width: 5px;
 }
 
+.eek--large .eek__rating-range > .icon--eek-range-arrow {
+    height: 7px;
+    width: 6px;
+}
+
 .eek__rating-range > span {
     font-size: 8px;
+    height: 8px;
+}
+
+.eek--large .eek__rating-range > span {
+    font-size: 10px;
+    height: 10px;
 }
 @media not all and (-webkit-min-device-pixel-ratio: 0),
     not all and (min-resolution: 0.001dpcm) {
@@ -134,3 +161,10 @@
         }
     }
 }
+[dir="rtl"] .eek .icon--eek-arrow {
+    transform: rotate(180deg);
+}
+[dir="rtl"] .eek__container {
+    border-left: none;
+    border-right: 1px solid #000;
+}

dist/filter-menu/filter-menu.css

@@ -114,6 +114,38 @@ span.filter-menu__item[role^="menuitem"] {
     margin-bottom: 8px;
 }
 
+.filter-menu__header {
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    display: flex;
+    gap: var(--spacing-100);
+    padding: 14px var(--spacing-200);
+}
+
+.filter-menu__header svg {
+    color: var(--color-foreground-secondary);
+}
+
+.filter-menu__header input {
+    background-color: inherit;
+    border: none;
+    color: var(--color-foreground-primary);
+    flex-grow: 1;
+    font-size: var(--font-size-default);
+}
+
+.filter-menu__header button.btn {
+    border: none;
+    min-height: var(--spacing-250);
+    min-width: var(--spacing-250);
+    padding: 0;
+    width: var(--spacing-250);
+}
+
+.filter-menu__header button:focus-visible {
+    outline-style: solid;
+}
+
 button.filter-menu-form__footer[type="submit"],
 button.filter-menu__footer {
     background-color: var(
@@ -176,7 +208,7 @@ button.filter-menu__footer:hover {
 .filter-menu-form__text,
 .filter-menu__text {
     flex-grow: 1;
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 .filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,

dist/list/list.css

@@ -2,13 +2,15 @@
     max-width: 480px;
 }
 
+.list ol,
 .list ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.list ul li > * {
+.list fieldset > *,
+.list li > * {
     align-items: center;
     background-color: var(
         --list-background-color,
@@ -36,6 +38,16 @@
     flex: 1;
 }
 
+.list ol li {
+    counter-increment: item;
+}
+
+.list ol li > :before {
+    content: counter(item) ".";
+    margin-inline-end: var(--spacing-200);
+    width: var(--spacing-300);
+}
+
 .list li > a,
 .list li > button {
     border: none;