@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Table/Table.story.mdx

@@ -6,6 +6,8 @@ import { SORT_DIRECTION } from "./TableContext";
 import { Box } from "../Box";
 import { Checkbox } from "../Checkbox";
 import { ScrollPane } from "../ScrollPane";
+import { STATUS_VARIANT } from "../../types";
+import { Banner } from "../Banner";
 import { Button, BUTTON_VARIANT } from "../Button";
 import { ICON_TYPE } from "../Icon";
 
@@ -545,6 +547,123 @@ This example shows how to include a sticky checkbox column to use when batch act
   </Story>
 </Preview>
 
+### Space Rows
+
+<Preview>
+  <Story name="Space Rows">
+    {() => {
+      const useBatchSelect = (data) => {
+        const [selectedItems, setSelectedItems] = React.useState(new Set());
+        const clearAll = () => {
+          setSelectedItems(new Set());
+        };
+        const selectAll = () => {
+          if (data.length === selectedItems.size) {
+            setSelectedItems(new Set());
+          } else {
+            setSelectedItems(new Set(data.map((d) => d.id)));
+          }
+        };
+        const onSelect = (...args) => {
+          const newSet = new Set(selectedItems);
+          args.forEach((id) => {
+            if (selectedItems.has(id)) {
+              newSet.delete(id);
+            } else {
+              newSet.add(id);
+            }
+          });
+          setSelectedItems(newSet);
+        };
+        return {
+          selectedItems,
+          clearAll,
+          selectAll,
+          onSelect,
+        };
+      };
+      const data = "abcdefgh".split("").map((id) => ({ id }));
+      const { selectedItems, onSelect, clearAll, selectAll } = useBatchSelect(
+        data,
+      );
+      const totalItems = data.length;
+      const Row = ({ id, selected }) => {
+        return (
+          <Table.Row selected={selected}>
+            <Table.Cell>
+              <Checkbox onClick={() => onSelect(id)} checked={selected} />
+            </Table.Cell>
+            <Table.Cell>I am Fixed!</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+            <Table.Cell>unfixed data</Table.Cell>
+          </Table.Row>
+        );
+      };
+      return (
+        <Box className="h-64 bg-gray-100 p-5">
+          <ScrollPane>
+            <Table hasBatchActions spaceRows affixHeader>
+              <Table.Head>
+                <Table.Row>
+                  <Table.HeaderCell
+                    sortable={false}
+                    shrinkToContent
+                    removeVerticalPadding
+                  >
+                    <Checkbox
+                      onClick={() => {
+                        if (selectedItems === totalItems) {
+                          clearAll();
+                        } else {
+                          selectAll();
+                        }
+                      }}
+                      checked={selectedItems.size === totalItems}
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #1 Fixed 125px
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #2
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #3
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #4
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #5
+                  </Table.HeaderCell>
+                  <Table.HeaderCell sortable={false} minColumnWidth="125px">
+                    #6
+                  </Table.HeaderCell>
+                </Table.Row>
+              </Table.Head>
+              <Table.Body>
+                {data.map((item) => {
+                  return (
+                    <Row
+                      id={item.id}
+                      key={item.id}
+                      selected={selectedItems.has(item.id)}
+                      onSelect={onSelect}
+                    />
+                  );
+                })}
+              </Table.Body>
+            </Table>
+          </ScrollPane>
+        </Box>
+      );
+    }}
+  </Story>
+</Preview>
+
 ### With column widths
 
 <Preview>
@@ -818,3 +937,127 @@ For the table to scroll, it must be wrapped with a ScrollPane.
     </Table>
   </Story>
 </Preview>
