Skip to content

Commit

Permalink
Merge pull request #6909 from Sage/FE-6750
Browse files Browse the repository at this point in the history 
add flat-table enhancements
  • Loading branch information
@Parsium
Parsium authored Sep 18, 2024
2 parents d1c012e + 866137a commit ffc48c0
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 87 deletions.
7 changes: 7 additions & 0 deletions src/components/flat-table/flat-table-row/flat-table-row.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,14 @@ const StyledFlatTableRow = styled.tr<StyledFlatTableRowProps>`
${StyledFlatTableHeader} {
border-bottom: 1px solid ${borderColor(colorTheme)};
${horizontalBorderSize !== "small" &&
css`
border-bottom: ${horizontalBorderSizes[horizontalBorderSize]} solid
var(--colorsUtilityMajor100);
`}
${!isInSidebar &&
!colorTheme?.includes("transparent") &&
`
:first-child {
border-left: 1px solid ${borderColor(colorTheme)};
Expand Down
1 change: 1 addition & 0 deletions src/components/flat-table/flat-table-test.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default {
"FlatTableSizeFocus",
"FlatTableInsideDrawer",
"FlatRowHeaderWithNoPaddingAndButtons",
"MinimalDesign",
],
parameters: {
info: { disable: true },
Expand Down
20 changes: 14 additions & 6 deletions src/components/flat-table/flat-table-themes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,30 @@ import * as FlatTableThemesStories from "./flat-table-themes.stories";

<Meta of={FlatTableThemesStories} />

# Table Header Color Themes
# FlatTable color theming

## Examples

### With transparent-white theme
### With white header row

To create a transparent effect for the header, the background-color is set to match a white background
Setting `FlatTable`'s `colorTheme` prop to "transparent-white" will make both the header row and body rows white:

<Canvas of={FlatTableThemesStories.TransparentWhiteTheme} />

### With transparent-base theme
### With light grey header row

To create a transparent effect for the header, the background-color is set to match the base app background
Setting `FlatTable`'s `colorTheme` prop to "transparent-base" will make the header row light grey:

<Canvas of={FlatTableThemesStories.TransparentBaseTheme} />

### With light theme
### With grey header row

Setting `FlatTable`'s `colorTheme` prop to "light" will make the header row grey:

<Canvas of={FlatTableThemesStories.LightTheme} />

### Minimal design

Here is an example of a minimalistic design using a combination of `FlatTable` props:

<Canvas of={FlatTableThemesStories.MinimalDesign}/>
134 changes: 89 additions & 45 deletions src/components/flat-table/flat-table-themes.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from "react";
import { Meta, StoryObj } from "@storybook/react";

import Box from "../box";
import {
FlatTable,
FlatTableHead,
Expand All @@ -12,7 +11,7 @@ import {
} from ".";

const meta: Meta<typeof FlatTable> = {
title: "Flat Table/Color Themes",
title: "Flat Table/Color theming",
component: FlatTable,
};

Expand All @@ -21,55 +20,53 @@ type Story = StoryObj<typeof FlatTable>;

export const TransparentWhiteTheme: Story = () => {
return (
<Box>
<FlatTable colorTheme="transparent-white">
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader alternativeBgColor>Name</FlatTableHeader>
<FlatTableHeader>Location</FlatTableHeader>
<FlatTableHeader>Relationship Status</FlatTableHeader>
<FlatTableHeader>Dependents</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow>
<FlatTableCell>John Doe</FlatTableCell>
<FlatTableCell>London</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>0</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Doe</FlatTableCell>
<FlatTableCell>York</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>2</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>John Smith</FlatTableCell>
<FlatTableCell>Edinburgh</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>1</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Smith</FlatTableCell>
<FlatTableCell>Newcastle</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>5</FlatTableCell>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
</Box>
<FlatTable colorTheme="transparent-white">
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader>Name</FlatTableHeader>
<FlatTableHeader>Location</FlatTableHeader>
<FlatTableHeader>Relationship Status</FlatTableHeader>
<FlatTableHeader>Dependents</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow>
<FlatTableCell>John Doe</FlatTableCell>
<FlatTableCell>London</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>0</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Doe</FlatTableCell>
<FlatTableCell>York</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>2</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>John Smith</FlatTableCell>
<FlatTableCell>Edinburgh</FlatTableCell>
<FlatTableCell>Single</FlatTableCell>
<FlatTableCell>1</FlatTableCell>
</FlatTableRow>
<FlatTableRow>
<FlatTableCell>Jane Smith</FlatTableCell>
<FlatTableCell>Newcastle</FlatTableCell>
<FlatTableCell>Married</FlatTableCell>
<FlatTableCell>5</FlatTableCell>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
);
};

TransparentWhiteTheme.storyName = "Transparent White Theme";
TransparentWhiteTheme.storyName = "With white header row";

export const TransparentBaseTheme: Story = () => {
return (
<FlatTable colorTheme="transparent-base">
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader alternativeBgColor>Name</FlatTableHeader>
<FlatTableHeader>Name</FlatTableHeader>
<FlatTableHeader>Location</FlatTableHeader>
<FlatTableHeader>Relationship Status</FlatTableHeader>
<FlatTableHeader>Dependents</FlatTableHeader>
Expand Down Expand Up @@ -104,14 +101,14 @@ export const TransparentBaseTheme: Story = () => {
</FlatTable>
);
};
TransparentBaseTheme.storyName = "Transparent Base Theme";
TransparentBaseTheme.storyName = "With light grey header row";

export const LightTheme: Story = () => {
return (
<FlatTable colorTheme="light">
<FlatTableHead>
<FlatTableRow>
<FlatTableHeader alternativeBgColor>Name</FlatTableHeader>
<FlatTableHeader>Name</FlatTableHeader>
<FlatTableHeader>Location</FlatTableHeader>
<FlatTableHeader>Relationship Status</FlatTableHeader>
<FlatTableHeader>Dependents</FlatTableHeader>
Expand Down Expand Up @@ -147,4 +144,51 @@ export const LightTheme: Story = () => {
);
};

LightTheme.storyName = "Light Theme";
LightTheme.storyName = "With grey header row";

export const MinimalDesign = () => {
return (
<FlatTable
colorTheme="transparent-white"
hasOuterVerticalBorders={false}
bottomBorderRadius="borderRadius000"
>
<FlatTableHead>
<FlatTableRow horizontalBorderSize="medium">
<FlatTableHeader px="0">Header a</FlatTableHeader>
<FlatTableHeader px="0">Header b</FlatTableHeader>
<FlatTableHeader px="0">Header c</FlatTableHeader>
<FlatTableHeader px="0">Header d</FlatTableHeader>
</FlatTableRow>
</FlatTableHead>
<FlatTableBody>
<FlatTableRow horizontalBorderColor="--colorsUtilityMajor050">
<FlatTableCell px="0">Cell a</FlatTableCell>
<FlatTableCell px="0">Cell b</FlatTableCell>
<FlatTableCell px="0">Cell c</FlatTableCell>
<FlatTableCell px="0">Cell d</FlatTableCell>
</FlatTableRow>
<FlatTableRow horizontalBorderColor="--colorsUtilityMajor050">
<FlatTableCell px="0">Cell a</FlatTableCell>
<FlatTableCell px="0">Cell b</FlatTableCell>
<FlatTableCell px="0">Cell c</FlatTableCell>
<FlatTableCell px="0">Cell d</FlatTableCell>
</FlatTableRow>
<FlatTableRow horizontalBorderColor="--colorsUtilityMajor050">
<FlatTableCell px="0">Cell a</FlatTableCell>
<FlatTableCell px="0">Cell b</FlatTableCell>
<FlatTableCell px="0">Cell c</FlatTableCell>
<FlatTableCell px="0">Cell d</FlatTableCell>
</FlatTableRow>
<FlatTableRow horizontalBorderColor="--colorsUtilityMajor050">
<FlatTableCell px="0">Cell a</FlatTableCell>
<FlatTableCell px="0">Cell b</FlatTableCell>
<FlatTableCell px="0">Cell c</FlatTableCell>
<FlatTableCell px="0">Cell d</FlatTableCell>
</FlatTableRow>
</FlatTableBody>
</FlatTable>
);
};
MinimalDesign.storyName = "Minimal Design";
MinimalDesign.parameters = { chromatic: { disableSnapshot: false } };
13 changes: 13 additions & 0 deletions src/components/flat-table/flat-table.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useLayoutEffect, useRef, useState, useContext } from "react";
import { MarginProps } from "styled-system";
import * as DesignTokens from "@sage/design-tokens/js/base/common";

import {
StyledFlatTableWrapper,
Expand Down Expand Up @@ -36,6 +37,13 @@ export interface FlatTableProps extends MarginProps {
size?: "compact" | "small" | "medium" | "large" | "extraLarge";
/** Applies max-height of 100% to FlatTable if true */
hasMaxHeight?: boolean;
/** Toggles the visibility of the table's outer left and right borders. When false, the left border of the first column and the right border of the last column are hidden. */
hasOuterVerticalBorders?: boolean;
/** Sets the border radius of the first and last cells in the last row. */
bottomBorderRadius?: Extract<
keyof typeof DesignTokens,
`borderRadius${number}`
>;
/** Set the overflow X of the table wrapper. Any valid CSS string */
overflowX?: string;
/** Width of the table. Any valid CSS string */
Expand All @@ -56,6 +64,8 @@ export const FlatTable = ({
isZebra,
size = "medium",
hasMaxHeight = false,
hasOuterVerticalBorders = true,
bottomBorderRadius = "borderRadius100",
ariaDescribedby,
minHeight,
overflowX,
Expand Down Expand Up @@ -219,13 +229,16 @@ export const FlatTable = ({
<StyledFlatTableWrapper
ref={wrapperRef}
data-component="flat-table-wrapper"
data-role="flat-table-wrapper"
isInSidebar={isInSidebar}
hasStickyHead={hasStickyHead}
colorTheme={colorTheme}
minHeight={minHeight}
overflowY={hasStickyHead || hasStickyFooter ? "auto" : undefined}
height={addDefaultHeight && !hasMaxHeight ? "99%" : height}
maxHeight={hasMaxHeight ? "100%" : undefined}
hasOuterVerticalBorders={hasOuterVerticalBorders}
bottomBorderRadius={bottomBorderRadius}
display="flex"
flexDirection="column"
justifyContent={hasStickyFooter || height ? "space-between" : undefined}
Expand Down
10 changes: 10 additions & 0 deletions src/components/flat-table/flat-table.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@ Setting a custom background color will also override hover, highlight and row se

<Canvas of={FlatTableStories.WithCustomHorizontalBorderColor} />

### With custom bottom border radius

<Canvas of={FlatTableStories.WithCustomBottomBorderRadius} />

### With custom vertical borders

<Canvas of={FlatTableStories.WithCustomVerticalBorders} />
Expand Down Expand Up @@ -167,6 +171,12 @@ By using the `hasMaxHeight` prop you can automatically apply a max-height of 100

<Canvas of={FlatTableStories.WithHasMaxHeight} />

### Removing outer vertical borders

Setting the `hasOuterVerticalBorders` prop to `false` removes the table's outermost vertical borders by hiding the left border of the first column and the right border of the last column.

<Canvas of={FlatTableStories.WithoutVerticalBorders} />

### With clickable rows

<Canvas of={FlatTableStories.WithClickableRows} />
Expand Down
30 changes: 16 additions & 14 deletions src/components/flat-table/flat-table.pw.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable jest/no-disabled-tests */
import React from "react";
import { test, expect } from "@playwright/experimental-ct-react17";
import type { Locator } from "@playwright/test";
Expand Down Expand Up @@ -35,7 +34,6 @@ import {
FlatTableFirstColumnHasRowspan,
FlatTableLastColumnHasRowspan,
} from "./components.test-pw";
import { FlatTableProps } from "./flat-table.component";
import Icon from "../icon";
import { getDataElementByValue } from "../../../playwright/components";
import {
Expand Down Expand Up @@ -90,39 +88,43 @@ import {
} from "../../../playwright/support/helper";
import { HooksConfig } from "../../../playwright";

const sizes: [FlatTableProps["size"], string, string, number][] = [
const sizes = [
["compact", "8px", "13px", 24],
["small", "16px", "14px", 32],
["medium", "16px", "14px", 40],
["large", "16px", "16px", 48],
["extraLarge", "16px", "16px", 64],
];
] as const;

const borderSizeSmall = "1px";
const borderSizeMedium = "2px";
const borderSizeLarge = "4px";

const heightWidth = [150, 250, 600, 1000];
const heights = [150, 249, 250, 251, 300];
const overflows = ["visible", "hidden", "clip", "scroll", "auto"];
const arrowsToPress = ["ArrowLeft", "ArrowRight"];
const heightWidth = [150, 250, 600, 1000] as const;
const heights = [150, 249, 250, 251, 300] as const;
const overflows = ["visible", "hidden", "clip", "scroll", "auto"] as const;
const arrowsToPress = ["ArrowLeft", "ArrowRight"] as const;
const itemsPerPage = [
[1, 0],
[5, 1],
];
const tableSorting: ["first" | "second", string, number, number][] = [
] as const;
const tableSorting = [
["first", "desc", 1, 0],
["first", "asc", 2, 0],
["second", "desc", 1, 1],
["second", "asc", 2, 1],
];
] as const;

const colorThemes: [FlatTableProps["colorTheme"], string, string][] = [
const basicColorThemes = [
["dark", "rgb(51, 91, 112)", "rgb(102, 132, 148)"],
["light", "rgb(204, 214, 219)", "rgb(179, 194, 201)"],
] as const;

const colorThemes = [
...basicColorThemes,
["transparent-base", "rgb(242, 245, 246)", "rgb(242, 245, 246)"],
["transparent-white", "rgb(255, 255, 255)", "rgb(255, 255, 255)"],
];
] as const;

const gold = "rgb(255, 188, 25)";
const black = "rgba(0, 0, 0, 0.9)";
Expand Down Expand Up @@ -426,7 +428,7 @@ test.describe("Prop tests", () => {
}
});

[...colorThemes].forEach(([colorTheme, bgColor, brColor]) => {
[...basicColorThemes].forEach(([colorTheme, bgColor, brColor]) => {
test(`should render in the ${colorTheme} theme`, async ({
mount,
page,
Expand Down
Loading

0 comments on commit ffc48c0

Please sign in to comment.