@odx/ui 2.11.1 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 ## 2.9.9
 
+## 2.12.1
+
+### Patch Changes
+
+- 9b0e638: Warning and Confirmation Variants to chip
+
+## 2.12.0
+
+### Minor Changes
+
+- e5b4916: new design for rich list component
+
 ## 2.11.1
 
 ### Patch Changes

package/core-theme.css

@@ -2568,6 +2568,22 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-confirmation-disabled);
   color: var(--odx-c-confirmation-text-disabled);
 }
+.odx-button--warning {
+  background-color: var(--odx-c-warning);
+  color: var(--odx-c-warning-text);
+}
+@media (hover: hover){
+.odx-button--warning:hover {
+  background-color: var(--odx-c-warning-hover);
+}
+}
+.odx-button--warning.odx-dropdown-host[aria-expanded=true], .odx-button--warning.is-active, .odx-button--warning:active {
+  background-color: var(--odx-c-warning-active);
+}
+.odx-button--warning:disabled, .odx-button--warning.is-disabled {
+  background-color: var(--odx-c-warning-disabled);
+  color: var(--odx-c-warning-text-disabled);
+}
 .odx-button--ghost, .odx-main-menu__close, .odx-main-menu-button, .odx-action-group > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
   outline: var(--odx-v-outline-width) solid transparent;
   outline-offset: calc(-1 * var(--odx-v-outline-width));
@@ -3544,6 +3560,14 @@ body {
   background-color: var(--odx-c-danger);
   color: var(--odx-c-danger-text);
 }
