@itwin/itwinui-css 0.33.1 → 0.35.2

package/css/side-navigation.css

@@ -120,11 +120,9 @@
 
 .iui-side-navigation-submenu{
   min-width:192px;
-  width:384px;
   max-width:50vw;
   height:100%;
   box-sizing:border-box;
-  padding:0 12px 11px;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
@@ -140,6 +138,12 @@
   @media (prefers-reduced-motion: no-preference){
     .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
       transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+    display:flex; }
+  .iui-side-navigation-submenu-content{
+    padding:0 12px 11px;
+    flex-shrink:0;
+    box-sizing:border-box; }
   .iui-side-navigation-submenu-header{
     height:55px;
     display:flex;
@@ -162,9 +166,9 @@
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis; }
-      .iui-side-navigation-submenu-header-label-actions{
-        flex-shrink:0;
-        margin-left:8px; }
+    .iui-side-navigation-submenu-header-actions{
+      flex-shrink:0;
+      margin-left:8px; }
 
 .iui-side-navigation-wrapper{
   display:flex;

package/css/slider.css

@@ -3,7 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-slider-component-container{
-  display:flex; }
+  display:flex;
+  min-height:22px; }
   .iui-slider-component-container .iui-slider-min,
   .iui-slider-component-container .iui-slider-max{
     -webkit-user-select:all;

package/css/table.css

@@ -35,11 +35,11 @@
     margin-left:auto; }
   .iui-table.iui-condensed .iui-table-header .iui-cell,
   .iui-table.iui-condensed .iui-row .iui-cell,
-  .iui-table.iui-condensed + .iui-paginator{
+  .iui-table.iui-condensed .iui-paginator{
     min-height:44px; }
   .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
   .iui-table.iui-extra-condensed .iui-row .iui-cell,
-  .iui-table.iui-extra-condensed + .iui-paginator{
+  .iui-table.iui-extra-condensed .iui-paginator{
     min-height:33px; }
 
 .iui-table-header{
@@ -119,11 +119,13 @@
   overflow-x:hidden;
   overflow-y:scroll;
   overflow-y:overlay;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
   background-color:#FFF;
   background-color:var(--iui-color-background-1); }
   .iui-table-body .iui-row{
     display:flex;
-    flex-grow:1;
     border:solid 1px transparent;
     border-bottom-color:#DCE0E3;
     border-bottom-color:var(--iui-color-background-4); }
@@ -261,6 +263,11 @@
   .iui-table-body > .iui-table-empty{
     text-align:center;
     padding:32px;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:center;
+    flex-grow:1;
     color:rgba(0, 0, 0, 0.4);
     background-color:#FFF;
     color:var(--iui-text-color-muted);
@@ -327,7 +334,6 @@
   border:none;
   vertical-align:baseline;
   display:flex;
-  flex:1;
   justify-content:space-around;
   align-items:center;
   min-height:55px;
@@ -344,9 +350,11 @@
     display:flex;
     align-items:center;
     position:relative;
-    flex:1; }
+    flex:1;
+    min-width:0; }
   .iui-paginator > .iui-center{
     justify-content:center;
+    flex:2 1;
     color:rgba(0, 0, 0, 0.8);
     color:var(--iui-text-color); }
     .iui-paginator > .iui-center .iui-button-group{
@@ -357,6 +365,8 @@
         .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
         .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
           width:27px; }
+      .iui-paginator > .iui-center .iui-button-group > .iui-button{
+        transition:none; }
       .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
         display:flex;
         justify-content:center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.33.1",
+  "version": "0.35.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -80,6 +80,7 @@
     "trim-newlines": "^3.0.1",
     "glob-parent": "^5.1.2",
     "jpeg-js": "^0.4.3",
-    "set-value": "^4.1.0"
+    "set-value": "^4.1.0",
+    "ansi-regex": "^5.0.1"
   }
 }

package/scss/alert/alert.scss

@@ -13,25 +13,34 @@
   @include themed {
     border: 1px solid t(iui-color-background-5);
     color: t(iui-text-color);
+    background-color: t(iui-color-background-1);
   }
 
