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

package/lib/cjs/components-react/editors/PopupButton.scss

@@ -0,0 +1,112 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+@use "./variables" as *;
+
+.components-popup-button {
+  min-width: 100%;
+  min-height: 28px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+
+  font-weight: normal;
+
+  > .components-popup-button-value {
+    flex-grow: 1;
+    max-width: calc(100% - var(--iui-size-l));
+    overflow-x: hidden;
+    padding: 0 3px;
+
+    &.components-popup-button-placeholder {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > .components-popup-button-arrow {
+    background-color: var(--iui-color-background);
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
+
+    > .components-popup-button-arrow-icon {
+      transition: transform 0.2s;
+      text-align: center;
+      font-size: var(--iui-font-size-0);
+      line-height: var(--iui-size-l);
+
+      &:hover {
+        color: var(--iui-color-text-accent);
+      }
+    }
+  }
+
+  &:focus,
+  &.components-popup-expanded {
+    border-color: var(--iui-color-text-accent-hover);
+    outline: 0px;
+    box-shadow: $uicore-inputs-focus-boxshadow;
+
+    > .components-popup-button-arrow {
+      border: none;
+      box-shadow: none;
+      outline: 0px;
+
+      > .components-popup-button-arrow-icon {
+        color: var(--iui-color-text-accent);
+      }
+    }
+  }
+}
+
+.components-smallEditor-host {
+  .components-popup-button {
+    min-height: $editor-component-height-small !important;
+  }
+}
+
+.components-popup-button-popup {
+  background-color: var(--iui-color-background);
+}
+
+.components-editor-popup-content {
+  padding: 4px 8px;
+}
+
+.components-popup-bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+
+  > .components-popup-large-button {
+    width: 70px;
+    font-size: 20px;
+    margin-left: 6px;
+  }
+
+  > .components-popup-cancel-button {
+    &,
+    &:active,
+    &:focus {
+      border: none;
+      background-color: var(--iui-color-background-negative);
+      color: var(--iui-color-white);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-negative-hover);
+      color: var(--iui-color-white);
+    }
+  }
+}

package/lib/cjs/components-react/editors/SliderEditor.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-slider-editor {
+  min-width: 100%;
+}
+
+.components-slider-editor-slider {
+  min-width: 100px;
+  min-height: $editor-component-height-small;
+}

package/lib/cjs/components-react/editors/TextEditor.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-text-editor {
+  min-width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-text-editor {
+    min-height: $editor-component-height-small !important;
+    padding-top: 1px !important;
+    padding-bottom: 1px !important;
+  }
+}

package/lib/cjs/components-react/editors/TextareaEditor.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-textarea-editor {
+  min-width: 100%;
+  margin: 0;
+}
+
+.components-textarea-editor-textarea {
+  min-width: 150px;
+  margin: 0;
+}

package/lib/cjs/components-react/editors/ToggleEditor.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.
+ *--------------------------------------------------------------------------------------------*/
+.components-property-list--horizontal {
+  .components-toggle-editor {
+    margin-left: var(--iui-size-2xs); // Clear the resizer in the PropertyGrid
+    padding: 1px 0;
+  }
+}
+
+.components-property-list--vertical {
+  .components-toggle-editor {
+    margin-left: var(--iui-size-3xs);
+    padding: 1px 0;
+  }
+}

package/lib/cjs/components-react/editors/variables.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/inputs/variables";
+
+@forward "~@itwin/core-react/lib/core-react/inputs/variables";
+
+$editor-component-height-small: 24px;
+$editor-iui-input-padding: variables.$uicore-iui-input-padding;

package/lib/cjs/components-react/filter-builder/FilterBuilderRule.scss

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.fb-row {
+  --background-color: var(--iui-color-background);
+  --border-color: var(--iui-color-border);
+  --operator-width: 5rem;
+  --property-name-width: 25%;
+  --condition-width: 10rem;
+  --toolbar-width: 6.25rem;
+  display: block;
+  position: relative;
+
+  .fb-row-container {
+    align-items: flex-start;
+    gap: var(--iui-size-s);
+  }
+
+  .fb-row-condition {
+    width: var(--condition-width);
+  }
+
+  .fb-property-value {
+    flex: 1;
+    width: 15rem;
+    display: flex;
+    flex-direction: column;
+
+    .components-text-editor {
+      height: unset;
+    }
+  }
+
+  .fb-row-toolbar {
+    width: var(--toolbar-width);
+    margin-left: auto;
+    justify-content: space-between;
+  }
+}

package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.fb-group {
+  --border-color: var(--iui-color-border);
+  --fb-operator-width: 128px;
+  --divider-width: var(--iui-size-2xs);
+  --divider-background-color: var(--iui-color-border-subtle);
+  gap: var(--iui-size-s);
+
+  .fb-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--iui-size-xs);
+  }
+
+  .fb-logical-operator {
+    width: var(--fb-operator-width);
+    height: 100%;
+    text-align: center;
+    background-color: var(--iui-color-background-hover);
+    user-select: none;
+    -webkit-user-select: none;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    font-weight: var(--iui-font-weight-semibold);
+  }
+
+  .fb-group-operator {
+    border: 1px solid var(--border-color);
+  }
+}

package/lib/cjs/components-react/filtering/FilteringInput.scss

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-filtering-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 5px;
+}
+
+// Input wrapper
+.components-filtering-input-input {
+  position: relative;
+  flex: 1;
+
+  // The input itself
+  input {
+    min-height: 28px;
+    padding: $uicore-iui-input-padding;
+    box-sizing: border-box;
+  }
+
+  input::-ms-clear {
+    display: none;
+  }
+}
+
+.components-filtering-input-input-components {
+  display: flex;
+  position: absolute;
+  right: 8px;
+  top: 1px;
+  bottom: 0px;
+
+  > .icon {
+    align-self: center;
+    border: none;
+    outline: none;
+  }
+}
+
+@mixin filtering-button-base {
+  margin-left: 6px;
+}
+
+.components-filtering-input-clear {
+  @include filtering-button-base;
+  color: var(--iui-color-text-muted);
+  font-size: "12px";
+}
+
+.components-filtering-input-loader {
+  margin-bottom: auto;
+  margin-top: auto;
+}

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;
+    }
+  }
+}