@itwin/itwinui-css 0.29.1 → 0.33.0

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

@@ -0,0 +1,189 @@
+// 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-information-panel-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+@mixin iui-information-panel {
+  position: absolute;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 2; // Needs to be higher than table's column resizers.
+  @include themed {
+    background-color: t(iui-color-background-1);
+  }
+
+  > .iui-resizer {
+    display: none;
+    position: absolute;
+    touch-action: none;
+    z-index: 1000;
+
+    > .iui-resizer-bar {
+      @include themed {
+        background-color: t(iui-color-background-5);
+      }
+    }
+
+    &:hover > .iui-resizer-bar {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &.iui-information-panel-visible {
+    opacity: 1;
+
+    > .iui-resizer {
+      display: flex;
+    }
+  }
+
+  .iui-information-header,
+  .iui-information-body {
+    padding-left: $iui-sm;
+    padding-right: $iui-sm;
+    box-sizing: border-box;
+  }
+
+  .iui-information-header {
+    height: $iui-baseline * 6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @include themed {
+      background-color: t(iui-color-background-3);
+    }
+
+    .iui-information-header-label {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      > * {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        user-select: all;
+      }
+
+      svg {
+        display: flex;
+        width: $iui-icons-large;
+        height: $iui-icons-large;
+        margin-right: $iui-s;
+        @include themed {
+          fill: t(iui-icons-color);
+        }
+      }
+    }
+
+    .iui-information-header-actions {
+      flex-shrink: 0;
+      margin-left: $iui-s;
+    }
+  }
+
+  .iui-information-body {
+    padding-top: $iui-baseline;
+    padding-bottom: $iui-baseline;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: overlay;
+
+    > hr {
+      @include themed {
+        border-color: t(iui-color-background-4);
+      }
+    }
+  }
+}
+
+@mixin iui-information-panel-vertical {
+  top: 0;
+  width: $iui-3xl * 4;
+  min-width: $iui-3xl * 2;
+  height: 100%;
+
+  > .iui-resizer {
+    height: 100%;
+    width: $iui-m;
+    top: 0;
+    cursor: ew-resize;
+    justify-content: center;
+
+    > .iui-resizer-bar {
+      height: 100%;
+      width: 1px;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast ease-out, width $iui-speed-fast ease-out;
+      }
+    }
+
+    &:hover > .iui-resizer-bar {
+      width: $iui-xs;
+    }
+  }
+}
+@mixin iui-information-panel-horizontal {
+  left: 0;
+  height: $iui-3xl * 4;
+  min-height: $iui-3xl * 2;
+  width: 100%;
+
+  > .iui-resizer {
+    width: 100%;
+    height: $iui-m;
+    left: 0;
+    cursor: ns-resize;
+    align-items: center;
+
+    > .iui-resizer-bar {
+      width: 100%;
+      height: 1px;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
+      }
+    }
+
+    &:hover > .iui-resizer-bar {
+      height: $iui-xs;
+    }
+  }
+}
+
+@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.
+  box-shadow: -1px 0 14px rgba(0, 0, 0, 0.25);
+  transition: right $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+
+  > .iui-resizer {
+    left: ($iui-m * 0.5) * -1;
+  }
+
+  &.iui-information-panel-visible {
+    right: 0;
+  }
+}
+
+@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.
+  box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.25);
+  transition: bottom $iui-speed-fast ease-out, opacity $iui-speed-fast ease;
+
+  > .iui-resizer {
+    top: ($iui-m * 0.5) * -1;
+  }
+
+  &.iui-information-panel-visible {
+    bottom: 0;
+  }
+}

package/scss/inputs/classes.scss

