@itwin/itwinui-css 0.59.2 → 0.62.0

package/css/tabs.css

@@ -19,9 +19,6 @@
 .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
   height:2px;
 }
-.iui-tabs-wrapper.iui-vertical .iui-tabs{
-  flex-direction:column;
-}
 .iui-tabs-wrapper.iui-vertical .iui-tabs li,
 .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
   width:100%;
@@ -44,7 +41,6 @@
   border:none;
   vertical-align:baseline;
   position:relative;
-  align-items:center;
   list-style:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -61,15 +57,13 @@
   display:flex;
   align-items:center;
   font-size:14px;
+  min-height:38px;
+  height:100%;
   cursor:pointer;
+  transition:background-color 0.2s ease-out;
   color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab{
-    transition:background-color 0.2s ease-out;
-  }
-}
 .iui-tabs .iui-tab.iui-active{
   color:#008ae0;
   color:var(--iui-color-foreground-primary);
@@ -104,20 +98,14 @@
 .iui-tabs .iui-tab-icon{
   width:16px;
   height:16px;
+  flex-shrink:0;
+  transition:fill 0.2s ease-out;
   fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
 .iui-tabs .iui-tab-icon + .iui-tab-label{
   margin-left:8px;
 }
-.iui-tabs .iui-tab-label{
-  text-align:left;
-}
 .iui-tabs .iui-tab-description{
   display:none;
   font-size:12px;
@@ -156,8 +144,7 @@
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default .iui-tab{
-  height:38px;
-  padding:0 16px;
+  padding:4px 16px;
   box-sizing:border-box;
   background-color:#f9f9fb;
   border:1px solid #c7ccd1;
@@ -205,10 +192,10 @@
 }
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-default.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
   background-color:#53a21a;
@@ -223,8 +210,7 @@
   border:1px solid var(--iui-color-background-5);
 }
 .iui-tabs.iui-borderless .iui-tab{
-  height:38px;
-  padding:0 24px;
+  padding:4px 24px;
   background-color:transparent;
 }
 .iui-tabs.iui-borderless .iui-tab::after{
@@ -258,10 +244,10 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
   background-color:transparent;
@@ -281,11 +267,11 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab{
-  height:38px;
+  padding:4px;
   background-color:transparent;
   width:100%;
   justify-content:center;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-tabs.iui-pill .iui-tab::after{
   bottom:0;
@@ -347,4 +333,22 @@
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
   background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
+}
+
+.iui-tab-label{
+  text-align:left;
+  max-width:60ch;
+}
+.iui-tab-label > *{
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}
+@supports (-webkit-line-clamp: 1){
+  .iui-tab-label > *{
+    white-space:unset;
+    display:-webkit-box;
+    -webkit-line-clamp:3;
+    -webkit-box-orient:vertical;
+  }
 }

package/css/tag.css

@@ -3,17 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-tag{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
   height:33px;
-  margin:3px 0;
+  margin-top:3px;
+  margin-bottom:3px;
   border-radius:9999px;
   box-sizing:border-box;
   padding:0 2px;
@@ -36,10 +33,6 @@
 }
 
 .iui-tag-basic{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
@@ -77,7 +70,7 @@ a.iui-tag-basic{
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -163,7 +156,7 @@ a.iui-tag-basic:focus-visible{
   overflow-x:scroll;
 }
 .iui-tag-container.iui-visible{
-  border-radius:3px;
+  border-radius:4px;
   padding:3px 12px;
   background-color:#edeff2;
   background-color:var(--iui-color-background-3);

package/css/text.css

@@ -74,7 +74,7 @@
       -ms-user-select:none;
           user-select:none;
   color:transparent;
-  border-radius:3px;
+  border-radius:4px;
   cursor:progress;
   background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
   background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));

package/css/tile.css

@@ -102,6 +102,92 @@
   margin-bottom:0;
   -webkit-line-clamp:2;
 }
+.iui-tile.iui-progress{
+  cursor:progress;
+  font-style:italic;
+}
+.iui-tile[aria-disabled=true]{
+  cursor:not-allowed;
+}
+.iui-tile[aria-disabled=true] .iui-tile-name-label{
+  color:var(--iui-text-color-muted);
+}
+.iui-tile[aria-disabled=true] .iui-thumbnail-icon,
+.iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
+  filter:grayscale(100%);
+}
+.iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
+  transform:none;
+}
+.iui-tile[aria-disabled=true] .iui-tile-more-options{
+  display:none;
+}
+.iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-positive::selection,
+.iui-tile.iui-positive *::selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-positive .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-positive);
+}
+
+.iui-tile.iui-positive .iui-tile-name-label{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-positive .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-positive);
+}
+.iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-warning::selection,
+.iui-tile.iui-warning *::selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-warning .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-warning);
+}
+
+.iui-tile.iui-warning .iui-tile-name-label{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-warning .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-warning);
+}
+.iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-negative::selection,
+.iui-tile.iui-negative *::selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-tile.iui-negative .iui-tile-thumbnail{
+  box-shadow:0 4px 0 var(--iui-color-foreground-negative);
+}
+.iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
+  box-shadow:4px 0 0 var(--iui-color-foreground-negative);
+}
+
+.iui-tile.iui-negative .iui-tile-name-label{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-tile.iui-negative .iui-tile-status-icon{
+  fill:var(--iui-color-foreground-negative);
+}
 
 .iui-tile-thumbnail-type-indicator{
   border-color:transparent;
@@ -269,6 +355,11 @@
   width:64px;
   height:64px;
 }
+@media (forced-colors: active){
+  .iui-tile-thumbnail .iui-thumbnail-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -386,6 +477,11 @@ div.iui-tile-thumbnail-picture{
   margin-right:8px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tile-content .iui-tile-status-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-content .iui-tile-status-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -449,6 +545,12 @@ div.iui-tile-thumbnail-picture{
   margin-right:8px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tile-content .iui-tile-metadata > svg,
+.iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tile-content .iui-tile-metadata > svg.iui-informational,
 .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
   fill:#008ae0;

package/css/time-picker.css

@@ -44,7 +44,7 @@
 }
 .iui-time > ol > li{
   padding:6px 16px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-time > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -103,7 +103,7 @@
 }
 .iui-period > ol > li{
   padding:6px 16px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-period > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);

package/css/toast-notification.css

@@ -84,7 +84,7 @@
   pointer-events:all;
   margin:0 16px 11px 16px;
   min-height:44px;
-  border-radius:3px;
+  border-radius:4px;
   background-color:white;
   border:1px solid black;
   box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
@@ -124,7 +124,7 @@
 }
 .iui-toast-anchor{
   text-decoration:underline;
-  border-radius:3px;
+  border-radius:4px;
   cursor:pointer;
   font-size:12px;
   margin-right:16px;

package/css/tooltip.css

@@ -37,7 +37,7 @@
   vertical-align:baseline;
   display:block;
   text-align:center;
-  border-radius:3px;
+  border-radius:4px;
   font-size:12px;
   overflow:hidden;
   max-width:400px;

package/css/tree.css

@@ -70,6 +70,11 @@
   margin:0 6px;
   flex-shrink:0;
 }
+@media (forced-colors: active){
+  .iui-tree-node-content-icon{
+    fill:CanvasText;
+  }
+}
 .iui-tree-node-content-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.59.2",
+  "version": "0.62.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -29,33 +29,37 @@
   ],
   "dependencies": {},
   "devDependencies": {
+    "@itwin/itwinui-icons-elements": "0.2.0",
     "autoprefixer": "^10.4.1",
     "backstopjs": "~6.0.4",
     "html-minifier": "^4.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "postcss-discard-comments": "^5.0.1",
     "postcss-scss": "^4.0.3",
     "sass-embedded": "^1.49.9",
+    "serve": "^14.0.1",
     "stylelint": "^14.2.0",
-    "stylelint-config-sass-guidelines": "^9.0.1"
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "vite": "^3.0.0"
   },
   "scripts": {
     "build": "yarn clean && yarn build:scss && yarn build:css && node ../shared/copyrightLinter.js --fix css/* && yarn build:html",
     "build:scss": "cpx \"./src/**/*.scss\" ./scss",
     "build:css": "node ./scripts/generateCss.js src css",
-    "build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
-    "build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
+    "build:html": "vite build backstop/tests --config vite.config.ts",
     "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
-    "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
     "createComponent": "node ./scripts/createComponent.js",
     "clean": "rimraf ./css ./scss ./backstop/results/bitmaps_test",
-    "dev": "yarn build:watch",
+    "dev": "concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn vite backstop/tests --config vite.config.ts\"",
+    "preview": "serve backstop/minified -p 3050",
     "lint": "stylelint \"src/**/*.scss\"",
     "approve": "backstop --config=./backstop/backstop.js approve",
-    "test": "backstop --config=./backstop/backstop.js test --docker",
+    "test:only": "backstop --config=./backstop/backstop.js test --docker",
+    "test": "npm-run-all -p -r \"preview\" \"test:only {1}\" --",
     "clean:images": "node scripts/removeOldTestImages.js",
     "print": "node scripts/print.js",
     "audit:ci": "audit-ci --moderate --report-type=full",
-    "build-docker": "node scripts/buildDocker.js"
+    "push-docker": "node scripts/pushDocker.js"
   }
 }

