From 8b573ee65b70da63ec9b2d90212b7699b5ff8e91 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 13 Jan 2021 16:10:26 +0900 Subject: [PATCH 1/3] chore(link-list): clean-up CSS classes Removes support for `bx--link-list__split` class in `` and `bx--link-list-item__end` class in ``, for the sake of `type` attribute in ``. Refs #4863. --- .../scss/components/link-list/_link-list.scss | 28 --------- .../src/components/link-list/link-list.scss | 41 +++++++------ .../src/components/link-list/link-list.ts | 57 +++++++++---------- 3 files changed, 46 insertions(+), 80 deletions(-) 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 c54288400f6..1e9bd4562fd 100644 --- a/packages/web-components/src/components/link-list/link-list.scss +++ b/packages/web-components/src/components/link-list/link-list.scss @@ -19,17 +19,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); } } @@ -55,39 +56,37 @@ .#{$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}; + } + } + + @include carbon--breakpoint('md') { + .#{$dds-prefix}-ce--link-list__heading--split { + 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 99fb1652535..8c3add080f4 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({ + [`${prefix}--link-list__heading`]: 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` -

-
    +

    +
    `; } - /** - * The CSS class for the "split layout". - */ - static get classSplitLayout() { - return `${prefix}--link-list__split`; - } - /** * A selector selecting the child items. */ From 3f4478733b5e4ca3791f14f2421f6fd017b91870 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 14 Jan 2021 11:12:33 +0900 Subject: [PATCH 2/3] chore(link-list): fix TS error --- .../web-components/src/components/link-list/link-list.scss | 6 +++++- .../web-components/src/components/link-list/link-list.ts | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) 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 7e8b9f78e08..1a1a0f0d30b 100644 --- a/packages/web-components/src/components/link-list/link-list.scss +++ b/packages/web-components/src/components/link-list/link-list.scss @@ -65,8 +65,12 @@ } } + .#{$dds-prefix}-ce--link-list__heading__wrapper { + display: contents; + } + @include carbon--breakpoint('md') { - .#{$dds-prefix}-ce--link-list__heading--split { + .#{$dds-prefix}-ce--link-list__heading--split ::slotted(#{$dds-prefix}-link-list-heading) { width: 33.3%; padding-right: 10%; } 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 39060e379c2..b12beff9eed 100644 --- a/packages/web-components/src/components/link-list/link-list.ts +++ b/packages/web-components/src/components/link-list/link-list.ts @@ -57,7 +57,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { render() { const { type, _useSplitLayoutForEndType: useSplitLayoutForEndType } = this; const headingClasses = classMap({ - [`${prefix}--link-list__heading`]: true, + [`${ddsPrefix}-ce--link-list__heading__wrapper`]: true, [`${ddsPrefix}-ce--link-list__heading--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType, }); const listTypeClasses = @@ -72,7 +72,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) { [`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType, }); return html` - +
    From 9621639403a4dd5e661697f2d9c5f1d6c651a9c9 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 14 Jan 2021 12:01:26 +0900 Subject: [PATCH 3/3] test(link-list): update snapshot --- .../tests/snapshots/dds-link-list.md | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/web-components/tests/snapshots/dds-link-list.md b/packages/web-components/tests/snapshots/dds-link-list.md index 4253cd0cb80..ec7cf0767a3 100644 --- a/packages/web-components/tests/snapshots/dds-link-list.md +++ b/packages/web-components/tests/snapshots/dds-link-list.md @@ -3,8 +3,10 @@ #### `Renders Default` ``` - - +
    + + +
      - +
      + + +
        - +
        + + +
          - +
          + + +
            - +
            + + +