Skip to content

Commit

Permalink
Apply BEM refactoring to tree-item
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@anicyne
anicyne committed Dec 10, 2024
1 parent a5b564f commit 4261fca
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 174 deletions.
20 changes: 10 additions & 10 deletions packages/components/src/components/tree-item/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeIte
import { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';
import { KolLinkWcTag, KolIconTag, KolTreeTag } from '../../core/component-names';
import { nonce } from '../../utils/dev.utils';
import clsx from 'clsx';

@Component({
tag: `kol-tree-item-wc`,
Expand All @@ -19,19 +20,15 @@ export class KolTreeItemWc implements TreeItemAPI {
public render(): JSX.Element {
const { _href, _active, _hasChildren, _open, _label } = this.state;
return (
<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item-wc">
<Host onSlotchange={this.handleSlotchange.bind(this)} class="kol-tree-item">
<li
class="tree-item"
class="kol-tree-item__item"
style={{
'--level': `${this.level}`,
}}
>
<KolLinkWcTag
class={{
'tree-link': true,
'first-level': this.level === 0,
active: Boolean(_active),
}}
class={clsx('kol-tree-item__link', this.level === 0 && 'kol-tree-item__link--first-level', Boolean(_active) && 'kol-tree-item__link--active')}
_href={_href}
_label=""
_role="treeitem"
Expand All @@ -43,9 +40,12 @@ export class KolTreeItemWc implements TreeItemAPI {
<span slot="expert">
{_hasChildren && (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
<span class="toggle-button" onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}>
<span
class="kol-tree-item__toggle-button"
onClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}
>
<KolIconTag
class="toggle-button-icon"
class="kol-tree-item__toggle-button-icon"
_icons={`codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`}
_label={'' /* Label deliberately left empty */}
/>
Expand All @@ -54,7 +54,7 @@ export class KolTreeItemWc implements TreeItemAPI {
{_label}
</span>
</KolLinkWcTag>
<ul hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
<ul class="kol-tree-item__children" hidden={!_hasChildren || !_open} role="group" id={this.groupId}>
<slot />
</ul>
</li>
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/components/tree-item/shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export class KolTreeItem implements TreeItemProps {
public render(): JSX.Element {
return (
<KolTreeItemWcTag
class="kol-tree-item"
_active={this._active}
_label={this._label}
_open={this._open}
Expand Down
37 changes: 19 additions & 18 deletions packages/components/src/components/tree-item/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,31 @@
@import '../style';

@layer kol-component {
:host {
.kol-tree-item {
$root: &;
font-size: rem(16);
}

ul {
margin: 0;
padding: 0;
list-style: none;
}
&__link {
&--first-level .kol-link {
padding-left: rem(6);
}

.tree-link {
&.first-level > a {
padding-left: rem(6);
.kol-link {
padding-right: rem(6);
padding-left: calc(rem(22.4) * var(--level));
padding-top: rem(6.4);
padding-bottom: rem(6.4);
}
}

& > a {
padding-right: rem(6);
padding-left: calc(rem(22.4) * var(--level));
padding-top: rem(6.4);
padding-bottom: rem(6.4);
&__children {
margin: 0;
padding: 0;
list-style: none;
}
}

a .kol-span {
place-items: unset; // unset 'center' style from global layer
.kol-span {
place-items: unset; // unset 'center' style from global layer
}
}
}
40 changes: 20 additions & 20 deletions packages/components/src/components/tree-item/test/__snapshots__/snapshot.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=false 1`] = `
<kol-tree-item>
<template shadowrootmode="open">
<kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
<kol-tree-item-wc class="kol-tree-item">
<!---->
<li class="tree-item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
<li class="kol-tree-item__item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
<span slot="expert">
Label
</span>
</kol-link-wc>
<ul hidden="" id="tree-group-nonce" role="group">
<ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
<slot></slot>
</ul>
</li>
Expand All @@ -23,15 +23,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _active=true 1`] = `
<kol-tree-item>
<template shadowrootmode="open">
<kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
<kol-tree-item-wc class="kol-tree-item">
<!---->
<li class="tree-item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="active first-level tree-link">
<li class="kol-tree-item__item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="0" class="kol-tree-item__link kol-tree-item__link--active kol-tree-item__link--first-level">
<span slot="expert">
Label
</span>
</kol-link-wc>
<ul hidden="" id="tree-group-nonce" role="group">
<ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
<slot></slot>
</ul>
</li>
Expand All @@ -43,15 +43,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=false 1`] = `
<kol-tree-item>
<template shadowrootmode="open">
<kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
<kol-tree-item-wc class="kol-tree-item">
<!---->
<li class="tree-item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
<li class="kol-tree-item__item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
<span slot="expert">
Label
</span>
</kol-link-wc>
<ul hidden="" id="tree-group-nonce" role="group">
<ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
<slot></slot>
</ul>
</li>
Expand All @@ -63,15 +63,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
exports[`kol-tree-item should render with _label="Label" _href="https://example.com" _open=true 1`] = `
<kol-tree-item>
<template shadowrootmode="open">
<kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
<kol-tree-item-wc class="kol-tree-item">
<!---->
<li class="tree-item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
<li class="kol-tree-item__item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
<span slot="expert">
Label
</span>
</kol-link-wc>
<ul hidden="" id="tree-group-nonce" role="group">
<ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
<slot></slot>
</ul>
</li>
Expand All @@ -83,15 +83,15 @@ exports[`kol-tree-item should render with _label="Label" _href="https://example.
exports[`kol-tree-item should render with _label="Label" _href="https://example.com" 1`] = `
<kol-tree-item>
<template shadowrootmode="open">
<kol-tree-item-wc class="kol-tree-item kol-tree-item-wc">
<kol-tree-item-wc class="kol-tree-item">
<!---->
<li class="tree-item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="first-level tree-link">
<li class="kol-tree-item__item" style="--level: 0;">
<kol-link-wc _href="https://example.com" _label="" _role="treeitem" _tabindex="-1" class="kol-tree-item__link kol-tree-item__link--first-level">
<span slot="expert">
Label
</span>
</kol-link-wc>
<ul hidden="" id="tree-group-nonce" role="group">
<ul class="kol-tree-item__children" hidden="" id="tree-group-nonce" role="group">
<slot></slot>
</ul>
</li>
Expand Down
59 changes: 29 additions & 30 deletions packages/themes/default/src/components/tree-item.scss
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,44 @@
@import '../mixins/rem';

@layer kol-theme-component {
.tree-link {
display: block;
border: rem(1) solid transparent;
.kol-tree-item {
$root: &;

&:hover,
&:focus-within {
border: rem(1) solid var(--color-primary);
background-color: var(--color-primary-variant);
&__link {
display: block;
border: rem(1) solid transparent;

& > a {
outline-offset: 0;
}
.kol-link {
display: block;
color: var(--color-text);
text-decoration: none;
text-align: left;

@at-root #{$root}__toggle-button {
display: inline-block;

& > a,
.toggle-button {
color: var(--color-light);
&:hover {
transform: scale(1.3);
}
}
}
}

&.active {
background-color: var(--color-primary);
&:hover,
&:focus-within {
border: rem(1) solid var(--color-primary);
background-color: var(--color-primary-variant);

a,
.toggle-button {
color: var(--color-light);
.kol-link {
outline-offset: 0;
color: var(--color-light);
}
}
}

a {
display: block;
color: var(--color-text);
text-decoration: none;
text-align: left;

.toggle-button {
display: inline-block;
&--active {
background-color: var(--color-primary);

&:hover {
transform: scale(1.3);
.kol-link {
color: var(--color-light);
}
}
}
Expand Down
65 changes: 34 additions & 31 deletions packages/themes/ecl/src/ecl-ec/components/tree-item.scss
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,55 @@
@import '../../mixins/rem';

@layer kol-theme-component {
.tree-item {
ul {
.kol-tree-item {
$root: &;

&__children {
display: flex;
flex-direction: column;
}
}

.tree-link {
display: block;
border: rem(2) solid transparent;
&__link {
display: block;
border: rem(2) solid transparent;

&:hover,
&:focus-within {
background-color: var(--color-sky);
border: rem(2) solid var(--color-yellow-120);
&:hover,
&:focus-within {
background-color: var(--color-sky);
border: rem(2) solid var(--color-yellow-120);

& > a {
color: var(--color-black);
.kol-link {
color: var(--color-black);
}
}
}

&.active {
font-weight: 700;
background-color: var(--color-yellow);
&--active {
font-weight: 700;
background-color: var(--color-yellow);

a {
color: var(--color-black);
.kol-link {
color: var(--color-black);
background-color: var(--color-yellow);
}
}
}

a {
display: block;
color: var(--color-black);
text-decoration: none;
text-align: left;
.kol-link {
display: block;
color: var(--color-black);
text-decoration: none;
text-align: left;

.toggle-button {
display: inline-block;
@at-root #{$root}__toggle-button {
display: inline-block;

&:hover {
transform: scale(1.3);
&:hover {
transform: scale(1.3);
}
}
}

&:focus {
color: var(--color-black);
&:focus {
color: var(--color-black);
}
}
}
}
Expand Down
Loading

0 comments on commit 4261fca

Please sign in to comment.