From 5e088328df6c64b19b582c1d3fc16ec61c2de7f5 Mon Sep 17 00:00:00 2001 From: Michael McShinsky Date: Sun, 16 Jan 2022 00:19:07 -0700 Subject: [PATCH] Add dark logic to table components --- .storybook/public/styles.css | 92 ++++++++++++--------------- package.json | 2 +- src/assets/css/tailwind.output.css | 15 +++-- src/general/table/Table.stories.tsx | 84 ++++++++++++------------ src/general/table/TableCaption.tsx | 2 +- src/general/table/TableCell.tsx | 13 ++-- src/general/table/TableCol.tsx | 21 ++---- src/general/table/TableFooter.tsx | 2 +- src/general/table/TableHead.tsx | 2 +- src/general/table/TableHeader.tsx | 2 +- src/general/table/TableRow.tsx | 18 +++--- src/navigation/navbar/Nav.stories.tsx | 5 +- 12 files changed, 121 insertions(+), 137 deletions(-) diff --git a/.storybook/public/styles.css b/.storybook/public/styles.css index d919752..f2e46b2 100644 --- 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 index 703bd27..cd85560 100644 --- 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 index 909a934..f2e46b2 100644 --- 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 index 607edf4..c0ca1c0 100644 --- 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 = ({ ...args }) => ( - - {/* Caption + +
+
+ {/* Caption */} - - - Header 1 - Header 2 - Header 3 - Header 4 - - - - - Body Cell 1 - Body Cell 2 - Body Cell 3 - Body Cell 4 - - - Body Cell 1 - Body Cell 2 - Body Cell 3 - Body Cell 4 - - - Body Cell 1 - Body Cell 2 - Body Cell 3 - Body Cell 4 - - - - - Footer Cell 1 - Footer Cell 2 - Footer Cell 3 - Footer Cell 4 - - -
+ + + Header 1 + Header 2 + Header 3 + Header 4 + + + + + Body Cell 1 + Body Cell 2 + Body Cell 3 + Body Cell 4 + + + Body Cell 1 + Body Cell 2 + Body Cell 3 + Body Cell 4 + + + Body Cell 1 + Body Cell 2 + Body Cell 3 + Body Cell 4 + + + + + Footer Cell 1 + Footer Cell 2 + Footer Cell 3 + Footer Cell 4 + + + + + ); export const Default = Template.bind({}); diff --git a/src/general/table/TableCaption.tsx b/src/general/table/TableCaption.tsx index 16e43b5..b2ae96b 100644 --- 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 index 207c532..1886450 100644 --- a/src/general/table/TableCell.tsx +++ b/src/general/table/TableCell.tsx @@ -25,22 +25,23 @@ export const TableCell = forwardRef( 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 ( @@ -48,7 +49,7 @@ export const TableCell = forwardRef( {children} ); - }, + } ); TableCell.displayName = 'TableCell'; diff --git a/src/general/table/TableCol.tsx b/src/general/table/TableCol.tsx index 4a3aee3..359ecad 100644 --- a/src/general/table/TableCol.tsx +++ b/src/general/table/TableCol.tsx @@ -9,24 +9,11 @@ export interface TableColProps { } export const TableCol = forwardRef( - ( - { - className, - children, - custom, - ...props - }, - ref, - ) => { - const classes = classNames( - 'sui--table-colgroup_col', - className, - ); + ({ className, children, custom, ...props }, ref) => { + const classes = classNames('sui--table-colgroup_col', className); - return ( - - ); - }, + return ; + } ); TableCol.displayName = 'TableCol'; diff --git a/src/general/table/TableFooter.tsx b/src/general/table/TableFooter.tsx index 4cafbee..cb45a24 100644 --- a/src/general/table/TableFooter.tsx +++ b/src/general/table/TableFooter.tsx @@ -51,7 +51,7 @@ export const TableFooter = forwardRef( const classes = classNames( 'sui--table-tfoot', - !custom && 'table-row-group', + !custom && 'table-row-group dark:text-gray-300', className, ); diff --git a/src/general/table/TableHead.tsx b/src/general/table/TableHead.tsx index 855115d..6fdfcbf 100644 --- a/src/general/table/TableHead.tsx +++ b/src/general/table/TableHead.tsx @@ -30,7 +30,7 @@ export const TableHead = forwardRef( const classes = classNames( 'sui--table-thead', - !custom && 'table-head-group', + !custom && 'table-head-group dark:text-gray-300', className, ); diff --git a/src/general/table/TableHeader.tsx b/src/general/table/TableHeader.tsx index af8801c..f78d51b 100644 --- a/src/general/table/TableHeader.tsx +++ b/src/general/table/TableHeader.tsx @@ -18,7 +18,7 @@ export const TableHeader = forwardRef( const classes = classNames( 'sui--table-th', !custom && [ - 'table-cell text-left', + 'table-cell text-left dark:text-gray-300', !borderless && 'border-b border-gray-500', size === 'sm' && 'p-2 text-xs', (size === 'md' || !size) && 'p-3 text-sm', diff --git a/src/general/table/TableRow.tsx b/src/general/table/TableRow.tsx index 60c1f2d..4e32a8f 100644 --- a/src/general/table/TableRow.tsx +++ b/src/general/table/TableRow.tsx @@ -27,24 +27,25 @@ export const TableRow = forwardRef( custom, ...props }, - ref, + ref ) => { const renderedChildren = React.Children.toArray(children) .filter(Boolean) .map((child: any) => { if (child?.type?.displayName?.includes?.('TableCell')) { return React.cloneElement(child, { - size, - hover, + active, borderless, custom, + hover, + size, }); } if (child?.type?.displayName?.includes?.('Table')) { return React.cloneElement(child, { - size, borderless, custom, + size, }); } return child; @@ -56,12 +57,13 @@ export const TableRow = forwardRef( 'table-row', striped && striped !== 'odd' && 'even:bg-gray-100', striped && striped === 'odd' && 'odd:bg-gray-100', - active && 'active bg-gray-200', + active ? 'active bg-gray-200 dark:text-gray-700' : 'dark:text-gray-300', + hover && 'dark:hover:text-gray-700', hover && hover !== 'cell' && - '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 ( @@ -69,7 +71,7 @@ export const TableRow = forwardRef( {renderedChildren} ); - }, + } ); TableRow.displayName = 'TableRow'; diff --git a/src/navigation/navbar/Nav.stories.tsx b/src/navigation/navbar/Nav.stories.tsx index 08df18e..bcec319 100644 --- a/src/navigation/navbar/Nav.stories.tsx +++ b/src/navigation/navbar/Nav.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; -import { Nav as NavComponent, NavProps, Text, SlipstreamProvider } from '../../'; +import { Nav as NavComponent, NavProps, SlipstreamProvider } from '../../'; export default { title: 'Components/Navigation/Nav', @@ -12,7 +12,7 @@ export default { } as Meta; const Template: Story = ({ ...args }) => ( - +
@@ -68,7 +68,6 @@ const Template: Story = ({ ...args }) => (

Menu

*/} - Text under the navigation
);