feat(infiniteHits): add showmoreButton to cssClasses (#3026)

* feat(infiniteHits): add showmoreButton to cssClasses * feat(infiniteHits): fix snapshot to make tests pass * feat(infiniteHits): prettify file
algolia · Jul 9, 2018 · 8287de0 · 8287de0
1 parent e620bf3
commit 8287de0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/components/InfiniteHits.js b/src/components/InfiniteHits.js
@@ -13,9 +13,13 @@ class InfiniteHits extends Component {
       templateProps,
     } = this.props;
     const btn = this.props.isLastPage ? (
-      <button disabled>{showMoreLabel}</button>
+      <button disabled className={cssClasses.showmoreButton}>
+        {showMoreLabel}
+      </button>
     ) : (
-      <button onClick={showMore}>{showMoreLabel}</button>
+      <button onClick={showMore} className={cssClasses.showmoreButton}>
+        {showMoreLabel}
+      </button>
     );
 
     return (
@@ -39,6 +43,7 @@ InfiniteHits.propTypes = {
     allItems: PropTypes.string,
     empty: PropTypes.string,
     showmore: PropTypes.string,
+    showmoreButton: PropTypes.string,
   }),
   hits: PropTypes.array,
   results: PropTypes.object,

diff --git a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
@@ -8,6 +8,7 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 1
       "item": "ais-infinite-hits--item",
       "root": "ais-infinite-hits root cx",
       "showmore": "ais-infinite-hits--showmore",
+      "showmoreButton": "ais-infinite-hits--showmoreButton",
     }
   }
   hits={
@@ -56,6 +57,7 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 2
       "item": "ais-infinite-hits--item",
       "root": "ais-infinite-hits root cx",
       "showmore": "ais-infinite-hits--showmore",
+      "showmoreButton": "ais-infinite-hits--showmoreButton",
     }
   }
   hits={
@@ -104,6 +106,7 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
       "item": "ais-infinite-hits--item",
       "root": "ais-infinite-hits root cx",
       "showmore": "ais-infinite-hits--showmore",
+      "showmoreButton": "ais-infinite-hits--showmoreButton",
     }
   }
   hits={
@@ -154,6 +157,7 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
       "item": "ais-infinite-hits--item",
       "root": "ais-infinite-hits root cx",
       "showmore": "ais-infinite-hits--showmore",
+      "showmoreButton": "ais-infinite-hits--showmoreButton",
     }
   }
   hits={

diff --git a/src/widgets/infinite-hits/infinite-hits.js b/src/widgets/infinite-hits/infinite-hits.js
@@ -54,7 +54,7 @@ infiniteHits({
   container,
   [ escapeHits = false ],
   [ showMoreLabel ],
-  [ cssClasses.{root,empty,item,showmore}={} ],
+  [ cssClasses.{root,empty,item,showmore,showmoreButton}={} ],
   [ templates.{empty,item} | templates.{empty} ],
   [ transformData.{empty,item} | transformData.{empty} ],
 })`;
@@ -76,7 +76,8 @@ infiniteHits({
  * @property {string|string[]} [root] CSS class to add to the wrapping element.
  * @property {string|string[]} [empty] CSS class to add to the wrapping element when no results.
  * @property {string|string[]} [item] CSS class to add to each result.
- * @property {string|string[]} [showmore] CSS class to add to the show more button.
+ * @property {string|string[]} [showmore] CSS class to add to the show more button container.
+ * @property {string|string[]} [showmoreButton] CSS class to add to the show more button.
  */
 
 /**
@@ -138,6 +139,7 @@ export default function infiniteHits({
     item: cx(bem('item'), userCssClasses.item),
     empty: cx(bem(null, 'empty'), userCssClasses.empty),
     showmore: cx(bem('showmore'), userCssClasses.showmore),
+    showmoreButton: cx(bem('showmoreButton'), userCssClasses.showmoreButton),
   };
 
   const specializedRenderer = renderer({