feat(expansion-panel): introducing expansion-panel-group to only give…

… margin to expansion panels when grouped (#666) * feat(expansion): introducing expansion-panel-group this will give spec marging to grouped expansion panels following the spec * chore(expansion): update DEMO with group example * fix(): only add transition when grouped and change to 120ms
Teradata · Jun 7, 2017 · 9ae0ba5 · 9ae0ba5
1 parent dda5d9c
commit 9ae0ba5
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 64 deletions.
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -71,6 +71,61 @@ <h3 class="md-subhead">md-padding class</h3>
   </md-card-actions>
 </md-card>
 
+<md-card>
+  <md-card-title>Grouped Expansion panels</md-card-title>
+  <md-card-subtitle>Add margin animation between grouped expansion panels</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-tab-group md-stretch-tabs dynamicHeight>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+      <td-expansion-panel-group>
+        <td-expansion-panel label="Label goes here">
+          <div class="md-padding">
+            <h3 class="md-subhead">md-padding class</h3>
+          </div>
+        </td-expansion-panel>
+        <td-expansion-panel label="Another label goes here">
+          <div class="md-padding">
+            <h3 class="md-subhead">md-padding class</h3>
+          </div>
+        </td-expansion-panel>
+        <td-expansion-panel label="Yet another label goes here">
+          <div class="md-padding">
+            <h3 class="md-subhead">md-padding class</h3>
+          </div>
+        </td-expansion-panel>
+      </td-expansion-panel-group>
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-expansion-panel-group>
+              <td-expansion-panel label="Label goes here">
+                <div class="md-padding">
+                  <h3 class="md-subhead">md-padding class</h3>
+                </div>
+              </td-expansion-panel>
+              <td-expansion-panel label="Another label goes here">
+                <div class="md-padding">
+                  <h3 class="md-subhead">md-padding class</h3>
+                </div>
+              </td-expansion-panel>
+              <td-expansion-panel label="Yet another label goes here">
+                <div class="md-padding">
+                  <h3 class="md-subhead">md-padding class</h3>
+                </div>
+              </td-expansion-panel>
+            </td-expansion-panel-group>
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+</md-card>
+
 <md-card>
   <md-card-title>Expansion panel with summary and templates</md-card-title>
   <md-card-subtitle>Expand to view form, collapse to view summary</md-card-subtitle>

diff --git a/src/platform/core/expansion-panel/README.md b/src/platform/core/expansion-panel/README.md
@@ -56,3 +56,24 @@ Example for HTML usage:
   ... add content that
 </td-expansion-panel>
 ```
+
+# td-expansion-panel-group
+
+`td-expansion-panel-group` is used to group expansion panel components.
+
+It adds margin between them when expanded following the material spec.
+
+## Usage
+
+Example for HTML usage:
+
+```html
+<td-expansion-panel-group>
+  <td-expansion-panel>
+    ..content
+  </td-expansion-panel>
+  <td-expansion-panel>
+    ..content
+  </td-expansion-panel>
+</td-expansion-panel-group>
+```
diff --git a/src/platform/core/expansion-panel/_expansion-panel-theme.scss b/src/platform/core/expansion-panel/_expansion-panel-theme.scss
@@ -7,20 +7,26 @@
   $warn: map-get($theme, warn);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
-  // panel
-  td-expansion-panel {
-    @include mat-elevation(1);
-    background-color: mat-color($background, card);
-    &:not(:last-of-type) {
-      & .td-expanded {
-        margin-bottom: $margin;
+
+  .td-expansion-panel-group {
+    .td-expansion-panel {
+      transition: 120ms ease-in;
+      &:not(:last-of-type) {
+        &.td-expanded {
+          margin-bottom: $margin;
+        }
       }
-    }
-    &:not(:first-of-type) {
-      & .td-expanded {
-        margin-top: $margin;
+      &:not(:first-of-type) {
+        &.td-expanded {
+          margin-top: $margin;
+        }
       }
     }
+  }
+
+  .td-expansion-panel {
+    @include mat-elevation(1);
+    background-color: mat-color($background, card);
     .td-expansion-panel-header {
       &:focus,
       &:hover {

diff --git a/src/platform/core/expansion-panel/expansion-panel-group.component.html b/src/platform/core/expansion-panel/expansion-panel-group.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/src/platform/core/expansion-panel/expansion-panel-group.component.scss b/src/platform/core/expansion-panel/expansion-panel-group.component.scss
diff --git a/src/platform/core/expansion-panel/expansion-panel-group.component.ts b/src/platform/core/expansion-panel/expansion-panel-group.component.ts
@@ -0,0 +1,15 @@
+import { Component, Renderer2, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'td-expansion-panel-group',
+  styleUrls: ['./expansion-panel-group.component.scss' ],
+  templateUrl: './expansion-panel-group.component.html',
+})
+export class TdExpansionPanelGroupComponent {
+
+  constructor(private _renderer: Renderer2,
+              private _elementRef: ElementRef) {
+    this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel-group');
+  }
+
+}
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.html b/src/platform/core/expansion-panel/expansion-panel.component.html
@@ -1,38 +1,35 @@
-<div class="td-expansion-panel"
-     [class.td-expanded]="expand">
-  <div class="td-expansion-panel-header"
+<div class="td-expansion-panel-header"
+      [class.mat-disabled]="disabled"
+      md-ripple
+      [mdRippleDisabled]="disabled"
+      [tabIndex]="disabled? -1 : 0"
+      (keydown.enter)="clickEvent()"
+      (click)="clickEvent()">
+  <ng-template [cdkPortalHost]="expansionPanelHeader"></ng-template>
+  <div class="td-expansion-panel-header-content"
         [class.mat-disabled]="disabled"
-        md-ripple
-        [mdRippleDisabled]="disabled"
-        [tabIndex]="disabled? -1 : 0"
-        (keydown.enter)="clickEvent()"
-        (click)="clickEvent()">
-    <ng-template [cdkPortalHost]="expansionPanelHeader"></ng-template>
-    <div class="td-expansion-panel-header-content"
-          [class.mat-disabled]="disabled"
-          *ngIf="!expansionPanelHeader"
-          layout="row" 
-          layout-align="start center" 
-          flex>
-      <div *ngIf="label || expansionPanelLabel" class="md-subhead td-expansion-label" [attr.flex-gt-xs]="(sublabel || expansionPanelSublabel) ? 40 : null">
-        <ng-template [cdkPortalHost]="expansionPanelLabel"></ng-template>
-        <ng-template [ngIf]="!expansionPanelLabel">{{label}}</ng-template>
-      </div>
-      <div *ngIf="sublabel || expansionPanelSublabel" class="md-body-1 td-expansion-sublabel">
-        <ng-template [cdkPortalHost]="expansionPanelSublabel"></ng-template>
-        <ng-template [ngIf]="!expansionPanelSublabel">{{sublabel}}</ng-template>
-      </div>
-      <span flex></span>
-      <md-icon class="td-expand-icon" *ngIf="!expand && !disabled">keyboard_arrow_down</md-icon>
-      <md-icon class="td-expand-icon" *ngIf="expand">keyboard_arrow_up</md-icon>
+        *ngIf="!expansionPanelHeader"
+        layout="row" 
+        layout-align="start center" 
+        flex>
+    <div *ngIf="label || expansionPanelLabel" class="md-subhead td-expansion-label" [attr.flex-gt-xs]="(sublabel || expansionPanelSublabel) ? 40 : null">
+      <ng-template [cdkPortalHost]="expansionPanelLabel"></ng-template>
+      <ng-template [ngIf]="!expansionPanelLabel">{{label}}</ng-template>
     </div>
+    <div *ngIf="sublabel || expansionPanelSublabel" class="md-body-1 td-expansion-sublabel">
+      <ng-template [cdkPortalHost]="expansionPanelSublabel"></ng-template>
+      <ng-template [ngIf]="!expansionPanelSublabel">{{sublabel}}</ng-template>
+    </div>
+    <span flex></span>
+    <md-icon class="td-expand-icon" *ngIf="!expand && !disabled">keyboard_arrow_down</md-icon>
+    <md-icon class="td-expand-icon" *ngIf="expand">keyboard_arrow_up</md-icon>
   </div>
-  <div class="td-expansion-content"
-        [@tdCollapse]="!expand">
-    <ng-content></ng-content>
-  </div>
-  <div class="td-expansion-summary"
-        [@tdCollapse]="expand">
-    <ng-content select="td-expansion-summary"></ng-content>
-  </div>
-</div>
+</div>
+<div class="td-expansion-content"
+      [@tdCollapse]="!expand">
+  <ng-content></ng-content>
+</div>
+<div class="td-expansion-summary"
+      [@tdCollapse]="expand">
+  <ng-content select="td-expansion-summary"></ng-content>
+</div>
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss
@@ -1,22 +1,19 @@
 :host {
   display: block;
-  .td-expansion-panel {
-    transition: 400ms all ease;
-    .td-expansion-panel-header {
-      position: relative;
-      outline: none;
-      &:focus,
-      &:hover {
-        cursor: pointer;
-      }
-      &.mat-disabled {
-        background: none;
-        cursor: auto;
-      }
-      .td-expansion-panel-header-content {
-        height: 48px;
-        padding: 0 16px;
-      }
+  .td-expansion-panel-header {
+    position: relative;
+    outline: none;
+    &:focus,
+    &:hover {
+      cursor: pointer;
+    }
+    &.mat-disabled {
+      background: none;
+      cursor: auto;
+    }
+    .td-expansion-panel-header-content {
+      height: 48px;
+      padding: 0 16px;
     }
   }
 }

diff --git a/src/platform/core/expansion-panel/expansion-panel.component.ts b/src/platform/core/expansion-panel/expansion-panel.component.ts
@@ -1,4 +1,5 @@
-import { Component, Directive, Input, Output, TemplateRef, ViewContainerRef, ContentChild } from '@angular/core';
+import { Component, Directive, Input, Output, TemplateRef, ViewContainerRef, ContentChild,
+         ElementRef, Renderer2 } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { TemplatePortalDirective } from '@angular/material';
 
@@ -107,6 +108,11 @@ export class TdExpansionPanelComponent {
    */
   @Output() collapsed: EventEmitter<void> = new EventEmitter<void>();
 
+  constructor(private _renderer: Renderer2,
+              private _elementRef: ElementRef) {
+    this._renderer.addClass(this._elementRef.nativeElement, 'td-expansion-panel');
+  }
+
   /**
    * Method executed when [TdExpansionPanelComponent] is clicked.
    */
@@ -149,8 +155,10 @@ export class TdExpansionPanelComponent {
     if (this._expand !== newExpand) {
       this._expand = newExpand;
       if (newExpand) {
+        this._renderer.addClass(this._elementRef.nativeElement, 'td-expanded');
         this._onExpanded();
       } else {
+        this._renderer.removeClass(this._elementRef.nativeElement, 'td-expanded');
         this._onCollapsed();
       }
       return true;

diff --git a/src/platform/core/expansion-panel/expansion-panel.module.ts b/src/platform/core/expansion-panel/expansion-panel.module.ts
@@ -6,8 +6,10 @@ import { MdRippleModule, MdIconModule, PortalModule } from '@angular/material';
 
 import { TdExpansionPanelComponent, TdExpansionPanelHeaderDirective, TdExpansionPanelLabelDirective,
          TdExpansionPanelSublabelDirective, TdExpansionPanelSummaryComponent } from './expansion-panel.component';
+import { TdExpansionPanelGroupComponent } from './expansion-panel-group.component';
 
 const TD_EXPANSION_PANEL: Type<any>[] = [
+  TdExpansionPanelGroupComponent,
   TdExpansionPanelComponent,
   TdExpansionPanelHeaderDirective,
   TdExpansionPanelLabelDirective,
@@ -16,6 +18,7 @@ const TD_EXPANSION_PANEL: Type<any>[] = [
 ];
 
 export { TdExpansionPanelComponent } from './expansion-panel.component';
+export { TdExpansionPanelGroupComponent } from './expansion-panel-group.component';
 
 @NgModule({
   imports: [