From 3d44502d076f03cf8518b06232449236921309eb Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Mon, 12 Feb 2024 09:38:54 -0800 Subject: [PATCH] feat(data-table): ai updates --- .../components/data-table/_table-core.scss | 96 ++++++++++++------- .../data-table/_table-expandable.scss | 44 ++++++++- .../data-table/_table-selection.scss | 29 ++++-- .../components/data-table/_table-sort.scss | 12 ++- .../data-table/table-expanded-row.ts | 8 +- .../data-table/table-header-cell.ts | 4 +- .../src/components/data-table/table.ts | 24 +++++ .../src/components/slug/slug-story.scss | 1 - .../src/components/slug/slug-story.ts | 4 +- 9 files changed, 168 insertions(+), 54 deletions(-) diff --git a/packages/carbon-web-components/src/components/data-table/_table-core.scss b/packages/carbon-web-components/src/components/data-table/_table-core.scss index 355a4ecf08b..abb2ae8d2c5 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-core.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-core.scss @@ -87,7 +87,9 @@ :host(#{$prefix}-table-header-cell[slug]), :host(#{$prefix}-table-header-cell[slug]) .#{$prefix}--table-sort { - @include ai-gradient('top', 100%); + @include ai-table-gradient(); + + box-shadow: inset 0 1px $ai-border-strong; } :host(#{$prefix}-table-header-cell[sticky-header]) { @@ -103,14 +105,14 @@ padding-block-start: rem(14px); } -:host(#{$prefix}-table-header-cell[slug]) { +:host(#{$prefix}-table-header-cell[slug]:not([is-sortable])) { .#{$prefix}--table-header-label--slug { display: flex; align-items: center; } ::slotted(#{$prefix}-slug) { - margin-inline-start: $spacing-03; + margin-inline-start: auto; } } @@ -222,26 +224,6 @@ } } -:host(#{$prefix}-table-header-row[rows-with-slug]) { - .#{$prefix}--table-column-checkbox, - .#{$prefix}--table-expand { - padding-inline-start: $spacing-08; - } -} -:host(#{$prefix}-table-header-row[rows-with-slug]), -:host(#{$prefix}-table-row[rows-with-slug]) { - #{$prefix}-checkbox { - padding-inline-start: $spacing-03; - } -} - -:host(#{$prefix}-table-header-row[rows-with-slug][selection-name][expandable]), -:host(#{$prefix}-table-row[rows-with-slug][selection-name][expandable]) { - .#{$prefix}--table-column-checkbox { - padding-inline-start: 0; - } -} - // // Table row // @@ -271,7 +253,6 @@ :host(#{$prefix}-table-cell) { padding: 0 $spacing-05; border-block-end: 1px solid $border-subtle; - border-block-start: 1px solid $layer-01; ::slotted(#{$prefix}-overflow-menu:hover) { background-color: none; @@ -284,6 +265,10 @@ } } +:host(#{$prefix}-table-cell[slug-in-header]) { + @include ai-table-gradient; +} + :host(#{$prefix}-table-cell-content) { @include type-style('label-01'); @@ -335,7 +320,6 @@ .#{$prefix}--table-expand { display: table-cell; border-block-end: 1px solid $border-subtle; - border-block-start: 1px solid $layer-01; padding-inline-end: 0; transition: transform $duration-moderate-01 motion(standard, productive); } @@ -398,10 +382,12 @@ :host(#{$prefix}-table-row[selection-name][expandable][highlighted]), :host(#{$prefix}-table-row[expandable]:hover), :host(#{$prefix}-table-row[selection-name][expandable]:hover) { - ::slotted(#{$prefix}-table-cell), - .#{$prefix}--table-expand, - .#{$prefix}--table-column-checkbox { - border-block-end-color: $border-subtle; + &:not([slug]) { + ::slotted(#{$prefix}-table-cell), + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox { + border-block-end-color: $border-subtle; + } } } @@ -421,7 +407,6 @@ ::slotted(#{$prefix}-table-cell-skeleton) { background-color: $layer-accent-01; border-block-end: 1px solid $layer-accent-01; - border-block-start: 1px solid $layer-accent-01; } } @@ -448,26 +433,65 @@ ::slotted(#{$prefix}-table-cell-skeleton) { background-color: $background-hover; border-block-end: 1px solid $layer-hover-01; - border-block-start: 1px solid $layer-hover-01; } } +//aligns selection and expansion with slug :host(#{$prefix}-table-row[rows-with-slug]) { - .#{$prefix}--table-column-checkbox, + #{$prefix}-checkbox, + #{$prefix}-radio-button { + padding-inline-start: 2rem; + } + + .#{$prefix}--table-expand { + padding-inline-start: $spacing-05; + } + + .#{$prefix}--table-expand__button { + margin-inline-start: $spacing-06; + } + + &[slug] { + #{$prefix}-checkbox, + #{$prefix}-radio-button { + padding-inline-start: $spacing-05; + } + + .#{$prefix}--table-expand__button { + margin-inline-start: $spacing-03; + } + } +} + +// alighs header with selection and expansion items +:host(#{$prefix}-table-header-row[rows-with-slug]) { .#{$prefix}--table-expand { padding-inline-start: $spacing-08; } + .#{$prefix}--table-column-checkbox { + padding-inline-start: $spacing-09; + } +} - ::slotted(#{$prefix}-slug) { - padding: 0 $spacing-03; - margin-inline-start: -$spacing-07; +:host(#{$prefix}-table-header-row[rows-with-slug][selection-name][expandable]), +:host(#{$prefix}-table-row[rows-with-slug][selection-name][expandable]) { + .#{$prefix}--table-column-checkbox { + padding-inline-start: 0; + } + #{$prefix}-checkbox { + padding-inline-start: $spacing-03; } } :host(#{$prefix}-table-row[slug]) { - @include ai-gradient('left', 50%); + @include ai-table-gradient(); background-attachment: fixed; + box-shadow: inset 1px 0 $ai-border-strong; + + &:hover { + @include ai-table-gradient('hover'); + } } :host(#{$prefix}-table-header-title) { diff --git a/packages/carbon-web-components/src/components/data-table/_table-expandable.scss b/packages/carbon-web-components/src/components/data-table/_table-expandable.scss index 3e03b86c913..1cd8b1a9d3f 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-expandable.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-expandable.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2020, 2023 +// Copyright IBM Corp. 2020, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -68,3 +68,45 @@ :host(#{$prefix}-table-expanded-row[selected][highlighted]) { background-color: $layer-selected; } + +:host(#{$prefix}-table-row[slug][expandable][selection-name][selected]), +:host(#{$prefix}-table-row[slug][expandable]) { + &:hover, + &[highlighted] { + @include ai-table-gradient('hover'); + + ::slotted(#{$prefix}-table-cell), + ::slotted(#{$prefix}-table-cell-skeleton), + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox { + background: none; + } + + .#{$prefix}--table-expand { + border-block-end-color: transparent; + } + } + + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox, + ::slotted(#{$prefix}-table-cell), + ::slotted(#{$prefix}-table-cell-skeleton) { + background: none; + } + + .#{$prefix}--table-expand { + border-block-end-color: transparent; + } +} + +:host(#{$prefix}-table-expanded-row[slug]) { + @include ai-table-gradient(); + + td { + padding-inline-start: to-rem(88px); + } + + &[highlighted] { + @include ai-table-gradient('hover'); + } +} diff --git a/packages/carbon-web-components/src/components/data-table/_table-selection.scss b/packages/carbon-web-components/src/components/data-table/_table-selection.scss index c7a66c067e8..ee48d4d6d8e 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-selection.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-selection.scss @@ -24,7 +24,6 @@ :host(#{$prefix}-table-row) { .#{$prefix}--table-column-checkbox { border-block-end: 1px solid $border-subtle; - border-block-start: 1px solid $layer-01; padding-inline: $spacing-05 $spacing-02; .#{$prefix}--checkbox-label { @@ -50,7 +49,6 @@ background-color: $layer-accent-01; // bottom border acts as separator from other rows border-block-end: 1px solid $layer-active; - border-block-start: 1px solid $border-subtle-01; color: $text-primary; } @@ -72,14 +70,29 @@ display: none !important; } -:host(#{$prefix}-table-row[selected][slug]) { +:host(#{$prefix}-table-expanded-row[selected][slug]:not([highlighted])), +:host(#{$prefix}-table-row[selected][slug]), +:host(#{$prefix}-table-row[expandable][selected][slug]) { + @include ai-table-gradient('selected'); + + &[highlighted], + &:hover { + @include ai-table-gradient('hover'); + + /* stylelint-disable-next-line no-duplicate-selectors */ + .#{$prefix}--table-column-checkbox, + ::slotted(#{$prefix}-table-cell), + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox { + background: none; + } + } + + /* stylelint-disable-next-line no-duplicate-selectors */ + .#{$prefix}--table-column-checkbox, ::slotted(#{$prefix}-table-cell), .#{$prefix}--table-expand, .#{$prefix}--table-column-checkbox { - background-color: transparent; + background: none; } } - -:host(#{$prefix}-table-row[selected][rows-with-slug]) { - background-color: $layer-selected; -} diff --git a/packages/carbon-web-components/src/components/data-table/_table-sort.scss b/packages/carbon-web-components/src/components/data-table/_table-sort.scss index e236c2d35cc..374156490b3 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-sort.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-sort.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -57,8 +57,14 @@ transform: rotate(180deg); } -:host(#{$prefix}-table-header-cell[sort-direction]) { +// places slug near sorting icon in header +:host(#{$prefix}-table-header-cell[sort-direction][slug]) { + .#{$prefix}--table-sort__icon-unsorted, + .#{$prefix}--table-sort__icon { + margin-inline: auto $spacing-03; + } + ::slotted(#{$prefix}-slug) { - margin-inline: $spacing-03 auto; + margin-inline-end: $spacing-03; } } diff --git a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts index 2fb50a7c520..ce045e551da 100644 --- a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts +++ b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -81,6 +81,12 @@ class CDSTableExpandedRow extends HostListenerMixin(LitElement) { `; } + updated() { + this.previousElementSibling?.hasAttribute('slug') + ? this.setAttribute('slug', '') + : this.removeAttribute('slug'); + } + /** * A selector that will return the previous sibling row. */ diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts index 850213344e5..d46501f02eb 100644 --- a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts +++ b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts @@ -215,16 +215,16 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { `; diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts index b71627532a3..1f276b014c1 100644 --- a/packages/carbon-web-components/src/components/data-table/table.ts +++ b/packages/carbon-web-components/src/components/data-table/table.ts @@ -779,6 +779,30 @@ class CDSTable extends HostListenerMixin(LitElement) { row.removeAttribute('rows-with-slug'); }); } + + // Gets table header info to add to the column cells for styles + const headersWithSlug = [] as any; + + Array.prototype.slice + .call(this._tableHeaderRow.children) + .forEach((headerCell, index) => { + if (headerCell.querySelector(`${prefix}-slug`)) { + headerCell.setAttribute('slug', ''); + headersWithSlug.push(index); + } else { + headerCell.removeAttribute('slug'); + } + }); + + this._tableRows.forEach((row) => { + Array.prototype.slice + .call((row as HTMLElement).children) + .forEach((cell, index) => { + headersWithSlug.includes(index) + ? cell.setAttribute('slug-in-header', '') + : cell.removeAttribute('slug-in-header'); + }); + }); } /* eslint-disable no-constant-condition */ diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss index c920c771d11..9490b7f26a6 100644 --- a/packages/carbon-web-components/src/components/slug/slug-story.scss +++ b/packages/carbon-web-components/src/components/slug/slug-story.scss @@ -26,7 +26,6 @@ align-items: center; justify-content: center; margin: 0; - block-size: calc(100vh - 84px); inline-size: calc(100vw - 84px); } diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts index 0906d2d67a2..2d62a5c131d 100644 --- a/packages/carbon-web-components/src/components/slug/slug-story.ts +++ b/packages/carbon-web-components/src/components/slug/slug-story.ts @@ -246,7 +246,7 @@ Playground.parameters = { }, }; -export const Test = (args) => { +export const Callout = (args) => { const { alignment, showActions } = args?.[`${prefix}-slug`] ?? {}; return html`