Tidy ups

seek-oss · Nov 22, 2024 · ba0aa3a · ba0aa3a
1 parent eea2713
commit ba0aa3a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 71 deletions.
diff --git a/packages/braid-design-system/src/lib/components/Table/Table.css.ts b/packages/braid-design-system/src/lib/components/Table/Table.css.ts
@@ -47,7 +47,7 @@ export const table = style([
     borderCollapse: 'separate',
     border: `${borderWidth} solid ${borderColor}`,
     fontVariantNumeric: 'tabular-nums',
-    wordBreak: 'break-word', // MAYBE?.
+    wordBreak: 'break-word',
   },
   colorModeStyle({
     lightMode: {
@@ -106,32 +106,18 @@ export const nowrap = style({
   whiteSpace: 'nowrap',
 });
 
-// export const contentWidth = style({
-//   width: '1%', // is this necessary?
-//   // maxWidth: 'fit-content',
-//   // minWidth: 'fit-content',
-// });
-
-export const minWidthVar = createVar();
-export const maxWidthVar = createVar();
-export const fixedWidthVar = createVar();
-export const fixedWidth = style({
-  // boxSizing: 'content-box', // MAYBE? for exact pixel values.
-  // overflowX: 'hidden', // MAYBE?.
-  width: fixedWidthVar,
-  // maxWidth: fixedWidthVar,
+export const softWidthVar = createVar();
+export const softWidth = style({
+  width: softWidthVar,
 });
 
+export const minWidthVar = createVar();
 export const minWidth = style({
-  // boxSizing: 'content-box', // MAYBE? for exact pixel values.
-  // overflowX: 'hidden', // MAYBE?.
-  // maxWidth: fixedWidthVar,
   minWidth: minWidthVar,
 });
+
+export const maxWidthVar = createVar();
 export const maxWidth = style({
-  // boxSizing: 'content-box', // MAYBE? for exact pixel values.
-  // overflowX: 'hidden', // MAYBE?.
-  // maxWidth: fixedWidthVar,
   maxWidth: maxWidthVar,
 });
 

diff --git a/packages/braid-design-system/src/lib/components/Table/Table.tsx b/packages/braid-design-system/src/lib/components/Table/Table.tsx
@@ -66,7 +66,6 @@ export const Table = ({
     }
   }, []);
 
-  // <Stack space="small">
   const table = (
     <Box
       ref={containerRef}
@@ -91,17 +90,6 @@ export const Table = ({
       </Box>
     </Box>
   );
-  // {/* <Box
-  //   display={{ tablet: 'none' }}
-  //   paddingLeft={fullBleed ? 'gutter' : undefined}
-  // >
-  //   <Notice tone="info">
-  //     <Text size="small">
-  //       Swipe to see more <IconArrow direction="right" />
-  //     </Text>
-  //   </Notice>
-  // </Box> */}
-  // </Stack>
 
   return (
     <TableContext.Provider value={{ fullBleed, alignY, columnWidths }}>

diff --git a/packages/braid-design-system/src/lib/components/Table/TableCell.tsx b/packages/braid-design-system/src/lib/components/Table/TableCell.tsx
@@ -8,7 +8,6 @@ import {
   type ResponsiveRangeProps,
 } from '../../utils/resolveResponsiveRangeProps';
 import {
-  // TableCellIndexContext,
   TableContext,
   TableHeaderContext,
   TableRowContext,
@@ -20,27 +19,26 @@ import buildDataAttributes, {
 
 import * as styles from './Table.css';
 
+type Percentage = `${number}%`;
 interface TableCellProps {
   header?: boolean;
   children: ReactNode;
   hideBelow?: ResponsiveRangeProps['below'];
   hideAbove?: ResponsiveRangeProps['above'];
   align?: 'left' | 'right' | 'center';
   wrap?: boolean;
-  nowrap?: boolean;
-  data?: DataAttributeMap;
-  width?: 'content' | 'auto' | string; // percentage only
+  width?: 'content' | 'auto' | Percentage;
   minWidth?: number;
   maxWidth?: number;
+  data?: DataAttributeMap;
 }
 export const TableCell = ({
   header,
   children,
   hideAbove,
   hideBelow,
   align = 'left',
-  wrap,
-  nowrap = true,
+  wrap = false,
   width = 'auto',
   minWidth,
   maxWidth,
@@ -56,7 +54,6 @@ export const TableCell = ({
   const tableHeaderContext = useContext(TableHeaderContext);
   const tableRowContext = useContext(TableRowContext);
   const tableContext = useContext(TableContext);
-  // const tableCellIndexContext = useContext(TableCellIndexContext);
 
   assert(
     tableRowContext,
@@ -68,11 +65,8 @@ export const TableCell = ({
   const isHeaderCell =
     typeof header !== 'undefined' ? header : tableHeaderContext;
 
-  // const width = tableContext.columnWidths[tableCellIndexContext];
-  // const preventWrapping =
-  //   typeof nowrap !== 'undefined'
-  //     ? nowrap
-  //     : !isHeaderCell && (!width || width === 'auto');
+  const softWidth = width === 'content' ? '1%' : width;
+  const hasMaxWidth = typeof maxWidth !== 'undefined';
 
   return (
     <Box
@@ -97,12 +91,10 @@ export const TableCell = ({
          * columns to be wider than they need to be to display the data.
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces
          */
-        // [styles.nowrap]: preventWrapping,
-        [styles.nowrap]: nowrap, // !wrap,
-        // [styles.contentWidth]: width === 'content',
-        [styles.fixedWidth]: width && width !== 'auto',
+        [styles.nowrap]: !wrap,
+        [styles.softWidth]: width && width !== 'auto',
         [styles.minWidth]: typeof minWidth !== 'undefined',
-        [styles.maxWidth]: typeof maxWidth !== 'undefined',
+        [styles.maxWidth]: hasMaxWidth,
         [styles.alignYCenter]: tableContext.alignY === 'center',
         [styles.borderBottom]: true,
         [styles.showOnTablet]: !hideOnTablet && hideOnMobile,
@@ -111,32 +103,19 @@ export const TableCell = ({
         [styles.showOnWide]:
           !hideOnWide && (hideOnDesktop || hideOnTablet || hideOnMobile),
       }}
-      style={
-        // width ? { width: width === 'content' ? '1%' : width } : undefined
-        {
-          ...(width !== 'auto'
-            ? assignInlineVars({
-                [styles.fixedWidthVar]: width === 'content' ? '1%' : width,
-              })
-            : undefined),
-          ...(typeof minWidth !== 'undefined'
-            ? assignInlineVars({
-                [styles.minWidthVar]: `${minWidth}px`,
-              })
-            : undefined),
-          ...(typeof maxWidth !== 'undefined'
-            ? assignInlineVars({
-                [styles.maxWidthVar]: `${maxWidth}px`,
-              })
-            : undefined),
-        }
-      }
+      style={assignInlineVars({
+        [styles.softWidthVar]: width !== 'auto' ? softWidth : undefined,
+        [styles.minWidthVar]:
+          typeof minWidth !== 'undefined' ? `${minWidth}px` : undefined,
+        [styles.maxWidthVar]:
+          typeof maxWidth !== 'undefined' ? `${maxWidth}px` : undefined,
+      })}
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       <DefaultTextPropsProvider
         size="small"
         weight={isHeaderCell ? 'strong' : undefined}
-        maxLines={width !== 'auto' && nowrap ? 1 : undefined}
+        maxLines={hasMaxWidth && !wrap ? 1 : undefined}
       >
         {align !== 'left' ? (
           <Inline space="none" align={align}>