@itwin/components-react 5.0.0-dev.2 → 5.0.0

package/lib/esm/components-react/filtering/ResultSelector.scss

@@ -0,0 +1,66 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-result-selector {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+
+  font-family: var(--iui-font-sans);
+  color: var(--iui-color-text);
+}
+
+.components-result-selector-current-result {
+  margin: 0 2px;
+  padding-top: 2px;
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    display: inline-block;
+    text-align: center;
+    font-size: 12px;
+    padding: 0px;
+    min-width: 2em;
+  }
+}
+
+.components-result-selector-current-result:hover {
+  cursor: pointer;
+}
+
+.components-result-selector-button {
+  font-size: 12px;
+  height: 20px;
+  width: 20px;
+  border-style: none;
+  color: var(--iui-color-text-muted);
+  margin: 0 4px;
+}
+
+.components-result-selector-button:hover {
+  background-color: var(--iui-color-background-hover);
+  border-radius: 2px;
+}
+
+/* Overriding iTwinUI button defaults */
+.components-result-selector-button,
+.components-result-selector-button:active,
+.components-result-selector-button:focus,
+.components-result-selector-button:disabled,
+.components-result-selector-button[disabled]:hover {
+  border-style: none;
+  padding: 0px;
+}
+
+.components-result-selector-button:disabled,
+.components-result-selector-button[disabled]:hover {
+  background-color: var(--iui-color-background-backdrop);
+  cursor: default;
+}

package/lib/esm/components-react/iconpicker/IconPickerButton.scss

