@itwin/itwinui-css 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -49,7 +49,7 @@
     "createComponent": "node ./scripts/createComponent.js",
     "postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
-    "lint": "stylelint \"src/**/*.scss\" \"backstop/tests/*.html\"",
+    "lint": "stylelint \"src/**/*.scss\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
     "approve": "backstop --config=./backstop/backstop.js approve",
     "test": "yarn build && yarn test:ci",
@@ -69,13 +69,13 @@
     "husky": "=4",
     "lint-staged": "^11.2.6",
     "node-sass": "^5.0.0",
-    "postcss": "^8.2.15",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "postcss-discard-comments": "^4.0.2",
+    "postcss-discard-comments": "^5.0.1",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.10.0",
-    "stylelint-config-sass-guidelines": "^8.0.0"
+    "stylelint": "^14.2.0",
+    "stylelint-config-sass-guidelines": "^9.0.1"
   },
   "resolutions": {
     "braces": "^2.3.1",
@@ -85,6 +85,7 @@
     "glob-parent": "^5.1.2",
     "jpeg-js": "^0.4.3",
     "set-value": "^4.1.0",
-    "ansi-regex": "^5.0.1"
+    "ansi-regex": "^5.0.1",
+    "node-fetch": "^2.6.7"
   }
 }

package/scss/button/button.scss

@@ -20,7 +20,6 @@ $iui-button-padding-large: $iui-xs * 6;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
   line-height: $iui-line-height;
-  outline: none;
   box-shadow: none;
   font-size: $iui-font-size;
   font-weight: $iui-font-weight-normal;

package/scss/button/default.scss

@@ -37,15 +37,20 @@
     }
   }
 
-  &.iui-active {
+  &.iui-active:enabled {
+    position: relative;
     @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));
       color: t(iui-color-foreground-primary);
     }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+      }
+    }
   }
 
   &[disabled],

package/scss/carousel/carousel.scss

@@ -0,0 +1,119 @@
+// 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 '../text/index';
+@import '../button/button';
+
+@mixin iui-carousel {
+  overflow: hidden;
+  @include iui-focus($offset: 4px);
+  border-radius: $iui-border-radius;
+}
+
+@mixin iui-carousel-slider {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-slow ease-in-out;
+  }
+
+  &-item {
+    width: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+}
+
+@mixin iui-carousel-navigation {
+  display: flex;
+  align-items: center;
+  height: $iui-baseline * 3;
+  box-sizing: border-box;
+  @include themed {
+    border-top: $iui-xxs solid t(iui-color-background-4);
+  }
+
+  &-dots,
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    button[data-pressed='true'] {
+      outline-offset: -1px;
+      @include themed {
+        outline: 1px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-dots {
+    @include iui-reset;
+    @include iui-focus;
+    border-radius: $iui-border-radius;
+    white-space: nowrap;
+    overflow: hidden;
+    justify-content: center;
+    list-style: none;
+  }
+
+  &-dot {
+    @include iui-button-size($size: small);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:hover::after {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      }
+    }
+
+    &.iui-invisible {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+      border-radius: 50%;
+      transition: background-color $iui-speed-fast ease;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
+      }
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      }
+    }
+
+    &.iui-first::after {
+      transform: scale(0.5);
+    }
+
+    &.iui-second::after {
+      transform: scale(0.75);
+    }
+
+    &.iui-invisible::after {
+      transform: scale(0);
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), 0);
+      }
+    }
+
+    &.iui-active::after {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-right {
+    justify-content: flex-end;
+  }
+}

package/scss/carousel/classes.scss

@@ -0,0 +1,15 @@
+// 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-carousel {
+  @include iui-carousel;
+}
+
+.iui-carousel-slider {
+  @include iui-carousel-slider;
+}
+
+.iui-carousel-navigation {
+  @include iui-carousel-navigation;
+}

package/scss/carousel/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 './carousel';

package/scss/classes.scss

@@ -7,6 +7,7 @@
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';
+@import './carousel/classes';
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
@@ -24,6 +25,7 @@
 @import './modal/classes';
 @import './non-ideal-state/classes';
 @import './notification-marker/classes';
+@import './popover/classes';
 @import './progress-indicator/classes';
 @import './side-navigation/classes';
 @import './slider/classes';

package/scss/index.scss

@@ -6,6 +6,7 @@
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';
+@import './carousel/index';
 @import './code/index';
 @import './color-picker/index';
 @import './date-picker/index';
