feat(themes): add standalone label theme (#13221)

* feat(themes): add standalone label theme
Closes #13211
---------

Co-authored-by: Konstantin Dinev <[email protected]>

Author: 2 people

CHANGELOG.md

@@ -37,6 +37,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`:
     - Exposed `comboIgnoreDiacriticsFilter` filter function which normalizes diacritics to their base representation.
     When the combo components are configured with it, filtering for **"resume"** will match both **"resume"** and **"résumé"**.
+- `Themes`:
+    - Include a standalone theme for the `igxLabel` directive to allow usage with components outside the Input Group.
 
 ### General
 - `IgxStepper`:

package-lock.json

@@ -66,7 +66,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^2.0.0",
+    "igniteui-theming": "^2.1.0",
     "igniteui-trial-watermark": "^2.0.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^1.0.3",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^2.0.0",
+        "igniteui-theming": "^2.1.0",
         "@igniteui/material-icons-extended": "^2.10.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -28,6 +28,7 @@
 @forward 'highlight/highlight-theme.scss';
 @forward 'icon/icon-theme';
 @forward 'input/input-group-theme';
+@forward 'label/label-theme';
 @forward 'list/list-theme';
 @forward 'navbar/navbar-theme';
 @forward 'navdrawer/navdrawer-theme';

projects/igniteui-angular/src/lib/core/styles/components/_index.scss

@@ -892,20 +892,12 @@
     }
 
     %form-group-label {
-        @include ellipsis();
-        max-width: 100%;
         padding-inline-end: rem(4px);
-        line-height: normal;
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
         transition: all $transition-timing;
         margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
-        color: var-get($theme, 'idle-secondary-color');
-
-        [dir='rtl'] & {
-            transform-origin: top right;
-        }
     }
 
     %form-group-label--border {

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

@@ -0,0 +1,16 @@
+@use '../../base' as *;
+@use 'sass:string';
+
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+
+@mixin component {
+    @include register-component(
+        $name: 'igx-label',
+        $deps: ()
+    );
+
+    [igxLabel] {
+        @extend %label-base !optional;
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/label/_label-component.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Map} $color [null] - The text color.
+@function label-theme(
+    $schema: $light-material-schema,
+    $color: null
+) {
+    $name: 'igx-label';
+    $selector: '[igxLabel]';
+    $label-schema: ();
+
+    @if map.has-key($schema, 'label') {
+        $label-schema: map.get($schema, 'label');
+    } @else {
+        $label-schema: $schema;
+    }
+
+    $theme: digest-schema($label-schema);
+
+    @return extend($theme, (
+        name: $name,
+        selector: $selector,
+        color: $color,
+        variant: map.get($schema, '_meta', 'theme'),
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+@mixin label($theme) {
+    // The --variant CSS produced by css-vars is needed also
+    // when dynamically switching between the input `type` attribute.
+    @include css-vars($theme);
+    $variant: map.get($theme, 'variant');
+
+    %label-base {
+        @include ellipsis();
+        position: relative;
+        color: var-get($theme, 'color');
+        max-width: 100%;
+        line-height: normal;
+        font-size: rem(16px);
+
+        [dir='rtl'] & {
+            transform-origin: top right;
+        }
+
+        @if $variant == 'fluent' or $variant == 'indigo-design' {
+            font-size: rem(14px);
+            font-weight: 600;
+            height: auto;
+        }
+
+        @if $variant == 'bootstrap' {
+            line-height: rem(24px);
+            height: auto;
+        }
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss

@@ -57,6 +57,7 @@
 @use '../components/highlight/highlight-component' as highlight;
 @use '../components/icon/icon-component' as icon;
 @use '../components/input/input-group-component' as input-group;
+@use '../components/label/label-component' as label;
 @use '../components/list/list-component' as list;
 @use '../components/navbar/navbar-component' as navbar;
 @use '../components/navdrawer/navdrawer-component' as navdrawer;
@@ -152,6 +153,7 @@
     @include highlight.component();
     @include icon.component();
     @include input-group.component();
+    @include label.component();
     @include list.component();
     @include navbar.component();
     @include navdrawer.component();

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

@@ -475,6 +475,14 @@
         @include list($list-theme-map);
     }
 
+    @if is-used('igx-label', $exclude) {
+        $label-theme-map: label-theme(
+            $schema: $schema,
+        );
+        $label-theme-map: meta.call($theme-handler, $label-theme-map);
+        @include label($label-theme-map);
+    }
+
     @if is-used('igx-navbar', $exclude) {
         $navbar-theme-map: navbar-theme(
             $schema: $schema,