@@ -0,0 +1,74 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+.components-iconpicker-button {
+  color: var(--iui-color-text);
+  background: var(--iui-color-background);
+  box-sizing: border-box;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  .iconpicker-button-sprite {
+    width: 18px;
+    height: 18px;
+    margin: 4px;
+  }
+
+  .icon {
+    margin-left: 4px;
+    font-size: 10px;
+    transition: color 0.1s ease;
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:hover .icon {
+    color: var(--iui-color-text-accent);
+  }
+}
+
+.components-iconpicker-popup {
+  border: 1px solid var(--iui-color-border-foreground);
+  @include uicore-z-index(dialog-popup);
+
+  .components-iconpicker-popup-container {
+    color: var(--iui-color-text);
+    background: var(--iui-color-background);
+
+    .components-iconpicker-popup-icons {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      .components-icon-swatch {
+        width: 34px;
+        height: 34px;
+        padding: 4px;
+        border-width: 1px;
+        border-radius: var(--iui-border-radius-1);
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2);
+        background: var(--iui-color-background);
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+
+        &[disabled] {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+}

package/lib/esm/components-react/inputs/ParsedInput.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
+
+.components-parsed-input {
+  width: auto;
+  padding: $uicore-iui-input-padding;
+
+  &.components-parsed-input-has-error {
+    color: var(--iui-color-text-negative);
+    font-weight: bold;
+  }
+
+  &.components-parsed-input[disabled] {
+    color: var(--iui-color-text);
+    opacity: 0.65;
+  }
+}

package/lib/esm/components-react/properties/renderers/ActionButtonList.scss

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin property-action-button-list {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.components-property-action-button-list--horizontal {
+  @include property-action-button-list;
+  grid-column: 4;
+}
+
+.components-property-action-button-list--vertical {
+  @include property-action-button-list;
+  grid-column: 2;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.components-action-button-container {
+  margin: 0 5px 0 5px;
+}

package/lib/esm/components-react/properties/renderers/NonPrimitivePropertyRenderer.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+@use "~@itwin/core-react/lib/core-react/style/colors" as *;
+
+.components-nonprimitive-property {
+  padding: 10px;
+  display: grid;
+  grid-row-gap: 10px;
+
+  border-radius: var(--iui-border-radius-1);
+  border: solid 1px $uicore-gray-9;
+
+  background-color: #ffffff;
+}

package/lib/esm/components-react/properties/renderers/PropertyView.scss

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$text-font-size: var(--iui-font-size-1);
+$text-font-color: var(--iui-color-text);
+
+.components-property-record--horizontal {
+  height: 100%;
+  display: grid;
+  padding: 0 8px;
+
+  .components-property-record-label {
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
+  }
+
+  .components-property-record-value {
+    min-height: 24px;
+    font-size: $text-font-size;
+    color: $text-font-color;
+    padding: 0px 5px;
+  }
+}
+
+.components-property-record--vertical {
+  height: 100%;
+  padding: 0 8px;
+  display: grid;
+  align-content: center;
+
+  .components-property-record-label {
+    font-size: var(--iui-font-size-0);
+    color: var(--iui-color-text-muted);
+  }
+
+  .components-property-record-value {
+    min-height: 22px;
+    font-size: $text-font-size;
+    color: $text-font-color;
+  }
+}
+
+@mixin record-cell {
+  display: flex;
+  align-items: center;
+}
+
+.components-property-record-label {
+  @include record-cell;
+  overflow: hidden;
+}
+
+.components-property-record-value {
+  @include record-cell;
+  overflow: hidden;
+
+  & > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .core-underlined-button {
+    // Offset by 2px, because value is centered vertically
+    // and the button has an underline which offsets it's content,
+    // which in turn makes it not in line with the rest of text
+    margin-top: 2px;
+  }
+
+  .multiline {
+    display: flex;
+    align-items: baseline;
+
+    .content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .expanded {
+    white-space: pre-wrap;
+    margin-top: 4px;
+    margin-bottom: 4px;
+
+    .expand-toggle {
+      float: right;
+      margin-top: 2px;
+    }
+  }
+
+  .expand-toggle {
+    padding: 0;
+    white-space: nowrap;
+    border: none;
+    background: none;
+    color: var(--iui-color-icon-accent);
+    font-size: 12px;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+}

package/lib/esm/components-react/properties/renderers/label/PropertyLabelRenderer.scss

@@ -0,0 +1,87 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin rotate($amount) {
+  -webkit-transform: rotate($amount);
+  -ms-transform: rotate($amount);
+  transform: rotate($amount);
+}
+
+@mixin transition($seconds, $type) {
+  -webkit-transition: -webkit-transform $seconds $type;
+  -ms-transition: -ms-transform $seconds $type;
+  transition: transform $seconds $type;
+}
+
+.components-property-label-renderer {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-block: auto;
+
+  &-colon::after {
+    content: ":";
+    margin-inline-end: var(--iui-size-2xs);
+  }
+}
+
+@mixin specific-property-label-renderer {
+  position: relative;
+  display: flex;
+
+  .components-label-popup {
+    background: var(--iui-color-background-hover);
+    width: max-content;
+    padding: 5px;
+  }
+}
+
+.components-primitive-property-label-renderer {
+  @include specific-property-label-renderer;
+}
+
+.components-property-record--vertical {
+  .components-nonprimitive-property-label-renderer {
+    margin-bottom: 4px;
+  }
+}
+
+.components-nonprimitive-property-label-renderer {
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--iui-color-text);
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+  transition: transform var(--iui-duration-1) ease-in-out,
+    -webkit-transform var(--iui-duration-1) ease-in-out;
+
+  @include specific-property-label-renderer;
+
+  > .components-property-label-renderer {
+    flex: 1;
+    padding-left: var(--iui-size-2xs);
+  }
+
+  > div {
+    @include transition(var(--iui-duration-1), ease-in-out);
+
+    svg {
+      width: var(--iui-size-s);
+      height: var(--iui-size-s);
+      fill: var(--iui-color-icon);
+      display: block;
+    }
+
+    &.components-expanded {
+      @include rotate(90deg);
+    }
+  }
+
+  &:hover {
+    color: var(--iui-color-text-hover);
+  }
+}

package/lib/esm/components-react/propertygrid/component/PropertyGrid.scss

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
+
+.components-property-grid-loader {
+  position: relative;
+  display: block;
+  left: calc(50% - 24px);
+  top: calc(50% - 24px);
+}
+
+.components-property-grid-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+}
+
+@mixin components-property-list {
+  width: 100%;
+
+  .components--selected,
+  .components--selected:hover {
+    background-color: var(--iui-color-background-accent-muted);
+    outline: 1px solid var(--iui-color-border-accent);
+  }
+
+  .components--clickable:where(:not(.components--selected)) {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--iui-color-background-hover);
+    }
+  }
+
+  .components--hoverable:hover {
+    background-color: var(--iui-color-background-hover);
+  }
+}
+
+.components-property-list--horizontal {
+  display: grid;
+  grid-row-gap: 1px;
+  overflow: hidden;
+
+  @include components-property-list;
+}
+
+.components-property-list--vertical {
+  @include components-property-list;
+}

package/lib/esm/components-react/propertygrid/component/VirtualizedPropertyGrid.scss

@@ -0,0 +1,100 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
+
+.components-virtualized-property-grid-loader {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.components-property-grid-wrapper {
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+}
+
+.virtualized-grid-node {
+  > :not(.virtualized-grid-node-category) {
+    background: var(--iui-color-background);
+  }
+
+  .nested-border-middle {
+    height: 100%;
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-left: 1px solid var(--iui-color-border);
+    border-right: 1px solid var(--iui-color-border);
+  }
+
+  .nested-border-bottom {
+    border-bottom: 1px solid var(--iui-color-border);
+    padding-bottom: 4px;
+  }
+
+  .components--clickable {
+    cursor: pointer;
+    box-sizing: border-box;
+
+    &:not(.components--selected) {
+      &:hover {
+        // Highlight the whole row of inner-most expandable block
+        margin: 0 -4px;
+        // Compensate the negative margin by adding padding
+        padding: 0 12px;
+
+        background: var(--iui-color-background-hover);
+      }
+    }
+  }
+
+  .components--selected {
+    // Highlight the whole row of inner-most expandable block
+    margin: 0 -4px;
+    // Compensate the negative margin by adding padding (minus one for border)
+    padding: 0px 11px;
+
+    background-color: var(--iui-color-background-accent-muted);
+    border: 1px solid var(--iui-color-border-accent);
+  }
+
+  .components--hoverable {
+    &:hover {
+      background: var(--iui-color-background-hover);
+
+      &:not(.components--selected) {
+        // Highlight the whole row of inner-most expandable block
+        margin: 0 -4px;
+        // Compensate the negative margin by adding padding
+        padding: 0 12px;
+      }
+    }
+  }
+}
+
+.virtualized-grid-node-category {
+  padding-top: 4px;
+
+  .components-expandable-content {
+    // We are rendering virtualized content below the expandable block
+    display: none;
+  }
+}
+
+.virtualized-grid-node-custom-category {
+  padding-top: 4px;
+
+  .components-expandable-content > div {
+    padding: 0 4px 4px 4px;
+  }
+}
+
+.virtualized-grid-node-content {
+  height: 100%;
+}
+
+.virtualized-grid-node-content-wrapper-item {
+  overflow: hidden;
+}

package/lib/esm/components-react/selectable-content/SelectableContent.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.components-selectable-content {
+  display: flex;
+  flex-direction: column;
+
+  .components-selectable-content-header {
+    .components-selectable-content-selector {
+      width: 100%;
+    }
+  }
+
+  .components-selectable-content-wrapper {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+}

package/lib/esm/components-react/toolbar/Item.scss

@@ -0,0 +1,94 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-button-item {
+  box-sizing: border-box;
+  background-origin: border-box;
+  border-color: transparent;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+  cursor: pointer;
+  transition: background-color var(--iui-duration-1) ease;
+  position: relative;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  outline-style: solid;
+  outline-width: 0;
+
+  > .components-icon {
+    font-size: $icon-size;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    color: var(--iui-color-icon);
+    transition: color var(--iui-duration-1) ease;
+
+    img {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+
+  &:not(.components-disabled) > .components-icon {
+    filter: $icon-shadow;
+  }
+
+  &:focus-visible:not(.components-disabled):not(.components-active),
+  &:hover:not(.components-disabled):not(.components-active),
+  &:active:not(.components-disabled):not(.components-active) {
+    color: var(--iui-color-icon-hover);
+    background-color: var(--iui-color-background-transparent-hover);
+  }
+
+  &.components-active {
+    color: var(--iui-color-icon-accent);
+    background-color: var(--iui-color-background-accent-muted);
+    // background-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5));
+    border: solid 2px var(--iui-color-border-accent);
+
+    &:not(:active):not(.components-disabled) {
+      transition-duration: 0s;
+
+      > .components-icon {
+        color: var(--iui-color-icon-accent);
+        transition-duration: var(--iui-duration-1);
+        transition-timing-function: cubic-bezier(1, 0.1, 1, 0.5);
+      }
+    }
+  }
+
+  &.components-disabled {
+    cursor: not-allowed;
+
+    > .components-icon {
+      color: var(--iui-color-icon-disabled);
+    }
+
+    &:hover {
+      cursor: auto;
+    }
+
+    &:active {
+      pointer-events: none;
+    }
+  }
+
+  > .components-badge {
+    display: none;
+  }
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-button-item
+  > .components-badge {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/lib/esm/components-react/toolbar/ItemWrapper.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-toolbar-item-container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}