@@ -22,6 +23,7 @@
 @import './modal/index';
 @import './non-ideal-state/index';
 @import './notification-marker/index';
+@import './popover/index';
 @import './progress-indicator/index';
 @import './side-navigation/index';
 @import './slider/index';

package/scss/inputs/classes.scss

@@ -9,7 +9,7 @@
     @include iui-input-container-label;
   }
 
-  > .iui-input-icon {
+  .iui-input-icon {
     @include iui-input-icon;
   }
 
@@ -17,18 +17,16 @@
     @include iui-input-message;
   }
 
+  &.iui-inline-icon > .iui-input-icon {
+    @include iui-input-icon-inline;
+  }
+
   &.iui-inline-label {
     > .iui-label {
       @include iui-input-label-inline;
     }
   }
 
-  &.iui-inline-icon {
-    > .iui-input-icon {
-      @include iui-input-icon-inline;
-    }
-  }
-
   @each $status in positive, negative, warning {
     &.iui-#{$status} {
       @include iui-input-status($status: $status);
@@ -44,12 +42,20 @@
   @include iui-input;
 }
 
+.iui-select-button {
+  @include iui-select-button;
+}
+
 .iui-textarea {
   @include iui-textarea;
 }
 
-.iui-select {
-  @include iui-select;
+.iui-input-with-icon {
+  @include iui-input-with-icon;
+}
+
+.iui-end-icon {
+  @include iui-end-icon;
 }
 
 .iui-checkbox {

package/scss/inputs/index.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './labeled-inputs';
 @import './input';
+@import './input-with-icon';
 @import './textarea';
 @import './select';
 @import './checkbox-radio';

package/scss/inputs/input-with-icon.scss

@@ -0,0 +1,36 @@
+// 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 to have inputs combined with icon (eg. select)
+@mixin iui-input-with-icon {
+  display: grid;
+  align-items: center;
+  cursor: pointer;
+
+  > :first-child {
+    grid-area: 1 / -1;
+    padding-right: $iui-icons-default + $iui-l;
+  }
+
+  &:focus-within {
+    > :first-child {
+      // --_focus-color can be used to control this from outside
+      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover {
+    > :first-child {
+      // --_hover-color can be used to control this from outside
+      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+    }
+  }
+}
+
+@mixin iui-end-icon {
+  @include iui-input-icon-inline;
+  display: flex;
+  grid-area: 1 / -1;
+}

package/scss/inputs/input.scss

@@ -63,6 +63,7 @@
       border-color: t(iui-color-background-disabled);
     }
     cursor: not-allowed;
+    --_hover-color: var(--iui-color-background-disabled);
   }
 }
 

package/scss/inputs/labeled-inputs.scss

@@ -44,9 +44,9 @@
   }
 
   .iui-input,
+  .iui-input-with-icon,
   .iui-textarea,
-  .iui-input-group,
-  .iui-select {
+  .iui-input-group {
     grid-area: inputs;
     // stylelint-disable -- fix position in IE
     -ms-grid-row: 2;
@@ -84,9 +84,9 @@
     }
 
     .iui-input,
+    .iui-input-with-icon,
     .iui-textarea,
-    .iui-input-group,
-    .iui-select {
+    .iui-input-group {
       // stylelint-disable -- fix position in IE
       -ms-grid-row: 1;
       -ms-grid-column: 2;
@@ -220,7 +220,7 @@
   }
 }
 
-/// Icon to be shown near an input.
+/// Icon to be shown near a message.
 @mixin iui-input-icon {
   display: flex;
   grid-area: icon;
@@ -245,9 +245,14 @@
 
   grid-area: inputs;
   justify-self: end;
-  margin: 0 $iui-sm 0 0;
+  margin: 0 ($iui-sm + $iui-xxs) 0 0;
   position: relative;
 
+  svg {
+    width: $iui-icons-default;
+    height: $iui-icons-default;
+  }
+
   &.iui-button {
     height: 100%;
     width: fit-content;
@@ -259,15 +264,13 @@
   &.iui-actionable {
     align-items: center;
     height: 90%;
-    margin-right: 1px;
+    margin-right: $iui-xxs;
     padding: 0 $iui-sm;
     cursor: pointer;
 
     @include iui-ripple(var(--iui-color-background-1), var(--iui-color-background-2));
 
     svg {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
       @include themed {
         fill: t(iui-icons-color);
       }
@@ -278,6 +281,16 @@
       transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
     }
   }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+
+    svg {
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+  }
 }
 
 /// Mixin for applying status colors to input container.
@@ -319,9 +332,8 @@
     }
   }
 
