@odx/ui 4.3.5 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @odx/ui
 
+## 4.4.0
+
+### Minor Changes
+
+- cae7f1c: Add "interactive" boolean attribute to expandable list item to change the expanded state control behavior
+
+### Patch Changes
+
+- 6411da5: New slot for Icon Prefix in Chip Component
+
 ## 4.3.5
 
 ### Patch Changes

package/core-theme.css

@@ -3752,6 +3752,9 @@ html body .odx-fs-italic {
 .odx-chip--small .odx-chip__action {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
 }
+.odx-chip--small > .odx-icon {
+  font-size: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
+}
 .odx-chip--medium {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -3764,6 +3767,9 @@ html body .odx-fs-italic {
 .odx-chip--medium .odx-chip__action {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * -0.5);
 }
+.odx-chip--medium > .odx-icon {
+  font-size: calc(var(--odx-vertical-rythm-base-size) * 1);
+}
 .odx-chip--secondary {
   background-color: var(--odx-c-secondary);
   color: var(--odx-c-secondary-text);
@@ -3788,6 +3794,9 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-confirmation);
   color: var(--odx-c-confirmation-text);
 }
+.odx-chip > .odx-icon {
+  align-self: center;
+}
 
 .odx-chip-list {
   display: flex;
@@ -4040,6 +4049,9 @@ html body .odx-fs-italic {
 .odx-expandable-list-item__icon--expanded {
   transform: scaleY(-1);
 }
+.odx-expandable-list-item--interactive .odx-expandable-list-item__action {
+  pointer-events: none;
+}
 
 :root {
   --odx-footer-min-height: calc(var(--odx-vertical-rythm-base-size) * 10);

package/package.json

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

package/scss/components/chip.component.scss

@@ -4,7 +4,7 @@
 @use '../abstract/motion';
 @use '../abstract/typography';
 
-$sizes: small 1 -1, medium 1.5 0;
+$sizes: (small 1 -1 math.div(16, 24), medium 1.5 0 1);
 $variants: secondary, highlight, success, danger, warning, confirmation;
 
 .odx-chip {
@@ -43,7 +43,7 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
     }
   }
 
-  @each $size, $size-factor, $font-size-factor in $sizes {
+  @each $size, $size-factor, $font-size-factor, $icon-size in $sizes {
     &--#{$size} {
       @include dimensions.padding-x(math.div($size-factor, 3));
       @include dimensions.line-height($size-factor);
@@ -54,6 +54,10 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
       #{$root}__action {
         @include dimensions.margin(math.div($size-factor, -3), 'right');
       }
+
+      > .odx-icon {
+        font-size: dimensions.get-size($icon-size);
+      }
     }
   }
 
@@ -63,4 +67,8 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
       color: var(--odx-c-#{$variant}-text);
     }
   }
+
+  > .odx-icon {
+    align-self: center;
+  }
 }

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

@@ -50,4 +50,10 @@
   &__icon--expanded {
     transform: scaleY(-1);
   }
+
+  &--interactive {
+    #{$root}__action {
+      pointer-events: none;
+    }
+  }
 }