label - update the label directive styles to use typography styles. (#14667)

Author: desig9stein

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

@@ -910,10 +910,14 @@
         }
     }
 
-    %form-group-label--float {
-        --floating-label-position: -73%;
-        transform: translateY(var(--floating-label-position));
-        font-size: rem(12px);
+    @if $variant == 'material' {
+        %form-group-label--float {
+            --floating-label-position: -73%;
+
+            @include type-style('caption');
+
+            transform: translateY(var(--floating-label-position));
+        }
     }
 
     %form-group-label--focused-border,
@@ -972,8 +976,8 @@
 
     %form-group-label--float-border {
         --label-position: #{sizable(18px, 22px, 26px)};
+
         transform: translateY(calc(var(--label-position) * -1));
-        font-size: rem(12px);
         margin-top: 0;
         overflow: hidden;
         will-change: font-size, color, transform;
@@ -1718,8 +1722,6 @@
     // Label
     %fluent-label {
         display: block;
-        font-size: rem(14px);
-        font-weight: 600;
         position: static;
         transform: translateY(0);
         transform-origin: top left;
@@ -1939,13 +1941,11 @@
         display: block;
         color: var-get($theme, 'idle-secondary-color');
         padding: 0;
-        line-height: rem(24px);
         transform: translateY(0);
         transform-origin: top left;
         margin-block-start: 0 !important;
         margin-block-end: rem(4px);
         height: auto;
-        font-size: rem(16px);
 
         [dir='rtl'] & {
             transform-origin: top right;

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

@@ -50,21 +50,33 @@
         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;
+        @if $variant != 'material' {
             height: auto;
         }
+    }
+}
 
-        @if $variant == 'bootstrap' {
-            line-height: rem(24px);
-            height: auto;
+/// Adds typography styles for the igx-label component.
+/// Uses the 'caption'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
+@mixin label-typography(
+    $categories: (
+        label: 'subtitle-1',
+    )
+) {
+    $label: map.get($categories, 'label');
+
+    %label-base {
+        @include type-style($label) {
+            margin: 0;
         }
     }
 }
+

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -30,6 +30,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography($type-scale) {
     @include badge-typography();
@@ -108,4 +109,7 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'body-1'
+    ));
 }

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -104,4 +105,7 @@
     ));
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'subtitle-2'
+    ));
 }

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography($categories: (
@@ -109,4 +110,7 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography($categories: (
+        label: 'caption'
+    ));
 }

projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

@@ -29,6 +29,7 @@
 @use '../components/toast/toast-theme' as *;
 @use '../components/tooltip/tooltip-theme' as *;
 @use '../components/tree/tree-theme' as *;
+@use '../components/label/label-theme' as *;
 
 @mixin typography() {
     @include badge-typography();
@@ -62,4 +63,5 @@
     @include toast-typography();
     @include tooltip-typography();
     @include tree-typography();
+    @include label-typography();
 }

src/app/app.component.ts

@@ -656,6 +656,11 @@ export class AppComponent implements OnInit {
             link: '/virtualForDirective',
             icon: 'view_column',
             name: 'Virtual-For Directive'
+        },
+        {
+            link: '/labelDirective',
+            icon: 'label',
+            name: 'Label Directive'
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 

src/app/app.routes.ts

@@ -138,6 +138,7 @@ import { GridValidationSampleComponent } from './grid-validation/grid-validation
 import { GridExportComponent } from './grid-export/grid-export.sample';
 import { DividerComponent } from './divider/divider.component';
 import { MonthPickerSampleComponent } from './month-picker/month-picker.sample';
+import { LabelSampleComponent } from "./label/label.sample";
 
 export const appRoutes: Routes = [
     {
@@ -664,5 +665,9 @@ export const appRoutes: Routes = [
     {
         path: 'stepper',
         component: StepperSampleComponent
+    },
+    {
+        path: 'labelDirective',
+        component: LabelSampleComponent
     }
 ];

src/app/label/label.sample.html

@@ -0,0 +1,42 @@
+<div class="form-container">
+    <span>Igx Label on native form elements</span>
+
+    <form>
+        <div>
+            <label for="text_field" igxLabel>Input</label>
+            <input id="text_field" type="text">
+        </div>
+
+        <section>
+            <input id="check_box" type="checkbox">
+            <label for="check_box" igxLabel>Checkbox</label>
+        </section>
+
+        <div>
+            <div>
+                <input id="one" type="radio" name="count" checked>
+                <label for="one" igxLabel>Radio one</label>
+            </div>
+
+            <div>
+                <input id="two" type="radio" name="count">
+                <label for="two" igxLabel>Radio two</label>
+            </div>
+
+            <div>
+                <input id="three" type="radio" name="count">
+                <label for="three" igxLabel>Radio three</label>
+            </div>
+        </div>
+
+        <div>
+            <label for="range" igxLabel>Range picker</label>
+            <input id="range" type="range">
+        </div>
+
+        <div>
+            <label for="color" igxLabel>Color picker</label>
+            <input id="color" type="color">
+        </div>
+    </form>
+</div>

src/app/label/label.sample.scss

@@ -0,0 +1,43 @@
+%f-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-container {
+    @extend %f-column;
+
+    gap: 24px;
+
+    form {
+        @extend %f-column;
+
+        justify-content: center;
+        gap: 24px;
+    }
+
+    span {
+        font-size: 24px;
+    }
+
+    section {
+        display: flex;
+        gap: 6px;
+    }
+
+    form > div {
+        @extend %f-column;
+
+        align-items: flex-start;
+        justify-content: center;
+        gap: 8px;
+
+        div {
+            display: flex;
+            gap: 6px;
+        }
+    }
+
+    input {
+        margin: 0;
+    }
+}