refactor(input-group): border-type label per material spec (#6571)

Author: damyanpetev

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -314,6 +314,7 @@
 
         @include e(label) {
             @extend %form-group-label--box !optional;
+            @extend %form-group-label--border !optional;
         }
 
         @include e(textarea) {
@@ -325,6 +326,28 @@
         }
     }
 
+    @include mx(border, filled) {
+        @include e(label) {
+            @extend %form-group-label-float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+    @include mx(border, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+    @include mx(border, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+
     @include mx(border, cosy) {
         @extend %form-group-display--no-margin-cosy !optional;
 
@@ -341,6 +364,30 @@
         }
     }
 
+    @include mx(border, cosy, filled) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
+    @include mx(border, cosy, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
+    @include mx(border, cosy, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
     @include mx(border, compact) {
         @extend %form-group-display--no-margin-compact !optional;
 
@@ -357,6 +404,30 @@
         }
     }
 
+    @include mx(border, compact, filled) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
+    @include mx(border, compact, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
+    @include mx(border, compact, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
     @include mx(valid, border) {
         @include e(bundle) {
             @extend %form-group-bundle-border--success !optional;
@@ -379,6 +450,10 @@
         @include e(bundle) {
             @extend %form-group-bundle-border--disabled !optional;
         }
+
+        @include e(label) {
+            @extend %form-group-label--float-border-disabled !optional;
+        }
     }
 
     // Fluent Theme Start //

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -114,7 +114,10 @@
     $input-prefix-color: null,
     $input-prefix-background: null,
     $input-suffix-color: null,
-    $input-suffix-background: null
+    $input-suffix-background: null,
+
+    $label-floated-background: null,
+    $label-floated-disabled-background: null
 ) {
     $name: 'igx-input-group';
     $input-group-schema: ();
@@ -234,6 +237,8 @@
         input-suffix-color: $input-suffix-color,
         input-suffix-background: $input-suffix-background,
 
+        label-floated-background: $label-floated-background,
+        label-floated-disabled-background: $label-floated-disabled-background,
         focused-shadow-color: $focused-shadow-color,
         success-shadow-color: $success-shadow-color,
         error-shadow-color: $error-shadow-color,
@@ -477,10 +482,6 @@
         box-shadow: inset 0 0 0 1px --var($theme, 'border-color');
         border-radius: --var($theme, 'border-border-radius');
         background: --var($theme, 'border-background');
-
-        %form-group-label--box + %form-group-input--box {
-            transform: translateY(0);
-        }
     }
 
     %form-group-bundle--border-cosy {
@@ -803,7 +804,7 @@
     %form-group-label {
         @include ellipsis();
         position: absolute;
-        width: 100%;
+        // width: 100%;
         transform: translateY(50%); /* 8px, base is 16px */
         line-height: 1 !important;
         height: rem(18px);
@@ -825,12 +826,35 @@
         transform: translateY(0);
     }
 
+    %form-group-label--border {
+        padding: 0 rem(4px);
+        transition: all $transition-timing;
+    }
+
     %form-group-label--float {
         overflow: visible;
         transform: translateY(-50%) scale(.75);
         margin-top: auto;
     }
 
+    %form-group-label--float-border {
+        // width: auto;
+        transform: translateY(-130%) scale(.75);
+        background: --var($theme, 'label-floated-background', inherit);
+    }
+
+    %form-group-label--float-border-disabled {
+        background: --var($theme, 'label-floated-disabled-background', inherit);
+    }
+
+    %form-group-label--float-border-cosy {
+        transform: translateY(-115%) scale(.75);
+    }
+
+    %form-group-label--float-border-compact {
+        transform: translateY(-105%) scale(.75);
+    }
+
     %form-group-label--fixed {
         transition: color $transition-timing;
     }

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -47,6 +47,17 @@
 /// @requires igx-palette
 $default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
 
+
+/// Default dark palette
+/// @type {Map}
+/// @group palettes
+$default-dark-palette: extend(
+    $default-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
 /// Global Overlay Color
 /// @group palettes
 /// @type Color
@@ -77,14 +88,33 @@ $green-palette: igx-palette(
     $secondary: #72da67
 ) !default;
 
-/// Red palette
+/// Dark green palette,
+/// @type {Map}
+/// @group palettes
+$green-dark-palette: extend(
+    $green-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
+/// Purple palette
 /// @type {Map}
 /// @group palettes
 $purple-palette: igx-palette(
     $primary: #00b4d6,
     $secondary: #514590
 ) !default;
 
+/// Dark purple palette
+/// @type {Map}
+/// @group palettes
+$purple-dark-palette: extend(
+    $purple-palette,
+    (
+        surface: (500: #333)
+    )
+) !default;
 
 /// Fluent Excel palette
 /// @type {Map}
@@ -97,6 +127,16 @@ $fluent-excel-palette: igx-palette(
     $error: #a80000
 ) !default;
 
+/// Fluent Excel dark palette
+/// @type {Map}
+/// @group palettes
+$fluent-excel-dark-palette: extend(
+    $fluent-excel-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
 /// Fluent Word palette
 /// @type {Map}
 /// @group palettes
@@ -105,7 +145,17 @@ $fluent-word-palette: igx-palette(
     $secondary: #2b579a,
     $success: #107c10,
     $warn: #797673,
-    $error: #a80000
+    $error: #a80000,
+) !default;
+
+/// Fluent Word dark palette
+/// @type {Map}
+/// @group palettes
+$fluent-word-dark-palette: extend(
+    $fluent-word-palette,
+    (
+        surface: (500: #222)
+    )
 ) !default;
 
 /// Bootstrap palette
@@ -121,3 +171,13 @@ $bootstrap-palette: igx-palette(
     $surface: #f8f9fa
 ) !default;
 
+/// Bootstrap dark palette
+/// @type {Map}
+/// @group palettes
+$bootstrap-dark-palette: extend(
+    $bootstrap-palette,
+    (
+        surface: (500: #333)
+    )
+) !default;
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss

@@ -52,6 +52,8 @@
 /// @prop {Number} box-border-radius [.2 .2 0 0] - The border radius fraction, between 0-1 to be used for box input .
 /// @prop {Number} border-border-radius [.2] - The border radius fraction, between 0-1 to be used for border input .
 /// @prop {Number} search-border-radius [.2] - The border radius fraction, between 0-1 to be used for search input .
+/// @prop {Color} label-floated-background [igx-color: surface] - The background color of the label when floated for input of type border.
+/// @prop {Color} label-floated-disabled-background [igx-color: surface] - The background color of the label when floated for input group of type border in its disabled state.
 ///
 /// @requires {function} extend
 /// @requires {map} $_default-shape-input-group
@@ -138,7 +140,7 @@ $_light-input-group: extend(
 
         disabled-border-color: (
             igx-color: ('grays', 500),
-            rgba: .06
+            rgba: .12
         ),
 
         box-background: (
@@ -151,8 +153,14 @@ $_light-input-group: extend(
 
         border-background: transparent,
 
-        border-disabled-background: (
-            igx-color: ('grays', 100)
+        border-disabled-background: transparent,
+
+        label-floated-background: (
+            igx-color: surface
+        ),
+
+        label-floated-disabled-background: (
+            igx-color: surface
         ),
 
         search-background: #fff,

src/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"></head>
-<body class="igx-typography bootstrap-theme">
+<body class="igx-typography default-theme">
   <app-root></app-root>
 </body>
 </html>