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

Jump to bottom

Feat/table: Add a property to control whether padding is applied to the expanded area of an expanded table row #787

Closed
wants to merge 6 commits into from
Closed

Feat/table: Add a property to control whether padding is applied to the expanded area of an expanded table row #787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
93277b8
feat(table): add prop that determines whether padding is enabled for …
patrikhultgren Oct 7, 2024
e24d78a
feat(table): add expanded padding enabled prop to storybook
patrikhultgren Oct 7, 2024
f471293
feat(table): add e2e test when no expanded padding
patrikhultgren Oct 7, 2024
04b8499
feat(table): add e2e test when no expanded padding
patrikhultgren Oct 7, 2024
b5d6093
feat(table): make no expandable padding work with compact mode too
patrikhultgren Oct 7, 2024
9e4ee43
feat(table): update e2e head title
patrikhultgren Oct 7, 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
13 changes: 7 additions & 6 deletions packages/core/src/components/table/table-body-row-expandable/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,13 @@ We recommend fitting your content within the table’s natural size whenever pos

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
| `colSpan` | `col-span` | In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too | `number` | `null` |
| `expanded` | `expanded` | Sets isExpanded state to true or false externally | `boolean` | `undefined` |
| `overflow` | `overflow` | Controls the overflow behavior of the expandable row content | `"auto" \| "hidden"` | `'auto'` |
| `rowId` | `row-id` | ID for the table row. Randomly generated if not specified. | `string` | `generateUniqueId()` |
| Property | Attribute | Description | Type | Default |
| ------------------------ | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
| `colSpan` | `col-span` | In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too | `number` | `null` |
| `expanded` | `expanded` | Sets isExpanded state to true or false externally | `boolean` | `undefined` |
| `expandedPaddingEnabled` | `expanded-padding-enabled` | Determines whether padding is enabled for the expanded area | `boolean` | `true` |
| `overflow` | `overflow` | Controls the overflow behavior of the expandable row content | `"auto" \| "hidden"` | `'auto'` |
| `rowId` | `row-id` | ID for the table row. Randomly generated if not specified. | `string` | `generateUniqueId()` |


## Events
Expand Down
9 changes: 7 additions & 2 deletions packages/core/src/components/table/table-body-row-expandable/table-body-row-expandable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,11 @@
.tds-table__cell-expand {
max-width: 1px;
overflow: auto;
padding: 16px 16px 16px 66px;
color: var(--tds-table-color);

&--padding-enabled {
padding: 16px 16px 16px 66px;
}
}
}
}
Expand Down Expand Up @@ -97,7 +100,9 @@

