feat(banner): Expose layout method.

PiperOrigin-RevId: 339502866
material-components · Oct 28, 2020 · 4794b25 · 4794b25
1 parent dbc449b
commit 4794b25
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 0 deletions.
diff --git a/packages/mdc-banner/README.md b/packages/mdc-banner/README.md
@@ -213,6 +213,7 @@ Method Signature | Description
 `setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.
 `getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.
 `setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.
+`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.
 
 ### Usage Within Frameworks
 

diff --git a/packages/mdc-banner/component.ts b/packages/mdc-banner/component.ts
@@ -70,6 +70,10 @@ export class MDCBanner extends MDCComponent<MDCBannerFoundation> {
     this.deregisterContentClickHandler(this.handleContentClick);
   }
 
+  layout() {
+    this.foundation.layout();
+  }
+
   /**
    * Opens the banner and fires events.OPENING to indicate the beginning of its
    * opening animation and then events.OPENED once the animation finishes.

diff --git a/packages/mdc-banner/foundation.ts b/packages/mdc-banner/foundation.ts
@@ -126,6 +126,11 @@ export class MDCBannerFoundation extends MDCFoundation<MDCBannerAdapter> {
     this.close(CloseReason.SECONDARY);
   }
 
+  layout() {
+    const contentHeight = this.adapter.getContentHeight();
+    this.adapter.setStyleProperty('height', `${contentHeight}px`);
+  }
+
   private handleAnimationTimerEnd() {
     this.animationTimer = 0;
     this.adapter.removeClass(OPENING);

diff --git a/packages/mdc-banner/test/component.test.ts b/packages/mdc-banner/test/component.test.ts
@@ -199,6 +199,17 @@ describe('MDCBanner', () => {
     expect(fixture.offsetHeight).toEqual(0);
   });
 
+  it('#layout sets the root element height to the content element height',
+     () => {
+       const {component, contentEl} = setupTest(fixture);
+
+       (contentEl as HTMLElement).style.height = '50px';
+       component.layout();
+       jasmine.clock().tick(1);
+       expect(fixture.offsetHeight)
+           .toEqual((contentEl as HTMLElement).offsetHeight);
+     });
+
   it('get isOpen returns true when open', () => {
     const {component} = setupTest(fixture);
 

diff --git a/packages/mdc-banner/test/foundation.test.ts b/packages/mdc-banner/test/foundation.test.ts
@@ -57,6 +57,15 @@ describe('MDCBannerFoundation', () => {
     expect(mockAdapter.addClass).not.toHaveBeenCalledWith(cssClasses.OPEN);
   });
 
+  it('#layout sets the root element height to the content height', () => {
+    const {foundation, mockAdapter} = setupTest();
+
+    foundation.layout();
+    expect(mockAdapter.getContentHeight).toHaveBeenCalled();
+    // 0px since nothing is being generated.
+    expect(mockAdapter.setStyleProperty).toHaveBeenCalledWith('height', '0px');
+  });
+
   it('#open adds CSS classes after rAF', () => {
     const {foundation, mockAdapter} = setupTest();