Date: Fri, 15 Dec 2023 13:23:31 -0800
Subject: [PATCH 4/4] chore(merge): conflict from cwc-2.1.0 (#11237)
### Related Ticket(s)
Closes # {{Provide issue number link(s) to the related ticket(s) that this pull request addresses}}
### Description
{{Add a human-readable description / detail summary of what the PR is changing and any details around how and why}}
{{If applicable, include a screenshot indicating an example or examples of what the PR is changing in the application}}
### Changelog
**New**
- {{new thing}}
**Changed**
- {{changed thing}}
**Removed**
- {{removed thing}}
---
.github/workflows/ci-check.yml | 4 +-
.../components/data-table/_table-core.scss | 74 +++
.../data-table/_table-selection.scss | 13 +
.../components/data-table/_table-sizes.scss | 7 -
.../components/data-table/_table-sort.scss | 7 +
.../src/components/data-table/data-table.scss | 1 +
.../data-table/table-header-cell.ts | 96 ++-
.../src/components/data-table/table-row.ts | 76 ++-
.../src/components/data-table/table.ts | 18 +
.../components/slug/slug-data-table-story.ts | 600 ++++++++++++++++++
.../src/components/slug/slug-example-story.ts | 62 ++
.../src/components/slug/slug-story.scss | 4 +
.../src/components/slug/slug.scss | 201 ++++++
.../src/components/tag/tag-story.ts | 6 +-
.../src/components/tag/tag.scss | 4 +
.../src/components/tag/tag.ts | 44 +-
packages/web-components/package.json | 2 +-
yarn.lock | 2 +-
18 files changed, 1154 insertions(+), 67 deletions(-)
create mode 100644 packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml
index 4b76321ede7..17a05743e5e 100644
--- a/.github/workflows/ci-check.yml
+++ b/.github/workflows/ci-check.yml
@@ -2,9 +2,9 @@ name: ci-check
on:
push:
- branches: [ main, release/v2*, feat/*, fix/content-updates ]
+ branches: [ main, release/*, release-cwc/*, feat/*, fix/content-updates ]
pull_request:
- branches: [ main, release/v2*, feat/*, fix/content-updates ]
+ branches: [ main, release/*, release-cwc/*, feat/*, fix/content-updates ]
concurrency:
group: ci-check-${{ github.ref }}
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 afda21d06be..f5bdb89763e 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
@@ -70,6 +70,20 @@
:host(#{$prefix}-table-header-cell[sort-direction]) {
height: $spacing-09;
position: relative;
+
+ .#{$prefix}--table-sort__flex {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ block-size: 100%;
+ inline-size: 100%;
+ min-block-size: $spacing-09;
+ }
+}
+
+:host(#{$prefix}-table-header-cell[slug]),
+:host(#{$prefix}-table-header-cell[slug]) .#{$prefix}--table-sort {
+ @include ai-gradient('top', 100%);
}
:host(#{$prefix}-table-header-cell[sticky-header]) {
@@ -85,6 +99,17 @@
padding-top: rem(14px);
}
+:host(#{$prefix}-table-header-cell[slug]) {
+ .#{$prefix}--table-header-label--slug {
+ display: flex;
+ align-items: center;
+ }
+
+ ::slotted(#{$prefix}-slug) {
+ margin-inline-start: $spacing-03;
+ }
+}
+
//
// Common style for table cell and table header cell
//
@@ -186,6 +211,35 @@
}
}
+:host(#{$prefix}-table-header-row),
+:host(#{$prefix}-table-row) {
+ .#{$prefix}--table-column-checkbox div,
+ .#{$prefix}--table-expand div {
+ display: flex;
+ height: 100%;
+ }
+}
+
+:host(#{$prefix}-table-header-row[rows-with-slug]) {
+ .#{$prefix}--table-column-checkbox,
+ .#{$prefix}--table-expand {
+ padding-left: $spacing-08;
+ }
+}
+:host(#{$prefix}-table-header-row[rows-with-slug]),
+:host(#{$prefix}-table-row[rows-with-slug]) {
+ #{$prefix}-checkbox {
+ padding-left: $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-left: 0;
+ }
+}
+
//
// Table row
//
@@ -396,6 +450,26 @@
}
}
+:host(#{$prefix}-table-row[rows-with-slug]) {
+ ::slotted(#{$prefix}-slug) {
+ padding: 0 $spacing-03;
+ margin-left: -$spacing-07;
+ }
+}
+
+:host(#{$prefix}-table-row[rows-with-slug]) {
+ .#{$prefix}--table-column-checkbox,
+ .#{$prefix}--table-expand {
+ padding-left: $spacing-08;
+ }
+}
+
+:host(#{$prefix}-table-row[slug]) {
+ @include ai-gradient('left', 50%);
+
+ background-attachment: fixed;
+}
+
:host(#{$prefix}-table-header-title) {
@extend .#{$prefix}--data-table-header__title;
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 166915f35b7..ce07b59579f 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
@@ -71,3 +71,16 @@
:host(#{$prefix}-table-row[filtered]) {
display: none !important;
}
+
+:host(#{$prefix}-table-row[selected][slug]) {
+ .#{$prefix}--table-column-checkbox,
+ ::slotted(#{$prefix}-table-cell),
+ .#{$prefix}--table-expand,
+ .#{$prefix}--table-column-checkbox {
+ background-color: transparent;
+ }
+}
+
+:host(#{$prefix}-table-row[selected][rows-with-slug]) {
+ background-color: $layer-selected;
+}
diff --git a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
index 310452f1989..3253a9a3b95 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
@@ -185,13 +185,6 @@
//
// "selection" and "expandable" sizes
//
-:host(#{$prefix}-table-header-row[selection-name][expandable]),
-:host(#{$prefix}-table-row[selection-name][expandable]) {
- ::slotted(#{$prefix}-table-header-cell),
- ::slotted(#{$prefix}-table-cell) {
- padding-left: $spacing-03;
- }
-}
:host(#{$prefix}-table-header-row[selection-name][expandable][size='xs']),
:host(#{$prefix}-table-row[selection-name][expandable][size='xs']) {
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 2e8e85233ee..ffdb9dfa50c 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
@@ -57,3 +57,10 @@
.#{$prefix}--table-sort__icon {
transform: rotate(180deg);
}
+
+:host(#{$prefix}-table-header-cell[sort-direction]) {
+ ::slotted(#{$prefix}-slug) {
+ margin-inline-end: auto;
+ margin-inline-start: $spacing-03;
+ }
+}
diff --git a/packages/carbon-web-components/src/components/data-table/data-table.scss b/packages/carbon-web-components/src/components/data-table/data-table.scss
index bd0f26dacfa..43df227037a 100644
--- a/packages/carbon-web-components/src/components/data-table/data-table.scss
+++ b/packages/carbon-web-components/src/components/data-table/data-table.scss
@@ -14,6 +14,7 @@ $css--plex: true !default;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
@use '@carbon/styles/scss/components/checkbox';
@use '@carbon/styles/scss/components/data-table' as *;
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 1931efbe5f4..33f20c918e7 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
@@ -9,6 +9,7 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
import { prefix } from '../../globals/settings';
@@ -37,23 +38,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
* Handles `click` event on the sort button.
*
*/
- private _handleClickSortButton() {
- const nextSortDirection = this._getNextSort();
- const init = {
- bubbles: true,
- cancelable: true,
- composed: true,
- detail: {
- oldSortDirection: this.sortDirection,
- sortDirection: nextSortDirection,
- },
- };
- const constructor = this.constructor as typeof CDSTableHeaderCell;
+ private _handleClickSortButton(event) {
if (
- this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))
+ !(event.target as HTMLElement).matches(
+ (this.constructor as typeof CDSTableHeaderCell).slugItem
+ )
) {
- this.sortActive = true;
- this.sortDirection = nextSortDirection;
+ const nextSortDirection = this._getNextSort();
+ const init = {
+ bubbles: true,
+ cancelable: true,
+ composed: true,
+ detail: {
+ oldSortDirection: this.sortDirection,
+ sortDirection: nextSortDirection,
+ },
+ };
+ const constructor = this.constructor as typeof CDSTableHeaderCell;
+ if (
+ this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))
+ ) {
+ this.sortActive = true;
+ this.sortDirection = nextSortDirection;
+ }
}
}
@@ -65,6 +72,26 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
this.requestUpdate();
}
+ /**
+ * Handles `slotchange` event.
+ */
+ protected _handleSlugSlotChange({ target }: Event) {
+ const hasContent = (target as HTMLSlotElement)
+ .assignedNodes()
+ .filter((elem) =>
+ (elem as HTMLElement).matches !== undefined
+ ? (elem as HTMLElement).matches(
+ (this.constructor as typeof CDSTableHeaderCell).slugItem
+ )
+ : false
+ );
+ if (hasContent.length > 0) {
+ this._hasSlug = Boolean(hasContent);
+ (hasContent[0] as HTMLElement).setAttribute('size', 'mini');
+ }
+ this.requestUpdate();
+ }
+
/**
* @returns The next sort direction.
*/
@@ -94,6 +121,11 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
return directions[(index + 1) % directions.length];
}
+ /**
+ * `true` if there is a slug.
+ */
+ protected _hasSlug = false;
+
/**
* `true` if the table has expandable rows
*/
@@ -149,10 +181,19 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
if (this.isSortable && !changedProperties.has('sortDirection')) {
this.sortDirection = TABLE_SORT_DIRECTION.NONE;
}
+ if (this._hasSlug) {
+ this.setAttribute('slug', '');
+ } else {
+ this.removeAttribute('slug');
+ }
}
render() {
const { sortDirection } = this;
+ const labelClasses = classMap({
+ [`${prefix}--table-header-label`]: true,
+ [`${prefix}--table-header-label--slug`]: this._hasSlug,
+ });
if (sortDirection) {
const sortIcon =
sortDirection === TABLE_SORT_DIRECTION.NONE
@@ -170,14 +211,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
class="${prefix}--table-sort"
title="${this.textContent}"
@click=${this._handleClickSortButton}>
-
- ${sortIcon}
+
+
+
`;
}
- return html`
+ `;
+ }
+
+ /**
+ * A selector that will return the slug item.
+ */
+ static get slugItem() {
+ return `${prefix}-slug`;
}
/**
diff --git a/packages/carbon-web-components/src/components/data-table/table-row.ts b/packages/carbon-web-components/src/components/data-table/table-row.ts
index 76880bc1d6d..fa4902ab8b4 100644
--- a/packages/carbon-web-components/src/components/data-table/table-row.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-row.ts
@@ -32,6 +32,11 @@ import CDSTableCell from './table-cell';
*/
@customElement(`${prefix}-table-row`)
class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
+ /**
+ * `true` if there is a slug.
+ */
+ protected _hasSlug = false;
+
/**
* Handles `click` event on the radio button.
*
@@ -169,15 +174,38 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
const { _handleClickExpando: handleClickExpando } = this;
return html`
-
- ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
-
+
+
+ ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
+
+
- ${radio
- ? html`
`
- : html`
`}
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+ ${View16({ slot: 'icon' })}
+ View
+
+
+ ${FolderOpen16({ slot: 'icon' })}
+ Open folder
+
+
+ ${Folders16({ slot: 'icon' })}
+ Folders
+
+ View Literature
+`;
+
+export default {
+ title: 'Experimental/Slug/DataTable',
+};
+
+export const _ColumnSlugSort = () => {
+ return html`
+
+ DataTable
+ With expansion
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ ${content}${actions}
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ `;
+};
+
+export const _ColumnSlugWithSelectionAndExpansion = () => {
+ return html`
+
+ DataTable
+ With sorting
+
+
+
+ Name
+ Protocol
+ ${content}${actions}
+
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+};
+
+export const _SlugWithExpansion = () => {
+ return html`
+
+ DataTable
+ With sorting
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+};
+
+export const _SlugWithRadioSelection = () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ ${content}${actions}
+
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ ${content}${actions}
+
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ ${content}${actions}
+
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ `;
+};
+
+export const SlugWithSelection = () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+
+ `;
+};
+
+export const SlugWithSelectionAndExpansion = () => {
+ return html`
+
+ DataTable
+ With selection
+
+
+
+ Name
+ Protocol
+ Port
+ Rule
+ Attached groups
+ Status
+
+
+
+
+ Load Balancer 3
+ HTTP
+ 3000
+ Round robin
+ Kevin's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 1
+ HTTP
+ 443
+ Round robin
+ Maureen's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 2
+ HTTP
+ 80
+ DNS delegation
+ Andrew's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 6
+ HTTP
+ 3000
+ Round robin
+ Marc's VM Groups
+ Disabled
+
+ Expandable row content
+ Description here
+
+
+ ${content}${actions}
+ Load Balancer 4
+ HTTP
+ 443
+ Round robin
+ Mel's VM Groups
+ Starting
+
+ Expandable row content
+ Description here
+
+
+ Load Balancer 5
+ HTTP
+ 80
+ DNS delegation
+ Ronja's VM Groups
+ Active
+
+ Expandable row content
+ Description here
+
+
+
+ `;
+};
diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
index c196e0196eb..5da43c79d39 100644
--- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts
+++ b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
@@ -12,6 +12,7 @@ import { boolean } from '@storybook/addon-knobs';
import View16 from '@carbon/icons/lib/view/16';
import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
import Folders16 from '@carbon/icons/lib/folders/16';
+import Asleep16 from '@carbon/icons/lib/asleep/16';
import textNullable from '../../../.storybook/knob-text-nullable';
import { prefix } from '../../globals/settings';
import './index';
@@ -409,6 +410,67 @@ export const _Select = () => {
`;
};
+const tagTypes = [
+ 'red',
+ 'magenta',
+ 'purple',
+ 'blue',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'gray',
+ 'cool-gray',
+ 'warm-gray',
+ 'high-contrast',
+ 'outline',
+];
+
+export const _Tag = () => {
+ return html`
+
+
+ ${tagTypes.map(
+ (e) => html`Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ ${Asleep16({ slot: 'icon' })} Tag
+ ${content}${actions}
+ `
+ )}
+
+
+
+ ${tagTypes.map(
+ (e) =>
+ html`
+ ${Asleep16({ slot: 'icon' })} Tag
+ ${content}${actions}
+ `
+ )}
+
+ `;
+};
+
export const _TextInput = () => {
return html`