@empathyco/x-components 3.0.0-alpha.294 → 3.0.0-alpha.296

package/CHANGELOG.md

@@ -3,8 +3,50 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.296](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.295...@empathyco/x-components@3.0.0-alpha.296) (2023-01-24)
+
+### Features
+
+- remove duplicates from image placeholder/fallback classes (#1032)
+  ([2c5390c](https://github.com/empathyco/x/commit/2c5390c0e5cf2d4bc0b843422d2e99415b6e58ff)),
+  closes [EX-7836](https://searchbroker.atlassian.net/browse/EX-7836)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.295](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.294...@empathyco/x-components@3.0.0-alpha.295) (2023-01-24)
+
+### ⚠ BREAKING CHANGES
+
+- **components:** Renamed `SlidingPanel` css classes `x-sliding-panel--at-start` and
+  `x-sliding-panel--at-end` to `x-sliding-panel-at-start` and `x-sliding-panel-at-end` respectively.
+- **components:** Renamed `SlidingPanel` buttons css classes `x-sliding-panel__button-left` and
+  `x-sliding-panel__button-right` to `x-sliding-panel-button-left` and
+  `x-sliding-panel-button-right` respectively.
+- **components:** Old design-system `SlidingPanel` styles (including the updated button classes) are
+  now located in the `deprecated-full-theme.css` file.
+
+### Features
+
+- **components:** use XDS `sliding panel` (#1028)
+  ([9773003](https://github.com/empathyco/x/commit/97730036b473678b8487a386bc6d83bd3ecf872d)),
+  closes [EX-7831](https://searchbroker.atlassian.net/browse/EX-7831)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.294](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.293...@empathyco/x-components@3.0.0-alpha.294) (2023-01-23)
 
+### ⚠ BREAKING CHANGES
+
+- **design-system:** `picture` and some `result` styles related are now deprecated. To continue
+  using them import from `deprecated-full-theme.css`.
+- Rename `x-result-picture__image` to `x-result-picture-image`.
+
 ### Features
 
 - **design-system:** add `product-image` `XDS` component (#1025)

package/design-system/default-theme.css

@@ -1890,62 +1890,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-.x-sliding-panel {
-  z-index: 0;
-  background-color: var(--x-color-background-sliding-panel);
-}
-.x-sliding-panel__button.x-button {
-  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
-  pointer-events: none;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
-  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
-  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-  opacity: 0;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: none;
-          mask: none;
-}
-.x-sliding-panel__scroll > * {
-  flex: 0 0 auto;
-}
-.x-sliding-panel__scroll > .x-list {
-  --x-string-flow-list: row nowrap;
-}
-:root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);

package/design-system/deprecated-full-theme.css

@@ -372,6 +372,70 @@
   border-style: solid;
   border-width: var(--x-size-border-width-result-picture-default);
 }
+.x-sliding-panel {
+  z-index: 0;
+  background-color: var(--x-color-background-sliding-panel);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel-button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-start):hover .x-sliding-panel-button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel-at-end):hover .x-sliding-panel-button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-end .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel-at-start.x-sliding-panel-at-end .x-sliding-panel__scroll {
+  -webkit-mask: none;
+          mask: none;
+}
+.x-sliding-panel__scroll > * {
+  flex: 0 0 auto;
+}
+.x-sliding-panel__scroll > .x-list {
+  --x-string-flow-list: row nowrap;
+}
+.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 :root {
   --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
   --x-color-text-suggestion-group-matching-part-default: var(