Add dark logic to table components

michaelmcshinsky · Jan 16, 2022 · 5e08832 · 5e08832
1 parent c70ad09
commit 5e08832
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 137 deletions.
diff --git a/.storybook/public/styles.css b/.storybook/public/styles.css
@@ -1091,10 +1091,6 @@ select {
   margin-bottom: -1px;
 }
 
-.-mr-px {
-  margin-right: -1px;
-}
-
 .block {
   display: block;
 }
@@ -2132,6 +2128,16 @@ select {
   border-radius: 1.5rem;
 }
 
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2197,11 +2203,6 @@ select {
   border-bottom-right-radius: 0.125rem;
 }
 
-.rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-}
-
 .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -2277,11 +2278,6 @@ select {
   border-bottom-left-radius: 0.125rem;
 }
 
-.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
-
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -2530,6 +2526,10 @@ select {
   border-left-width: 0px;
 }
 
+.border-r-0 {
+  border-right-width: 0px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -2538,10 +2538,6 @@ select {
   border-bottom-width: 1px;
 }
 
-.border-r-0 {
-  border-right-width: 0px;
-}
-
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -15154,21 +15150,6 @@ select {
   outline-color: #713f12;
 }
 
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-inset {
-  --tw-ring-inset: inset;
-}
-
-.ring-pink-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity));
-}
-
 .ring-yellow-50 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(254 252 232 / var(--tw-ring-opacity));
