@itwin/itwinui-css 0.53.0 → 0.53.1

package/css/all.css

@@ -1399,7 +1399,6 @@ html.iui-theme-dark-hc{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-group > *{
   display:flex;
@@ -1482,12 +1481,14 @@ html.iui-theme-dark-hc{
 .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+.iui-button-group-overflow-x{
+  width:100%;
+}
 
 .iui-button-split-menu{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-split-menu > *{
   display:flex;
@@ -2048,8 +2049,8 @@ html.iui-theme-dark-hc{
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  display:-ms-grid;
-  display:grid;
+  display:-ms-inline-grid;
+  display:inline-grid;
   -ms-grid-columns:1fr auto;
   grid-template-columns:1fr auto;
 }
@@ -3388,6 +3389,7 @@ html.iui-theme-dark-hc{
 .iui-page-header.iui-slim > .iui-right .iui-user-icon{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
   line-height:24px;
@@ -5424,14 +5426,6 @@ label.iui-input-label.iui-disabled{
   opacity:1;
   transition-delay:0s;
 }
-.iui-modal.iui-modal-animation-enter{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal.iui-modal-animation-enter-active{
-  visibility:visible;
-  opacity:1;
-}
 .iui-modal > .iui-modal-dialog{
   position:absolute;
   left:50%;
@@ -5518,14 +5512,22 @@ label.iui-input-label.iui-disabled{
     transition:transform 0.4s ease-out;
   }
 }
-.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
 }
+.iui-modal-animation-enter .iui-modal{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal{
+  visibility:visible;
+  opacity:1;
+}
 
 .iui-non-ideal-state{
   margin:0;
@@ -9258,8 +9260,8 @@ div.iui-tile-thumbnail-picture{
 }
 .iui-user-icon > .iui-status::after{
   content:"";
-  width:66.6666666667%;
-  height:66.6666666667%;
+  width:var(--_iui-user-icon-status-size, 8px);
+  height:var(--_iui-user-icon-status-size, 8px);
 }
 .iui-user-icon > .iui-status.iui-online{
   background-color:#53a21a;
@@ -9325,6 +9327,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-user-icon{
   width:32px;
   height:32px;
+  --_iui-user-icon-status-size:6px;
 }
 .iui-user-icon.iui-user-icon > .iui-initials{
   line-height:32px;
@@ -9333,6 +9336,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-small{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-small > .iui-initials{
   line-height:24px;
@@ -9341,6 +9345,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-large{
   width:48px;
   height:48px;
+  --_iui-user-icon-status-size:8px;
 }
 .iui-user-icon.iui-large > .iui-initials{
   line-height:48px;
@@ -9349,6 +9354,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-x-large{
   width:64px;
   height:64px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-x-large > .iui-initials{
   line-height:64px;

package/css/button.css

@@ -319,7 +319,6 @@
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-group > *{
   display:flex;
@@ -402,12 +401,14 @@
 .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+.iui-button-group-overflow-x{
+  width:100%;
+}
 
 .iui-button-split-menu{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-split-menu > *{
   display:flex;

package/css/date-picker.css

@@ -15,8 +15,8 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  display:-ms-grid;
-  display:grid;
+  display:-ms-inline-grid;
+  display:inline-grid;
   -ms-grid-columns:1fr auto;
   grid-template-columns:1fr auto;
 }

package/css/header.css

@@ -435,6 +435,7 @@
 .iui-page-header.iui-slim > .iui-right .iui-user-icon{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
   line-height:24px;

package/css/modal.css

@@ -28,14 +28,6 @@
   opacity:1;
   transition-delay:0s;
 }
-.iui-modal.iui-modal-animation-enter{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal.iui-modal-animation-enter-active{
-  visibility:visible;
-  opacity:1;
-}
 .iui-modal > .iui-modal-dialog{
   position:absolute;
   left:50%;
@@ -122,11 +114,19 @@
     transition:transform 0.4s ease-out;
   }
 }
-.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
+}
+.iui-modal-animation-enter .iui-modal{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal{
+  visibility:visible;
+  opacity:1;
 }

package/css/user-icon.css

@@ -90,8 +90,8 @@
 }
 .iui-user-icon > .iui-status::after{
   content:"";
-  width:66.6666666667%;
-  height:66.6666666667%;
+  width:var(--_iui-user-icon-status-size, 8px);
+  height:var(--_iui-user-icon-status-size, 8px);
 }
 .iui-user-icon > .iui-status.iui-online{
   background-color:#53a21a;
@@ -157,6 +157,7 @@
 .iui-user-icon.iui-user-icon{
   width:32px;
   height:32px;
+  --_iui-user-icon-status-size:6px;
 }
 .iui-user-icon.iui-user-icon > .iui-initials{
   line-height:32px;
@@ -165,6 +166,7 @@
 .iui-user-icon.iui-small{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-small > .iui-initials{
   line-height:24px;
@@ -173,6 +175,7 @@
 .iui-user-icon.iui-large{
   width:48px;
   height:48px;
+  --_iui-user-icon-status-size:8px;
 }
 .iui-user-icon.iui-large > .iui-initials{
   line-height:48px;
@@ -181,6 +184,7 @@
 .iui-user-icon.iui-x-large{
   width:64px;
   height:64px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-x-large > .iui-initials{
   line-height:64px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.53.0",
+  "version": "0.53.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/button/button-group.scss

@@ -10,9 +10,7 @@
   align-items: center;
   isolation: isolate;
 
-  @if $orientation == 'horizontal' {
-    max-width: 100%;
-  } @else {
+  @if $orientation != 'horizontal' {
     flex-direction: column;
     max-height: 100%;
   }
@@ -106,3 +104,7 @@
     }
   }
 }
+
+@mixin iui-button-group-overflow-x {
+  width: 100%;
+}

package/scss/button/classes.scss

@@ -51,6 +51,10 @@
   &-vertical {
     @include iui-button-group(vertical);
   }
+
+  &-overflow-x {
+    @include iui-button-group-overflow-x;
+  }
 }
 
 .iui-button-split-menu {

package/scss/date-picker/date-picker.scss

@@ -11,7 +11,7 @@ $iui-date-picker-today-circle-size: 32px;
 @mixin iui-date-picker {
   @include iui-surface;
   user-select: none;
-  display: grid;
+  display: inline-grid;
   grid-template-columns: 1fr auto;
 
   .iui-time-picker {

package/scss/modal/classes.scss

@@ -8,4 +8,8 @@
   &-full-page {
     @include iui-modal-full-page;
   }
+
+  &-animation {
+    @include iui-modal-animation;
+  }
 }

package/scss/modal/modal.scss

@@ -30,18 +30,6 @@
   }
   // #endregion Small Modal Animations for CSS
 
-  // #region Small Modal Animations for React
-  &.iui-modal-animation-enter {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &.iui-modal-animation-enter-active {
-    visibility: visible;
-    opacity: 1;
-  }
-  // #endregion Full Page Modal Animations for React
-
   > .iui-modal-dialog {
     position: absolute;
     left: 50%;
@@ -137,16 +125,28 @@
     }
   }
   // #endregion Full Page Modal Animations for CSS
+}
 
-  // #region Full Page Modal Animations for React
-  &.iui-modal-animation-enter > .iui-modal-dialog {
+@mixin iui-modal-animation {
+  // Full Page Modal Animations for React
+  &-enter .iui-modal .iui-modal-dialog {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &.iui-modal-animation-enter-active > .iui-modal-dialog {
+  &-enter-active .iui-modal .iui-modal-dialog {
     transform: translateY(0);
     opacity: 1;
   }
-  // #endregion Full Page Modal Animations for React
+
+  // Small Modal Animations for React
+  &-enter .iui-modal {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-enter-active .iui-modal {
+    visibility: visible;
+    opacity: 1;
+  }
 }

package/scss/user-icon/sizes.scss

@@ -7,6 +7,14 @@
   width: $size;
   height: $size;
 
+  @if ($size == $iui-icons-xl) {
+    --_iui-user-icon-status-size: #{$iui-xs * 1.5};
+  } @else if ($size == $iui-icons-xxl) {
+    --_iui-user-icon-status-size: #{$iui-s};
+  } @else {
+    --_iui-user-icon-status-size: #{$iui-sm};
+  }
+
   > .iui-initials {
     line-height: $size;
     font-size: $font-size;

package/scss/user-icon/user-icon.scss

@@ -92,8 +92,8 @@
 
     &::after {
       content: '';
-      width: calc(100% / 1.5);
-      height: calc(100% / 1.5);
+      width: var(--_iui-user-icon-status-size, $iui-s);
+      height: var(--_iui-user-icon-status-size, $iui-s);
     }
 
     &.iui-online {