@odx/ui 3.2.0 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/ui
 
+## 3.2.2
+
+### Patch Changes
+
+- 3eb8c54: Large variant for button component
+- b3993a0: New condensed variant to rich-list component to set vrtical padding to 0 for list items
+
+## 3.2.1
+
+### Patch Changes
+
+- d9e27d4: The rich list component was refactored by changing the selector from `rich-list-header` to `rich-list-item-header`. All the logic previously in `rich-list-header` has been moved to `rich-list-item` to enhance its compatibility with a disabled controller
+
 ## 3.2.0
 
 ### Minor Changes

package/core-theme.css

@@ -2635,6 +2635,24 @@ html body .odx-fs-italic {
 .odx-button--small > .odx-icon[alignRight] {
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
 }
+.odx-button--large {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  height: calc(var(--odx-vertical-rythm-base-size) * 2);
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 1);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 1);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)));
+}
+.odx-button--large > .odx-icon {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * -0.3333);
+}
+.odx-button--large > .odx-icon[alignLeft] {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
+.odx-button--large > .odx-icon[alignRight] {
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
 
 .odx-action-group {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.25);
@@ -5450,16 +5468,17 @@ html body .odx-fs-italic {
   display: block;
 }
 
-.odx-rich-list-header {
+.odx-rich-list-item-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;
+  flex: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.odx-rich-list-header__title {
+.odx-rich-list-item-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);
@@ -5469,25 +5488,32 @@ html body .odx-fs-italic {
   overflow: hidden;
   text-align: center;
 }
-.odx-rich-list-header__icon {
+.odx-rich-list-item-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.is-disabled .odx-rich-list-header__title,
-.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+.odx-rich-list:not(.odx-rich-list--condensed) > .odx-rich-list-item {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+}
+.odx-rich-list-item.is-disabled .odx-rich-list-item-header__title,
+.odx-rich-list-item.is-disabled .odx-rich-list-item-header .odx-avatar {
   color: var(--odx-c-text-disabled);
 }
-.odx-rich-list-item.is-disabled .odx-rich-list-header .odx-avatar {
+.odx-rich-list-item.is-disabled .odx-rich-list-item-header .odx-avatar {
   filter: saturate(0);
 }
+.odx-rich-list-item__header {
+  -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;
+}
 .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);
@@ -5496,10 +5522,10 @@ html body .odx-fs-italic {
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   overflow: hidden;
 }
-.odx-rich-list-item--empty .odx-rich-list-header__expand-button {
+.odx-rich-list-item--empty .odx-rich-list-item__expand-button {
   display: none;
 }
-.odx-rich-list-item--expanded .odx-rich-list-header__icon {
+.odx-rich-list-item--expanded .odx-rich-list-item__icon {
   transform: scaleY(-1);
 }
 

package/package.json

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

package/scss/components/button.component.scss

@@ -147,4 +147,24 @@
       @include dimensions.margin($icon-margin, left);
     }
   }
+
+  &--large {
+    $icon-margin: 0.5;
+
+    @include dimensions.height(2, 2);
+    @include dimensions.padding-x(2 * $icon-margin);
+    @include typography.font-size(1);
+
+    > .odx-icon {
+      @include dimensions.margin-x(-$icon-margin * math.div(2, 3));
+    }
+
+    > .odx-icon[alignLeft] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), right);
+    }
+
+    > .odx-icon[alignRight] {
+      @include dimensions.margin($icon-margin * math.div(2, 3), left);
+    }
+  }
 }

package/scss/components/{rich-list-header.component.scss → rich-list-item-header.component.scss}

@@ -4,12 +4,13 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-.odx-rich-list-header {
+.odx-rich-list-item-header {
   $root: &;
 
   align-items: center;
   column-gap: dimensions.get-size(math.div(16, 24));
   display: flex;
+  flex: 1;
   user-select: none;
 
   &__title {

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

@@ -6,23 +6,33 @@
 
 .odx-rich-list-item {
   $root: &;
+  $parent: odx-rich-list;
 
-  @include dimensions.padding(math.div(8, 24));
+  @include dimensions.padding-x(math.div(8, 24));
+
+  .#{$parent}:not(.#{$parent}--condensed) > & {
+    @include dimensions.padding-y(math.div(8, 24));
+  }
 
   border-bottom: 1px solid var(--odx-input-control-outline-color);
   display: block;
 
   &.is-disabled {
-    .odx-rich-list-header__title,
-    .odx-rich-list-header .odx-avatar {
+    .odx-rich-list-item-header__title,
+    .odx-rich-list-item-header .odx-avatar {
       color: var(--odx-c-text-disabled);
     }
 
-    .odx-rich-list-header .odx-avatar {
+    .odx-rich-list-item-header .odx-avatar {
       filter: saturate(0);
     }
   }
 
+  &__header {
+    column-gap: dimensions.get-size(math.div(16, 24));
+    display: flex;
+  }
+
   &__slot {
     @include dimensions.margin(math.div(8, 24), top);
     @include dimensions.padding(math.div(16, 24));
@@ -31,13 +41,13 @@
   }
 
   &--empty {
-    .odx-rich-list-header__expand-button {
+    #{$root}__expand-button {
       display: none;
     }
   }
 
   &--expanded {
-    .odx-rich-list-header__icon {
+    #{$root}__icon {
       transform: scaleY(-1);
     }
   }

package/scss/core.scss

@@ -73,7 +73,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-header.component.scss';
 @use 'components/rich-list-item.component.scss';
 @use 'components/select.component';
 @use 'components/slider.component';