fix(table pagination): remove layout styles from table footer that we…

…re interfering with pagination
estevanmaito · Jun 30, 2020 · f9e7b9d · f9e7b9d
1 parent 74b7f72
commit f9e7b9d
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/__tests__/Pagination.test.js b/__tests__/Pagination.test.js
@@ -110,7 +110,7 @@ describe('Pagination', () => {
 
   it('should render with base styles', () => {
     const onChange = () => {}
-    const expected = 'flex flex-col justify-between sm:flex-row'
+    const expected = 'flex flex-col justify-between text-xs sm:flex-row'
     const wrapper = mount(<Pagination totalResults={123} label="Navigation" onChange={onChange} />)
 
     expect(wrapper.find(Pagination).getDOMNode().getAttribute('class')).toContain(expected)

diff --git a/__tests__/TableFooter.test.js b/__tests__/TableFooter.test.js
@@ -9,7 +9,7 @@ describe('TableFooter', () => {
 
   it('should render with base styles', () => {
     const expected =
-      'flex flex-col justify-between px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 sm:flex-row bg-gray-50 dark:text-gray-400 dark:bg-gray-800'
+      'px-4 py-3 border-t dark:border-gray-700 bg-gray-50 text-gray-500 dark:text-gray-400 dark:bg-gray-800'
     const wrapper = mount(<TableFooter />)
 
     expect(wrapper.find('div').getDOMNode().getAttribute('class')).toContain(expected)

diff --git a/src/Pagination.js b/src/Pagination.js
@@ -140,7 +140,7 @@ function Pagination({ totalResults, resultsPerPage, label, onChange }) {
 
   return (
     <div className={baseStyle}>
-      <span className="flex items-center">
+      <span className="flex items-center font-semibold tracking-wide uppercase">
         Showing {activePage * resultsPerPage - resultsPerPage + 1}-
         {Math.min.apply(this, [activePage * resultsPerPage, totalResults])} of {totalResults}
       </span>

diff --git a/src/themes/default.js b/src/themes/default.js
@@ -1,7 +1,7 @@
 export default {
   // Pagination
   pagination: {
-    base: 'flex flex-col justify-between sm:flex-row',
+    base: 'flex flex-col justify-between text-xs sm:flex-row',
     navigationButton: {
       base: 'px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple',
       disabled: 'cursor-not-allowed opacity-50',
@@ -14,7 +14,7 @@ export default {
   // TableFooter
   tableFooter: {
     base:
-      'flex flex-col justify-between px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 sm:flex-row bg-gray-50 dark:text-gray-400 dark:bg-gray-800',
+      'px-4 py-3 border-t dark:border-gray-700 bg-gray-50 text-gray-500 dark:text-gray-400 dark:bg-gray-800',
   },
   // TableRow
   tableRow: {