Skip to content

feat(data-grid): support dynamic row height (VIV-1602) #1641

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

Merged
merged 6 commits into from
Mar 28, 2024
Merged

feat(data-grid): support dynamic row height (VIV-1602) #1641

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
d631245
feat(data-grid): support dynamic row height (VIV-1602)
RichardHelm Mar 19, 2024
0d30443
Update libs/components/src/lib/data-grid/README.md
RichardHelm Mar 20, 2024
0363fc6
Update libs/components/src/lib/data-grid/README.md
RichardHelm Mar 20, 2024
3b620d9
Merge remote-tracking branch 'origin/main' into VIV-1602-flexible-row…
RichardHelm Mar 22, 2024
1749a63
Fix formatting
RichardHelm Mar 22, 2024
8c21348
Merge branch 'main' into VIV-1602-flexible-row-height
rachelbt Mar 28, 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
4 changes: 4 additions & 0 deletions apps/docs/assets/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ img {
block-size: auto;
}

vwc-note > p {
margin-block: 0 !important;
}

/* #endregion document */

/* #region side drawer */
Expand Down
139 changes: 115 additions & 24 deletions libs/components/src/lib/data-grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,8 +321,7 @@ The index of the column that will be focused the next time the grid is focused i

```html preview
<div>Column Index (starts from 0)</div>
<vwc-number-field id="col-number"></vwc-number-field>
<br />
<vwc-number-field id="col-number"></vwc-number-field><br />
<vwc-button
appearance="filled"
connotation="cta"
Expand Down Expand Up @@ -401,7 +400,7 @@ The grid also adds the `aria-selected` attribute to the row when it is selected
<vwc-data-grid-cell cell-type="columnheader" role="columnheader">
data1
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader">data2</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row aria-selected="true">
<vwc-data-grid-cell>Cell 1</vwc-data-grid-cell>
Expand Down Expand Up @@ -439,18 +438,18 @@ For more information regarding `aria-sort` you can reference [the W3C spec](http
```html preview
<vwc-data-grid>
<vwc-data-grid-row role="row">
<vwc-data-grid-cell cell-type="columnheader" aria-sort="ascending">
ascending
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="descending">
descending
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="none">
none
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="other">
other
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="ascending"
>ascending</vwc-data-grid-cell
>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="descending"
>descending</vwc-data-grid-cell
>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="none"
>none</vwc-data-grid-cell
>
<vwc-data-grid-cell cell-type="columnheader" aria-sort="other"
>other</vwc-data-grid-cell
>
</vwc-data-grid-row>
</vwc-data-grid>
```
Expand All @@ -466,9 +465,9 @@ The grid also adds the `aria-selected` attribute to the cell when it is selected
<vwc-data-grid-row>
<vwc-data-grid-cell aria-selected="true">Cell 1</vwc-data-grid-cell>
<vwc-data-grid-cell aria-selected="false">Cell 2</vwc-data-grid-cell>
<vwc-data-grid-cell>
Cell 3 with long text, all cells has ellipsis
</vwc-data-grid-cell>
<vwc-data-grid-cell
>Cell 3 with long text, all cells has ellipsis</vwc-data-grid-cell
>
</vwc-data-grid-row>
</vwc-data-grid>
```
Expand Down Expand Up @@ -529,7 +528,9 @@ Event details: `{ cell, row, isHeaderCell, columnDataKey }`
</script>
```

## CSS Variable
## CSS Variables

### Row Background

When Row is set to sticky there's a default canvas background-color.
Use `--data-grid-row-background` to change the sticky row background-color.
Expand All @@ -556,6 +557,86 @@ Use `--data-grid-row-background` to change the sticky row background-color.
</script>
```

### Block Size

By default, cells have a fixed `block-size`. Use `--data-grid-cell-block-size` to change the cell's `block-size`.

Set it to `100%` to make the cells' height dynamic based on content.

<vwc-note connotation="information" icon="info-solid" headline="Change Announcement">

We will change the default value of `--data-grid-cell-block-size` to `100%` in a future major version of Vivid to make dynamic row heights the default behavior.

</vwc-note>

```html preview
<style>
.dynamic-height {
--data-grid-cell-block-size: 100%;
}
</style>
<vwc-data-grid>
<vwc-data-grid-row row-type="header">
<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell> Fixed height (default) </vwc-data-grid-cell>
<vwc-data-grid-cell>
<vwc-button label="Action" appearance="outlined"></vwc-button>
</vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row class="dynamic-height">
<vwc-data-grid-cell> Variable height </vwc-data-grid-cell>
<vwc-data-grid-cell>
<vwc-button
label="Action"
appearance="outlined"
size="expanded"
></vwc-button>
</vwc-data-grid-cell>
</vwc-data-grid-row>
</vwc-data-grid>
```

### White Space

By default, the cell's `white-space` is `nowrap`, which prevents text from wrapping to multiple lines.

