fix(core): panel horizon updates (#8117)

* fix(core): additional updates for the panel * fix(core): force build against correct base branch
SAP · May 20, 2022 · 280de1d · 280de1d
1 parent 6868f4b
commit 280de1d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 49 deletions.
diff --git a/libs/core/src/lib/panel/panel.component.html b/libs/core/src/lib/panel/panel.component.html
@@ -1,25 +1,27 @@
-<div class="fd-panel__header">
-    <div *ngIf="!fixed" class="fd-panel__expand">
-        <button
-            fd-button
-            fdType="transparent"
-            class="fd-panel__button"
-            [glyph]="_getButtonIcon()"
-            [id]="expandId"
-            [compact]="compact"
-            [class.is-expanded]="expanded"
-            [attr.aria-expanded]="expanded"
-            [attr.aria-controls]="panelContent?.id"
-            [ariaLabel]="expandAriaLabel"
-            [attr.aria-labelledby]="expandAriaLabelledBy + ' ' + expandId"
-            [title]="expandAriaLabel"
-            (click)="toggleExpand()"
-        ></button>
+<div class="fd-panel" [class.fd-panel--fixed]="fixed" [class.fd-panel--compact]="compact" [class]="class">
+    <div class="fd-panel__header">
+        <div *ngIf="!fixed" class="fd-panel__expand">
+            <button
+                fd-button
+                fdType="transparent"
+                class="fd-panel__button"
+                [glyph]="_getButtonIcon()"
+                [id]="expandId"
+                [compact]="compact"
+                [class.is-expanded]="expanded"
+                [attr.aria-expanded]="expanded"
+                [attr.aria-controls]="panelContent?.id"
+                [ariaLabel]="expandAriaLabel"
+                [attr.aria-labelledby]="expandAriaLabelledBy + ' ' + expandId"
+                [title]="expandAriaLabel"
+                (click)="toggleExpand()"
+            ></button>
+        </div>
+        <ng-content select="[fd-panel-title]"></ng-content>
+        <ng-content></ng-content>
     </div>
-    <ng-content select="[fd-panel-title]"></ng-content>
-    <ng-content></ng-content>
-</div>
 
-<ng-container *ngIf="expanded || fixed">
-    <ng-content select="[fd-panel-content]"></ng-content>
-</ng-container>
+    <ng-container *ngIf="expanded || fixed">
+        <ng-content select="[fd-panel-content]"></ng-content>
+    </ng-container>
+</div>
diff --git a/libs/core/src/lib/panel/panel.component.spec.ts b/libs/core/src/lib/panel/panel.component.spec.ts
@@ -49,15 +49,15 @@ describe('PanelComponent', () => {
     });
 
     it('should assign class', () => {
-        expect(component.panelRef.nativeElement.className).toContain('fd-panel');
+        expect(component.panelRef.nativeElement.children[0].className).toContain('fd-panel');
     });
 
     it('should assign additional classes', () => {
         component.isCompact = true;
         component.isFixed = true;
         fixture.detectChanges();
-        expect(component.panelRef.nativeElement.classList).toContain('fd-panel--compact');
-        expect(component.panelRef.nativeElement.classList).toContain('fd-panel--fixed');
+        expect(component.panelRef.nativeElement.children[0].classList).toContain('fd-panel--compact');
+        expect(component.panelRef.nativeElement.children[0].classList).toContain('fd-panel--fixed');
     });
 
     it('should not display the panel content', () => {

diff --git a/libs/core/src/lib/panel/panel.component.ts b/libs/core/src/lib/panel/panel.component.ts
@@ -6,7 +6,6 @@ import {
     EventEmitter,
     HostBinding,
     Input,
-    OnChanges,
     OnInit,
     ViewEncapsulation,
     Output,
@@ -17,7 +16,7 @@ import {
 import { Subscription } from 'rxjs';
 
 import { PanelContentDirective } from './panel-content/panel-content.directive';
-import { CssClassBuilder, RtlService, applyCssClass, ContentDensityService } from '@fundamental-ngx/core/utils';
+import { RtlService, ContentDensityService } from '@fundamental-ngx/core/utils';
 import { Nullable } from '@fundamental-ngx/core/shared';
 
 let panelUniqueId = 0;
@@ -36,7 +35,7 @@ let panelExpandUniqueId = 0;
     styleUrls: ['./panel.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class PanelComponent implements CssClassBuilder, OnChanges, OnInit, OnDestroy {
+export class PanelComponent implements OnInit, OnDestroy {
     /** User's custom classes */
     @Input()
     class: string;
@@ -98,32 +97,16 @@ export class PanelComponent implements CssClassBuilder, OnChanges, OnInit, OnDes
             this._subscription.add(
                 this._contentDensityService._isCompactDensity.subscribe((isCompact) => {
                     this.compact = isCompact;
-                    this.buildComponentCssClass();
                 })
             );
         }
         this._listenRtl();
-        this.buildComponentCssClass();
-    }
-
-    /** @hidden */
-    ngOnChanges(): void {
-        this.buildComponentCssClass();
     }
 
     ngOnDestroy(): void {
         this._subscription.unsubscribe();
     }
 
-    @applyCssClass
-    /** CssClassBuilder interface implementation
-     * function must return single string
-     * function is responsible for order which css classes are applied
-     */
-    buildComponentCssClass(): string[] {
-        return ['fd-panel', this.fixed ? 'fd-panel--fixed' : '', this.compact ? 'fd-panel--compact' : '', this.class];
-    }
-
     /** @hidden */
     elementRef(): ElementRef<any> {
         return this._elementRef;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,7 +128,7 @@
         "fast-deep-equal": "3.1.3",
         "focus-trap": "6.7.3",
         "focus-visible": "5.2.0",
-        "fundamental-styles": "v0.24.0-rc.92",
+        "fundamental-styles": "0.24.0-rc.99",
         "highlight.js": "10.7.2",
         "intl": "1.2.5",
         "jasminewd2": "2.2.0",