@odx/ui 4.5.0 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.5.2
+
+### Patch Changes
+
+- bead5c6: Leave animations for modals and dropdowns
+
+## 4.5.1
+
+### Patch Changes
+
+- 50fad0b: Required marker for switch and for checkbox components
+
 ## 4.5.0
 
 ### Minor Changes

package/core-theme.css

@@ -2139,9 +2139,6 @@ html body .odx-fs-italic {
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 }
-.odx-cdk-connected-overlay.is-hidden {
-  display: none;
-}
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
   max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -2157,6 +2154,9 @@ html body .odx-fs-italic {
 .odx-cdk-connected-overlay:popover-open {
   opacity: 1;
 }
+.odx-cdk-connected-overlay.is-hidden:popover-open {
+  opacity: 0;
+}
 @starting-style {
   .odx-cdk-connected-overlay:popover-open {
     opacity: 0;
@@ -3331,10 +3331,14 @@ html body .odx-fs-italic {
 }
 
 .odx-calendar {
+  --max-calendar-height: 300px;
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 }
+.odx-calendar:has(.odx-calendar-years) {
+  max-height: var(--max-calendar-height);
+}
 .odx-calendar-header {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -3698,6 +3702,15 @@ html body .odx-fs-italic {
   margin: 0;
   padding: 0;
 }
+.odx-checkbox__required {
+  font-size: calc(var(--odx-typography-base-size) * 1);
+  color: var(--odx-c-error-text);
+  margin-left: 2px;
+  vertical-align: top;
+}
+.odx-checkbox.is-disabled .odx-checkbox__required {
+  color: var(--odx-control-color-disabled);
+}
 
 .odx-chip {
   font-weight: var(--odx-typography-font-weight-medium);
@@ -5301,6 +5314,15 @@ html body .odx-fs-italic {
 .odx-modal[open]::backdrop, .odx-modal[open]:modal {
   opacity: 1;
 }
+.odx-modal.is-hidden[open]::backdrop, .odx-modal.is-hidden[open]:modal {
+  opacity: 0;
+}
+.odx-modal.is-hidden[open]:modal:not(.odx-modal--sidesheet) {
+  transform: translateY(calc(var(--odx-vertical-rythm-base-size) * 0.3334));
+}
+.odx-modal.is-hidden[open]:modal.odx-modal--sidesheet {
+  transform: translateX(calc(var(--odx-vertical-rythm-base-size) * 2));
+}
 .odx-modal[open]:modal {
   transform: translateY(0);
   transform: translateX(0);
@@ -6563,6 +6585,15 @@ html body .odx-fs-italic {
   margin: 0;
   padding: 0;
 }
+.odx-switch__required {
+  font-size: calc(var(--odx-typography-base-size) * 1);
+  color: var(--odx-c-error-text);
+  margin-left: 2px;
+  vertical-align: top;
+}
+.odx-switch.is-disabled .odx-switch__required {
+  color: var(--odx-control-color-disabled);
+}
 
 .odx-tab-bar-item {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);

package/package.json

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

package/scss/cdk/connected-overlay.scss

@@ -18,10 +18,6 @@
   transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
   transition-behavior: allow-discrete;
 
-  &.is-hidden {
-    display: none;
-  }
-
   &__content {
     left: 0 !important;
     max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
@@ -40,6 +36,10 @@
     opacity: 1;
   }
 
+  &.is-hidden:popover-open {
+    opacity: 0;
+  }
+
   @starting-style {
     &:popover-open {
       opacity: 0;

package/scss/components/calendar.component.scss

@@ -6,11 +6,16 @@
 
 .odx-calendar {
   $root: &;
+  --max-calendar-height: 300px;
 
   display: inline-block;
   flex-direction: column;
   max-height: inherit;
 
+  &:has(#{$root}-years) {
+    max-height: var(--max-calendar-height);
+  }
+
   &-header {
     @include motion.transition(background-color outline-color color border-radius);
     @include utils.vertical-center-content();

package/scss/components/checkbox.component.scss

@@ -121,4 +121,16 @@
       padding: 0;
     }
   }
+
+  &__required {
+    @include typography.font-size(0);
+
+    color: var(--odx-c-error-text);
+    margin-left: 2px;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-control-color-disabled);
+    }
+  }
 }

package/scss/components/modal.component.scss

@@ -48,6 +48,21 @@ $modal-padding: math.div(12, 24);
     opacity: 1;
   }
 
+  &.is-hidden {
+    &[open]::backdrop,
+    &[open]:modal {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
+  }
+
   &[open]:modal {
     transform: translateY(0);
     transform: translateX(0);

package/scss/components/switch.component.scss

@@ -160,4 +160,16 @@
       padding: 0;
     }
   }
+
+  &__required {
+    @include typography.font-size(0);
+
+    color: var(--odx-c-error-text);
+    margin-left: 2px;
+    vertical-align: top;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-control-color-disabled);
+    }
+  }
 }