@odx/ui 3.1.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @odx/ui
 
+## 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
+
+- 3ebfb3c: Add brand-logo component which can be used to display the ODX brand logo
+
+### Patch Changes
+
+- c357174: Use CSS only icons for breadcrumb separator icons
+- 753c400: Add missing odx-v-layer-6 CSS variable
+
 ## 3.1.0
 
 ### Minor Changes

package/core-theme.css

@@ -312,6 +312,7 @@
 }
 
 :root {
+  --odx-v-max-page-width: 1440px;
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
   --odx-v-backdrop-blur: 3px;
@@ -322,6 +323,7 @@
   --odx-v-layer-3: 20;
   --odx-v-layer-4: 9000;
   --odx-v-layer-5: 9500;
+  --odx-v-layer-6: 9900;
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;
   --odx-v-outline-width: 1px;
@@ -2921,20 +2923,29 @@ html body .odx-fs-italic {
   flex-wrap: wrap;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
 }
-.odx-breadcrumbs .odx-link:last-child {
-  font-weight: var(--odx-typography-font-weight-bold);
-  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
-  color: var(--odx-c-text);
+.odx-breadcrumbs .odx-link {
+  white-space: nowrap;
 }
-.odx-breadcrumbs .odx-link:visited {
-  color: var(--odx-c-link);
+.odx-breadcrumbs .odx-link:not(:last-child) {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
 }
-.odx-breadcrumbs .odx-icon {
+.odx-breadcrumbs .odx-link:not(:last-child)::after {
   color: var(--gray-500);
+  content: "\f158";
+  display: inline-block;
+  font-family: "core-icons";
   font-size: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  pointer-events: none;
+  position: absolute;
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-breadcrumbs .odx-icon::before {
-  position: unset;
+.odx-breadcrumbs .odx-link:visited {
+  color: var(--odx-c-link);
+}
+.odx-breadcrumbs .odx-link:last-child, .odx-breadcrumbs .odx-link:last-child:visited {
+  font-weight: var(--odx-typography-font-weight-bold);
+  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+  color: var(--odx-c-text);
 }
 
 .odx-button-group {
@@ -3024,6 +3035,20 @@ html body .odx-fs-italic {
   border-radius: 0;
 }
 
+.odx-brand-logo {
+  color: var(--odx-c-text);
+  display: inline-block;
+  font-weight: var(--odx-typography-font-weight-bold);
+  letter-spacing: var(--odx-typography-font-weight-bold-letter-spacing);
+}
+.odx-brand-logo::before {
+  color: var(--odx-c-highlight);
+  content: "O";
+}
+.odx-brand-logo::after {
+  content: "DX";
+}
+
 :root {
   --odx-card-avatar-size: 64px;
   --odx-card-content-vertical-alignment: center;
@@ -5425,16 +5450,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);
@@ -5444,7 +5470,7 @@ html body .odx-fs-italic {
   overflow: hidden;
   text-align: center;
 }
-.odx-rich-list-header__icon {
+.odx-rich-list-item-header__icon {
   position: relative;
 }
 
@@ -5456,13 +5482,18 @@ html body .odx-fs-italic {
   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-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);
@@ -5471,10 +5502,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.1.0",
+  "version": "3.2.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/brand-logo.component.scss

@@ -0,0 +1,17 @@
+@use '../abstract/typography';
+
+.odx-brand-logo {
+  color: var(--odx-c-text);
+  display: inline-block;
+
+  @include typography.font-weight(bold);
+
+  &::before {
+    color: var(--odx-c-highlight);
+    content: 'O';
+  }
+
+  &::after {
+    content: 'DX';
+  }
+}

package/scss/components/breadcrumbs.component.scss

@@ -2,6 +2,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 @use '../abstract/typography';
+@use '@odx/icons/core/core-utils' as icons;
 
 .odx-breadcrumbs {
   @include dimensions.padding-x(1);
@@ -12,23 +13,33 @@
   gap: dimensions.get-size(math.div(8, 24));
 
   .odx-link {
-    &:last-child {
-      @include typography.font-weight(bold);
+    white-space: nowrap;
 
-      color: var(--odx-c-text);
+    &:not(:last-child) {
+      @include dimensions.margin(math.div(20, 24), right);
+
+      &::after {
+        color: var(--gray-500);
+        content: icons.get-icon-glyph('chevron-right');
+        display: inline-block;
+        font-family: icons.get-font-family();
+        font-size: dimensions.get-size(math.div(12, 24));
+        pointer-events: none;
+        position: absolute;
+
+        @include dimensions.margin(math.div(12, 24), left);
+      }
     }
 
     &:visited {
       color: var(--odx-c-link);
     }
-  }
 
-  .odx-icon {
-    color: var(--gray-500);
-    font-size: dimensions.get-size(math.div(12, 24));
+    &:last-child,
+    &:last-child:visited {
+      @include typography.font-weight(bold);
 
-    &::before {
-      position: unset;
+      color: var(--odx-c-text);
     }
   }
 }

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

@@ -13,16 +13,21 @@
   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 +36,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

@@ -40,6 +40,7 @@ Layout
 @use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
+@use 'components/brand-logo.component';
 @use 'components/card.component';
 @use 'components/calendar.component';
 @use 'components/checkbox.component';
@@ -72,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';

package/scss/variables/_visuals.scss

@@ -1,4 +1,5 @@
 :root {
+  --odx-v-max-page-width: 1440px;
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
@@ -12,6 +13,7 @@
   --odx-v-layer-3: 20;
   --odx-v-layer-4: 9000;
   --odx-v-layer-5: 9500;
+  --odx-v-layer-6: 9900;
 
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;