refactor(themes): use the sizable mixins and functions to size compon…

…ents (#12471) * refactor(themes): use the sizable mixins and functions to size components Closes #12347 --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Co-authored-by: sivanova <sivanova@infragistics.com> Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>
IgniteUI · May 9, 2023 · ffd8be1 · ffd8be1
1 parent d46acfe
commit ffd8be1
Show file tree

Hide file tree

Showing 39 changed files with 843 additions and 1,460 deletions.
diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -64,10 +64,10 @@
 @mixin action-strip($theme) {
     @include css-vars($theme);
 
-    $padding: (
-        comfortable: 0 rem(24px),
-        cosy: 0 rem(16px),
-        compact: 0 rem(12px)
+    $padding-inline: (
+        comfortable: rem(24px),
+        cosy: rem(16px),
+        compact: rem(12px)
     );
 
     $variant: map.get($theme, variant);
@@ -84,7 +84,8 @@
         inset-inline-start: 0;
         background: var-get($theme, 'background');
         color: inherit;
-        padding: map.get($padding, 'comfortable');
+        padding-inline: pad-inline(map.get($padding-inline, 'compact'), map.get($padding-inline, 'cosy'), map.get($padding-inline, 'comfortable'));
+        padding-block: 0;
         z-index: 9999;
     }
 
@@ -101,14 +102,9 @@
         }
     }
 
-    %igx-action-strip--cosy {
-        @extend %action-icons-density;
-        padding: map.get($padding, 'cosy');
-    }
-
+    %igx-action-strip--cosy,
     %igx-action-strip--compact {
         @extend %action-icons-density;
-        padding: map.get($padding, 'compact');
     }
 
     %igx-action-strip__editing-actions,

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss
@@ -5,8 +5,10 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 @mixin component {
     @include b(igx-avatar) {
+        @include sizable();
         // Register the component in the component registry
         $this: bem--selector-to-string(&);
+
         @include register-component(
             $name: string.slice($this, 2, -1),
             $deps: (
@@ -41,15 +43,7 @@
         }
 
         @include m(initials) {
-            @extend %igx-avatar-initials--small !optional;
-        }
-
-        @include mx(medium, initials) {
-            @extend %igx-avatar-initials--medium !optional;
-        }
-
-        @include mx(large, initials) {
-            @extend %igx-avatar-initials--large !optional;
+            @extend %igx-avatar--initials !optional;
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -15,7 +15,6 @@
 /// @param {Color} $color [null] - The text color used of the avatar.
 /// @param {Color} $background [null] - The background color used of the avatar.
 /// @param {number} $border-radius [null] - The border-radius used of the avatar.
-/// @param {number} $size [null] - The size of the avatar.
 /// @requires $light-schema
 ///
 /// @example scss Change the background and icon colors in icon avatars
@@ -27,7 +26,6 @@
     $background: null,
     $color: null,
     $border-radius: null,
-    $size: null,
 ) {
     $name: 'igx-avatar';
     $avatar-schema: ();
@@ -53,20 +51,13 @@
         background: $background,
         color: $color,
         border-radius: $border-radius,
-        size: $size
     ));
 }
 
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, variant);
-    $size: map.get($theme, 'size');
-    $small-size: rem(40px);
-    $medium-size: rem(64px);
-    $large-size: rem(88px);
-
     $variant: map.get($theme, variant);
     $bootstrap-theme: $variant == 'bootstrap';
 
@@ -87,6 +78,8 @@
     }
 
     %igx-avatar-display {
+        --size: #{sizable(#{rem(40px)}, #{rem(64px)}, #{rem(88px)})};
+
         position: relative;
         display: inline-flex;
         justify-content: center;
@@ -98,6 +91,8 @@
         border-radius: var-get($theme, 'border-radius');
         outline-style: none;
         flex-shrink: 0;
+        width: var(--size);
+        height: var(--size);
 
         &::after {
             box-shadow: none;
@@ -135,41 +130,22 @@
 
     %igx-avatar--initials {
         text-transform: uppercase;
+        font-size: calc(var(--size) / 2);
+        line-height: calc(var(--size) / 2);
     }
 
+    %igx-avatar--small,
     %igx-avatar-initials--small {
-        --size: #{$size or $small-size};
-        font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);
-        line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);
+        --component-size: var(--ig-size, var(--ig-size-small));
     }
 
+    %igx-avatar--medium,
     %igx-avatar-initials--medium {
-        --size: #{$size or $medium-size};
-        font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);
-        line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);
+        --component-size: var(--ig-size, var(--ig-size-medium));
     }
 
+    %igx-avatar--large,
     %igx-avatar-initials--large {
-        --size: #{$size or $large-size};
-        font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);
-        line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);
-    }
-
-    %igx-avatar--small {
-        --size: #{$size or $small-size};
-        width: var-get(('size': $size or $small-size), 'size');
-        height: var-get(('size': $size or $small-size), 'size');
-    }
-
-    %igx-avatar--medium {
-        --size: #{$size or $medium-size};
-        width: var-get(('size': $size or $medium-size), 'size');
-        height: var-get(('size': $size or $medium-size), 'size');
-    }
-
-    %igx-avatar--large {
-        --size: #{$size or $large-size};
-        width: var-get(('size': $size or $large-size), 'size');
-        height: var-get(('size': $size or $large-size), 'size');
+        --component-size: var(--ig-size, var(--ig-size-large));
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss
@@ -19,10 +19,6 @@
             @extend %igx-badge-value !optional;
         }
 
