Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datatable cell elements v3 cherry pick #2933

Merged
merged 2 commits into from
Dec 18, 2024
Merged

Datatable cell elements v3 cherry pick #2933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9054d39
feat(canary-react): add action-element tests and story
ec1467 Dec 17, 2024
77072b4
feat(canary-web-components): added action-element, tests and stories
ec1467 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
textWrapColumns,
textWrapRow,
DATA_EMPHASIS,
ACTION_DATA_ELEMENTS,
} from "@ukic/canary-web-components/src/components/ic-data-table/story-data";

import {
Expand Down Expand Up @@ -1086,6 +1087,69 @@ describe("IcDataTables", () => {
});
});

it("should render an element in the table cell if the data prop contains the actionElement key", () => {
mount(
<IcDataTable
columns={COLS}
data={ACTION_DATA_ELEMENTS}
caption="Data tables"
></IcDataTable>
);
cy.viewport(1024, 768);

cy.checkHydrated(DATA_TABLE_SELECTOR);

cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
.eq(0)
.find("span")
.should(HAVE_CLASS, "action-element")
.find("ic-button")
.should("be.visible");
});

it("should not render an element in the table cell if the data prop does not contain the actionElement key", () => {
mount(
<IcDataTable
columns={COLS}
data={ACTION_DATA_ELEMENTS}
caption="Data tables"
></IcDataTable>
);
cy.viewport(1024, 768);

cy.checkHydrated(DATA_TABLE_SELECTOR);

cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
.eq(1)
.find("span")
.should("not.exist");
});

it("should apply styling to the cell container if an action element is present in the cell", () => {
mount(
<IcDataTable
columns={COLS}
data={ACTION_DATA_ELEMENTS}
caption="Data tables"
></IcDataTable>
);

cy.viewport(1024, 768);

cy.checkHydrated(DATA_TABLE_SELECTOR);

cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
.eq(0)
.find("div")
.eq(0)
.should(HAVE_CLASS, "cell-grid-wrapper")
.should(HAVE_CSS, "grid-template-columns", "156.797px 32px");

cy.findShadowEl(DATA_TABLE_SELECTOR, "span")
.should(HAVE_CLASS, "action-element")
.should(HAVE_CSS, "justify-content", "right");
});

describe("IcDataTables with IcPaginationBar", () => {
beforeEach(() => {
cy.injectAxe();
Expand Down
55 changes: 54 additions & 1 deletion packages/canary-react/src/stories/ic-data-table.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ import {
ICON_COLS,
COLUMNS_TEXT_WRAP,
TEXT_WRAP_LONG_DATA,
COLS_WIDTH
COLS_WIDTH,
ACTION_DATA_ELEMENTS
} from "../../../canary-web-components/src/components/ic-data-table/story-data";

import { mdiAccountGroup, mdiImage, mdiDelete } from "@mdi/js";
Expand Down Expand Up @@ -2074,6 +2075,58 @@ const DataTable = () => {
};
```

### Action Element

An example with action elements passed in via the data

<Canvas withSource="none">
<Story name="Action Element">
<IcDataTable caption="Action Element" columns={COLS} data={ACTION_DATA_ELEMENTS} />
</Story>
</Canvas>

#### Action Element code example

```jsx
import * as React from "react";
import { IcDataTable } from "@ukic/canary-react";
import { IcDataTableColumnObject } from "@ukic/canary-web-components";

const COLS: IcDataTableColumnObject[] = [
{ key: "firstName", title: "First name", dataType: "string", columnWidth: "15%" },
{ key: "lastName", title: "Last name", dataType: "string", columnWidth: "300px" },
{
key: "age",
title: "Age",
dataType: "number",
columnWidth: {
maxWidth: "100px",
},
},
...
];

const DATA = [
{
firstName: {
data: "Joe",
actionElement: `<ic-button variant="icon" size="small aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000" > <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path> </svg></ic-button>`,
},
lastName: "Bloggs",
age: 30,
jobTitle: "Developer",
address: "1 Main Street, Town, County, Postcode",
},
...
];

const DataTable = () => (
<IcDataTable caption="Action Element" columns={COLS} data={DATA} />
);

export default DataTable;
```

### Playground example

Go to the <IcLink href="/?path=/story/react-components-data-table--playground-example">separate page for the playground example</IcLink> to view the prop controls.
Expand Down
10 changes: 10 additions & 0 deletions packages/canary-web-components/src/components/ic-data-table/ic-data-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,16 @@ td.table-density-spacious {
width: 100%;
}

.action-element {
display: flex;
justify-content: right;
}

.cell-grid-wrapper {
display: grid;
grid-template-columns: auto auto;
}

@media screen and (min-width: 577px) {
.column-header-inner-container {
display: flex;
Expand Down
11 changes: 11 additions & 0 deletions ...es/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
UpdatingData,
SlottedPagination,
LargeDataSet,
ActionElement,
DevArea,
} from "./story-data";
import readme from "./readme.md";
Expand Down Expand Up @@ -1643,6 +1644,16 @@ To set the min and max width of a table cell, set the `table-layout` attribute t
</script>
```

### Action Element

The example below demonstrates action elements appearing in table cells after being passed in via the data.

<Canvas withSource="none">
<Story name="Action Element" parameters={{ loki: { skip: true } }}>
{ActionElement()}
</Story>
</Canvas>

#### Development Area

<Canvas withSource="none">
Expand Down
Loading
Loading