package/scss/backdrop/backdrop.scss

@@ -0,0 +1,27 @@
+// 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';
+
+@mixin iui-backdrop {
+  z-index: 998;
+  isolation: isolate;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); // IE fallback
+  background-color: rgba(0, 0, 0, var(--iui-opacity-4));
+
+  &:not(.iui-backdrop-visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
+  transition-delay: $iui-speed-fast, $iui-speed-instant;
+
+  &.iui-backdrop-visible {
+    transition-delay: $iui-speed-instant; // remove delay for entry animation
+  }
+}

package/scss/backdrop/classes.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-backdrop {
+  @include iui-backdrop;
+}

package/scss/backdrop/index.scss

@@ -0,0 +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 './backdrop';

package/scss/classes.scss

@@ -5,6 +5,7 @@
 @import './alert/classes';
 @import './anchor/classes';
 @import './badge/classes';
+@import './backdrop/classes';
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';

package/scss/color-picker/color-picker.scss

@@ -183,45 +183,49 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 }
 
 @mixin iui-hue-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    @include themed {
-      background: linear-gradient(
-        to right,
-        $iui-color-system-red 0%,
-        $iui-color-system-yellow 17%,
-        rgb(0, 255, 0) 33%,
-        rgb(0, 255, 255) 50%,
-        $iui-color-system-blue 67%,
-        $iui-color-system-magenta 83%,
-        $iui-color-system-red 100%
-      );
+  .iui-slider-container {
+    .iui-slider-rail {
+      height: $iui-s;
+      forced-color-adjust: none;
+      @include themed {
+        background: linear-gradient(
+          to right,
+          $iui-color-system-red 0%,
+          $iui-color-system-yellow 17%,
+          rgb(0, 255, 0) 33%,
+          rgb(0, 255, 255) 50%,
+          $iui-color-system-blue 67%,
+          $iui-color-system-magenta 83%,
+          $iui-color-system-red 100%
+        );
+      }
     }
-  }
 
-  .iui-slider-thumb {
-    top: 7px;
+    .iui-slider-thumb {
+      top: 7px;
+    }
   }
 }
 
 @mixin iui-opacity-slider {
-  .iui-slider-rail {
-    height: $iui-s;
-    forced-color-adjust: none;
-    @include iui-transparent-background($size: $iui-s);
-
-    &::before {
-      display: block;
-      content: '';
-      width: 100%;
-      height: 100%;
-      background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
+  .iui-slider-container {
+    .iui-slider-rail {
+      height: $iui-s;
+      forced-color-adjust: none;
+      @include iui-transparent-background($size: $iui-s);
+
+      &::before {
+        display: block;
+        content: '';
+        width: 100%;
+        height: 100%;
+        background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
+      }
     }
-  }
 
-  .iui-slider-thumb {
-    top: 7px;
+    .iui-slider-thumb {
+      top: 7px;
+    }
   }
 }
 

package/scss/dialog/classes.scss

@@ -2,12 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
-.iui-dialog-backdrop {
-  @include iui-dialog-backdrop;
-
-  &.iui-dialog-backdrop-relative {
-    @include iui-dialog-backdrop-relative;
-  }
+.iui-dialog-wrapper {
+  @include iui-dialog-wrapper;
 }
 
 .iui-dialog {
@@ -16,6 +12,7 @@
 
 .iui-dialog-default {
   @include iui-dialog-default;
+  @include iui-dialog-placement;
 }
 
 .iui-dialog-full-page {
@@ -34,6 +31,10 @@
   @include iui-dialog-title-bar;
 }
 
+.iui-dialog-title-bar-filled {
+  @include iui-dialog-title-bar-filled;
+}
+
 .iui-dialog-content {
   @include iui-dialog-content;
 }