@@ -4,6 +4,36 @@
 
 .iui-input-container {
   @include iui-input-container;
+
+  > .iui-label {
+    @include iui-input-label;
+  }
+
+  .iui-input-icon {
+    @include iui-input-icon;
+  }
+
+  .iui-message {
+    @include iui-input-message;
+  }
+
+  &.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);
+    }
+  }
 }
 
 .iui-input {
@@ -29,4 +59,3 @@
 .iui-radio-tile-container {
   @include iui-radio-tile;
 }
-

package/scss/inputs/labeled-inputs.scss

@@ -2,17 +2,62 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import '../style/ripple';
 
+/// Container for grouping inputs with a label, an icon and a status message.
+/// Supported modifiers: .iui-inline-label, .iui-inline-icon and .iui-with-message
 @mixin iui-input-container {
   @include iui-reset;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: left;
-  font-weight: $iui-font-weight-normal;
+  display: grid;
+  grid-template:
+    'label label'
+    'inputs inputs' / auto 1fr;
+
+  &.iui-inline-icon:not(.iui-inline-label) .iui-input-icon {
+    // stylelint-disable -- fix position in IE
+    -ms-grid-row: 2;
+    -ms-grid-column: 2;
+    // stylelint-enable
+  }
+
+  &.iui-inline-icon {
+    > .iui-input,
+    > .iui-textarea {
+      padding-right: $iui-icons-default + $iui-l;
+
+      &:last-child {
+        padding-right: $iui-sm;
+      }
+    }
+  }
+
+  &.iui-with-message {
+    grid-template:
+      'label label'
+      'inputs inputs'
+      'icon message' / auto 1fr;
+
+    // add margin to the icon if it is below input
+    &:not(.iui-inline-icon) .iui-input-icon {
+      margin-top: $iui-component-offset;
+    }
+  }
+
+  .iui-input,
+  .iui-textarea,
+  .iui-input-group,
+  .iui-select {
+    grid-area: inputs;
+    // stylelint-disable -- fix position in IE
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 2;
+    // stylelint-enable
+  }
+
+  // #region Cursors
   cursor: default;
 
-  // Pointer cursor used if this class is applied to a label element
   @at-root {
     label#{&} {
       cursor: pointer;
@@ -28,177 +73,228 @@
       cursor: not-allowed;
     }
   }
+  // #endregion
+
+  // Appropriate spacing even if no text label is given
+  .iui-checkbox,
+  .iui-radio {
+    min-height: $iui-line-height;
+  }
 
-  > .iui-label {
-    margin-bottom: $iui-component-offset;
-    font-weight: $iui-font-weight-semibold;
+  &.iui-inline-label {
+    grid-template: 'label inputs icon' / auto 1fr auto;
 
-    &.iui-required {
-      &::after {
-        content: ' *';
-        @include themed {
-          color: t(iui-color-foreground-negative);
-        }
+    // IE fix icon position for inline checkboxes/radios group
+    @at-root {
+      div#{&} {
+        // stylelint-disable -- fix position in IE
+        -ms-grid-columns: auto min-content auto;
+        // stylelint-enable
       }
     }
-  }
 
-  > .iui-message {
-    display: flex;
-    width: fit-content;
-    align-items: center;
-    font-size: $iui-font-size-small;
-    line-height: $iui-line-height;
-    margin-top: $iui-component-offset;
-    @include themed {
-      color: t(iui-text-color-muted);
+    .iui-input,
+    .iui-textarea,
+    .iui-input-group,
+    .iui-select {
+      // stylelint-disable -- fix position in IE
+      -ms-grid-row: 1;
+      -ms-grid-column: 2;
+      // stylelint-enable
     }
 
-    svg {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-      display: flex; // needed for vertical alignment of webcomponents
-      margin-right: $iui-xs;
-      @include themed {
-        fill: t(iui-icons-color);
-      }
+    .iui-input-icon {
+      // stylelint-disable -- fix position in IE
+      -ms-grid-row: 1;
+      -ms-grid-column: 3;
+      // stylelint-enable
     }
 
-    > .iui-borderless {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+    &.iui-with-message {
+      grid-template:
+        'label inputs inputs'
+        '. icon message' / auto auto 1fr;
 
-      svg {
-        @include themed {
-          fill: t(iui-icons-color-actionable);
-        }
+      &:not(.iui-inline-icon) .iui-input-icon {
+        // stylelint-disable -- fix position in IE
+        -ms-grid-row: 2;
+        -ms-grid-column: 2;
+        // stylelint-enable
       }
-    }
 
-    a {
-      user-select: none;
+      .iui-message {
+        // stylelint-disable -- fix position in IE
+        -ms-grid-row: 2;
+        -ms-grid-column: 3;
+        // stylelint-enable
+      }
     }
-  }
-
-  // Appropriate spacing even if no text label is given
-  > .iui-checkbox,
-  > .iui-radio {
-    min-height: $iui-line-height;
-  }
 
-  &.iui-inline {
-    flex-direction: row;
-    align-items: center;
+    > .iui-input-group {
+      display: flex;
+      gap: $iui-m;
 
-    > .iui-label {
-      flex-shrink: 0;
-      margin: 0 $iui-m 0 0;
+      > .iui-checkbox,
+      > .iui-radio,
+      > .iui-toggle-switch {
+        margin-right: $iui-m;
 
-      &.iui-required {
-        margin-right: $iui-xs * 1.5;
+        @supports (gap: $iui-m) {
+          margin-right: 0;
+        }
       }
-    }
 
-    > .iui-checkbox:not(:last-child),
-    > .iui-radio:not(:last-child),
-    > .iui-toggle-switch:not(:last-child) {
-      margin-right: $iui-m;
+      &:not(:last-child) {
+        margin-right: $iui-m;
+      }
     }
+  }
+}
 
-    > .iui-message {
-      margin: 0;
-
-      svg:not(.iui-icon) {
-        margin-right: 0;
+/// Text label for an input.
+/// Supports .iui-required modifier to show red asterisk.
+@mixin iui-input-label {
+  font-weight: $iui-font-weight-semibold;
+  grid-area: label;
+  align-self: center;
+  margin-bottom: $iui-component-offset;
+
+  &.iui-required {
+    &::after {
+      content: ' *';
+      @include themed {
+        color: t(iui-color-foreground-negative);
       }
     }
+  }
+}
 
-    > .iui-input,
-    > .iui-textarea {
-      padding-right: $iui-icons-default + $iui-l;
+/// Modifier on iui-input-label to place it inline.
+@mixin iui-input-label-inline {
+  margin: 0 $iui-m 0 0;
+  // stylelint-disable -- fix position in IE
+  -ms-grid-column-span: 1;
+  // stylelint-enable
 
-      + .iui-message {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
+  &.iui-required {
+    margin-right: $iui-xs * 1.5;
+  }
+}
 
-        svg:not(.iui-icon) {
-          margin-right: $iui-sm;
-        }
-      }
+/// Message shown below input
+@mixin iui-input-message {
+  font-size: $iui-font-size-small;
+  grid-area: message;
+  margin-top: $iui-component-offset;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
 
-      &:last-child {
-        padding-right: $iui-sm;
-      }
-    }
+  a {
+    user-select: none;
+  }
+}
+
+/// Icon to be shown near an input.
+@mixin iui-input-icon {
+  display: flex;
+  grid-area: icon;
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  align-self: center;
+  @include themed {
+    fill: t(iui-icons-color);
   }
 
-  // #region Statuses
-  &.iui-positive {
-    @include iui-inputs-status(
-      iui-color-foreground-positive,
-      iui-color-foreground-positive-overlay,
-      iui-color-foreground-positive-rgb
-    );
+  &:not(:last-child) {
+    margin-right: $iui-xs;
   }
+}
+
+/// Modifier on iui-input-icon to place it at the end of input.
+@mixin iui-input-icon-inline {
+  // stylelint-disable -- fix position in IE
+  -ms-grid-row: 1;
+  -ms-grid-column: 3;
+  // stylelint-enable
 
-  &.iui-warning {
-    @include iui-inputs-status(
-      iui-color-foreground-warning,
-      iui-color-foreground-warning-overlay,
-      iui-color-foreground-warning-rgb
-    );
+  grid-area: inputs;
+  justify-self: end;
+  margin: 0 $iui-sm 0 0;
+  position: relative;
+
+  &.iui-button {
+    height: 100%;
+    width: fit-content;
+    margin-right: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
-  &.iui-negative {
-    @include iui-inputs-status(
-      iui-color-foreground-negative,
-      iui-color-foreground-negative-overlay,
-      iui-color-foreground-negative-rgb
-    );
+  &.iui-actionable {
+    align-items: center;
+    height: 90%;
+    margin-right: 1px;
+    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);
+      }
+      transition: transform $iui-speed-fast ease-out;
+    }
+
+    &.iui-open svg {
+      transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
+    }
   }
-  // #endregion
 }
 
-@mixin iui-inputs-status($foregroundColor, $foregroundOverlay, $foregroundRgb) {
+/// Mixin for applying status colors to input container.
+/// @arg status - must be one of: positive, negative, warning
+/// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
+/// @arg textSelector - selector to apply text color on. Defaults to .iui-message
+@mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
   *::selection {
     @include themed {
-      background-color: rgba(t($foregroundRgb), t(iui-opacity-4));
+      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
     }
   }
 
-  > .iui-message {
+  #{$iconSelector} {
     @include themed {
-      color: t($foregroundColor);
+      fill: t(iui-color-foreground-#{$status});
     }
+  }
 
-    svg {
-      @include themed {
-        fill: t($foregroundColor);
-      }
+  #{$textSelector} {
+    @include themed {
+      color: t(iui-color-foreground-#{$status});
     }
 
     a {
       text-decoration: underline;
 
       @include themed {
-        color: t($foregroundColor);
+        color: t(iui-color-foreground-#{$status});
       }
 
       &:hover {
         text-decoration: none;
 
         @include themed {
-          color: t($foregroundOverlay);
+          color: t(iui-color-foreground-#{$status}-overlay);
         }
       }
     }
   }
 
-  > input,
   > .iui-input,
-  > textarea,
   > .iui-textarea,
   > .iui-select > .iui-select-button {
     padding-bottom: $iui-component-padding-vertical - 1px;
@@ -212,13 +308,13 @@
     }
 
     @include themed {
-      border-bottom: 2px solid t($foregroundColor);
+      border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
     }
 
     &:focus {
       @include themed {
-        border-bottom: 2px solid t($foregroundColor);
-        box-shadow: rgba(t($foregroundRgb), t(iui-opacity-5)) 0 0 0 2px;
+        border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
+        box-shadow: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5)) 0 0 0 $iui-xxs;
       }
     }
   }

package/scss/menu/classes.scss

@@ -11,6 +11,10 @@
   @include iui-menu-item;
 }
 
+.iui-menu-content {
+  @include iui-menu-content;
+}
+
 .iui-menu-divider {
   @include iui-menu-divider;
 }

package/scss/menu/menu.scss

@@ -92,7 +92,8 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
     }
   }
 
-  &:focus {
+  &:focus,
+  &.iui-focused {
     @include themed {
       outline: $iui-active-outline;
       outline-offset: -1px;
@@ -130,7 +131,8 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
       }
     }
 
-    &:focus {
+    &:focus,
+    &.iui-focused {
       outline-width: $iui-xxs;
       outline-offset: -2px;
     }
@@ -160,6 +162,10 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   }
 }
 
+@mixin iui-menu-content {
+  padding: $iui-baseline ($iui-component-padding-horizontal + 1px);
+}
+
 @mixin iui-menu-divider {
   height: 1px;
   width: calc(100% - #{$iui-l});