.tds-table__row-expand {
.tds-table__cell-expand {
padding: 8px 16px 8px 66px;
&--padding-enabled {
padding: 8px 16px 8px 66px;
}
}
}
}
Expand Down
11 changes: 10 additions & 1 deletion packages/core/src/components/table/table-body-row-expandable/table-body-row-expandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ export class TdsTableBodyRowExpandable {
/** Sets isExpanded state to true or false externally */
@Prop({ reflect: true }) expanded: boolean;

/** Determines whether padding is enabled for the expanded area */
@Prop({ reflect: true }) expandedPaddingEnabled: boolean = true;

/** Controls the overflow behavior of the expandable row content */
@Prop({ reflect: true }) overflow: 'auto' | 'hidden' = 'auto';

Expand Down Expand Up @@ -205,7 +208,13 @@ export class TdsTableBodyRowExpandable {
}}
part="expand-row"
>
<td class="tds-table__cell-expand" colSpan={this.columnsNumber}>
<td
class={{
'tds-table__cell-expand': true,
'tds-table__cell-expand--padding-enabled': this.expandedPaddingEnabled,
}}
colSpan={this.columnsNumber}
>
<div
style={{
overflow: this.overflow,
Expand Down
22 changes: 17 additions & 5 deletions packages/core/src/components/table/table-component-expandable-rows.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,16 @@ export default {
type: 'boolean',
},
},
expandedPaddingEnabled: {
name: 'Expanded padding enabled',
description: 'Determines whether padding is enabled for the expanded area.',
control: {
type: 'boolean',
},
table: {
defaultValue: { summary: true },
},
},
responsiveDesign: {
name: 'Responsive Table',
description:
Expand Down Expand Up @@ -137,6 +147,7 @@ export default {
modeVariant: 'Inherit from parent',
compactDesign: false,
expanded: false,
expandedPaddingEnabled: true,
responsiveDesign: false,
verticalDivider: false,
noMinWidth: false,
Expand All @@ -152,6 +163,7 @@ const ExpandableRowTemplate = ({
modeVariant,
compactDesign,
expanded,
expandedPaddingEnabled,
responsiveDesign,
verticalDivider,
noMinWidth,
Expand Down Expand Up @@ -185,28 +197,28 @@ const ExpandableRowTemplate = ({
}></tds-header-cell>
</tds-table-header>
<tds-table-body>
<tds-table-body-row-expandable expanded=${expanded} row-id="1">
<tds-table-body-row-expandable expanded=${expanded} expanded-padding-enabled=${expandedPaddingEnabled} row-id="1">
<tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
<tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
<div slot="expand-row">Hello world 1</div>
</tds-table-body-row-expandable>
<tds-table-body-row-expandable row-id="2">
<tds-table-body-row-expandable expanded-padding-enabled=${expandedPaddingEnabled} row-id="2">
<tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
<tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
<div slot="expand-row">Hello to you too</div>
</tds-table-body-row-expandable>
<tds-table-body-row-expandable>
<tds-table-body-row-expandable expanded-padding-enabled=${expandedPaddingEnabled}>
<tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
<tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
<div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
</tds-table-body-row-expandable>
<tds-table-body-row-expandable expanded="${expanded}" overflow="${overflow}" row-id="1">
<tds-table-body-row-expandable expanded="${expanded}" expanded-padding-enabled=${expandedPaddingEnabled} overflow="${overflow}" row-id="1">
<tds-body-cell cell-value="Demo overflow 1" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Demo overflow 2" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Demo overflow 3" cell-key="country"></tds-body-cell>
Expand All @@ -224,7 +236,7 @@ const ExpandableRowTemplate = ({
<script>

tableRowElementAll = document.querySelectorAll("tds-table-body-row-expandable");

for (let i = 0; i < tableRowElementAll.length; i++) {
tableRowElementAll[i].addEventListener("tdsChange", (event) => {
console.log("Row with id: ", event.detail.rowId, " is ", event.detail.isExpanded);
Expand Down
23 changes: 23 additions & 0 deletions ...e/table/test/expandable-row-expanded-no-padding/expandable-row-expanded-no-padding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { test } from 'stencil-playwright';
import { expect } from '@playwright/test';

const componentTestPath =
'src/components/table/table/test/expandable-row-expanded-no-padding/index.html';

test.describe.parallel('tds-table-expandable-row-expanded-no-padding', () => {
test.beforeEach(async ({ page }) => {
await page.goto(componentTestPath);
const tableComponent = page.getByRole('table');
await expect(tableComponent).toHaveCount(1);
await tableComponent.waitFor({ state: 'visible' });
});

test('first row is expanded and has no padding', async ({ page }) => {
const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
await expect(tableBodyRowFirstInput).toHaveCount(1);
await expect(tableBodyExpandableRowSlot).toHaveCount(1);
await expect(tableBodyExpandableRowSlot).toBeVisible();
await expect(page).toHaveScreenshot({ maxDiffPixels: 0.05 });
});
});
Binary file added ...le-row-expanded-no-padding-first-row-is-expanded-and-has-no-padding-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions packages/core/src/components/table/table/test/expandable-row-expanded-no-padding/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Table - Expandable row no padding</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
<script type="module">
import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
defineCustomElements();
</script>
</head>

<body>
<tds-table expandable-rows vertical-dividers="false" compact-design="false" responsive="false">
<tds-table-header>
<tds-header-cell cell-key="truck" cell-value="Truck type"></tds-header-cell>
<tds-header-cell cell-key="driver" cell-value="Driver name"></tds-header-cell>
<tds-header-cell cell-key="country" cell-value="Country"></tds-header-cell>
<tds-header-cell
cell-key="mileage"
cell-value="Mileage"
text-align="right"
></tds-header-cell>
</tds-table-header>
<tds-table-body>
<tds-table-body-row-expandable expanded="true" expanded-padding-enabled="false" row-id="1">
<tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
<tds-body-cell
cell-value="Test value 4"
cell-key="mileage"
text-align="right"
></tds-body-cell>
<div slot="expand-row">Hello world 1</div>
</tds-table-body-row-expandable>
<tds-table-body-row-expandable row-id="2" expanded-padding-enabled="false">
<tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
<tds-body-cell
cell-value="Test value 8"
cell-key="mileage"
text-align="right"
></tds-body-cell>
<div slot="expand-row">Hello to you too</div>
</tds-table-body-row-expandable>
<tds-table-body-row-expandable expanded-padding-enabled="false">
<tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
<tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
<tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
<tds-body-cell
cell-value="Test value 12"
cell-key="mileage"
text-align="right"
></tds-body-cell>
<div slot="expand-row">
<tds-button type="primary" text="Call to action"></tds-button>
</div>
</tds-table-body-row-expandable>
</tds-table-body>
</tds-table>
</body>
</html>
Loading