fix: the Badge component should be default act like an “inline” compo…

…nent Fixing some typescript misses and adding utility table components to make it easier to remember how to correctly style around badge/button components in a table
tablecheck · Jul 3, 2024 · c8ce3a2 · c8ce3a2
1 parent 9dc9431
commit c8ce3a2
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 27 deletions.
diff --git a/system/core/src/components/Badge.ts b/system/core/src/components/Badge.ts
@@ -6,7 +6,7 @@ export const className = 'badge';
 export const fullStyles = css`
   width: max-content;
   font: var(--label);
-  display: grid;
+  display: inline-grid;
   grid-auto-flow: column;
   gap: var(--spacing-l1);
   align-items: center;

diff --git a/system/core/src/components/Table.ts b/system/core/src/components/Table.ts
@@ -8,6 +8,10 @@ export interface Props {
   'data-variant'?: 'default' | 'striped';
 }
 
+export interface TableTdProps {
+  'data-cell-type'?: 'button' | 'badge';
+}
+
 export const fullStyles = css`
   text-align: start;
   border-spacing: 0;
@@ -81,6 +85,10 @@ export const fullStyles = css`
     text-align: center;
   }
 
+  & td[data-cell-type='badge'] {
+    padding: calc(var(--spacing-l3) - 1px) var(--spacing-l4);
+  }
+
   /* For reference: https://unused-css.com/blog/css-rounded-table-corners/ */
   & thead > tr:not(:last-child) > th,
   & thead > tr:not(:last-child) > td,

diff --git a/system/core/src/components/Toggle.ts b/system/core/src/components/Toggle.ts
@@ -2,6 +2,8 @@ import { OptionalKeys, css } from '../utils';
 
 export const element = 'input';
 export const selectors = ['input[type="checkbox"].toggle'];
+export const className = 'toggle';
+
 export interface Props {
   type: 'checkbox';
   'data-size'?: 'small' | 'medium' | 'large';

diff --git a/system/react-css/src/components/Toggle.tsx b/system/react-css/src/components/Toggle.tsx
@@ -0,0 +1,25 @@
+/**
+ * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core
+ * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder
+ */
+import { toggle } from '@tablecheck/tablekit-core';
+import * as React from 'react';
+
+import { getConfigDefault } from '../config';
+
+export type Props = toggle.DefaultedProps &
+  React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Toggle = React.forwardRef<
+  HTMLInputElement,
+  Props & React.InputHTMLAttributes<HTMLInputElement>
+>((props, ref) => (
+  <input
+    {...props}
+    className={`${props.className ?? ''} toggle`}
+    type={props.type ?? (toggle.defaultProps.type as never)}
+    data-size={props['data-size'] ?? getConfigDefault('controlSize')}
+    ref={ref}
+  />
+));
+Toggle.displayName = `Toggle`;
diff --git a/system/react-css/src/index.ts b/system/react-css/src/index.ts
@@ -59,6 +59,8 @@ export { TextAreaWithPrefix } from './components/TextAreaWithPrefix';
 export type { Props as TextAreaWithPrefixProps } from './components/TextAreaWithPrefix';
 export { TextAreaWithSuffix } from './components/TextAreaWithSuffix';
 export type { Props as TextAreaWithSuffixProps } from './components/TextAreaWithSuffix';
+export { Toggle } from './components/Toggle';
+export type { Props as ToggleProps } from './components/Toggle';
 export {
   AlertCore,
   AlertTitle,
@@ -84,13 +86,15 @@ export { Skeleton } from './structuredComponents/Skeleton';
 export type { Props as SkeletonProps } from './structuredComponents/Skeleton';
 export { Spinner } from './structuredComponents/Spinner';
 export type { Props as SpinnerProps } from './structuredComponents/Spinner';
+export { TableBadgeCell } from './structuredComponents/TableBadgeCell';
+export type { Props as TableBadgeCellProps } from './structuredComponents/TableBadgeCell';
+export { TableButtonCell } from './structuredComponents/TableButtonCell';
+export type { Props as TableButtonCellProps } from './structuredComponents/TableButtonCell';
 export { TextArea } from './structuredComponents/TextArea';
 export type { Props as TextAreaProps } from './structuredComponents/TextArea';
 export {
   useTablekitTheme,
   ThemeProvider
 } from './structuredComponents/ThemeProvider';
-export { Toggle } from './structuredComponents/Toggle';
-export type { Props as ToggleProps } from './structuredComponents/Toggle';
 export { Tooltip } from './structuredComponents/Tooltip';
 export type { Props as TooltipProps } from './structuredComponents/Tooltip';
diff --git a/system/react-css/src/structuredComponents/TableBadgeCell.tsx b/system/react-css/src/structuredComponents/TableBadgeCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="badge"` attribute to a `td` element.
+ */
+export const TableBadgeCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="badge" ref={ref} />);
+TableBadgeCell.displayName = 'TableBadgeCell';
diff --git a/system/react-css/src/structuredComponents/TableButtonCell.tsx b/system/react-css/src/structuredComponents/TableButtonCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="button"` attribute to a `td` element.
+ */
+export const TableButtonCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="button" ref={ref} />);
+TableButtonCell.displayName = 'TableButtonCell';
diff --git a/system/react-css/src/structuredComponents/Toggle.tsx b/system/react-css/src/structuredComponents/Toggle.tsx
diff --git a/system/react/src/index.ts b/system/react/src/index.ts
@@ -148,6 +148,10 @@ export { InputStructure } from './structuredComponents/InputStructure';
 export type { Props as InputStructureProps } from './structuredComponents/InputStructure';
 export { Skeleton } from './structuredComponents/Skeleton';
 export type { Props as SkeletonProps } from './structuredComponents/Skeleton';
+export { TableBadgeCell } from './structuredComponents/TableBadgeCell';
+export type { Props as TableBadgeCellProps } from './structuredComponents/TableBadgeCell';
+export { TableButtonCell } from './structuredComponents/TableButtonCell';
+export type { Props as TableButtonCellProps } from './structuredComponents/TableButtonCell';
 export { TextArea } from './structuredComponents/TextArea';
 export type { Props as TextAreaProps } from './structuredComponents/TextArea';
 export { ThemeProvider } from './structuredComponents/ThemeProvider';
diff --git a/system/react/src/structuredComponents/TableBadgeCell.tsx b/system/react/src/structuredComponents/TableBadgeCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="badge"` attribute to a `td` element.
+ */
+export const TableBadgeCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="badge" ref={ref} />);
+TableBadgeCell.displayName = 'TableBadgeCell';
diff --git a/system/react/src/structuredComponents/TableButtonCell.tsx b/system/react/src/structuredComponents/TableButtonCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="button"` attribute to a `td` element.
+ */
+export const TableButtonCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="button" ref={ref} />);
+TableButtonCell.displayName = 'TableButtonCell';
diff --git a/system/stories/.storybook/preview.tsx b/system/stories/.storybook/preview.tsx
@@ -176,6 +176,7 @@ function handleGridRef(ref: HTMLDivElement) {
 interface StoryParametersOptions {
   variants: (string | { name: string })[];
   variantWidth?: string;
+  element: string;
   selectors: string[];
   auxiliarySelectors: (string | undefined)[];
   className: string;
@@ -317,7 +318,8 @@ class StoryParametersParser {
   }
 
   composeClassNameSelector() {
-    const { className, selectors } = this.parameters;
+    const { className, selectors, element } = this.parameters;
+    if (className && element === 'input') return [`input.${className}`];
     return className ? [`.${className}`] : selectors || [];
   }
 

diff --git a/system/stories/src/Table.stories.tsx b/system/stories/src/Table.stories.tsx
@@ -10,7 +10,8 @@ export default {
   title: 'Components/Table',
   component: emotion.Table,
   parameters: {
-    ...table
+    ...table,
+    auxiliaryComponents: [emotion.TableBadgeCell, emotion.TableButtonCell]
   }
 } as Meta;
 
@@ -106,6 +107,8 @@ interface Options {
   Button: typeof emotion.Button | typeof css.Button;
   Badge: typeof emotion.Badge | typeof css.Badge;
   Checkbox: typeof emotion.Checkbox | typeof css.Checkbox;
+  TableBadgeCell: typeof emotion.TableBadgeCell | typeof css.TableBadgeCell;
+  TableButtonCell: typeof emotion.TableButtonCell | typeof css.TableButtonCell;
   isStriped: boolean;
 }
 
@@ -166,6 +169,8 @@ const WithControlsTemplate: StoryFn<Options> = ({
   Button,
   Badge,
   Checkbox,
+  TableBadgeCell,
+  TableButtonCell,
   isStriped
 }) => (
   <Table data-variant={isStriped ? 'striped' : 'default'}>
@@ -200,16 +205,16 @@ const WithControlsTemplate: StoryFn<Options> = ({
               </ul>
             )}
           </td>
-          <td data-cell-type="badge">
+          <TableBadgeCell>
             <Badge data-variant={user.status} data-size="small">
               {user.status}
             </Badge>
-          </td>
-          <td data-cell-type="button">
+          </TableBadgeCell>
+          <TableButtonCell>
             <Button data-variant="bare" data-size="small">
               <OverflowMenuHorizontal size={getConfigDefault('iconSize')} />
             </Button>
-          </td>
+          </TableButtonCell>
         </tr>
       ))}
     </tbody>
@@ -221,7 +226,9 @@ WithControlsEmotion.args = {
   Table: emotion.Table,
   Button: emotion.Button,
   Badge: emotion.Badge,
-  Checkbox: emotion.Checkbox
+  Checkbox: emotion.Checkbox,
+  TableBadgeCell: emotion.TableBadgeCell,
+  TableButtonCell: emotion.TableButtonCell
 };
 
 WithControlsEmotion.parameters = { useEmotion: true };
@@ -232,6 +239,8 @@ StripedControlsEmotion.args = {
   Button: emotion.Button,
   Badge: emotion.Badge,
   Checkbox: emotion.Checkbox,
+  TableBadgeCell: emotion.TableBadgeCell,
+  TableButtonCell: emotion.TableButtonCell,
   isStriped: true
 };
 StripedControlsEmotion.parameters = { useEmotion: true };
@@ -241,7 +250,9 @@ WithControlsClass.args = {
   Table: css.Table,
   Button: css.Button,
   Badge: css.Badge,
-  Checkbox: css.Checkbox
+  Checkbox: css.Checkbox,
+  TableBadgeCell: css.TableBadgeCell,
+  TableButtonCell: css.TableButtonCell
 };
 WithControlsClass.parameters = { useEmotion: false };
 
@@ -251,6 +262,8 @@ StripedControlsClass.args = {
   Button: css.Button,
   Badge: css.Badge,
   Checkbox: css.Checkbox,
+  TableBadgeCell: css.TableBadgeCell,
+  TableButtonCell: css.TableButtonCell,
   isStriped: true
 };
 StripedControlsClass.parameters = { useEmotion: false };