diff --git a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx index 4e435cd4b..262132d4f 100644 --- a/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx +++ b/packages/components/src/core/CellHeader/__storybook__/index.stories.tsx @@ -20,6 +20,9 @@ export default { control: { type: "select" }, options: ["left", "center", "right"], }, + hover: { + control: { type: "boolean" }, + }, shouldShowTooltipOnHover: { control: { type: "boolean" }, }, @@ -44,6 +47,7 @@ export const Default = { active: false, direction: "desc", hideSortIcon: false, + hover: false, shouldShowTooltipOnHover: true, tooltipProps: { sdsStyle: "dark" }, tooltipText: "This is a header cell", diff --git a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx index 6e85f594b..5f2383b6b 100644 --- a/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx +++ b/packages/components/src/core/CellHeader/__storybook__/stories/test.tsx @@ -1,6 +1,7 @@ +import { Args } from "@storybook/types"; import RawCellHeader from "src/core/CellHeader"; -export const TestDemo = (): JSX.Element => ( +export const TestDemo = (props: Args): JSX.Element => ( @@ -10,6 +11,8 @@ export const TestDemo = (): JSX.Element => ( shouldShowTooltipOnHover active tooltipText="testTooltipTitle" + hover + {...props} > Header diff --git a/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx b/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx index 542afda00..a482b6b51 100644 --- a/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx +++ b/packages/components/src/core/CellHeader/__tests__/CellHeader.namespace-test.tsx @@ -12,6 +12,7 @@ const CellBasicNameSpaceTest = (props: CellHeaderProps) => { direction="asc" active hideSortIcon + hover horizontalAlign="center" shouldShowTooltipOnHover tooltipProps={{ sdsStyle: "light" }} diff --git a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap index 563cf01ff..736ce6faa 100644 --- a/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/CellHeader/__tests__/__snapshots__/index.test.tsx.snap @@ -5,10 +5,8 @@ exports[` Default story renders snapshot 1`] = ` diff --git a/packages/components/src/core/CellHeader/__tests__/index.test.tsx b/packages/components/src/core/CellHeader/__tests__/index.test.tsx index 0459cb089..5113fb701 100644 --- a/packages/components/src/core/CellHeader/__tests__/index.test.tsx +++ b/packages/components/src/core/CellHeader/__tests__/index.test.tsx @@ -16,7 +16,7 @@ describe("", () => { }); it("renders tooltip on hover", async () => { - render(); + render(); const headerCellElement = screen.getByTestId("CellHeader"); fireEvent.mouseOver(headerCellElement); await screen.findByText("testTooltipTitle"); @@ -29,8 +29,8 @@ describe("", () => { expect(style.textAlign).toBe("right"); }); - it("renders a sort icon when header is active", async () => { - render(); + it("renders a sort icon when header is active and hover is true", async () => { + render(); const headerCellElement = screen.getByTestId("CellHeader"); const sortIcon = headerCellElement.getElementsByClassName("MuiSvgIcon-root")[0]; diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx index cdcdb42f4..4f2fccfa8 100644 --- a/packages/components/src/core/CellHeader/index.tsx +++ b/packages/components/src/core/CellHeader/index.tsx @@ -16,6 +16,7 @@ interface CellHeaderContentProps { hideSortIcon?: boolean; horizontalAlign?: "left" | "center" | "right"; children: React.ReactNode; + hover?: boolean; } interface CellHeaderRawProps @@ -39,6 +40,7 @@ const CellHeaderContent = ( direction = "desc", hideSortIcon = false, horizontalAlign, + hover, } = props; const sdsIconName: keyof IconNameToSizes = @@ -61,7 +63,7 @@ const CellHeaderContent = ( return ( {children} - {(!hideSortIcon || active) && sortIcon} + {(!hideSortIcon || active) && hover && sortIcon} ); }; @@ -74,10 +76,11 @@ const CellHeader = forwardRef( tooltipProps, tooltipText = "", tooltipSubtitle, + hover = false, ...rest } = props; - if (shouldShowTooltipOnHover) { + if (shouldShowTooltipOnHover && hover) { return ( ( title={tooltipText} {...tooltipProps} > - - {children} + + + {children} + ); } return ( - - {children} + + + {children} + ); } diff --git a/packages/components/src/core/CellHeader/style.ts b/packages/components/src/core/CellHeader/style.ts index 3a2f83535..df6118280 100644 --- a/packages/components/src/core/CellHeader/style.ts +++ b/packages/components/src/core/CellHeader/style.ts @@ -12,6 +12,7 @@ export interface CellHeaderExtraProps extends CommonThemeProps { active?: boolean; hideSortIcon?: boolean; horizontalAlign?: "left" | "center" | "right"; + hover?: boolean; } const contentPositionMapping = { @@ -27,6 +28,7 @@ const doNotForwardProps = [ "tooltipProps", "tooltipText", "hideSortIcon", + "hover", ]; export const StyledSortingIcon = styled(Icon, { @@ -55,17 +57,25 @@ export const StyledTableHeader = styled("th", { ${focusVisibleA11yStyle} ${(props: CellHeaderExtraProps) => { - const { active = false, horizontalAlign = "left" } = props; + const { active = false, horizontalAlign = "left", hover = true } = props; const spaces = getSpaces(props); const semanticColors = getSemanticColors(props); + const defaultColor = active + ? semanticColors?.accent?.textAction + : semanticColors?.base?.textSecondary; + + const hoverColor = active + ? semanticColors?.accent?.textActionHover + : semanticColors?.base?.textPrimary; + return ` - color: ${active ? semanticColors?.accent?.textAction : semanticColors?.base?.textSecondary}; + color: ${defaultColor}; padding: ${spaces?.l}px ${spaces?.m}px; text-align: ${horizontalAlign}; min-width: 96px; - cursor: pointer; + cursor: ${hover ? "pointer" : "default"}; vertical-align: bottom; & .MuiButtonBase-root { @@ -73,10 +83,10 @@ export const StyledTableHeader = styled("th", { } &:hover { - color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary}; + color: ${hover ? hoverColor : defaultColor}; & .MuiButtonBase-root { - color: ${active ? semanticColors?.accent?.textActionHover : semanticColors?.base?.textPrimary}; + color: ${hoverColor}; opacity: 1; } diff --git a/packages/components/src/core/Table/__storybook__/stories/default.tsx b/packages/components/src/core/Table/__storybook__/stories/default.tsx index 93f996fc3..a3dae5aa1 100644 --- a/packages/components/src/core/Table/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Table/__storybook__/stories/default.tsx @@ -19,8 +19,10 @@ export const Table = (props: Args): JSX.Element => { Category - Active Header - + + Active Header + + A very long table header title to test sort icon positioning Component diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap index 49a89cb5c..0d9e23f07 100644 --- a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap @@ -11,7 +11,7 @@ exports[`
Default story renders snapshot 1`] = ` Header -
- -
Default story renders snapshot 1`] = ` class="css-fitsu2" >
Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = `
{ return ( - Column 1 - Column 2 - Column 3 + + Column 1 + + Column 2 + Column 3
); diff --git a/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx index fbf69a6df..c77ddb134 100644 --- a/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx +++ b/packages/components/src/core/TableHeader/__storybook__/stories/test.tsx @@ -4,9 +4,11 @@ import RawTableHeader from "src/core/TableHeader"; export const TestDemo = (): JSX.Element => ( - Column 1 - Column 2 - Column 3 + + Column 1 + + Column 2 + Column 3
);