refactor(progress): update typography styles (#14377)

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -108,7 +108,7 @@
 
     $bar-height: map.get((
         material: rem(4px),
-        fluent: rem(4px),
+        fluent: rem(2px),
         bootstrap: rem(16px),
         indigo-design: rem(4px),
     ), $variant);
@@ -148,6 +148,8 @@
 
         @if $variant == 'indigo-design' {
             gap: rem(4px);
+        } @else if $variant == 'fluent' {
+            gap: rem(2px);
         }
 
         &[dir='rtl'],
@@ -257,13 +259,6 @@
     %linear-value {
         margin: $value-margin;
         color: var-get($theme, 'text-color');
-        font-size: $value-fs;
-        font-weight: $value-fw;
-
-        @if $variant == 'indigo-design' {
-            font-size: rem(12px);
-            line-height: rem(16px);
-        }
     }
 
     %linear-value--start {
@@ -384,6 +379,20 @@
     }
 }
 
+/// Adds typography styles for the igx-linear-bar component.
+/// Uses the 'subtitle-2' category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(value: 'subtitle-2')] - The categories from the typographic scale used for type styles.
+@mixin linear-bar-typography($categories: (value: 'subtitle-2')) {
+    $value: map.get($categories, 'value');
+
+    %linear-value {
+        @include type-style($value) {
+            margin: 0;
+        }
+    }
+}
+
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
@@ -454,25 +463,27 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
+    $circular-size: map.get((
+        material: rem(32px),
+        fluent: rem(32px),
+        bootstrap: rem(54px),
+        indigo-design: rem(48px),
+    ), $variant);
+
     $stroke-width: map.get((
         material: rem(4px),
         fluent: rem(4px),
-        bootstrap: rem(8px),
+        bootstrap: rem(4px),
         indigo-design: rem(4px),
     ), $variant);
 
     %circular-display {
         display: inline-flex;
         flex: 1 1 auto;
-        width: rem(32px);
-        height: rem(32px);
+        width: $circular-size;
+        height: $circular-size;
         position: relative;
 
-        @if $variant == 'indigo-design' {
-            width: rem(48px);
-            height: rem(48px);
-        }
-
         svg {
             width: 100%;
             height: 100%;
@@ -506,6 +517,10 @@
         @if $variant == 'indigo-design' {
             stroke-width: calc($stroke-width + rem(1px));
         }
+
+        @if $variant == 'material' {
+            stroke-width: calc($stroke-width + rem(2px));
+        }
     }
 
     %circular-outer--indeterminate {
@@ -522,16 +537,8 @@
         inset-block-start: 50%;
         inset-inline-start: 50%;
         transform: translate(-50%, -50%);
-        font-size: rem(16px);
-        line-height: 1;
         text-align: center;
-        font-weight: 600;
         color: var-get($theme, 'text-color');
-
-        @if $variant == 'indigo-design' {
-            font-size: rem(12px);
-            line-height: rem(16px);
-        }
     }
 
     %circular-text--hidden {
@@ -557,3 +564,27 @@
         }
     }
 }
+
+// Adds typography styles for the igx-circular-bar component.
+/// Uses custom typography
+/// @group typography
+/// @param {Map} $categories [(text: 'h6')] - The categories from the typographic scale used for type styles.
+@mixin circular-bar-typography($categories: (text: 'h6')) {
+    $text: map.get($categories, 'text');
+
+    @if $text != null {
+        %circular-text {
+            @include type-style($text) {
+                font-size: rem(12px);
+                line-height: rem(16px);
+                margin: 0;
+            }
+        }
+    } @else {
+        %circular-text {
+            font-size: rem(12px);
+            font-weight: 700;
+            line-height: rem(16px);
+        }
+    }
+}

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

@@ -20,6 +20,7 @@
 @use '../components/list/list-theme' as *;
 @use '../components/navbar/navbar-theme' as *;
 @use '../components/navdrawer/navdrawer-theme' as *;
+@use '../components/progress/progress-theme' as *;
 @use '../components/radio/radio-theme' as *;
 @use '../components/slider/slider-theme' as *;
 @use '../components/snackbar/snackbar-theme' as *;
@@ -54,6 +55,9 @@
         label: 'body-1',
     ));
     @include chip-typography();
+    @include circular-bar-typography($categories: (
+        text: 'subtitle-1'
+    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (
@@ -77,6 +81,7 @@
         helper-text: 'body-2',
         input-text: 'body-1'
     ));
+    @include linear-bar-typography();
     @include list-typography($categories: (
         item: 'body-2',
         title: 'body-1',

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

@@ -19,6 +19,7 @@
 @use '../components/list/list-theme' as *;
 @use '../components/navbar/navbar-theme' as *;
 @use '../components/navdrawer/navdrawer-theme' as *;
+@use '../components/progress/progress-theme' as *;
 @use '../components/radio/radio-theme' as *;
 @use '../components/slider/slider-theme' as *;
 @use '../components/snackbar/snackbar-theme' as *;
@@ -57,6 +58,9 @@
     @include chip-typography($categories: (
         text: 'subtitle-2'
     ));
+    @include circular-bar-typography($categories: (
+        text: null
+    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();
@@ -73,6 +77,7 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+    @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',
         item: 'caption',

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

@@ -19,6 +19,7 @@
 @use '../components/list/list-theme' as *;
 @use '../components/navbar/navbar-theme' as *;
 @use '../components/navdrawer/navdrawer-theme' as *;
+@use '../components/progress/progress-theme' as *;
 @use '../components/radio/radio-theme' as *;
 @use '../components/slider/slider-theme' as *;
 @use '../components/snackbar/snackbar-theme' as *;
@@ -56,6 +57,9 @@
         label: 'body-2',
     ));
     @include chip-typography();
+    @include circular-bar-typography($categories: (
+        text: 'subtitle-2'
+    ));
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography($categories: (
@@ -75,6 +79,7 @@
         helper-text: 'caption',
         input-text: 'body-2'
     ));
+    @include linear-bar-typography();
     @include list-typography($categories: (
         header: 'overline',
         item: 'body-2',

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

@@ -19,6 +19,7 @@
 @use '../components/list/list-theme' as *;
 @use '../components/navbar/navbar-theme' as *;
 @use '../components/navdrawer/navdrawer-theme' as *;
+@use '../components/progress/progress-theme' as *;
 @use '../components/radio/radio-theme' as *;
 @use '../components/slider/slider-theme' as *;
 @use '../components/snackbar/snackbar-theme' as *;
@@ -40,6 +41,7 @@
     @include card-typography();
     @include checkbox-typography();
     @include chip-typography();
+    @include circular-bar-typography();
     @include column-actions-typography();
     @include date-range-typography();
     @include dialog-typography();
@@ -49,6 +51,7 @@
     @include excel-filtering-typography();
     @include icon-button-typography();
     @include input-group-typography();
+    @include linear-bar-typography();
     @include list-typography();
     @include navbar-typography();
     @include navdrawer-typography();

src/app/progressbar/progressbar.sample.html

@@ -74,9 +74,6 @@ <h4 class="sample-title">Circular progress indicator</h4>
             </div>
         </div>
         <div class="circular-samples">
-            <div class="circular-container">
-                <igx-circular-bar class="circular-sample" [value]="43"></igx-circular-bar>
-            </div>
             <div class="circular-container">
                 <igx-circular-bar class="circular-sample" [value]="53"></igx-circular-bar>
             </div>