@@ -15771,11 +15752,6 @@ ul .numbered:before {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -16551,6 +16527,11 @@ ul .numbered:before {
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
+.group:hover .group-hover\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -16871,11 +16852,6 @@ ul .numbered:before {
   background-color: rgb(136 19 55 / var(--tw-bg-opacity));
 }
 
-.group:focus .group-focus\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:focus .group-focus\:bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -17651,6 +17627,11 @@ ul .numbered:before {
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
+.group:focus .group-focus\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:focus .group-focus\:bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -17971,11 +17952,6 @@ ul .numbered:before {
   background-color: rgb(136 19 55 / var(--tw-bg-opacity));
 }
 
-.group:active .group-active\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:active .group-active\:bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -18751,6 +18727,11 @@ ul .numbered:before {
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
+.group:active .group-active\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:active .group-active\:bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -21477,6 +21458,11 @@ ul .numbered:before {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-slate-50 {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity));
@@ -21552,11 +21538,6 @@ ul .numbered:before {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -22577,6 +22558,11 @@ ul .numbered:before {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "slipstream-ui",
   "author": "Michael McShinsky",
   "description": "Component library combining React and Tailwindcss, built with TypeScript",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/assets/css/tailwind.output.css b/src/assets/css/tailwind.output.css
@@ -21458,6 +21458,11 @@ ul .numbered:before {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-slate-50 {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity));
@@ -21533,11 +21538,6 @@ ul .numbered:before {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -22558,6 +22558,11 @@ ul .numbered:before {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .dark .dark\:focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

diff --git a/src/general/table/Table.stories.tsx b/src/general/table/Table.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Table, TableProps } from './Table';
+import { Table, TableProps, SlipstreamProvider } from '../../';
 
 export default {
   title: 'Components/General/Table',
@@ -12,49 +12,53 @@ export default {
 } as Meta;
 
 const Template: Story<TableProps> = ({ ...args }) => (
-  <Table {...args} hover>
-    {/* <Table.Caption>Caption</Table.Caption>
+  <SlipstreamProvider >
+    <div className="">
+      <Table {...args} hover>
+        {/* <Table.Caption>Caption</Table.Caption>
     <Table.ColGroup>
       <Table.Col className="bg-blue-300" span={2}/>
       <Table.Col className="bg-green-300" span={2}/>
     </Table.ColGroup> */}
-    <Table.Head>      
-      <Table.Row>
-        <Table.Header>Header 1</Table.Header>
-        <Table.Header>Header 2</Table.Header>
-        <Table.Header>Header 3</Table.Header>
-        <Table.Header>Header 4</Table.Header>
-      </Table.Row>
-    </Table.Head>
-    <Table.Body>
-      <Table.Row active>
-        <Table.Cell>Body Cell 1</Table.Cell>
-        <Table.Cell>Body Cell 2</Table.Cell>
-        <Table.Cell>Body Cell 3</Table.Cell>
-        <Table.Cell>Body Cell 4</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Body Cell 1</Table.Cell>
-        <Table.Cell>Body Cell 2</Table.Cell>
-        <Table.Cell>Body Cell 3</Table.Cell>
-        <Table.Cell>Body Cell 4</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>Body Cell 1</Table.Cell>
-        <Table.Cell>Body Cell 2</Table.Cell>
-        <Table.Cell>Body Cell 3</Table.Cell>
-        <Table.Cell>Body Cell 4</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-    <Table.Footer>
-      <Table.Row>
-        <Table.Cell>Footer Cell 1</Table.Cell>
-        <Table.Cell>Footer Cell 2</Table.Cell>
-        <Table.Cell>Footer Cell 3</Table.Cell>
-        <Table.Cell>Footer Cell 4</Table.Cell>
-      </Table.Row>
-    </Table.Footer>
-  </Table>
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>Header 1</Table.Header>
+            <Table.Header>Header 2</Table.Header>
+            <Table.Header>Header 3</Table.Header>
+            <Table.Header>Header 4</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Body Cell 1</Table.Cell>
+            <Table.Cell>Body Cell 2</Table.Cell>
+            <Table.Cell>Body Cell 3</Table.Cell>
+            <Table.Cell>Body Cell 4</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Body Cell 1</Table.Cell>
+            <Table.Cell>Body Cell 2</Table.Cell>
+            <Table.Cell>Body Cell 3</Table.Cell>
+            <Table.Cell>Body Cell 4</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Body Cell 1</Table.Cell>
+            <Table.Cell>Body Cell 2</Table.Cell>
+            <Table.Cell>Body Cell 3</Table.Cell>
+            <Table.Cell>Body Cell 4</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer>
+          <Table.Row>
+            <Table.Cell>Footer Cell 1</Table.Cell>
+            <Table.Cell>Footer Cell 2</Table.Cell>
+            <Table.Cell>Footer Cell 3</Table.Cell>
+            <Table.Cell>Footer Cell 4</Table.Cell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </div>
+  </SlipstreamProvider>
 );
 
 export const Default = Template.bind({});

diff --git a/src/general/table/TableCaption.tsx b/src/general/table/TableCaption.tsx
@@ -13,7 +13,7 @@ export const TableCaption = forwardRef<
 >(({ className, children, custom, ...props }, ref) => {
   const classes = classNames(
     'sui--table-caption',
-    !custom && 'table-caption',
+    !custom && 'table-caption dark:text-gray-300',
     className,
   );
 

diff --git a/src/general/table/TableCell.tsx b/src/general/table/TableCell.tsx
@@ -25,30 +25,31 @@ export const TableCell = forwardRef<HTMLElement, TableCellProps>(
       custom,
       ...props
     },
-    ref,
+    ref
   ) => {
     const classes = classNames(
       'sui--table-td',
       'table-cell',
       !custom && [
-        !borderless && 'border-b border-gray-200',
+        !borderless && 'border-b border-gray-200 dark:border-gray-500',
         size === 'sm' && 'p-2 text-xs',
         (size === 'md' || !size) && 'p-3 text-sm',
         size === 'lg' && 'p-4 text-base',
-        active && 'active bg-gray-200',
+        active && 'active bg-gray-200 dark:text-gray-700',
+        hover && 'dark:hover:text-gray-700',
         hover &&
           hover !== 'row' &&
-          'hover:bg-gray-200 active:bg-gray-200 focus:bg-gray-200',
+          'hover:bg-gray-200 active:bg-gray-200 focus:bg-gray-200 dark:hover:text-gray-700',
       ],
-      className,
+      className
     );
 
     return (
       <Tag ref={ref} className={classes} {...props}>
         {children}
       </Tag>
     );
-  },
+  }
 );
 
 TableCell.displayName = 'TableCell';