feat(input): add support for prefix and suffix

telerik · Jan 2, 2024 · f3af6f6 · f3af6f6
1 parent 426f291
commit f3af6f6
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 19 deletions.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -267,11 +267,18 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-component-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: $kendo-invalid-border !default;

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -271,11 +271,17 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-input-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
 
 /// The border color of the invalid Input components.
 /// @group input

diff --git a/packages/default/scss/input/_layout.scss b/packages/default/scss/input/_layout.scss
@@ -190,34 +190,48 @@
     .k-input-suffix {
         border-color: inherit;
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
         > * {
             flex-shrink: 0;
+            border: none;
+        }
+
+        &-vertical {
+            flex-flow: column wrap;
+        }
+
+        &-horizontal {
+            flex-flow: row wrap;
         }
     }
 
 
     // Input separator
     .k-input-separator {
         margin: 0;
-        width: 0;
-        height: $kendo-icon-size;
-        border-width: 0 0 0 1px;
         border-style: solid;
         border-color: inherit;
-        align-self: center;
+        height: auto;
+        align-self: stretch;
+
+        &-horizontal {
+            margin-inline: $kendo-input-md-padding-y;
+            border-width: 1px 0 0;
+        }
+
+        &-vertical {
+            margin-block: $kendo-input-md-padding-y;
+            border-width: 0 0 0 1px;
+        }
     }
 
 
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon,
-    .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-loading-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -435,12 +449,24 @@
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-suffix > .k-icon {
+            .k-input-prefix > .k-input-prefix-text,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-input-suffix-text {
                 padding-block: $_padding-y;
                 padding-inline: $_padding-y;
                 box-sizing: content-box;
             }
 
+            .k-input-separator {
+                &-horizontal {
+                    margin-inline: $_padding-y;
+                }
+
+                &-vertical {
+                    margin-block: $_padding-y;
+                }
+            }
+
             &.k-icon-picker .k-input-inner {
                 width: calc( #{ $_line-height * 1em } );
                 height: calc( #{ $_line-height * 1em } );

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -88,6 +88,19 @@
                 @include focus-indicator( $kendo-input-valid-shadow );
             }
         }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -286,6 +299,19 @@
                 @include focus-indicator( $kendo-input-valid-shadow );
             }
         }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -477,6 +503,19 @@
                 @include focus-indicator( $kendo-input-valid-shadow );
             }
         }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -267,11 +267,25 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-input-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: $kendo-invalid-border !default;

diff --git a/packages/fluent/scss/input/_layout.scss b/packages/fluent/scss/input/_layout.scss
@@ -212,23 +212,49 @@
     // Input prefix and suffix
     .k-input-prefix,
     .k-input-suffix {
-        border: none;
+        border-color: inherit;
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
         > * {
             flex-shrink: 0;
+            border: none;
+        }
+
+        &-vertical {
+            flex-flow: column wrap;
+        }
+
+        &-horizontal {
+            flex-flow: row wrap;
+        }
+    }
+
+
+    // Input separator
+    .k-input-separator {
+        margin: 0;
+        border-style: solid;
+        border-color: inherit;
+        height: auto;
+        align-self: stretch;
+
+        &-horizontal {
+            margin-inline: $kendo-input-md-padding-y;
+            border-width: 1px 0 0;
+        }
+
+        &-vertical {
+            margin-block: $kendo-input-md-padding-y;
+            border-width: 0 0 0 1px;
         }
     }
 
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon,
-    .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-loading-icon {
         padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         flex: none;
@@ -288,7 +314,7 @@
     }
 
 
-    // // Clear value
+    // Clear value
     .k-clear-value {
         width: var( --INTERNAL--kendo-input-icon-size, min-content );
         height: var( --INTERNAL--kendo-input-icon-size, min-content );
@@ -473,6 +499,25 @@
             &.k-icon-picker .k-input-inner {
                 width: var( --kendo-input-icon-picker-width, #{$_button-width} );
             }
+
+            .k-input-prefix > .k-icon,
+            .k-input-prefix > .k-input-prefix-text,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-input-suffix-text {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-y;
+                box-sizing: content-box;
+            }
+
+            .k-input-separator {
+                &-horizontal {
+                    margin-inline: $_padding-y;
+                }
+
+                &-vertical {
+                    margin-block: $_padding-y;
+                }
+            }
         }
     }
 

diff --git a/packages/fluent/scss/input/_theme.scss b/packages/fluent/scss/input/_theme.scss
@@ -46,6 +46,14 @@
             --INTERNAL--kendo-input-text: var( --kendo-input-disabled-text );
             --INTERNAL--kendo-input-bg: var( --kendo-input-disabled-bg );
             --INTERNAL--kendo-input-border: var( --kendo-input-disabled-border );
+
+            .k-input-prefix {
+                color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
+            }
+
+            .k-input-suffix {
+                color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
+            }
         }
 
         // Invalid
@@ -99,6 +107,19 @@
                 }
             }
         }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: var( --kendo-input-prefix-text, #{$kendo-input-prefix-text} );
+        }
+
+        .k-input-suffix {
+            color: var( --kendo-input-suffix-text, #{$kendo-input-suffix-text} );
+        }
+
+        .k-input-separator {
+            border-color: var( --kendo-input-separator-text, #{$kendo-input-separator-text} );
+        }
     }
 
     .k-picker {

diff --git a/packages/fluent/scss/input/_variables.scss b/packages/fluent/scss/input/_variables.scss
@@ -628,6 +628,24 @@ $kendo-input-prefix-bg: k-get-theme-color-var( neutral-20 ) !default;
 /// @group input
 $kendo-input-suffix-bg: k-get-theme-color-var( neutral-20 ) !default;
 
+/// The color of the Input separator.
+/// @group input
+$kendo-input-separator-text: k-get-theme-color-var( neutral-30 ) !default;
+
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: k-get-theme-color-var( neutral-130 ) !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: k-get-theme-color-var( neutral-130 ) !default;
+
+/// The text color of the disabled Input prefix.
+/// @group input
+$kendo-input-prefix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+/// The text color of the disabled Input suffix.
+/// @group input
+$kendo-input-suffix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-border} ) !default;

diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
@@ -268,11 +268,18 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: rgba( $kendo-component-border, .12 ) !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: $kendo-invalid-border !default;