Set the value to `normal` in combination with a `--data-grid-cell-block-size` of `100%` to allow text to wrap to multiple lines.

<vwc-note connotation="information" icon="info-solid" headline="Change Announcement">

We will change the default value of `--data-grid-cell-white-space` to `normal` in a future major version of Vivid to make dynamic row heights the default behavior.

</vwc-note>

```html preview
<style>
vwc-data-grid {
--data-grid-cell-white-space: normal;
--data-grid-cell-block-size: 100%;
}
</style>
<vwc-data-grid>
<vwc-data-grid-row row-type="header">
<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius
libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat
feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim
metus.
</vwc-data-grid-cell>
<vwc-data-grid-cell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</vwc-data-grid-cell>
</vwc-data-grid-row>
</vwc-data-grid>
```

## Dimensions

### Inline-size
Expand Down Expand Up @@ -634,12 +715,17 @@ When a cell is sorted but not according to ascending or descending algorithm, us
In order for the select popup to show correctly in the grid, use the `fixed-dropdown` attribute on the select inside grid cells.

```html preview
<style>
vwc-data-grid {
--data-grid-cell-block-size: 100%;
}
</style>
<vwc-data-grid>
<vwc-data-grid-row role="row" class="header" row-type="header">
<vwc-data-grid-cell cell-type="columnheader" role="columnheader">
data1
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader">data2</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell>
Expand Down Expand Up @@ -807,13 +893,18 @@ If your cell contains a focusable child element that you would like to delegate
If you cell contains multiple focusable elements or elements that require arrow keys to operate, combine this will `cellInternalFocusQueue` of the column definition. This will allow users to press Enter or F2 when the cell has focus to move focus into the cell and operate the elements as usual.

```html preview
<style>
vwc-data-grid {
--data-grid-cell-block-size: 100%;
}
</style>
<vwc-data-grid>
<vwc-data-grid-row row-type="header">
<vwc-data-grid-cell cell-type="columnheader">Column 1</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader">Column 2</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell>Cell 1.1</vwc-data-grid-cell>
<vwc-data-grid-cell> Cell 1.1 </vwc-data-grid-cell>
<vwc-data-grid-cell id="single-action">
<vwc-button
appearance="outlined"
Expand All @@ -823,7 +914,7 @@ If you cell contains multiple focusable elements or elements that require arrow
</vwc-data-grid-cell>
</vwc-data-grid-row>
<vwc-data-grid-row>
<vwc-data-grid-cell>Cell 2.1</vwc-data-grid-cell>
<vwc-data-grid-cell> Cell 2.1 </vwc-data-grid-cell>
<vwc-data-grid-cell id="multiple-actions">
<vwc-button
appearance="outlined"
Expand Down
12 changes: 9 additions & 3 deletions libs/components/src/lib/data-grid/data-grid-cell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@
@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
@use '../../../../shared/src/lib/sass/mixins/focus' as focus;
@use '../../../../shared/src/lib/sass/mixins/focus' as focus-variables;
@use './partials/variables' as variables;

:host {
block-size: 100%; // Only needed for older WebKit browsers
min-inline-size: 80px;
}

Expand All @@ -31,11 +33,15 @@
display: flex;
box-sizing: border-box;
align-items: center;
padding: 8px 12px;
padding: 14px 12px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding: 14px 12px;
padding: 12px;

14px is not on the 8px scale...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The value is taken from the current design in Figma. I've asked Ayala to comment on it.
However, I don't think it really matters, as changing the margin would be a breaking change and is unrelated to this ticket.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it will be a breaking change as cell has min-height of 48px, so it can be either way.
And only if its bigger then 48px then the padding make a difference.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it will be a breaking change as cell has min-height of 48px, so it can be either way.
And only if its bigger then 48px then the padding make a difference.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but I think the padding should always be the same

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AyalaBu ?

Copy link
Contributor

@AyalaBu AyalaBu Mar 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the padding should be left 14px

border-bottom: 1px solid var(#{constants.$vvd-color-neutral-300});
block-size: #{size.$vvd-size-expanded};
block-size: var(
#{variables.$data-grid-cell-block-size},
#{size.$vvd-size-expanded}
);
color: var(#{appearance.get-appearance-token(text)});
font: var(#{constants.$vvd-typography-base});
min-block-size: #{size.$vvd-size-expanded};

:host(:focus-visible) & {
#{focus-variables.$focus-stroke-gap-color}: transparent;
Expand All @@ -58,7 +64,7 @@ slot {
overflow: hidden;
inline-size: 100%;
text-overflow: ellipsis;
white-space: nowrap;
white-space: var(#{variables.$data-grid-cell-white-space}, nowrap);
}

.header-icon {
Expand Down
2 changes: 2 additions & 0 deletions libs/components/src/lib/data-grid/partials/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
$data-grid-row-background: --data-grid-row-background;
$data-grid-cell-block-size: --data-grid-cell-block-size;
$data-grid-cell-white-space: --data-grid-cell-white-space;
Loading