feat(searchbox): add size, rounded and fill customization to searchbox

BREAKING CHANGE: Use high-level input for searchbox base Searchbox reuses the input base component size, rounded and fill component options.
telerik · Jan 18, 2022 · 0e75886 · 0e75886
1 parent 995dc3f
commit 0e75886
Show file tree

Hide file tree

Showing 5 changed files with 2 additions and 111 deletions.
diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss
@@ -114,10 +114,6 @@
         display: block;
         position: relative;
         flex: none;
-
-        .k-searchbox {
-            width: 100%;
-        }
     }
 
     .k-virtual-content {

diff --git a/packages/default/scss/searchbox/_layout.scss b/packages/default/scss/searchbox/_layout.scss
@@ -1,44 +1,6 @@
 @include exports("searchbox/layout") {
 
     // Searchbox
-    .k-searchbox {
-        @include border-radius( $kendo-input-border-radius );
-        width: $kendo-input-default-width;
-        border-width: $kendo-input-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: start;
-        white-space: nowrap;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden;
-        transition: all .1s ease; // sass-lint:disable-line no-transition-all
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        // Input
-        > .k-input {
-            padding: $kendo-input-padding-y $kendo-input-padding-x;
-        }
-
-
-        // Loading icon
-        .k-i-loading {
-            // width: $kendo-input-icon-width;
-            // height: $kendo-input-icon-height;
-        }
-    }
+    .k-searchbox {}
 
 }
diff --git a/packages/default/scss/searchbox/_theme.scss b/packages/default/scss/searchbox/_theme.scss
@@ -1,58 +1,6 @@
 @include exports("searchbox/theme") {
 
     // Searchbox
-    .k-searchbox {
-        @include fill(
-            $kendo-input-text,
-            $kendo-input-bg,
-            $kendo-input-border
-        );
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $kendo-input-hover-text,
-                $kendo-input-hover-bg,
-                $kendo-input-hover-border
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-state-focus {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-        &:focus-within {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-
-
-        // Invalid state
-        &.k-invalid,
-        &.ng-invalid,
-        &.k-state-invalid {
-            border-color: $invalid-border;
-
-            .k-input-validation-icon {
-                color: $invalid-text;
-            }
-
-            &:focus-within,
-            &.k-state-focus {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
+    .k-searchbox {}
 
 }
diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss
@@ -662,10 +662,6 @@
                 width: min-content;
                 align-self: flex-start;
             }
-
-            .k-searchbox {
-                width: 100%;
-            }
         }
 
         .k-actions {

diff --git a/packages/material/scss/searchbox/_layout.scss b/packages/material/scss/searchbox/_layout.scss
@@ -1,12 +1 @@
 @import "~@progress/kendo-theme-default/scss/searchbox/_layout.scss";
-
-@include exports( "searchbox/layout/material" ) {
-
-    // Searchbox
-    .k-searchbox {
-        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
-        border-width: $kendo-input-border-width 0;
-        border-top-color: transparent !important; // sass-lint:disable-line no-important
-    }
-
-}