Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(link-list): clean-up CSS classes #4885

Merged
merged 5 commits into from
Jan 14, 2021
+70 −90
Merged

chore(link-list): clean-up CSS classes #4885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8b573ee
chore(link-list): clean-up CSS classes
asudoh Jan 13, 2021
64d2509
Merge branch 'master' into link-list-classes
asudoh Jan 14, 2021
3f44787
chore(link-list): fix TS error
asudoh Jan 14, 2021
9621639
test(link-list): update snapshot
asudoh Jan 14, 2021
90caf1d
Merge branch 'master' into link-list-classes
kodiakhq[bot] Jan 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions packages/styles/scss/components/link-list/_link-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
45 changes: 24 additions & 21 deletions packages/web-components/src/components/link-list/link-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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;
}
}
}
Expand Down
57 changes: 26 additions & 31 deletions packages/web-components/src/components/link-list/link-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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;
}

/**
Expand All @@ -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`
<slot name="heading"></slot>
<ul name="list" class="${prefix}--link-list__list ${this.ulClasses()}">
<div class="${headingClasses}"><slot name="heading"></slot></div>
<ul name="list" class="${listClasses}">
<slot @slotchange="${this._handleSlotChange}"></slot>
</ul>
`;
}

/**
* The CSS class for the "split layout".
*/
static get classSplitLayout() {
return `${prefix}--link-list__split`;
}

/**
* A selector selecting the child items.
*/
Expand Down
30 changes: 20 additions & 10 deletions packages/web-components/tests/snapshots/dds-link-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
#### `Renders Default`

```
<slot name="heading">
</slot>
<div class="dds-ce--link-list__heading__wrapper">
<slot name="heading">
</slot>
</div>
<ul
class="bx--link-list__list bx--link-list__list--card"
name="list"
Expand All @@ -18,8 +20,10 @@
#### `Renders Horizontal`

```
<slot name="heading">
</slot>
<div class="dds-ce--link-list__heading__wrapper">
<slot name="heading">
</slot>
</div>
<ul
class="bx--link-list__list bx--link-list__list--horizontal"
name="list"
Expand All @@ -33,8 +37,10 @@
#### `Renders Vertical`

```
<slot name="heading">
</slot>
<div class="dds-ce--link-list__heading__wrapper">
<slot name="heading">
</slot>
</div>
<ul
class="bx--link-list__list bx--link-list__list--vertical"
name="list"
Expand All @@ -48,8 +54,10 @@
#### `Renders Vertical with cards`

```
<slot name="heading">
</slot>
<div class="dds-ce--link-list__heading__wrapper">
<slot name="heading">
</slot>
</div>
<ul
class="bx--link-list__list bx--link-list__list--vertical"
name="list"
Expand All @@ -63,8 +71,10 @@
#### `Renders End of section`

```
<slot name="heading">
</slot>
<div class="dds-ce--link-list__heading__wrapper">
<slot name="heading">
</slot>
</div>
<ul
class="bx--link-list__list dds-ce--link-list__list--end"
name="list"
Expand Down