-        @include m(default) {
-            @extend %igx-badge--default !optional;
-        }
-
         @include m(info) {
             @extend %igx-badge--info !optional;
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -86,29 +86,27 @@
 @mixin badge($theme) {
     @include css-vars($theme);
 
-    $badge-width: rem(22px);
-    $badge-height: $badge-width;
-
-    $badge-font-size: rem(11px);
     $badge-font-weight: normal;
 
-    $badge-icon-font-size: rem(12px);
-
     $badge-value-padding: rem(4px);
     $border-type: solid;
 
     %igx-badge-display {
+        --size: #{rem(22px)};
+        --font-size: calc(var(--size) / 2);
+        --icon-font-size: #{rem(12px)};
+
         display: flex;
         justify-content: center;
         align-items: center;
-        min-width: $badge-width;
-        height: $badge-height;
-        font-size: $badge-font-size;
+        min-width: var(--size);
+        min-height: var(--size);
+        font-size: var(--font-size);
         font-weight: $badge-font-weight;
         color: var-get($theme, 'text-color');
         line-height: 1;
         background: var-get($theme, 'background-color');
-        border-radius: 50%;
+        border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'shadow');
         border-width: var-get($theme, 'border-width');
         border-color: var-get($theme, 'border-color');
@@ -119,9 +117,9 @@
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            width: var(--igx-icon-size, #{$badge-width - rem(2px)});
-            height: var(--igx-icon-size, #{$badge-width - rem(2px)});
-            font-size: var(--igx-icon-size, #{$badge-icon-font-size});
+            width: var(--igx-icon-size, #{var(--size) - rem(2px)});
+            height: var(--igx-icon-size, #{var(--size) - rem(2px)});
+            font-size: var(--igx-icon-size, #{var(--icon-font-size)});
             font-weight: $badge-font-weight;
             color: var-get($theme, 'icon-color');
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-component.scss
@@ -9,6 +9,8 @@
     }
 
     @include b(igx-banner) {
+        @include sizable();
+        // Register the component in the component registry
         $this: bem--selector-to-string(&);
         @include register-component(
             $name: string.slice($this, 2, -1),
@@ -46,12 +48,10 @@
         }
 
         @include m(cosy) {
-            @extend %igx-banner !optional;
             @extend %igx-banner--cosy !optional
-    }
+        }
 
         @include m(compact) {
-            @extend %igx-banner !optional;
             @extend %igx-banner--compact !optional;
         }
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -31,7 +31,7 @@
     $banner-illustration-color: null
 ) {
     $name: 'igx-banner';
-    $selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact';
+    $selector: 'igx-banner, .igx-banner';
     $banner-schema: ();
 
     @if map.has-key($schema, $name) {
@@ -61,11 +61,8 @@
     @include css-vars($theme);
     $variant: map.get($theme, 'variant');
 
-    $banner-padding: (
-        comfortable: rem(8px),
-        cosy: rem(8px),
-        compact: rem(8px)
-    );
+    $padding: rem(8px);
+    $padding-inline-start: calc(#{$padding} * 2);
 
     %igx-banner-host {
         igx-expansion-panel-body {
@@ -86,17 +83,28 @@
     }
 
     %igx-banner {
+        --component-size: var(--ig-size, var(--ig-size-large));
+
         display: flex;
         justify-content: flex-end;
         flex-wrap: wrap;
-        grid-gap: rem(8px);
-        padding-inline-start: calc(#{map.get($banner-padding, 'comfortable') * 2});
-        padding-inline-end: map.get($banner-padding, 'comfortable');
-        padding-block-start: map.get($banner-padding, 'comfortable');
-        padding-block-end: map.get($banner-padding, 'comfortable');
+        gap: rem(8px);
+
+        padding-inline-start: pad-inline($padding-inline-start, $padding-inline-start, $padding-inline-start);
+        padding-inline-end: pad-inline($padding, $padding, $padding);
+        padding-block-start: pad-block($padding, $padding, $padding);
+        padding-block-end: pad-block($padding, $padding, $padding);
         background: var-get($theme, 'banner-background');
     }
 
+    %igx-banner--cosy {
+        --component-size: var(--ig-size, var(--ig-size-medium));
+    }
+
+    %igx-banner--compact {
+        --component-size: var(--ig-size, var(--ig-size-small));
+    }
+
     %igx-banner__illustration {
         justify-content: center;
         width: rem(40px);
@@ -124,19 +132,6 @@
         }
     }
 
-    %igx-banner--cosy {
-        padding-inline-start: calc(#{map.get($banner-padding, 'cosy') * 2});
-        padding-inline-end: map.get($banner-padding, 'cosy');
-        padding-block-start: map.get($banner-padding, 'cosy');
-        padding-block-end: map.get($banner-padding, 'cosy');
-    }
-
-    %igx-banner--compact {
-        padding-inline-start: calc(#{map.get($banner-padding, 'compact') * 2});
-        padding-inline-end: map.get($banner-padding, 'compact');
-        padding-block-start: map.get($banner-padding, 'compact');
-        padding-block-end: map.get($banner-padding, 'compact');
-    }
 
     %igx-banner__message {
         min-width: rem(150px);

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-component.scss
@@ -5,6 +5,7 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 @mixin component {
     @include b(igx-button) {
+        @include sizable();
         $this: bem--selector-to-string(&);
         @include register-component(
             $name: string.slice($this, 2, -1),