-  > .iui-icon {
+  &-icon {
     @include iui-icons-default;
     flex-shrink: 0;
     margin-left: $iui-m;
   }
 
-  > .iui-message {
+  &-message {
     margin: $iui-baseline $iui-m;
+  }
 
-    > a {
-      margin-left: $iui-s;
-      text-decoration: underline;
-      user-select: none;
-      white-space: nowrap;
+  &-link {
+    cursor: pointer;
+    margin-left: $iui-s;
+    text-decoration: underline;
+    user-select: none;
+    white-space: nowrap;
+    @include iui-focus;
+    @include themed {
+      color: t(iui-color-foreground-primary);
+    }
 
-      &:hover {
-        text-decoration: none;
+    &:hover {
+      text-decoration: none;
+      @include themed {
+        color: t(iui-color-foreground-primary-overlay);
       }
     }
   }
@@ -49,3 +58,48 @@
     width: 100vw;
   }
 }
+
+/// Modifier mixin to categorize the alert
+/// @arg $statusColor Can be one of: positive, negative, warning, primary
+/// @arg $rootSelector Selector of the root alert element. Defaults to .iui-alert
+@mixin iui-alert-category($statusColor, $rootSelector: '.iui-alert') {
+  @include themed {
+    background: linear-gradient(
+      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6)),
+      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6))
+    ),
+      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
+    border-color: t(iui-color-foreground-#{$statusColor});
+  }
+
+  #{$rootSelector}-icon {
+    @include themed {
+      fill: t(iui-icons-color-#{$statusColor});
+    }
+  }
+
+  #{$rootSelector}-message {
+    &::selection {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-4));
+      }
+    }
+  }
+
+  #{$rootSelector}-link {
+    @include themed {
+      color: t(iui-color-foreground-#{$statusColor});
+    }
+
+    &:hover {
+      @include themed {
+        color: t(iui-color-foreground-#{$statusColor}-overlay);
+      }
+    }
+  }
+
+  #{$rootSelector}-link,
+  > .iui-button {
+    @include iui-focus(if($statusColor == primary, iui-focus-box-shadow, iui-focus-#{$statusColor}-box-shadow));
+  }
+}

package/scss/alert/classes.scss

@@ -5,19 +5,9 @@
 .iui-alert {
   @include iui-alert;
 
-  &.iui-informational {
-    @include iui-alert-informational;
-  }
-
-  &.iui-positive {
-    @include iui-alert-positive;
-  }
-
-  &.iui-warning {
-    @include iui-alert-warning;
-  }
-
-  &.iui-negative {
-    @include iui-alert-negative;
+  @each $status in positive, negative, warning, informational {
+    &.iui-#{$status} {
+      @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
+    }
   }
 }

package/scss/alert/index.scss

@@ -1,7 +1,3 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './alert';
-@import './informational';
-@import './positive';
-@import './warning';
-@import './negative';

package/scss/button/button.scss

@@ -9,6 +9,7 @@ $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
   @include iui-reset;
+  font-family: inherit;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

package/scss/expandable-block/block.scss

@@ -32,7 +32,7 @@
 
     > .iui-icon,
     > .iui-status-icon {
-      display: block;
+      display: inline-flex;
       flex-shrink: 0;
       width: $iui-icons-default;
       height: $iui-icons-default;
@@ -149,4 +149,21 @@
       }
     }
   }
+
+  &.iui-small .iui-header {
+    padding: ($iui-baseline * 0.5) $iui-s;
+
+    > .iui-icon {
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+    }
+
+    > .iui-expandable-block-label {
+      margin-left: $iui-s;
+    }
+
+    > .iui-status-icon {
+      margin-left: $iui-s;
+    }
+  }
 }

package/scss/information-panel/classes.scss

@@ -16,4 +16,8 @@
   &.iui-bottom {
     @include iui-information-panel-bottom;
   }
+
+  &.iui-visible {
+    @include iui-information-panel-visible;
+  }
 }

package/scss/information-panel/information-panel.scss

