diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx index 425663abda21..ece28e821615 100644 --- a/packages/react/src/components/RadioTile/RadioTile.tsx +++ b/packages/react/src/components/RadioTile/RadioTile.tsx @@ -85,7 +85,7 @@ export interface RadioTileProps { /** * @deprecated please use `decorator` instead. - * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component + * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioTile` component */ slug?: React.ReactNode; diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js index 6165a150f0c2..e409622af6b8 100644 --- a/packages/react/src/components/Tile/Tile.stories.js +++ b/packages/react/src/components/Tile/Tile.stories.js @@ -154,11 +154,7 @@ export const ClickableWithLayer = () => ( export const Selectable = (args) => { return ( - + Selectable ); diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx index 136a22fc967f..a1829d9fe814 100644 --- a/packages/react/src/components/Tile/Tile.tsx +++ b/packages/react/src/components/Tile/Tile.tsx @@ -46,7 +46,7 @@ export interface TileProps extends HTMLAttributes { /** * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid - * when `slug` prop is present + * when an AILabel is present */ hasRoundedCorners?: boolean; @@ -112,7 +112,7 @@ Tile.propTypes = { /** * **Experimental**: Specify if the `Tile` component should be rendered with rounded corners. Only valid - * when `slug` prop is present + * when an AILabel is present */ hasRoundedCorners: PropTypes.bool, diff --git a/packages/web-components/src/components/ai-label/ai-label-story.scss b/packages/web-components/src/components/ai-label/ai-label-story.scss index 10b267f6dcd5..cdee4f6a8fce 100644 --- a/packages/web-components/src/components/ai-label/ai-label-story.scss +++ b/packages/web-components/src/components/ai-label/ai-label-story.scss @@ -56,64 +56,6 @@ div #{$prefix}-selectable-tile::-moz-list-bullet { margin-block-end: $spacing-05; } -.ai-label-tile-container { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - - #{$prefix}-expandable-tile, - #{$prefix}-selectable-tile, - #{$prefix}-clickable-tile, - #{$prefix}-tile { - margin-block-end: $spacing-09; - margin-inline-end: $spacing-09; - max-inline-size: 320px; - } - - #{$prefix}-expandable-tile, - #{$prefix}-selectable-tile .tile-container, - #{$prefix}-clickable-tile .tile-container, - #{$prefix}-tile { - padding-block-end: 90px; - } -} - -.ai-label-tile-container h4 { - margin-block-end: $spacing-05; -} - -.ai-label-tile-container .ai-data { - display: flex; - padding: $spacing-05 0; - margin-block-start: $spacing-05; -} - -.ai-label-tile-container .data-container { - inline-size: 126px; -} - -.ai-label-tile-container .data-container:first-of-type { - margin-inline-end: $spacing-05; -} - -.ai-label-tile-container p { - @include type-style('body-01'); -} - -.ai-label-tile-container .data-container p { - @include type-style('label-02'); -} - -.ai-label-tile-container #{$prefix}-tile-below-the-fold-content { - padding-block-start: $spacing-05; -} - -.ai-label-tile-container #{$prefix}-tile-below-the-fold-content p { - @include type-style('label-01'); - - margin: $spacing-03 0 50px; -} - #{$prefix}-radio-button-group:not(:first-of-type), #{$prefix}-checkbox-group:not(:first-of-type) { margin-block-start: $spacing-07; diff --git a/packages/web-components/src/components/ai-label/ai-label.ts b/packages/web-components/src/components/ai-label/ai-label.ts index 27b50d568316..d24012503d6e 100644 --- a/packages/web-components/src/components/ai-label/ai-label.ts +++ b/packages/web-components/src/components/ai-label/ai-label.ts @@ -24,8 +24,12 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon- */ @customElement(`${prefix}-ai-label`) export default class CDSAILabel extends CDSToggleTip { + /** + * @deprecated the slot string will be renamed to "decorator" + */ @property({ reflect: true }) slot = 'ai-label'; + /** * Specify the correct translation of the AI text */ diff --git a/packages/web-components/src/components/tile/clickable-tile.ts b/packages/web-components/src/components/tile/clickable-tile.ts index edf7c9342766..78b4e6e04e6e 100644 --- a/packages/web-components/src/components/tile/clickable-tile.ts +++ b/packages/web-components/src/components/tile/clickable-tile.ts @@ -15,21 +15,7 @@ import CDSLink from '../link/link'; import { TILE_COLOR_SCHEME } from './defs'; import styles from './tile.scss?lit'; import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; - -// To Do: Replace with an an icon from `@carbon/icons` -// since the hollow AI Label in `ClickableTile` is not interactive -const aiLabelIcon = html` - - -`; +import AILabel24 from '@carbon/icons/lib/ai-label/24.js'; /** * Clickable tile. * @@ -51,6 +37,8 @@ class CDSClickableTile extends CDSLink { /** * The color scheme. + * + * @default */ @property({ attribute: 'color-scheme', reflect: true }) colorScheme = TILE_COLOR_SCHEME.REGULAR; @@ -68,7 +56,7 @@ class CDSClickableTile extends CDSLink { @property({ type: Boolean, attribute: 'has-rounded-corners' }) hasRoundedCorners = false; - @property({ type: Boolean }) + @property({ type: Boolean, attribute: 'ai-label' }) aiLabel = false; /** @@ -96,7 +84,11 @@ class CDSClickableTile extends CDSLink { */ protected _renderInner() { return html` - ${super._renderInner()} ${this.aiLabel || this.slug ? aiLabelIcon : ''} + ${super._renderInner()} + ${this.aiLabel || this.slug + ? AILabel24({ class: `${prefix}--tile--ai-label-icon` }) + : ''} + `; } diff --git a/packages/web-components/src/components/tile/expandable-tile.ts b/packages/web-components/src/components/tile/expandable-tile.ts index a919a56a30a7..b815c5e705b7 100644 --- a/packages/web-components/src/components/tile/expandable-tile.ts +++ b/packages/web-components/src/components/tile/expandable-tile.ts @@ -177,6 +177,7 @@ class CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) { +
`. - */ - protected _inputType = 'radio'; - /** * Handles `change` event on the `` in the shadow DOM. */ @@ -48,42 +43,58 @@ class CDSRadioTile extends SelectableTile { ); } + protected _handleKeydown = (event: KeyboardEvent) => { + if (event.key === ' ' || event.key === 'Enter') { + event.preventDefault(); + } + }; + render() { const { colorScheme, checkmarkLabel, + disabled, + hasRoundedCorners, name, selected, value, - _inputType: inputType, _handleChange: handleChange, + _handleKeydown: handleKeydown, + _hasAILabel: hasAILabel, } = this; const classes = classMap({ [`${prefix}--tile`]: true, [`${prefix}--tile--selectable`]: true, + [`${prefix}--tile--radio`]: true, + [`${prefix}--tile--disabled`]: disabled, [`${prefix}--tile--is-selected`]: selected, [`${prefix}--tile--${colorScheme}`]: colorScheme, + [`${prefix}--tile--slug-rounded`]: hasAILabel && hasRoundedCorners, }); + return html` -
`; } diff --git a/packages/web-components/src/components/tile/tile-group.ts b/packages/web-components/src/components/tile/tile-group.ts index 9c1543c73e6a..83e63f1e3258 100644 --- a/packages/web-components/src/components/tile/tile-group.ts +++ b/packages/web-components/src/components/tile/tile-group.ts @@ -22,8 +22,12 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon- const navigationDirectionForKey = { ArrowUp: NAVIGATION_DIRECTION.BACKWARD, Up: NAVIGATION_DIRECTION.BACKWARD, // IE + ArrowLeft: NAVIGATION_DIRECTION.BACKWARD, + Left: NAVIGATION_DIRECTION.BACKWARD, // IE ArrowDown: NAVIGATION_DIRECTION.FORWARD, Down: NAVIGATION_DIRECTION.FORWARD, // IE + ArrowRight: NAVIGATION_DIRECTION.FORWARD, + Right: NAVIGATION_DIRECTION.FORWARD, // IE }; /** @@ -43,6 +47,10 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { const { eventCurrentRadioTileSelection } = this .constructor as typeof CDSTileGroup; + if (target.matches(`${prefix}-ai-label`)) { + return; + } + if (!currentRadioSelection) { this.currentRadioSelection = target; } else if (currentRadioSelection !== target) { @@ -61,32 +69,6 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { ); } - private _handleSelectableClick(event) { - const { target } = event; - const { currentSelections } = this; - const { eventCurrentSelectableTilesSelection } = this - .constructor as typeof CDSTileGroup; - - if (!currentSelections.includes(target)) { - currentSelections.push(target); - } else { - currentSelections.splice(currentSelections.indexOf(target), 1); - } - (target as HTMLElement).toggleAttribute('selected'); - - this.dispatchEvent( - new CustomEvent(eventCurrentSelectableTilesSelection, { - bubbles: true, - composed: true, - detail: { - currentSelections, - }, - }) - ); - event.stopPropagation(); - event.preventDefault(); - } - /** * Click listener to ensure selectability. * @@ -97,8 +79,6 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { private _handleTileSelect(event: Event) { if (this.radioTiles.length) { this._handleRadioClick(event); - } else { - this._handleSelectableClick(event); } } @@ -176,6 +156,10 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { const { radioTiles, selectableTiles } = this; const navigationDirection = navigationDirectionForKey[key]; + if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) { + return; + } + const tiles = radioTiles.length ? radioTiles : selectableTiles; const currentIndex = [...tiles].findIndex((e) => e == target); const nextIndex = currentIndex + navigationDirection; @@ -206,6 +190,9 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to private _handleFocus = (event: KeyboardEvent) => { const { relatedTarget, target } = event as any; + if ((target as HTMLElement)?.matches(`${prefix}-ai-label`)) { + return; + } if (this.radioTiles.length) { if (!this.currentRadioSelection) { @@ -255,6 +242,11 @@ class CDSTileGroup extends HostListenerMixin(LitElement) { this.radioTiles = this.querySelectorAll( (this.constructor as typeof CDSTileGroup).selectorRadioTile ); + this.radioTiles.forEach((tile) => { + if (tile.selected) { + this.currentRadioSelection = tile; + } + }); } if (!this.selectableTiles) { diff --git a/packages/web-components/src/components/tile/tile-story.scss b/packages/web-components/src/components/tile/tile-story.scss index d72b254b4aa2..b869002ba7cf 100644 --- a/packages/web-components/src/components/tile/tile-story.scss +++ b/packages/web-components/src/components/tile/tile-story.scss @@ -54,8 +54,8 @@ div #{$prefix}-selectable-tile::-moz-list-bullet { } #{$prefix}-expandable-tile, - #{$prefix}-selectable-tile .tile-container, - #{$prefix}-clickable-tile .tile-container, + #{$prefix}-selectable-tile::part(link), + #{$prefix}-clickable-tile::part(link), #{$prefix}-tile { padding-block-end: 90px; } @@ -65,6 +65,10 @@ div #{$prefix}-selectable-tile::-moz-list-bullet { margin-block-end: $spacing-05; } +.ai-label-tile-container .bold { + font-weight: 600; +} + .ai-label-tile-container .ai-data { display: flex; padding: $spacing-05 0; @@ -97,7 +101,22 @@ div #{$prefix}-selectable-tile::-moz-list-bullet { margin: $spacing-03 0 50px; } -#{$prefix}-radio-button-group:not(:first-of-type), -#{$prefix}-checkbox-group:not(:first-of-type) { - margin-block-start: $spacing-07; +#{$prefix}-selectable-tile { + margin-block-end: $spacing-05; +} + +.ai-label-selectable-tile-container #{$prefix}-tile-group > div { + display: flex; +} + +.ai-label-selectable-tile-container #{$prefix}-tile-group > div > * { + inline-size: 33%; +} + +.ai-label-selectable-tile-container #{$prefix}-tile-group #{$prefix}-radio-tile, +.ai-label-selectable-tile-container + #{$prefix}-tile-group + #{$prefix}-selectable-tile { + block-size: 200px; + margin-inline-end: $spacing-05; } diff --git a/packages/web-components/src/components/tile/tile.scss b/packages/web-components/src/components/tile/tile.scss index 886ed1e1c058..fb39910d0ac1 100644 --- a/packages/web-components/src/components/tile/tile.scss +++ b/packages/web-components/src/components/tile/tile.scss @@ -11,8 +11,8 @@ $css--plex: true !default; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/utilities/focus-outline' as *; @use '@carbon/styles/scss/motion' as *; +@use '../link/link'; @use '@carbon/styles/scss/components/tile/index' as *; -@use '@carbon/styles/scss/components/link/index' as *; @use '@carbon/styles/scss/components/form/index' as *; @use '@carbon/styles/scss/utilities/ai-gradient' as *; @use '@carbon/styles/scss/theme' as *; @@ -45,6 +45,10 @@ $css--plex: true !default; .#{$prefix}--link--disabled { display: block; + padding: density('padding-inline'); + background-color: $layer; + color: $text-disabled; + cursor: not-allowed; } .#{$prefix}--tile { @@ -64,10 +68,12 @@ $css--plex: true !default; } } - &:hover { - .#{$prefix}--tile--clickable { - color: inherit; - } + .#{$prefix}--link__icon { + display: block; + } + + ::slotted([slot='icon']) { + @extend .#{$prefix}--tile--icon; } ::slotted(#{$prefix}-ai-label), @@ -79,10 +85,15 @@ $css--plex: true !default; :host(#{$prefix}-radio-tile) { @include emit-layout-tokens(); + position: relative; display: block; margin-block-end: $spacing-03; outline: none; + + .#{$prefix}--tile { + block-size: 100%; + } } :host(#{$prefix}-selectable-tile) { @@ -90,9 +101,13 @@ $css--plex: true !default; position: relative; - display: content; + display: block; outline: none; + .#{$prefix}--tile { + block-size: 100%; + } + .#{$prefix}--tile__chevron { @extend .#{$prefix}--tile__chevron; } @@ -107,8 +122,9 @@ $css--plex: true !default; } } +:host(#{$prefix}-radio-tile) ::slotted(:not([slot])), :host(#{$prefix}-clickable-tile) ::slotted(*), -:host(#{$prefix}-selectable-tile) ::slotted(*) { +:host(#{$prefix}-selectable-tile) ::slotted(:not([slot])) { position: relative; z-index: 1; cursor: pointer; @@ -119,6 +135,10 @@ $css--plex: true !default; @extend .#{$prefix}--tile--expandable; @include emit-layout-tokens(); + ::slotted(#{$prefix}-tile-above-the-fold-content) { + display: block; + } + ::slotted(#{$prefix}-tile-below-the-fold-content) { @extend .#{$prefix}--tile-content__below-the-fold; } @@ -152,6 +172,10 @@ $css--plex: true !default; } } +:host(#{$prefix}-expandable-tile:not([with-interactive]):focus-within) { + @include focus-outline('outline'); +} + :host(#{$prefix}-expandable-tile:not([with-interactive])) { .#{$prefix}--tile__chevron { border: none; @@ -170,7 +194,8 @@ $css--plex: true !default; :host(#{$prefix}-tile[ai-label]), :host(#{$prefix}-expandable-tile[ai-label]), :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile, -:host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile { +:host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile, +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile { @include ai-popover-gradient('default', 0, 'layer'); border: 1px solid transparent; @@ -182,7 +207,9 @@ $css--plex: true !default; :host(#{$prefix}-tile), :host(#{$prefix}-expandable-tile), :host(#{$prefix}-clickable-tile), -:host(#{$prefix}-selectable-tile) { +:host(#{$prefix}-selectable-tile), +:host(#{$prefix}-radio-tile) { + ::slotted([slot='decorator']), ::slotted(#{$prefix}-ai-label), ::slotted(#{$prefix}-slug) { position: absolute; @@ -191,15 +218,21 @@ $css--plex: true !default; } } +:host(#{$prefix}-radio-tile[selected]) ::slotted([slot='decorator']), +:host(#{$prefix}-radio-tile[selected]) ::slotted(#{$prefix}-ai-label), +:host(#{$prefix}-selectable-tile) ::slotted([slot='decorator']), :host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-ai-label), :host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-slug) { inset-inline-end: $spacing-08; + transition: inset-inline-end $duration-fast-02 motion(standard, productive); } :host(#{$prefix}-expandable-tile[ai-label]):hover { @include ai-popover-gradient('default', 0, 'layer'); } +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::before, +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::after, :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::before, :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::after, :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile::before { @@ -214,6 +247,7 @@ $css--plex: true !default; transition: opacity $duration-fast-02 motion(standard, productive); } +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::before, :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::before, :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile::before { @include ai-popover-gradient('hover', 0, 'layer'); @@ -221,11 +255,13 @@ $css--plex: true !default; box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow; } +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile:hover::before, :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile:hover::before, :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile:hover::before { opacity: 1; } +:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile--is-selected, :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile--is-selected { border: 1px solid $layer-selected-inverse; .#{$prefix}--tile__checkmark { @@ -233,6 +269,7 @@ $css--plex: true !default; } } +:host(#{$prefix}-radio-tile[ai-label]), :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile--is-selected::after { @include ai-popover-gradient('selected', 0, 'layer'); @@ -247,7 +284,8 @@ $css--plex: true !default; :host(#{$prefix}-tile[ai-label][has-rounded-corners]), :host(#{$prefix}-expandable-tile[ai-label][has-rounded-corners]), :host(#{$prefix}-clickable-tile[ai-label][has-rounded-corners]), -:host(#{$prefix}-selectable-tile[ai-label][has-rounded-corners]) { +:host(#{$prefix}-selectable-tile[ai-label][has-rounded-corners]), +:host(#{$prefix}-radio-tile[ai-label][has-rounded-corners]) { @extend .#{$prefix}--tile--slug-rounded; .#{$prefix}--tile__chevron { diff --git a/packages/web-components/src/components/tile/tile.stories.ts b/packages/web-components/src/components/tile/tile.stories.ts index d253b31c207c..393f1c685e45 100644 --- a/packages/web-components/src/components/tile/tile.stories.ts +++ b/packages/web-components/src/components/tile/tile.stories.ts @@ -9,13 +9,15 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { TILE_COLOR_SCHEME } from './tile'; import View16 from '@carbon/icons/lib/view/16.js'; import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js'; import Folders16 from '@carbon/icons/lib/folders/16.js'; +import ArrowRight16 from '@carbon/icons/lib/arrow--right/16.js'; +import Launch16 from '@carbon/icons/lib/launch/16.js'; import './index'; import '../ai-label'; import '../icon-button'; +import '../link'; import storyDocs from './tile.mdx'; import styles from './tile-story.scss?lit'; import '../../../.storybook/templates/with-layer'; @@ -51,155 +53,78 @@ const actions = html` View details `; -const colorSchemes = { - [`Regular`]: null, - [`Light (${TILE_COLOR_SCHEME.LIGHT})`]: TILE_COLOR_SCHEME.LIGHT, -}; - -const defaultArgs = { - checkmarkLabel: '', - colorScheme: null, - name: 'selectable-tile', - value: '', - onInput: 'input', -}; - -const colorSchemeControl = { - colorScheme: { - control: 'select', - description: 'Color scheme (color-scheme)', - options: colorSchemes, - }, -}; - -const defaultHref = { - href: 'https://example.com', -}; - -const hrefControl = { - href: { - control: 'text', - description: 'Href for clickable UI (href)', - }, -}; - -const radioControls = { - checkmarkLabel: { - control: 'text', - description: 'Label text for the checkmark icon (checkmark-label)', - }, - ...colorSchemeControl, - name: { - control: 'text', - description: 'Name (name)', - }, - value: { - control: 'text', - description: 'Value (value)', +const defaultControls = { + args: { + disabled: false, }, - onInput: { - action: `input`, - table: { - disable: true, + argTypes: { + disabled: { + control: 'boolean', }, }, }; -const multiSelectableControls = { - ...radioControls, - selected: { - control: 'boolean', - description: 'Selected (selected)', - }, -}; - -const expandableArgs = { - colorScheme: null, - expanded: false, - disableChange: false, - onBeforeChange: 'cds-expandable-tile-beingchanged', - onChange: 'cds-expandable-tile-changed', +export const Default = { + render: () => html` + + Default tile +
+
+ Link + + `, }; -const expandableControls = { - ...colorSchemeControl, - expanded: { - control: 'boolean', - description: 'Expanded (expanded)', - }, - disableChange: { - control: 'boolean', - description: - 'Disable user-initiated change in expanded state (Call event.preventDefault() in cds-expandable-tile-beingchanged event)', - }, - onBeforeChange: { - action: 'cds-expandable-tile-beingchanged', - table: { - disable: true, - }, - }, - onChange: { - action: 'cds-expandable-tile-changed', - table: { - disable: true, - }, - }, +export const DefaultWithLayer = { + render: () => html` + + + Default layer +
+
+ Link + + + `, }; export const clickable = { - args: defaultHref, - argTypes: hrefControl, - render: ({ href }) => html` - + ...defaultControls, + render: ({ disabled }) => html` + Clickable tile `, }; -export const ClickableWithLayer = { - args: defaultHref, - argTypes: hrefControl, - render: ({ href }) => html` - - - Clickable tile +export const clickableWithCustomIcon = { + ...defaultControls, + render: ({ disabled }) => html` + + Clickable tile + ${Launch16({ slot: 'icon' })} + + + `, }; -export const Default = { - argTypes: colorSchemeControl, - render: ({ colorScheme }) => html` - - Default tile - Link - - `, -}; - -export const DefaultWithLayer = { - argTypes: colorSchemeControl, - render: ({ colorScheme }) => html` +export const ClickableWithLayer = { + render: () => html` - - Default layer - Link - + + Clickable tile + `, }; export const expandable = { - args: expandableArgs, - argTypes: expandableControls, - render: ({ - colorScheme, - expanded, - disableChange, - onBeforeChange, - onChange, - }) => { + render: ({ expanded, disableChange, onBeforeChange, onChange }) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -207,34 +132,27 @@ export const expandable = { } }; return html` - - - Above the fold content here - - - Below the fold content here - - +
+ + + Above the fold content here + + + Below the fold content here + + +
`; }, }; export const ExpandableWithInteractive = { - args: expandableArgs, - argTypes: expandableControls, - render: ({ - colorScheme, - expanded, - disableChange, - onBeforeChange, - onChange, - }) => { + render: ({ expanded, disableChange, onBeforeChange, onChange }) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -242,37 +160,32 @@ export const ExpandableWithInteractive = { } }; return html` - - - Above the fold content here -
- Example -
- - - Below the fold content here - - - +
+ + + Above the fold content here +
+ Example +
+ + + Below the fold content here + + + +
`; }, }; export const ExpandableWithLayer = { - render: ({ - colorScheme, - expanded, - disableChange, - onBeforeChange, - onChange, - }) => { + render: ({ expanded, disableChange, onBeforeChange, onChange }) => { const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -283,16 +196,15 @@ export const ExpandableWithLayer = { + style="height: 100px"> Above the fold content here - + Below the fold content here @@ -302,42 +214,44 @@ export const ExpandableWithLayer = { }; export const MultiSelect = { - args: defaultArgs, - argTypes: multiSelectableControls, + ...defaultControls, render: ({ checkmarkLabel, - colorScheme, + disabled, name, selected, value, onInput, }) => html` + + @input="${onInput}" + ?disabled=${disabled}> Option 1 + @input="${onInput}" + ?disabled=${disabled}> Option 2 + @input="${onInput}" + ?disabled=${disabled}> Option 3 @@ -345,33 +259,30 @@ export const MultiSelect = { }; export const Radio = { - args: defaultArgs, - argTypes: radioControls, - render: ({ checkmarkLabel, colorScheme, name, value, onInput }) => html` + ...defaultControls, + render: ({ checkmarkLabel, disabled, name, value }) => html` Radio tile group + ?disabled=${disabled}> Option 1 + ?disabled=${disabled} + selected> Option 2 + ?disabled=${disabled}> Option 3 @@ -383,23 +294,23 @@ export const RadioWithLayer = { Radio tile group - Option 1 - Option 2 + Option 1 + Option 2 `, }; export const Selectable = { - render: () => html` - Default tile + ...defaultControls, + render: (args) => html` + + Selectable + `, }; export const WithAILabel = { - args: { - hasRoundedCorners: false, - }, argTypes: { hasRoundedCorners: { control: 'boolean', @@ -429,7 +340,7 @@ export const WithAILabel = {
- + ${content}${actions} @@ -438,6 +349,7 @@ export const WithAILabel = { href="https://example.com" ai-label ?has-rounded-corners="${hasRoundedCorners}"> + ${ArrowRight16({ slot: 'icon' })}

Title

@@ -457,29 +369,6 @@ export const WithAILabel = {

- -
-

Title

-

- Lorem ipsum dolor sit amet consectetur. Posuere duis fermentum sit - at consectetur turpis mauris gravida penatibus. -

-
-
-

Data Quality

-

85%

-
-
-

Label text

-

16%

-
-
-
- - ${content}${actions} - - @@ -513,7 +402,68 @@ export const WithAILabel = { ${content}${actions} - `; + +
+ + Selectable tile group +
+ + Option 1 + + ${content}${actions} + + + + Option 2 + + ${content}${actions} + + + + Option 3 + + ${content}${actions} + +
+ +
+
+ + Radio tile group +
+ + Option 1 + + ${content}${actions} + + + + Option 2 + + ${content}${actions} + + + + Option 3 + + ${content}${actions} + +
+ +
`; }, }; diff --git a/packages/web-components/src/components/tile/tile.ts b/packages/web-components/src/components/tile/tile.ts index 3054432fc6ba..2233b68b1842 100644 --- a/packages/web-components/src/components/tile/tile.ts +++ b/packages/web-components/src/components/tile/tile.ts @@ -54,6 +54,8 @@ class CDSTile extends LitElement { /** * The color scheme. + * + * @deprecated */ @property({ attribute: 'color-scheme', reflect: true }) colorScheme = TILE_COLOR_SCHEME.REGULAR; @@ -66,14 +68,6 @@ class CDSTile extends LitElement { hasRoundedCorners = false; updated() { - const anchorTag = this.querySelector('a'); - - if (anchorTag) { - anchorTag?.classList.add(`${prefix}--link`); - anchorTag.before(document.createElement('br')); - anchorTag.before(document.createElement('br')); - } - if (this._hasAILabel) { this.setAttribute('ai-label', ''); } else { @@ -83,14 +77,15 @@ class CDSTile extends LitElement { render() { return html` + `; } /** * A selector that will return the slug item. * - * remove in v12 + * TODO: remove in v12 */ static get slugItem() { return `${prefix}-slug`;