refactor(expansion-panel): bundle styles with component (#15476)

simeonoff · web-flow · commit f17e8d42f7a6 · 2025-03-18T10:50:37.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
@@ -112,7 +112,7 @@
             }
         }
 
-        %igx-expansion-panel__body {
+        .igx-expansion-panel__body {
             position: relative;
             height: rem(128px);
             font-size: rem(14px);
@@ -124,11 +124,11 @@
             }
         }
 
-        %igx-expansion-panel__header-icon--start {
+        .igx-expansion-panel__header-icon--start {
             margin-inline-end: rem(8px);
         }
 
-        %igx-expansion-panel__header-title {
+        .igx-expansion-panel__header-title {
             display: flex;
 
             > h6 {
@@ -137,7 +137,7 @@
             }
         }
 
-        %igx-expansion-panel__header-inner {
+        .igx-expansion-panel__header-inner {
             background: var-get($theme, 'header-color');
             padding: $panel-padding;
 
@@ -235,9 +235,7 @@
     %selector-base,
     %selector-item-ghost {
         igx-icon {
-            width: var(--igx-icon-size, #{rem(18px)});
-            height: var(--igx-icon-size, #{rem(18px)});
-            font-size: var(--igx-icon-size, #{rem(18px)});
+            --size: var(--igx-icon-size, #{rem(18px)});
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -186,11 +186,9 @@
 
         igx-icon {
             --component-size: var(--ig-size, var(--ig-size-large));
+            --size: var(--igx-icon-size, #{$icon-in-button-size});
             display: flex;
             justify-content: center;
-            width: var(--igx-icon-size, #{$icon-in-button-size});
-            height: var(--igx-icon-size, #{$icon-in-button-size});
-            font-size: var(--igx-icon-size, #{$icon-in-button-size});
         }
 
         @if $variant == 'fluent' {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -416,13 +416,13 @@
         @include drop-down($drop-down-theme-map);
     }
 
-    @if is-used('igx-expansion-panel', $exclude) {
-        $expansion-panel-theme-map: expansion-panel-theme(
-            $schema: $schema,
-        );
-        $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map);
-        @include expansion-panel($expansion-panel-theme-map);
-    }
+    // @if is-used('igx-expansion-panel', $exclude) {
+    //     $expansion-panel-theme-map: expansion-panel-theme(
+    //         $schema: $schema,
+    //     );
+    //     $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map);
+    //     @include expansion-panel($expansion-panel-theme-map);
+    // }
 
     @if is-used('igx-grid', $exclude) {
         $grid-theme-map: grid-theme(
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss
@@ -69,11 +69,11 @@
         item: 'body-2',
         select-item: 'body-2'
     ));
-    @include expansion-panel-typography($categories: (
-        title: 'h5',
-        description: 'subtitle-2',
-        body: 'body-2'
-    ));
+    // @include expansion-panel-typography($categories: (
+    //     title: 'h5',
+    //     description: 'subtitle-2',
+    //     body: 'body-2'
+    // ));
     @include excel-filtering-typography();
     @include icon-button-typography();
     @include input-group-typography($categories: (
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss
@@ -72,11 +72,11 @@
         item: 'body-2',
         select-item: 'body-2'
     ));
-    @include expansion-panel-typography($categories: (
-        title: 'subtitle-1',
-        description: 'body-2',
-        body: 'caption'
-    ));
+    // @include expansion-panel-typography($categories: (
+    //     title: 'subtitle-1',
+    //     description: 'body-2',
+    //     body: 'caption'
+    // ));
     @include excel-filtering-typography();
     @include icon-button-typography();
     @include input-group-typography($categories: (
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss
@@ -67,11 +67,11 @@
     ));
     @include dock-manager-typography();
     @include drop-down-typography();
-    @include expansion-panel-typography($categories: (
-        title: 'body-2',
-        body: 'body-2',
-        description: 'body-2',
-    ));
+    // @include expansion-panel-typography($categories: (
+    //     title: 'body-2',
+    //     body: 'body-2',
+    //     description: 'body-2',
+    // ));
     @include excel-filtering-typography();
     @include icon-button-typography();
     @include input-group-typography($categories: (
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss
@@ -48,7 +48,7 @@
     @include dialog-typography();
     @include dock-manager-typography();
     @include drop-down-typography();
-    @include expansion-panel-typography();
+    // @include expansion-panel-typography();
     @include excel-filtering-typography();
     @include icon-button-typography();
     @include input-group-typography();
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html
@@ -5,7 +5,10 @@
         <ng-content select="igx-expansion-panel-description"></ng-content>
     </div>
     <ng-content></ng-content>
-    <div [class]="iconPositionClass">
+    <div
+        [class]="iconPositionClass"
+        [class.igx-expansion-panel__header-icon]="true"
+    >
         @if (iconTemplate) {
             <ng-content select="igx-expansion-panel-icon"></ng-content>
         }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -9,6 +9,7 @@ import {
     Inject,
     Input,
     Output,
+    ViewEncapsulation,
     booleanAttribute
 } from '@angular/core';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
@@ -28,6 +29,8 @@ let NEXT_ID = 0;
 @Component({
     selector: 'igx-expansion-panel',
     templateUrl: 'expansion-panel.component.html',
+    styleUrl: 'expansion-panel.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }],
     imports: []
 })
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts
@@ -854,33 +854,33 @@ describe('igxExpansionPanel', () => {
 
             expect(header.iconPosition).toEqual('left');
             expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
-            expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
+            expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START);
             expect(headerButton.children[1].getBoundingClientRect().left).
                 toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
 
             header.iconPosition = ExpansionPanelHeaderIconPosition.NONE;
             fixture.detectChanges();
             expect(header.iconPosition).toEqual('none');
-            expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
+            expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE);
 
             header.iconPosition = ExpansionPanelHeaderIconPosition.RIGHT;
             fixture.detectChanges();
             expect(header.iconPosition).toEqual('right');
             expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
-            expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_END);
+            expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_END);
             expect(headerButton.children[0].getBoundingClientRect().left).
                 toBeLessThan(headerButton.children[1].getBoundingClientRect().left);
 
             header.iconPosition = ExpansionPanelHeaderIconPosition.NONE;
             fixture.detectChanges();
             expect(header.iconPosition).toEqual('none');
-            expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
+            expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE);
 
             header.iconPosition = ExpansionPanelHeaderIconPosition.LEFT;
             fixture.detectChanges();
             expect(header.iconPosition).toEqual('left');
             expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
-            expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
+            expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START);
             expect(headerButton.children[1].getBoundingClientRect().left).
                 toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
         });
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/_base.scss
@@ -0,0 +1,137 @@
+@use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$theme: $base;
+
+@include layer(base) {
+    $panel-padding: rem(16px) rem(24px);
+
+    %ellipsis {
+        @include ellipsis();
+    }
+
+    @include b(igx-expansion-panel) {
+        display: flex;
+        flex-direction: column;
+        border-radius: var-get($theme, 'border-radius');
+        overflow: hidden;
+        transition: margin 350ms $ease-out-quad;
+
+        @include e(title-wrapper) {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1 0 0%;
+            overflow: hidden;
+        }
+
+        @include e(header-inner) {
+            display: flex;
+            align-items: center;
+            padding: $panel-padding;
+            cursor: pointer;
+            background: var-get($theme, 'header-background');
+
+            &:focus,
+            &:active {
+                background: var-get($theme, 'header-focus-background');
+                outline: transparent;
+            }
+        }
+
+        @include e(header-title) {
+            @extend %ellipsis;
+
+            color: var-get($theme, 'header-title-color');
+            margin-inline-end: rem(16px, 16px);
+        }
+
+        @include e(header-description) {
+            @extend %ellipsis;
+
+            color: var-get($theme, 'header-description-color');
+        }
+
+        @include e(header-icon) {
+            display: flex;
+            align-content: center;
+            justify-content: center;
+            user-select: none;
+
+            color: var-get($theme, 'header-icon-color');
+
+            igx-icon {
+                --component-size: 3;
+                color: var-get($theme, 'header-icon-color');
+            }
+        }
+
+        @include e(header-icon, $m: start) {
+            order: -1;
+            margin-inline-end: rem(16px, 16px);
+        }
+
+        @include e(header-icon, $m: end) {
+            order: 1;
+            margin-inline-start: rem(16px, 16px);
+        }
+
+        @include e(header-icon, $m: none) {
+            display: none;
+        }
+
+        @include e(body) {
+            color: var-get($theme, 'body-color');
+            background: var-get($theme, 'body-background');
+            overflow: hidden;
+            padding: $panel-padding;
+        }
+
+        @include m(disabled) {
+            pointer-events: none;
+
+            @include e(header-title) {
+                color: var-get($theme, 'disabled-text-color');
+            }
+
+            @include e(header-description) {
+                color: var-get($theme, 'disabled-description-color');
+            }
+
+            @include e(header-icon) {
+                igx-icon {
+                    color: var-get($theme, 'disabled-text-color');
+                }
+            }
+        }
+
+        @include m(expanded) {
+            margin: var-get($theme, 'expanded-margin') 0;
+
+            &:first-of-type {
+                margin-top: 0;
+            }
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    @include b(igx-accordion) {
+        box-sizing: content-box;
+        overflow-y: auto;
+
+        // WARN: This breaks BEM principles
+        .igx-expansion-panel__header-title {
+            @include line-clamp(4, true, true);
+
+            white-space: initial;
+            word-wrap: break-word;
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-expansion-panel, $tokens, dark);
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/expansion-panel' as *;
+
+$material: digest-schema($dark-material-expansion-panel);
+$bootstrap: digest-schema($dark-bootstrap-expansion-panel);
+$fluent: digest-schema($dark-fluent-expansion-panel);
+$indigo: digest-schema($dark-indigo-expansion-panel);
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-expansion-panel, $tokens, light);
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/expansion-panel' as *;
+
+$base: digest-schema($light-expansion-panel);
+$material: digest-schema($material-expansion-panel);
+$bootstrap: digest-schema($bootstrap-expansion-panel);
+$fluent: digest-schema($fluent-expansion-panel);
+$indigo: digest-schema($indigo-expansion-panel);
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'indigo';
+@forward 'bootstrap';
+@forward 'fluent';
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/bootstrap.scss
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/fluent.scss
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/indigo.scss
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss b/projects/igniteui-angular/src/lib/expansion-panel/themes/shared/material.scss
diff --git a/src/app/accordion/accordion.sample.scss b/src/app/accordion/accordion.sample.scss

Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`
`115`		`- %igx-expansion-panel__body {`
	`115`	`+ .igx-expansion-panel__body {`
`116`	`116`	`position: relative;`
`117`	`117`	`height: rem(128px);`
`118`	`118`	`font-size: rem(14px);`
`@@ -124,11 +124,11 @@`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`
`127`		`- %igx-expansion-panel__header-icon--start {`
	`127`	`+ .igx-expansion-panel__header-icon--start {`
`128`	`128`	`margin-inline-end: rem(8px);`
`129`	`129`	`}`
`130`	`130`
`131`		`- %igx-expansion-panel__header-title {`
	`131`	`+ .igx-expansion-panel__header-title {`
`132`	`132`	`display: flex;`
`133`	`133`
`134`	`134`	`> h6 {`
`@@ -137,7 +137,7 @@`
`137`	`137`	`}`
`138`	`138`	`}`
`139`	`139`
`140`		`- %igx-expansion-panel__header-inner {`
	`140`	`+ .igx-expansion-panel__header-inner {`
`141`	`141`	`background: var-get($theme, 'header-color');`
`142`	`142`	`padding: $panel-padding;`
`143`	`143`
`@@ -235,9 +235,7 @@`
`235`	`235`	`%selector-base,`
`236`	`236`	`%selector-item-ghost {`
`237`	`237`	`igx-icon {`
`238`		`- width: var(--igx-icon-size, #{rem(18px)});`
`239`		`- height: var(--igx-icon-size, #{rem(18px)});`
`240`		`- font-size: var(--igx-icon-size, #{rem(18px)});`
	`238`	`+ --size: var(--igx-icon-size, #{rem(18px)});`
`241`	`239`	`}`
`242`	`240`	`}`
`243`	`241`