@@ -14,6 +14,10 @@
   flex-direction: column;
   box-sizing: border-box;
   z-index: 2; // Needs to be higher than table's column resizers.
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+  }
+
   @include themed {
     background-color: t(iui-color-background-1);
   }
@@ -22,7 +26,6 @@
     display: none;
     position: absolute;
     touch-action: none;
-    z-index: 1000;
 
     > .iui-resizer-bar {
       @include themed {
@@ -37,14 +40,6 @@
     }
   }
 
-  &.iui-information-panel-visible {
-    opacity: 1;
-
-    > .iui-resizer {
-      display: flex;
-    }
-  }
-
   .iui-information-header,
   .iui-information-body {
     padding-left: $iui-sm;
@@ -53,7 +48,8 @@
   }
 
   .iui-information-header {
-    height: $iui-baseline * 6;
+    height: $iui-baseline * 5;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -95,6 +91,7 @@
     padding-bottom: $iui-baseline;
     height: 100%;
     overflow-x: hidden;
+    overflow-y: auto;
     overflow-y: overlay;
 
     > hr {
@@ -105,8 +102,18 @@
   }
 }
 
+@mixin iui-information-panel-visible {
+  opacity: 1;
+  transform: translate(0);
+
+  > .iui-resizer {
+    display: flex;
+  }
+}
+
 @mixin iui-information-panel-vertical {
   top: 0;
+  right: 0;
   width: $iui-3xl * 4;
   min-width: $iui-3xl * 2;
   height: 100%;
@@ -133,6 +140,7 @@
 }
 @mixin iui-information-panel-horizontal {
   left: 0;
+  bottom: 0;
   height: $iui-3xl * 4;
   min-height: $iui-3xl * 2;
   width: 100%;
@@ -160,30 +168,22 @@
 
 @mixin iui-information-panel-right {
   @include iui-information-panel-vertical;
-  right: ($iui-3xl * 4) * -1; // Default width set negative so the panel hides off screen.
+  transform: translateX(100%); // hide off screen
   box-shadow: -1px 0 14px rgba(0, 0, 0, 0.25);
-  transition: right $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+  clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
 
   > .iui-resizer {
-    left: ($iui-m * 0.5) * -1;
-  }
-
-  &.iui-information-panel-visible {
-    right: 0;
+    left: $iui-m * -0.5;
   }
 }
 
 @mixin iui-information-panel-bottom {
   @include iui-information-panel-horizontal;
-  bottom: ($iui-3xl * 4) * -1; // Default height set negative so the panel hides off screen.
+  transform: translateY(100%); // hide off screen
   box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.25);
-  transition: bottom $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+  clip-path: inset(-15px 0 0 0); // show box-shadow only on top
 
   > .iui-resizer {
-    top: ($iui-m * 0.5) * -1;
-  }
-
-  &.iui-information-panel-visible {
-    bottom: 0;
+    top: $iui-m * -0.5;
   }
 }

package/scss/notification-marker/classes.scss

@@ -3,7 +3,7 @@
 @import './index';
 
 @each $status in primary, positive, warning, negative, accessory {
-  &.iui-notification-#{$status} {
+  .iui-notification-#{$status} {
     @include iui-notification-marker($status: $status);
   }
 }

package/scss/side-navigation/side-navigation.scss

@@ -174,11 +174,9 @@
 
 @mixin iui-side-navigation-submenu {
   min-width: $iui-3xl * 2;
-  width: $iui-3xl * 4;
   max-width: 50vw;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 $iui-sm $iui-baseline;
   overflow-x: hidden;
   overflow-y: auto;
   overflow-y: overlay;
@@ -190,6 +188,17 @@
 
   @include iui-transition-group;
 
+  &.iui-enter-active,
+  &.iui-exit-active {
+    display: flex;
+  }
+
+  &-content {
+    padding: 0 $iui-sm $iui-baseline;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
   &-header {
     height: $iui-baseline * 5;
     display: flex;
@@ -211,11 +220,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+    }
 
-      &-actions {
-        flex-shrink: 0;
-        margin-left: $iui-s;
-      }
+    &-actions {
+      flex-shrink: 0;
+      margin-left: $iui-s;
     }
   }
 }