+.odx-chip--warning {
+  background-color: var(--odx-c-warning);
+  color: var(--odx-c-warning-text);
+}
+.odx-chip--confirmation {
+  background-color: var(--odx-c-confirmation);
+  color: var(--odx-c-confirmation-text);
+}
 
 .odx-chip-list {
   display: flex;
@@ -5357,66 +5381,58 @@ body[odxTheme=dark], body.odx-theme-dark {
   display: block;
 }
 
-.odx-rich-list-item {
-  transition-delay: 0ms;
-  transition-duration: var(--odx-v-transition-duration);
-  transition-property: color;
-  transition-timing-function: var(--odx-v-transition-easing-fn);
-  border-bottom: 1px solid var(--odx-input-control-outline-color);
-  display: block;
-}
-.odx-rich-list-item__panel {
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transition-delay: 0ms;
-  transition-duration: var(--odx-v-transition-duration);
-  transition-property: background-color, outline-color;
-  transition-timing-function: var(--odx-v-transition-easing-fn);
-  outline: var(--odx-v-outline-width) solid transparent;
-  outline-offset: calc(-1 * var(--odx-v-outline-width));
-  cursor: pointer;
+.odx-rich-list-header {
+  align-items: center;
+  -moz-column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+       column-gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+  display: flex;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: var(--odx-v-border-radius-controls);
-  position: relative;
-}
-.odx-rich-list-item__panel:focus-visible {
-  outline-color: var(--odx-c-focus-outline);
 }
-.odx-rich-list-item__panel:disabled, .odx-rich-list-item__panel.is-disabled {
-  outline-color: transparent;
-  pointer-events: none;
+.odx-rich-list-header__title {
+  font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+  flex: 1;
+  max-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  overflow: hidden;
+  text-align: center;
 }
-@media (hover: hover){
-.odx-rich-list-item__panel:hover {
-  background-color: var(--blue-700-5);
+.odx-rich-list-header__icon {
+  position: relative;
 }
+
+.odx-rich-list-item {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
 }
-.odx-rich-list-item__icon {
-  transition-delay: 0ms;
-  transition-duration: var(--odx-v-transition-duration);
-  transition-property: transform;
-  transition-timing-function: var(--odx-v-transition-easing-fn);
-  left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  position: absolute;
-  top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  transform: rotate(0deg);
+.odx-rich-list-item.is-disabled .odx-rich-list-header__title,
+.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+  color: var(--odx-c-text-disabled);
 }
-.odx-rich-list-item--expanded .odx-rich-list-item__icon {
-  transform: rotate(90deg);
+.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+  filter: saturate(0);
 }
 .odx-rich-list-item__slot {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
-  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
   overflow: hidden;
 }
+.odx-rich-list-item--empty .odx-rich-list-header__expand-button {
+  display: none;
+}
+.odx-rich-list-item--expanded .odx-rich-list-header__icon {
+  transform: scaleY(-1);
+}
 
 body {
   --odx-select-max-height: 220px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "2.11.1",
+  "version": "2.12.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/button.component.scss

@@ -10,7 +10,7 @@
 @use 'icon.component';
 
 .odx-button {
-  $variants: secondary, primary, highlight, success, danger, confirmation;
+  $variants: secondary, primary, highlight, success, danger, confirmation, warning;
   $icon-margin: 0.25;
 
   @extend .odx-button--secondary;

package/scss/components/chip.component.scss

@@ -4,8 +4,8 @@
 @use '../abstract/motion';
 @use '../abstract/typography';
 
-$sizes: 'small' 1 -1, 'medium' 1.5 0;
-$variants: 'secondary', 'highlight', 'success', 'danger';
+$sizes: small 1 -1, medium 1.5 0;
+$variants: secondary, highlight, success, danger, warning, confirmation;
 
 .odx-chip {
   $root: &;

package/scss/components/rich-list-header.component.scss

@@ -0,0 +1,28 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-rich-list-header {
+  $root: &;
+
+  align-items: center;
+  column-gap: dimensions.get-size(math.div(16, 24));
+  display: flex;
+  user-select: none;
+
+  &__title {
+    @include typography.font-size(-1);
+    @include dimensions.line-height(math.div(20, 24));
+
+    flex: 1;
+    max-height: dimensions.get-size(math.div(36, 24));
+    overflow: hidden;
+    text-align: center;
+  }
+
+  &__icon {
+    position: relative;
+  }
+}

package/scss/components/rich-list-item.component.scss

@@ -7,45 +7,38 @@
 .odx-rich-list-item {
   $root: &;
 
-  @include motion.transition(color);
+  @include dimensions.padding(math.div(8, 24));
 
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 
-  &__panel {
-    @include dimensions.padding(math.div(16, 24), right);
-    @include dimensions.padding(math.div(64, 24), left);
-    @include dimensions.padding(math.div(16, 24), top);
-    @include dimensions.padding(math.div(16, 24), bottom);
-    @include motion.transition(background-color outline-color);
-    @include utils.interactive(false);
-
-    border-radius: var(--odx-v-border-radius-controls);
-    position: relative;
-
-    &:hover {
-      background-color: var(--blue-700-5);
+  &.is-disabled {
+    .odx-rich-list-header__title,
+    .odx-rich-list-header .odx-avatar {
+      color: var(--odx-c-text-disabled);
     }
-  }
 
-  &__icon {
-    @include motion.transition(transform);
-
-    left: dimensions.get-size(math.div(16, 24));
-    position: absolute;
-    top: dimensions.get-size(math.div(16, 24));
-    transform: rotate(0deg);
-
-    #{$root}--expanded & {
-      transform: rotate(90deg);
+    .odx-rich-list-header .odx-avatar {
+      filter: saturate(0);
     }
   }
 
   &__slot {
+    @include dimensions.margin(math.div(8, 24), top);
     @include dimensions.padding(math.div(16, 24));
-    @include dimensions.padding(math.div(8, 24), top);
-    @include dimensions.padding(math.div(64, 24), left);
 
     overflow: hidden;
   }
+
+  &--empty {
+    .odx-rich-list-header__expand-button {
+      display: none;
+    }
+  }
+
+  &--expanded {
+    .odx-rich-list-header__icon {
+      transform: scaleY(-1);
+    }
+  }
 }

package/scss/core.scss

@@ -71,6 +71,7 @@ Layout
 @use 'components/rail-navigation.component';
 @use 'components/rail-navigation-item.component';
 @use 'components/rich-list.component.scss';
+@use 'components/rich-list-header.component.scss';
 @use 'components/rich-list-item.component.scss';
 @use 'components/select.component';
 @use 'components/slider.component';