diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss index 417a1a41593..a83755f690b 100644 --- a/packages/styles/scss/components/link-list/_link-list.scss +++ b/packages/styles/scss/components/link-list/_link-list.scss @@ -183,34 +183,6 @@ } } } - - :host(#{$dds-prefix}-link-list-item).#{$prefix}--link-list-item__end { - .#{$prefix}--link-with-icon { - outline: none; - } - } - - .#{$dds-prefix}-ce--link-list__list--end { - ::slotted(#{$dds-prefix}-link-list-item), - ::slotted(#{$dds-prefix}-link-list-item-cta) { - padding: $carbon--layout-01; - border-top: 1px solid $ui-03; - border-bottom: 1px solid $ui-03; - margin-top: -1px; - margin-left: -$carbon--layout-01; - - .#{$prefix}--link { - &:focus { - outline: none; - } - } - } - - ::slotted(#{$dds-prefix}-link-list-item:focus) { - outline: 2px solid $focus; - outline-offset: -2px; - } - } } @include exports('link-list') { diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss index 447dfdf5384..1a1a0f0d30b 100644 --- a/packages/web-components/src/components/link-list/link-list.scss +++ b/packages/web-components/src/components/link-list/link-list.scss @@ -20,17 +20,18 @@ .#{$prefix}--link { cursor: pointer; } - - &:focus { - outline: none; - } } :host(#{$dds-prefix}-link-list-item) { + outline: none; + .#{$prefix}--link { > span { flex: 1; } + + // TODO: See if there is a better solution than an internal custom property + padding: var(--#{$dds-prefix}--link-list-item--anchor-padding, 0); } } @@ -56,39 +57,41 @@ .#{$dds-prefix}-ce--link-list__list--end { ::slotted(#{$dds-prefix}-link-list-item), ::slotted(#{$dds-prefix}-link-list-item-cta) { - padding: $carbon--layout-01; border-top: 1px solid $ui-03; border-bottom: 1px solid $ui-03; margin-top: -1px; margin-left: -$carbon--layout-01; + --#{$dds-prefix}--link-list-item--anchor-padding: #{$carbon--spacing-05}; + } + } + + .#{$dds-prefix}-ce--link-list__heading__wrapper { + display: contents; + } + + @include carbon--breakpoint('md') { + .#{$dds-prefix}-ce--link-list__heading--split ::slotted(#{$dds-prefix}-link-list-heading) { + width: 33.3%; + padding-right: 10%; } } - &.#{$prefix}--link-list__split { + .#{$dds-prefix}-ce--link-list__list--split { @include carbon--breakpoint('sm') { ::slotted(#{$dds-prefix}-link-list-item) { margin-right: -$carbon--layout-01; } } - @include carbon--breakpoint('md') { - ul { - ::slotted(#{$dds-prefix}-link-list-item) { - margin-left: -$carbon--layout-01; - margin-right: 0; - } - - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: 2rem; - } - .#{$prefix}--link-list__heading { - width: 33.3%; - padding-right: 10%; - } + @include carbon--breakpoint('md') { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 2rem; ::slotted(#{$dds-prefix}-link-list-item) { display: block; + margin-left: -$carbon--layout-01; + margin-right: 0; } } } diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts index 38358536223..b12beff9eed 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -6,7 +6,9 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { customElement, html, LitElement, property } from 'lit-element'; + +import { classMap } from 'lit-html/directives/class-map'; +import { internalProperty, customElement, html, LitElement, property } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; @@ -27,20 +29,11 @@ const { stablePrefix: ddsPrefix } = ddsSettings; @customElement(`${ddsPrefix}-link-list`) class DDSLinkList extends StableSelectorMixin(LitElement) { /** - * Returns a class-name based on the parameter type + * `true` to use "split mode" layout for `type="end"`. + * Should happen if there are more than three child items slotted in. */ - private ulClasses() { - switch (this.type) { - case LINK_LIST_TYPE.HORIZONTAL: - return `${prefix}--link-list__list--horizontal`; - case LINK_LIST_TYPE.VERTICAL: - return `${prefix}--link-list__list--vertical`; - case LINK_LIST_TYPE.END: - return `${ddsPrefix}-ce--link-list__list--end`; - default: - return `${prefix}--link-list__list--card`; - } - } + @internalProperty() + private _useSplitLayoutForEndType = false; /** * Handler for @slotChange, toggles the split layout class and set the children link-list-item to the same height @@ -52,14 +45,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { const childItems = (event.target as HTMLSlotElement) .assignedNodes({ flatten: true }) .filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element)?.matches(selectorItem)) as Element[]; - - if (this.type === LINK_LIST_TYPE.END) { - childItems.forEach(item => item.classList.add(`${prefix}--link-list-item__end`)); - - if (childItems.length > 3) { - this.classList.add((this.constructor as typeof DDSLinkList).classSplitLayout); - } - } + this._useSplitLayoutForEndType = childItems.length > 3; } /** @@ -69,21 +55,30 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { type = LINK_LIST_TYPE.DEFAULT; render() { + const { type, _useSplitLayoutForEndType: useSplitLayoutForEndType } = this; + const headingClasses = classMap({ + [`${ddsPrefix}-ce--link-list__heading__wrapper`]: true, + [`${ddsPrefix}-ce--link-list__heading--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType, + }); + const listTypeClasses = + { + [LINK_LIST_TYPE.HORIZONTAL]: `${prefix}--link-list__list--horizontal`, + [LINK_LIST_TYPE.VERTICAL]: `${prefix}--link-list__list--vertical`, + [LINK_LIST_TYPE.END]: `${ddsPrefix}-ce--link-list__list--end`, + }[type] ?? `${prefix}--link-list__list--card`; + const listClasses = classMap({ + [`${prefix}--link-list__list`]: true, + [listTypeClasses]: true, + [`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType, + }); return html` - -