-  > .iui-input,
-  > .iui-textarea,
-  > .iui-select > .iui-select-button {
+  .iui-input,
+  .iui-textarea {
     padding-bottom: $iui-component-padding-vertical - 1px;
 
     &.iui-small {
@@ -344,4 +356,25 @@
       }
     }
   }
+
+  .iui-input-with-icon {
+    --_hover-color: var(--iui-color-foreground-#{$status});
+    --_focus-color: var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-select-button {
+    border-bottom: transparent;
+
+    &::after {
+      content: '';
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: $iui-xxs;
+      @include themed {
+        background-color: t(iui-color-foreground-#{$status});
+      }
+    }
+  }
 }

package/scss/inputs/select.scss

@@ -3,112 +3,64 @@
 @import '../style/index';
 @import '../menu/index';
 
-$iui-after-border: 5px solid;
+@mixin iui-select-button {
+  @include iui-focus($offset: -2px, $thickness: 2px);
+  width: 100%;
+  margin: 0;
+  border-radius: $iui-border-radius;
+  box-sizing: border-box;
+  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
+  min-height: $iui-component-height;
+  transition: border-color $iui-speed-fast ease-out;
 
-@mixin iui-select {
-  @include iui-reset;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  user-select: none;
   position: relative;
-  width: 100%;
-
-  > .iui-select-button {
-    @include iui-input;
-    @include iui-focus($offset: -2px, $thickness: 2px);
-    display: flex;
-    align-items: center;
-    min-height: $iui-component-height;
-    padding-right: $iui-xl;
-    user-select: none;
-    position: relative;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border-color $iui-speed-fast ease-out;
-    }
-
-    > .iui-icon {
-      @include iui-menu-icon;
-    }
-
-    > .iui-content {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &.iui-placeholder {
-      @include themed {
-        color: t(iui-text-color-placeholder);
-      }
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: $iui-m;
-      transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: $iui-after-border transparent;
-      border-right: $iui-after-border transparent;
-      @include themed {
-        border-top: $iui-after-border t(iui-icons-color-actionable);
-      }
-    }
-
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-      }
-
-      &::after {
-        border-bottom: none;
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
+  overflow: hidden;
 
-    &.iui-active {
-      &::after {
-        border-top: none;
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable);
-        }
-      }
-
-      &:hover::after {
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
-
-    &.iui-disabled {
-      cursor: not-allowed;
-      @include themed {
-        background-color: t(iui-color-background-disabled);
-        border-color: t(iui-color-background-disabled);
-      }
-
-      &::after {
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-disabled);
-        }
-      }
-    }
+  @include themed {
+    color: t(iui-text-color);
+    background-color: t(iui-color-background-1);
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
   }
 
-  &.iui-small .iui-select-button {
+  &.iui-small {
     padding-top: $iui-component-padding-vertical-small;
     padding-bottom: $iui-component-padding-vertical-small;
     min-height: $iui-component-height-small;
   }
 
-  &.iui-large .iui-select-button {
+  &.iui-large {
     padding-top: $iui-component-padding-vertical-large;
     padding-bottom: $iui-component-padding-vertical-large;
     min-height: $iui-component-height-large;
     font-size: $iui-font-size-leading;
   }
+
+  &.iui-disabled {
+    @include themed {
+      background-color: t(iui-color-background-disabled);
+      border-color: t(iui-color-background-disabled);
+    }
+    --_hover-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
+  .iui-icon {
+    @include iui-menu-icon;
+    fill: currentColor;
+  }
+
+  .iui-content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.iui-placeholder {
+    @include themed {
+      color: t(iui-text-color-placeholder);
+    }
+  }
 }

package/scss/popover/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-popover {
+  @include iui-popover;
+}

package/scss/popover/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 './popover';

package/scss/popover/popover.scss

@@ -0,0 +1,22 @@
+// 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';
+
+// tippy.js helper class to hide Popover when it is scrolled out of view
+@mixin iui-popover {
+  &[data-reference-hidden] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  // Resets tippy.js default stylings that interfere with our own
+  /* stylelint-disable-next-line selector-class-pattern */
+  &.tippy-box {
+    all: revert;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .tippy-content {
+    all: revert;
+  }
+}

package/scss/table/table.scss

@@ -135,7 +135,7 @@
     background-color: t(iui-color-background-1);
   }
 
-  &.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
+  &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
     }