fix(grid-list): Updates the grid-list's foundation to NOT center tile… (

#467) Resolves #454, Updates the grid-list's foundation to NOT center tiles when there are no tiles. BREAKING CHANGE: Adds getNumberOfTiles to grid-list's adapter API. Please update adapters to implement getNumberOfTiles.
material-components · Apr 4, 2017 · a758519 · a758519
1 parent c062319
commit a758519
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 1 deletion.
diff --git a/demos/grid-list.html b/demos/grid-list.html
@@ -33,6 +33,11 @@
     <h1>MDC Grid List</h1>
     <button type="button" onclick="toggleRTL(this)">Toggle RTL</button>
     <div id="example">
+      <h2>Grid List (Default): empty grid</h2>
+      <div class="mdc-grid-list">
+        <ul class="mdc-grid-list__tiles">
+        </ul>
+      </div>
       <h2>Grid List (Default): tile aspect ratio 1x1 with oneline footer caption</h2>
       <div class="mdc-grid-list">
         <ul class="mdc-grid-list__tiles">

diff --git a/packages/mdc-grid-list/README.md b/packages/mdc-grid-list/README.md
@@ -258,6 +258,7 @@ functions, with correct signatures:
 | Method Signature | Description |
 | --- | --- |
 | `getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. |
+| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |
 | `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |
 | `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |
 | `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |

diff --git a/packages/mdc-grid-list/foundation.js b/packages/mdc-grid-list/foundation.js
@@ -25,6 +25,7 @@ export default class MDCGridListFoundation extends MDCFoundation {
   static get defaultAdapter() {
     return {
       getOffsetWidth: () => /* number */ 0,
+      getNumberOfTiles: () => /* number */ 0,
       getOffsetWidthForTileAtIndex: (/* index: number */) => /* number */ 0,
       setStyleForTilesElement: (/* property: string, value: string */) => {},
       registerResizeHandler: (/* handler: EventListener */) => {},
@@ -53,6 +54,9 @@ export default class MDCGridListFoundation extends MDCFoundation {
     });
   }
   alignCenter_() {
+    if (this.adapter_.getNumberOfTiles() == 0) {
+      return;
+    }
     const gridWidth = this.adapter_.getOffsetWidth();
     const itemWidth = this.adapter_.getOffsetWidthForTileAtIndex(0);
     const tilesWidth = itemWidth * Math.floor(gridWidth / itemWidth);

diff --git a/packages/mdc-grid-list/index.js b/packages/mdc-grid-list/index.js
@@ -28,6 +28,9 @@ export class MDCGridList extends MDCComponent {
   getDefaultFoundation() {
     return new MDCGridListFoundation({
       getOffsetWidth: () => this.root_.offsetWidth,
+      getNumberOfTiles: () => {
+        return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR).length;
+      },
       getOffsetWidthForTileAtIndex: (index) => {
         return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index].offsetWidth;
       },

diff --git a/test/unit/mdc-grid-list/foundation.test.js b/test/unit/mdc-grid-list/foundation.test.js
@@ -30,7 +30,7 @@ test('exports strings', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCGridListFoundation, [
-    'getOffsetWidth', 'getOffsetWidthForTileAtIndex', 'setStyleForTilesElement',
+    'getOffsetWidth', 'getNumberOfTiles', 'getOffsetWidthForTileAtIndex', 'setStyleForTilesElement',
     'registerResizeHandler', 'deregisterResizeHandler',
   ]);
 });
@@ -57,6 +57,19 @@ test('#destroy calls component event deregistrations', () => {
   td.verify(mockAdapter.deregisterResizeHandler(resizeHandler));
 });
 
+test('#align center does not set the container width if there are no tiles', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const mockRaf = createMockRaf();
+  td.when(mockAdapter.getNumberOfTiles()).thenReturn(0);
+  foundation.init();
+
+  foundation.alignCenter();
+  mockRaf.flush();
+
+  td.verify(mockAdapter.setStyleForTilesElement(), {times: 0, ignoreExtraArgs: true});
+  mockRaf.restore();
+});
+
 test('#align center sets the container width to fit tiles inside', () => {
   const {foundation, mockAdapter} = setupTest();
   const mockRaf = createMockRaf();