testing sized and status

iTwin · Jan 5, 2023 · 568eca4 · 568eca4
1 parent 26d761a
commit 568eca4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 7 deletions.
diff --git a/packages/itwinui-css/backstop/tests/input.html b/packages/itwinui-css/backstop/tests/input.html
@@ -525,7 +525,10 @@ <h3>Current method</h3>
       </div>
 
       <h3>Flex box</h3>
-      <div class="iui-input-flex-container">
+      <div
+        class="iui-input-flex-container"
+        data-iui-size="small"
+      >
         <span>
           <svg-search
             class="iui-input-icon"
@@ -540,6 +543,7 @@ <h3>Flex box</h3>
         />
         <button
           class="iui-button iui-end-icon"
+          data-iui-size="small"
           data-iui-variant="borderless"
         ><svg-close-small
             class='iui-button-icon'
@@ -568,7 +572,7 @@ <h3>Flex box</h3>
           />
         </button>
       </div>
-      <div class="iui-input-flex-container">
+      <div class="iui-input-flex-container iui-negative">
         <input
           placeholder="Placeholder…"
           type="search"
@@ -584,7 +588,7 @@ <h3>Flex box</h3>
         <span class="iui-vertical-divider"></span>
 
         <button
-          class="iui-button iui-end-icon"
+          class="iui-button"
           data-iui-variant="borderless"
         >
           <svg-chevron-down
@@ -593,7 +597,7 @@ <h3>Flex box</h3>
           />
         </button>
         <button
-          class="iui-button iui-end-icon"
+          class="iui-button"
           data-iui-variant="borderless"
         >
           <svg-chevron-up
@@ -602,7 +606,7 @@ <h3>Flex box</h3>
           />
         </button>
         <button
-          class="iui-button iui-end-icon"
+          class="iui-button"
           data-iui-variant="borderless"
         >
           <svg-close-small

diff --git a/packages/itwinui-css/src/input/classes.scss b/packages/itwinui-css/src/input/classes.scss
@@ -32,6 +32,24 @@
   > input[type='search'] {
     @include iui-search-box;
   }
+
+  &[data-iui-size='small'] {
+    @include iui-input-size(small);
+  }
+
+  &[data-iui-size='large'] {
+    @include iui-input-size(large);
+  }
+
+  @each $status in positive, warning, negative {
+    &.iui-#{$status} {
+      @include iui-input-status(
+        $status: $status,
+        $iconSelector: 'svg',
+        $textSelector: 'input'
+      );
+    }
+  }
 }
 
 .iui-invisible-borders {

diff --git a/packages/itwinui-css/src/input/input-flex-container.scss b/packages/itwinui-css/src/input/input-flex-container.scss
@@ -1,7 +1,27 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @mixin iui-input-flex-container {
-  @include iui-input;
+  --_iui-input-background-color: var(--iui-color-background);
+  --_iui-input-border-color: var(--iui-color-border-foreground);
+  --_iui-input-text-color: var(--iui-color-text);
+
+  @include iui-reset;
+  @include iui-focus($offset: -2px, $thickness: 2px);
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--iui-font-size-1);
+  font-weight: var(--iui-font-weight-normal);
+  line-height: var(--iui-size-l);
+  border-radius: var(--iui-border-radius-1);
+  appearance: none;
+  height: var(--_iui-input-min-height);
+  padding-block: var(--_iui-input-padding-block);
+  padding-inline: var(--iui-size-s);
+  color: var(--_iui-input-text-color);
+  background-color: var(--_iui-input-background-color);
+  border: 1px solid var(--_iui-input-border-color);
+  transition: border-color var(--iui-duration-1) ease-out;
+  @include iui-input-size;
 
   right: unset;
   display: flex;
@@ -34,7 +54,9 @@
     &[disabled] {
       --_iui-input-background-color: var(--iui-color-background-disabled);
       --_iui-input-border-color: var(--iui-color-border-disabled);
-      --_iui-input-with-icon-hover-border-color: var(--iui-color-border-disabled);
+      --_iui-input-with-icon-hover-border-color: var(
+        --iui-color-border-disabled
+      );
       cursor: not-allowed;
     }
   }