+
+### With aligned headers
+
+The header cells can be aligned left, center or right.
+
+<Preview>
+  <Story name="Table with aligned headers">
+    <Table outerBorder>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell align="left" sortable={false}>
+            ID
+          </Table.HeaderCell>
+          <Table.HeaderCell align="center" sortable={false}>
+            Name
+          </Table.HeaderCell>
+          <Table.HeaderCell align="right" sortable={false}>
+            Email
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell align="left">1</Table.Cell>
+          <Table.Cell align="center">Wendy George</Table.Cell>
+          <Table.Cell align="right">wendy.george@healthco.com</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell align="left">2</Table.Cell>
+          <Table.Cell align="center">Joe Smith</Table.Cell>
+          <Table.Cell align="right">joe.smith@healthco.com</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  </Story>
+</Preview>
+
+### Using grid column sizing
+
+<Banner title="Experimental Feature" variant={STATUS_VARIANT.WARNING}>
+  This feature is experimental and may cause layout issues when used in
+  production.
+</Banner>
+
+This feature uses
+[CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
+to create a consistent column layout. It’s completely opt-in and the current
+HTML table layout is still the default.
+
+To use grid sizing, set `enableGridSizing` to true and pass an array or string
+of grid columns to `gridSizing`. The value of `gridSizing` can be any valid
+value for the CSS `grid-template-columns`
+[property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
+
+The benefit is that when the table is sorted or filtered, the column widths will
+not shift around like they currently do with the default HTML table layout.
+
+<Preview>
+  <Story name="Table grid sizing">
+    {() => {
+      const rowData = [
+        {
+          id: "1",
+          name: "Wendy George",
+          email: "wendy.george@healthco.com",
+        },
+        {
+          id: "2",
+          name: "Joe Smith",
+          email: "joe.smith@healthco.com",
+        },
+        {
+          id: "3",
+          name: "Hannah Williams",
+          email: "hannah.williams@healthco.com",
+        },
+      ];
+      return (
+        <Table
+          enableGridSizing
+          gridSizing={[
+            "1fr",
+            "1.25fr",
+            "2fr",
+            "1fr",
+            ".75fr",
+            "1fr",
+            "1fr",
+            "1fr",
+          ]}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Email</Table.HeaderCell>
+              <Table.HeaderCell>Extra 1</Table.HeaderCell>
+              <Table.HeaderCell>Extra 2</Table.HeaderCell>
+              <Table.HeaderCell>Extra 3</Table.HeaderCell>
+              <Table.HeaderCell>Extra 4</Table.HeaderCell>
+              <Table.HeaderCell>Extra 5</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {rowData.map((row) => {
+              return (
+                <Table.Row key={row.id}>
+                  <Table.Cell>{row.id}</Table.Cell>
+                  <Table.Cell>{row.name}</Table.Cell>
+                  <Table.Cell>{row.email}</Table.Cell>
+                  <Table.Cell>#1</Table.Cell>
+                  <Table.Cell>#2</Table.Cell>
+                  <Table.Cell>#3</Table.Cell>
+                  <Table.Cell>#4</Table.Cell>
+                  <Table.Cell>#5</Table.Cell>
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/Table/Table.tsx

@@ -61,6 +61,21 @@ interface TableProps extends React.HTMLProps<HTMLTableElement> {
    * Does the table have batch / bulk actions?
    */
   hasBatchActions?: boolean;
+  /**
+   * Add more space (margin) between each row
+   */
+  spaceRows?: boolean;
+  /**
+   * Experimental; enable grid layout for the table and utilize grid column
+   * sizing
+   */
+  enableGridSizing?: boolean;
+  /**
+   * Experimental; set the grid columns when `enableGridSizing` is true. The
+   * values here should ahere to the CSS `grid-template-columns`
+   * [property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+   */
+  gridSizing?: string | string[];
 }
 
 const Table = ({
@@ -77,11 +92,16 @@ const Table = ({
   enableHorizontalScroll = false, // Deprecated
   stickyColumn = false,
   hasBatchActions = false,
+  spaceRows = false,
+  style,
+  enableGridSizing = false,
+  gridSizing,
   ...rest
 }: TableProps) => {
   const wrapperClasses = classNames(
     bem(wrapperCn),
     enableHorizontalScroll && bem(wrapperCn, { m: "enable-hscroll" }),
+    spaceRows && bem(wrapperCn, { m: "space-rows" }),
   );
 
   const classes = classNames(
@@ -92,6 +112,8 @@ const Table = ({
     noResults && bem(cn, { m: "no-results" }),
     stickyColumn && bem(cn, { m: "sticky-column" }),
     hasBatchActions && bem(cn, { m: "batch-actions" }),
+    spaceRows && bem(cn, { m: "space-rows" }),
+    enableGridSizing && gridSizing && bem(cn, { m: "grid-sizing" }),
     className,
   );
 
@@ -109,7 +131,20 @@ const Table = ({
       }}
     >
       <div className={wrapperClasses}>
-        <table className={classes} {...rest}>
+        <table
+          className={classes}
+          style={
+            enableGridSizing && gridSizing
+              ? {
+                  gridTemplateColumns: Array.isArray(gridSizing)
+                    ? gridSizing.join(" ")
+                    : gridSizing,
+                  ...style,
+                }
+              : style
+          }
+          {...rest}
+        >
           {children}
         </table>
       </div>

package/src/components/Table/TableCell.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import classNames from "classnames";
 import { bem } from "../../utilities/bem";
+import { Flex } from "../Flex";
 import { Skeleton } from "../Skeleton";
 
 const cn = "TableCell";
@@ -26,6 +27,17 @@ export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
    * property is acceptable (e.g. "100px", "20%", etc.)
    */
   columnWidth?: string;
+
+  /**
+   * Aligns the text content horizontally inside of the header; if the content
+   * is more than just a string, then you'll need to handle alignment on your
+   * own, i.e., flexbox.
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Optional forwarded ref
+   */
   ref?: any;
 }
 
@@ -40,6 +52,7 @@ const TableCell: FunctionComponent<TableCellProps> = forwardRef<
       isLoading = false,
       children,
       columnWidth,
+      align = "left",
       style,
       ...rest
     },
@@ -56,12 +69,22 @@ const TableCell: FunctionComponent<TableCellProps> = forwardRef<
         className={classNames(
           bem(cn),
           removePadding && bem(cn, { m: "removePadding" }),
+          align && `text-${align}`,
           className,
         )}
         ref={ref}
         {...rest}
       >
-        {isLoading ? <Skeleton /> : children}
+        {isLoading ? (
+          <Flex
+            className="h-full items-center"
+            data-testid="loading-cell-skeleton"
+          >
+            <Skeleton className="w-full" />
+          </Flex>
+        ) : (
+          children
+        )}
       </td>
     );
   },

package/src/components/Table/TableHeaderCell.tsx

@@ -5,7 +5,7 @@ import { CheckboxProps } from "../Checkbox";
 import { FilterDropdown } from "./FilterDropdown";
 import TableContext, { SORT_DIRECTION } from "./TableContext";
 import { bem } from "../../utilities/bem";
-import { Icon, ICON_TYPE } from "../Icon";
+import { Icon, IconType, ICON_TYPE } from "../Icon";
 import isUndefined from "../../utilities/isUndefined";
 
 const cn = "TableHeaderCell";
@@ -89,8 +89,42 @@ export interface TableHeaderCellProps
    * Specify a custom filter control, e.g. DatePicker
    */
   filterControl?: ReactElement;
+
+  /**
+   * Aligns the text label horizontally inside of the header
+   */
+  align?: "left" | "center" | "right";
 }
 
+const SortIcon = ({
+  icon,
+  isActive = false,
+}: {
+  icon: IconType;
+  isActive?: boolean;
+}) => (
+  <Box as="span" className="flex relative">
+    <Icon
+      icon={icon}
+      className={classnames(bem(cn, { e: "sortIcon" }), {
+        isActive,
+      })}
+    />
+    {isActive && (
+      <Icon
+        className={classnames(
+          "absolute top-0 left-0",
+          bem(cn, { e: "sortIcon" }),
+          {
+            isActive: false,
+          },
+        )}
+        icon={ICON_TYPE.SORT}
+      />
+    )}
+  </Box>
+);
+
 const TableHeaderCell = ({
   children,
   className,
@@ -108,11 +142,17 @@ const TableHeaderCell = ({
   minColumnWidth,
   removeVerticalPadding = false,
   filterControl,
+  align = "left",
   style,
   ...rest
 }: TableHeaderCellProps) => {
   const [filterDropDownOpen, setFilterDropdownOpen] = useState<boolean>(false);
   const filterOptions = filterOptionsProp;
+  const justification = {
+    left: "start",
+    center: "center",
+    right: "end",
+  };
 
   return (
     <TableContext.Consumer>
@@ -169,8 +209,26 @@ const TableHeaderCell = ({
         }
 
         return (
-          <th className={classes} style={computedStyle} {...rest}>
-            <Box className={bem(cn, { e: "InnerWrapper" })}>
+          <th
+            className={classnames(
+              classes,
+              sortActive && "bg-gray-400",
+              sortable && "cursor-pointer",
+            )}
+            style={computedStyle}
+            onClick={() => {
+              if (sortable && !filterOptions) {
+                handleSortClick();
+              }
+            }}
+            {...rest}
+          >
+            <Box
+              className={classnames([
+                bem(cn, { e: "InnerWrapper" }),
+                align && `justify-${justification[align]}`,
+              ])}
+            >
               <Box className={bem(cn, { e: "ChildrenWrapper" })}>
                 {children}
               </Box>
@@ -198,16 +256,11 @@ const TableHeaderCell = ({
                   )}
                   {sortable && (
                     <Box
-                      as="button"
+                      as={filterOptions ? "button" : "div"}
                       className={classnames(bem(cn, { e: "iconButton" }))}
-                      onClick={handleSortClick}
+                      onClick={filterOptions ? handleSortClick : undefined}
                     >
-                      <Icon
-                        icon={sortIcon}
-                        className={classnames(bem(cn, { e: "sortIcon" }), {
-                          isActive: sortActive,
-                        })}
-                      />
+                      <SortIcon icon={sortIcon} isActive={sortActive} />
                     </Box>
                   )}
                 </Box>

package/src/components/Table/index.css

@@ -58,23 +58,23 @@
   width: 1%;
 }
 
-.ads-TableHeaderCell-InnerWrapper {
+.ads-TableHeaderCell-InnerWrapper,
+.ads-TableHeaderCell-ChildrenWrapper {
   @apply flex
-    items-center
-    pt-px;
+    items-center;
+}
+
+.ads-TableHeaderCell-InnerWrapper {
+  @apply pt-px
+    h-full;
 }
 
 .ads-TableHeaderCell-ChildrenWrapper {
-  @apply flex
-    items-center
-    justify-between
-    flex-grow
-    leading-none;
+  @apply leading-none;
 }
 
 .ads-TableHeaderCell-iconButtonWrapper {
-  @apply flex
-    ml-auto;
+  @apply flex;
 }
 
 .ads-TableHeaderCell-iconButton {
@@ -97,11 +97,6 @@
   @apply bg-gray-400;
 }
 
-.ads-TableHeaderCell-iconButton:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-TableHeaderCell-filterIcon.isActive {
   @apply text-blue-400;
 }
@@ -175,11 +170,6 @@
   @apply text-gray-600;
 }
 
-.ads-TableHeaderCell-closeFilter:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-TableHeaderCell-sortIcon {
   @apply opacity-25;
 }
@@ -196,6 +186,8 @@
     border-solid
     border-gray-200
     h-cell;
+
+  line-height: 18px;
 }
 
 .ads-TableRow:first-of-type .ads-TableCell,
@@ -315,3 +307,129 @@
   .ads-TableHeaderCell:nth-of-type(2) {
   @apply z-20;
 }
+
+/**
+ * Space Rows
+ *
+*/
+
+.ads-Table.ads-Table--space-rows {
+  @apply bg-transparent;
+
+  border-spacing: 0 4px;
+}
+
+.ads-Table.ads-Table--space-rows:not(.ads-Table--outer-border) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell {
+  @apply border-t
+    border-l-0
+    border-r-0
+    h-10;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableHeaderCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell {
+  @apply border-gray-400
+    border-t
+    border-b
+    border-l-0
+    border-r-0
+    h-14;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:first-of-type {
+  @apply border-l;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableCell:last-of-type {
+  @apply border-r;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:first-of-type .ads-TableCell,
+.ads-Table.ads-Table--space-rows .ads-TableCell:only-child {
+  @apply border-t;
+}
+
+.ads-Table.ads-Table--space-rows .ads-TableRow:not(:last-of-type) {
+  @apply border-b-0;
+}
+
+.ads-Table.ads-Table--space-rows.ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--space-rows.ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-5;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableCell:nth-of-type(2),
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  left: 44px;
+}
+
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column
+  .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--space-rows.ads-Table--sticky-column.ads-Table--batch-actions
+  .ads-TableHeaderCell:nth-of-type(2) {
+  box-shadow: 1px 0 0 theme("colors.gray.400"), 3px 0 0 rgb(234, 237, 239);
+}
+
+/* Enable grid sizing */
+
+.ads-Table.ads-Table--grid-sizing {
+  --table-cell-height: theme("height.cell");
+
+  @apply grid
+    border-b-0
+    flex-1
+    w-auto
+    min-w-full;
+
+  grid-auto-rows: minmax(var(--table-cell-height), auto);
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableHead,
+.ads-Table.ads-Table--grid-sizing .ads-TableBody,
+.ads-Table.ads-Table--grid-sizing .ads-TableRow {
+  display: contents;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell {
+  @apply h-auto
+    border-b
+    border-t-0;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableRow:last-of-type .ads-TableCell {
+  border-bottom-color: theme("colors.gray.400");
+}
+
+.ads-Table.ads-Table--grid-sizing
+  .ads-TableCell:not(.ads-TableCell--removePadding) {
+  @apply px-2;
+
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.ads-Table.ads-Table--grid-sizing .ads-TableCell:first-of-type:not(:only-child),
+.ads-Table.ads-Table--grid-sizing .ads-TableHeaderCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableCell:first-of-type,
+.ads-Table.ads-Table--grid-sizing.ads-Table--batch-actions
+  .ads-TableHeaderCell:first-of-type {
+  @apply pl-8;
+}

package/src/components/Table/index.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";