From 1923c53ad1a7adcbe51b068bb931133992efd189 Mon Sep 17 00:00:00 2001 From: Sean Wu Date: Sun, 25 Feb 2024 11:37:35 +1100 Subject: [PATCH] clean up --- .../core/src/components/go-tabs/go-tab.tsx | 5 + .../src/components/go-tabs/go-tablist.scss | 19 ++- .../src/components/go-tabs/go-tablist.tsx | 25 ++- .../core/src/components/go-tabs/go-tabs.scss | 153 ------------------ .../core/src/components/go-tabs/go-tabs.tsx | 27 ++-- .../core/src/components/go-tabs/tabs.type.ts | 1 + .../go-tabs/usage/go-tabs-fill-icon.md | 44 +++-- packages/core/src/index.html | 120 ++++---------- 8 files changed, 122 insertions(+), 272 deletions(-) diff --git a/packages/core/src/components/go-tabs/go-tab.tsx b/packages/core/src/components/go-tabs/go-tab.tsx index 3c25b634..21fa51ee 100644 --- a/packages/core/src/components/go-tabs/go-tab.tsx +++ b/packages/core/src/components/go-tabs/go-tab.tsx @@ -1,5 +1,10 @@ import { Component, h, Prop, Element, Host, Method } from '@stencil/core'; import { TabIconPosition } from './tabs.type'; + +/** + * @slot icon - Slot for the tab icon (only 1 element allowed) + * @slot icon-active - Slot for the tab icon (only 1 element allowed) + */ @Component({ tag: 'go-tab', styleUrl: 'go-tab.scss', diff --git a/packages/core/src/components/go-tabs/go-tablist.scss b/packages/core/src/components/go-tabs/go-tablist.scss index cd8049c8..fdc5246c 100644 --- a/packages/core/src/components/go-tabs/go-tablist.scss +++ b/packages/core/src/components/go-tabs/go-tablist.scss @@ -113,7 +113,15 @@ go-tablist { color: var(--tab-text-color); font-weight: 500; @include transition(background-color, color); - + .go-tab-icon-slot { + svg, + img { + display: block; + } + } + .go-tab-icon-active { + display: none; + } &:hover, &:focus { color: var(--tab-hover-text-color); @@ -126,7 +134,14 @@ go-tablist { background: var(--tab-active-bg-color); color: var(--tab-active-color); text-decoration: none; - text-shadow: 0 0 1px currentColor; + &.has-active-icon { + .go-tab-icon { + display: none; + } + } + .go-tab-icon-active { + display: block; + } } } diff --git a/packages/core/src/components/go-tabs/go-tablist.tsx b/packages/core/src/components/go-tabs/go-tablist.tsx index 99578099..482d0372 100644 --- a/packages/core/src/components/go-tabs/go-tablist.tsx +++ b/packages/core/src/components/go-tabs/go-tablist.tsx @@ -84,13 +84,19 @@ export class GoTablist { requestAnimationFrame(() => { this.activeTabRect = this.tabEls[this.activeIndex].getBoundingClientRect(); this.tabsState.forEach((tab, i) => { - if (tab.iconSlot) { - if (tab.iconPosition === 'before') { - this.tabEls[i].prepend(tab.iconSlot); - } - if (tab.iconPosition === 'after') { - this.tabEls[i].append(tab.iconSlot); - } + // add icon container + if (!tab.iconSlot && !tab.iconActiveSlot) { + return; + } + const iconContainer = document.createElement('span'); + iconContainer.classList.add('go-tab-icon-slot'); + if (tab.iconSlot) iconContainer.append(tab.iconSlot); + if (tab.iconActiveSlot) iconContainer.append(tab.iconActiveSlot); + if (tab.iconPosition === 'before') { + this.tabEls[i].prepend(iconContainer); + } + if (tab.iconPosition === 'after') { + this.tabEls[i].append(iconContainer); } }); }); @@ -300,7 +306,10 @@ export class GoTablist { onClick={() => this.onTabClick(index)} onKeyDown={(e) => this.onKeydown(e)} key={index} - class={{ active: tab.active, [`icon-${tab.iconPosition}`]: !!tab.iconPosition }} + class={{ + 'active': tab.active, + 'has-active-icon': !!tab.iconActiveSlot, + }} ref={(el) => this.tabEls.push(el)}> {tab.label} diff --git a/packages/core/src/components/go-tabs/go-tabs.scss b/packages/core/src/components/go-tabs/go-tabs.scss index 7e146fce..e69de29b 100644 --- a/packages/core/src/components/go-tabs/go-tabs.scss +++ b/packages/core/src/components/go-tabs/go-tabs.scss @@ -1,153 +0,0 @@ -go-tabs { - /** - @prop --tab-padding: - Padding for tabs - - default: 0.75rem 1.25rem - */ - --tab-padding: 0.75rem 1.25rem; - /** - @prop --tab-bg-color: - Background color for tabs - - default: transparent - */ - --tab-bg-color: transparent; - /** - @prop --tab-hover-bg-color: - Background color for tabs on hover - - default: var(--go-color-neutral-200) - */ - --tab-hover-bg-color: var(--go-color-neutral-200); - /** - @prop --tab-text-color: - Text color for tabs - - default: var(--go-color-neutral-700) - */ - --tab-text-color: var(--go-color-neutral-700); - /** - @prop --tab-focus-color: - Focus outline color for tabs - - default: var(--go-color-primary-600) - */ - --tab-focus-color: var(--go-color-primary-600); - /** - @prop --tab-active-color: - Text color for active tab - - default: var(--go-color-primary-800) - */ - --tab-active-color: var(--go-color-primary-800); - /** - @prop --tab-active-bg-color: - Background color for active tab - - default: transparent - */ - --tab-active-bg-color: transparent; - /** - @prop --tab-border-width: - Border width for tabs - - default: 0.2em - */ - --tab-border-width: 0.2em; - /** - @prop --tab-active-indicator-color: - Color of the active tab indicator - - default: var(--tab-active-color) - */ - --tab-active-indicator-color: var(--tab-active-color); - /** - @prop --tabs-active-indicator-width: - Width of the active tab indicator - - default: 0 - */ - --tabs-active-indicator-width: 0; - - /** - @prop --tabs-active-indicator-height: - Height of the active tab indicator - - default: 0.2em - */ - --tabs-active-indicator-height: 0.2em; - /** - @prop --tabs-active-indicator-color: - Color of the active tab indicator - - default: var(--tab-active-color) - */ - --tabs-active-indicator-color: var(--tab-active-color); - /** - @prop --tabs-vertical-tablist-basis: - Basis for the vertical tab list - - default: 25% - */ - --tabs-vertical-tablist-basis: 25%; - /** - @prop --tabs-tablist-gap: - Gap between tabs in the tab list - - default: 1rem - */ - --tabs-tablist-gap: 1rem; - - display: flex; - flex-direction: column; - gap: var(--tabs-tablist-gap); - - [role='tablist'] { - overflow: auto; - display: flex; - flex-wrap: nowrap; - width: 100%; - position: relative; - } - [role='tab'] { - padding: var(--tab-padding); - border: var(--tab-border-width) solid transparent; - white-space: nowrap; - background: var(--tab-bg-color); - color: var(--tab-text-color); - font-weight: 500; - @include transition(background-color, color); - - &:hover, - &:focus { - background: var(--tab-hover-bg-color); - } - &:not(.active) { - cursor: pointer; - } - &[aria-selected='true'] { - background: var(--tab-active-bg-color); - color: var(--tab-active-color); - text-decoration: none; - text-shadow: 0 0 1px currentColor; - } - } - - .tabs-active-indicator-track { - position: absolute; - width: 100%; - bottom: 0; - left: 0; - right: 0; - .tabs-active-indicator { - @include transition(transform, width, height); - - transform: translateX(var(--tabs-active-indicator-left)); - width: var(--tabs-active-indicator-width); - height: var(--tabs-active-indicator-height); - border-radius: var(--radius-round); - background: var(--tabs-active-indicator-color); - } - } - &.vertical { - display: grid; - grid-template-columns: auto 1fr; - gap: var(--tabs-tablist-gap); - } - - &.full-width { - [role='tablist'] { - width: 100%; - } - [role='tab'] { - flex: 1; - } - } -} diff --git a/packages/core/src/components/go-tabs/go-tabs.tsx b/packages/core/src/components/go-tabs/go-tabs.tsx index 4bd9a471..1434bd7b 100644 --- a/packages/core/src/components/go-tabs/go-tabs.tsx +++ b/packages/core/src/components/go-tabs/go-tabs.tsx @@ -60,6 +60,20 @@ export class GoTabs { this.initialiseTabChildren(); } + initIconSlot(goTab, slotName) { + const iconEl = goTab.querySelector(`[slot="${slotName}"]`); + if (!iconEl) { + return; + } + let iconSlot = null; + iconSlot = document.createElement('span'); + iconSlot.setAttribute('aria-hidden', 'true'); // icons are decorative only + iconSlot.classList.add(`go-tab-${slotName}`); + iconEl.removeAttribute('slot'); + moveEl(iconEl, iconSlot); + return iconSlot; + } + initialiseTabChildren() { const children = Array.from(this.el.querySelectorAll('go-tab')) as HTMLGoTabElement[]; if (children.length === 0) { @@ -71,22 +85,15 @@ export class GoTabs { const panelId = tabId + '-panel'; goTab.tabId = tabId; goTab.panelId = panelId; - const iconEl = goTab.querySelector('[slot="icon"]'); - let iconSlot = null; - - if (iconEl) { - iconSlot = document.createElement('span'); - iconSlot.setAttribute('aria-hidden', 'true'); // icons are decorative only - iconSlot.classList.add('icon'); - iconEl.removeAttribute('slot'); - moveEl(iconEl, iconSlot); - } + const iconSlot = this.initIconSlot(goTab, 'icon'); + const iconActiveSlot = this.initIconSlot(goTab, 'icon-active'); return { tabId: goTab.tabId || tabId, panelId: goTab.panelId || panelId, label: goTab.label, active: goTab.active, iconSlot, + iconActiveSlot, iconPosition: goTab.iconPosition, }; }); diff --git a/packages/core/src/components/go-tabs/tabs.type.ts b/packages/core/src/components/go-tabs/tabs.type.ts index bd8c4525..e4b132ab 100644 --- a/packages/core/src/components/go-tabs/tabs.type.ts +++ b/packages/core/src/components/go-tabs/tabs.type.ts @@ -4,6 +4,7 @@ export interface TabItem { label: string; active: boolean; iconSlot?: Element; + iconActiveSlot?: Element; iconPosition?: TabIconPosition; } diff --git a/packages/core/src/components/go-tabs/usage/go-tabs-fill-icon.md b/packages/core/src/components/go-tabs/usage/go-tabs-fill-icon.md index 61e69f1f..2c2eb8e1 100644 --- a/packages/core/src/components/go-tabs/usage/go-tabs-fill-icon.md +++ b/packages/core/src/components/go-tabs/usage/go-tabs-fill-icon.md @@ -1,20 +1,42 @@ - + -

Tab 1 content

+

+ You can use slot="icon" to add an icon to tab (by default, icon is placed before the label + text) +

- - + +

- Lorem ipsum dolor, sit lorem, ipsum amet consectetur adipisicing elit. Repellendus, esse - laboriosam tempore vel, deserunt nulla, corporis eaque dolore ad laudantium animi minima reprehenderit - aliquam voluptate minus dolorem nobis fugiat molestiae. + icon-position="after" puts icon after the label, you can use slot="icon-active" to + specify the icon that will be shown when the tab is active

- - - -

Tab 3 content

+ + + + + + + + + + + + + + + +

You can use slot="icon" and slot="icon-active" together!

 diff --git a/packages/core/src/index.html b/packages/core/src/index.html index aa032943..767b1135 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -30,101 +30,45 @@
- + -

Tab 1 content

+

+ You can use slot="icon" to add an icon to tab (by default, icon is placed before the label + text) +

- - + +

- Lorem ipsum dolor, sit lorem, ipsum amet consectetur adipisicing elit. Repellendus, esse - laboriosam tempore vel, deserunt nulla, corporis eaque dolore ad laudantium animi minima reprehenderit - aliquam voluptate minus dolorem nobis fugiat molestiae. + icon-position="after" puts icon after the label, you can use slot="icon-active" to + specify the icon that will be shown when the tab is active

- - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - -

Tab 3 content

+ + + + +

You can use slot="icon" and slot="icon-active" together!