19.0.0 release

.changeset/curvy-experts-smell.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+chore: added comment to deprecated components about their removal

.changeset/late-rats-hope.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+chore: remove deprecations for next major version

.changeset/rich-peas-clap.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+fix(table): remove aria-pressed from table headings

.changeset/silent-games-retire.md

@@ -0,0 +1,6 @@
+---
+"@ebay/skin": major
+---
+
+feat(dropdowns): added floating-ui support
+All dropdowns should be using floating-ui by default. In order to have the old non-floating ui positioning, use `--set-position` modifier on all dropdowns (such as `.menu-button__menu--set-position`)

.changeset/smart-bugs-turn.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+feat(floating-ui): added support in date-textbox

.changeset/swift-hairs-deny.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+feat(icons): added new icons and removed serveral icons

.changeset/twelve-llamas-flash.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+feat(combobox): remove chevron from combobox

.github/workflows/gh-pages.yml

@@ -45,7 +45,9 @@ jobs:
       - run: npm run build
       - run: npm run deploy
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: _site/public
 
   # Deployment job
   deploy:
@@ -63,7 +65,7 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
   release:
     runs-on: ubuntu-latest
     if: "${{ github.repository_owner == 'ebay' && github.event_name == 'push' }}"

.stylelintrc

@@ -24,6 +24,7 @@
         "selector-class-pattern": null,
         "alpha-value-notation": "number",
         "declaration-block-no-redundant-longhand-properties": null,
+        "media-feature-range-notation": null,
         "value-keyword-case": [
             "lower",
             {
@@ -45,8 +46,10 @@
             ],
             "rules": {
                 "scss/at-mixin-argumentless-call-parentheses": null,
+                "at-rule-descriptor-value-no-unknown": null,
                 "scss/dollar-variable-pattern": null,
                 "order/properties-alphabetical-order": true,
+                "declaration-property-value-no-unknown": null,
                 "value-keyword-case": [
                     "lower",
                     {

dist/chips-combobox/chips-combobox.css

@@ -60,7 +60,7 @@
     transition: transform 0.2s linear;
 }
 
-.chips-combobox .combobox__listbox {
+.chips-combobox .combobox__listbox--set-position {
     top: calc(100% + var(--spacing-150));
 }
 

dist/combobox/combobox.css

@@ -38,12 +38,17 @@ span.combobox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.combobox__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 
 .combobox__listbox--reverse,

dist/date-textbox/date-textbox.css

@@ -4,6 +4,7 @@
 }
 .date-textbox {
     --calendar-month-width: 311px;
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {

dist/drawer-dialog/drawer-dialog.css

@@ -1,3 +1,4 @@
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);

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

@@ -152,23 +152,26 @@ button.filter-menu-button__button[aria-pressed="true"][disabled]:hover {
     border-radius: 16px;
     box-shadow: var(--bubble-shadow);
     display: none;
-    max-width: 288px;
     min-width: 144px;
     overflow: hidden;
     position: absolute;
-    top: calc(100% + 8px);
+    top: 0;
     width: max-content;
     z-index: 1;
 }
 
+.filter-menu-button__menu--set-position {
+    top: calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded="true"]
     + .filter-menu-button__menu {
     display: block;
 }
 
 .filter-menu-button__items {
     margin-top: 8px;
-    max-height: calc(50vh - 40px);
+    max-height: 400px;
     min-width: 100%;
     overflow-y: auto;
     position: relative;

dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,3 +1,4 @@
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 :root {
     --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
     --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);

dist/infotip/infotip.css

@@ -43,8 +43,9 @@ span.infotip__mask {
 
 .infotip__cell {
     display: flex;
+    overflow-wrap: anywhere;
     padding: var(--spacing-100) var(--spacing-200);
-    word-break: break-word;
+    word-break: normal;
 }
 
 .infotip__content {

dist/lightbox-dialog/lightbox-dialog.css

@@ -211,18 +211,6 @@ button.icon-btn.lightbox-dialog__prev {
     opacity: 1;
     transform: translateY(0);
 }
-
-.lightbox-dialog__handle {
-    background-color: initial;
-    border: none;
-    left: 0;
-    margin: -11px auto;
-    padding: 8px;
-    position: relative;
-    right: 0;
-    top: 11px;
-    z-index: 2;
-}
 .lightbox-dialog__handle:after {
     background-color: var(--dialog-handle-color, var(--color-stroke-default));
     border-radius: 3px;
@@ -232,11 +220,6 @@ button.icon-btn.lightbox-dialog__prev {
     width: 24px;
 }
 
-.lightbox-dialog__window--expanded {
-    height: 95%;
-    max-height: 95%;
-}
-
 [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--16 {
     transform: rotate(180deg);
 }
@@ -263,20 +246,13 @@ button.icon-btn.lightbox-dialog__prev {
         max-width: 100%;
         width: 100%;
     }
-    .lightbox-dialog--fullscreen .lightbox-dialog__handle,
-    .lightbox-dialog--large .lightbox-dialog__handle {
-        display: none;
-    }
 }
 @media (min-width: 512px) {
     .lightbox-dialog__window {
         border-radius: var(--lightbox-border-radius, var(--border-radius-100));
         margin: auto;
         max-width: calc(88% - var(--spacing-400));
     }
-    .lightbox-dialog__handle {
-        display: none;
-    }
     .lightbox-dialog--narrow .lightbox-dialog__window {
         max-width: var(--dialog-lightbox-narrow-max-width);
     }

dist/listbox-button/listbox-button.css

@@ -37,12 +37,17 @@ div.listbox-button__listbox {
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+div.listbox-button__listbox--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] div.listbox-button__listbox {
     left: unset;

dist/menu-button/menu-button.css

@@ -23,13 +23,19 @@
     display: none;
     left: 0;
     max-height: 400px;
-    min-width: 100%;
     outline: 0;
     overflow-y: auto;
     position: absolute;
+    top: 0;
+    width: -moz-fit-content;
+    width: fit-content;
+    z-index: 2;
+}
+.fake-menu-button__menu--set-position,
+.menu-button__menu--set-position {
+    min-width: 100%;
     top: calc(100% + 4px);
     width: auto;
-    z-index: 2;
 }
 [dir="rtl"] .fake-menu-button__menu,
 [dir="rtl"] .menu-button__menu {

dist/skeleton/skeleton.css

@@ -114,9 +114,6 @@ div.skeleton__text:not(:last-child),
 div.skeleton__textbox:not(:last-child) {
     margin-block-end: var(--spacing-150);
 }
-.skeleton--elevated {
-    --skeleton-background: var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary {
     --skeleton-background: var(--color-loading-fill-on-secondary);
@@ -126,9 +123,6 @@ div.skeleton__textbox:not(:last-child) {
     .skeleton {
         --skeleton-background: var(--color-loading-shimmer);
     }
-    .skeleton--elevated {
-        --skeleton-background: var(--color-loading-shimmer-elevated);
-    }
     .skeleton--on-secondary {
         --skeleton-background: var(--color-loading-shimmer-on-secondary);
     }