package/scss/slider/slider.scss

@@ -9,6 +9,7 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-component-container {
   display: flex;
+  min-height: $iui-baseline * 2;
 
   .iui-slider-min,
   .iui-slider-max {

package/scss/style/mixins.scss

@@ -140,7 +140,7 @@
 }
 
 /// Classes for react-transition-group
-/// Used for expand/collapse transitions. Needs height to be set in JS.
+/// Used for expand/collapse transitions. Needs height/width to be set in JS.
 @mixin iui-transition-group {
   &.iui-enter,
   &.iui-exit-active {

package/scss/table/condensed.scss

@@ -6,7 +6,7 @@
 @mixin iui-table-condensed {
   .iui-table-header .iui-cell,
   .iui-row .iui-cell,
-  + .iui-paginator {
+  .iui-paginator {
     min-height: $iui-baseline * 4;
   }
 }

package/scss/table/extra-condensed.scss

@@ -6,7 +6,7 @@
 @mixin iui-table-extra-condensed {
   .iui-table-header .iui-cell,
   .iui-row .iui-cell,
-  + .iui-paginator {
+  .iui-paginator {
     min-height: $iui-baseline * 3;
   }
 }

package/scss/table/paginator.scss

@@ -8,7 +8,6 @@
 @mixin iui-paginator {
   @include iui-reset;
   display: flex;
-  flex: 1;
   justify-content: space-around;
   align-items: center;
   min-height: $iui-baseline * 5;
@@ -25,10 +24,12 @@
     align-items: center;
     position: relative;
     flex: 1;
+    min-width: 0;
   }
 
   > .iui-center {
     justify-content: center;
+    flex: 2 1;
     @include themed {
       color: t(iui-text-color);
     }
@@ -45,6 +46,11 @@
         }
       }
 
+      > .iui-button {
+        // Animation looks odd when switching pages
+        transition: none;
+      }
+
       > .iui-ellipsis {
         display: flex;
         justify-content: center;

package/scss/table/table.scss

@@ -126,6 +126,9 @@
   overflow-x: hidden;
   overflow-y: scroll;
   overflow-y: overlay;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 
   @include themed {
     background-color: t(iui-color-background-1);
@@ -133,7 +136,6 @@
 
   .iui-row {
     display: flex;
-    flex-grow: 1;
     border: solid 1px transparent;
     @media (prefers-reduced-motion: no-preference) {
       transition: border $iui-speed-fast ease-out;
@@ -292,6 +294,11 @@
   > .iui-table-empty {
     text-align: center;
     padding: $iui-xl;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
     @include themed {
       color: t(iui-text-color-muted);
       background-color: t(iui-color-background-1);

package/scss/alert/informational.scss

@@ -1,35 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import './alert';
-
-@mixin iui-alert-informational {
-  @include themed {
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    border-color: t(iui-color-foreground-primary);
-  }
-
-  > .iui-icon,
-  > .iui-icon > * {
-    @include themed {
-      fill: t(iui-icons-color-primary);
-    }
-  }
-
-  > .iui-message > a {
-    @include iui-focus;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
-
-    &:hover {
-      @include themed {
-        color: t(iui-color-foreground-primary-overlay);
-      }
-    }
-  }
-}

package/scss/alert/negative.scss

@@ -1,50 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@import '../style/index';
-@import './alert';
-
-@mixin iui-alert-negative {
-  @include themed {
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-negative-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-negative-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    border-color: t(iui-color-foreground-negative);
-  }
-
-  > .iui-icon,
-  > .iui-icon > * {
-    @include themed {
-      fill: t(iui-icons-color-negative);
-    }
-  }
-
-  > .iui-message {
-    > a {
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
-
-      &:hover {
-        @include themed {
-          color: t(iui-color-foreground-negative-overlay);
-        }
-      }
-    }
-
-    &::selection {
-      @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-negative-rgb),
-          t(iui-opacity-4)
-        );
-      }
-    }
-  }
-
-  > .iui-message > a,
-  > .iui-button {
-    @include iui-focus(iui-focus-negative-box-shadow);
-  }
-}