clean up

getgoui · Feb 25, 2024 · 1923c53 · 1923c53
1 parent 03afaea
commit 1923c53
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 272 deletions.
diff --git 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
@@ -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
@@ -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)}>
                     <span>{tab.label}</span>
                   </button>

diff --git 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
@@ -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
@@ -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
@@ -1,20 +1,42 @@
 <go-tabs fill>
-  <go-tab label="First tab" icon-position="before">
+  <go-tab label="Icon tab" icon-position="before">
     <go-icon name="home" slot="icon"></go-icon>
-    <p>Tab 1 content</p>
+    <p>
+      You can use <code>slot="icon"</code> to add an icon to tab (by default, icon is placed before the label
+      text)
+    </p>
   </go-tab>
-  <go-tab label="Second tab" icon-position="after">
-    <go-icon name="star" slot="icon"></go-icon>
+  <go-tab label="Icon tab" icon-position="after">
+    <go-icon name="star" slot="icon-active"></go-icon>
     <p>
-      Lorem ipsum dolor, sit <a href="#">lorem, ipsum</a> 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.
+      <code>icon-position="after"</code> puts icon after the label, you can use <code>slot="icon-active"</code> to
+      specify the icon that will be shown when the tab is active
     </p>
   </go-tab>
   <go-tab label="Third tab">
-    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g><circle cx="60" cy="50" r="4" fill="currentColor"><animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="-0.67s"/><animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="-0.67s"/></circle><circle cx="60" cy="50" r="4" fill="currentColor"><animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="-0.33s"/><animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="-0.33s"/></circle><circle cx="60" cy="50" r="4" fill="currentColor"><animate attributeName="cx" repeatCount="indefinite" dur="1s" values="95;35" keyTimes="0;1" begin="0s"/><animate attributeName="fill-opacity" repeatCount="indefinite" dur="1s" values="0;1;1" keyTimes="0;0.2;1" begin="0s"/></circle></g><g transform="translate(-15 0)"><path d="M50 50L20 50A30 30 0 0 0 80 50Z" fill="currentColor" transform="rotate(90 50 50)"/><path d="M50 50L20 50A30 30 0 0 0 80 50Z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1"/></path><path d="M50 50L20 50A30 30 0 0 1 80 50Z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1"/></path></g></svg>
-    <!-- TODO: allow icon-active slot -->
-    <go-icon name="star" slot="icon-active"></go-icon>
-    <p>Tab 3 content</p>
+    <svg fill="currentColor" width="2rem" height="2rem" slot="icon" viewBox="0 0 500 500">
+      <path
+        d="M302.5 131.9c-29.3-28.1-69.1-45.3-112.9-45.3-90.3 0-163.4 73.1-163.4 163.4s73.2 163.4 163.4 163.4c43.8 0 83.6-17.2 112.9-45.3L184.1 250l118.4-118.1zm-171.2 24.6c0-20.8 16.9-37.7 37.7-37.7s37.7 16.9 37.7 37.7c0 20.8-16.9 37.7-37.7 37.7s-37.7-16.8-37.7-37.7z" />
+      <path
+        d="M141.3 156.5c.2-11.4 7-21.8 17.8-25.9 11.2-4.3 24.2-.7 31.7 8.7 15.5 19.5-2 49-26.6 44.6-13.3-2.4-22.7-14-22.9-27.4-.2-12.9-20.2-12.9-20 0 .4 20.3 12.8 38 31.9 45 18.4 6.7 40.3.6 52.5-14.6 12.4-15.4 14.6-37.2 4.5-54.5-10.3-17.6-30.8-26.3-50.6-22.7-22.3 4.1-37.9 24.6-38.3 46.7-.3 13 19.7 13 20 .1z" />
+      <path
+        d="M309.6 124.8c-42.2-40-102.1-56.7-158.9-43.8-48.1 10.9-90.4 43.3-113.7 86.7C12.8 212.6 9.4 267.8 28.8 315c19.1 46.3 57.1 82.5 104.4 99 53.1 18.5 114.6 9.1 159.6-24.8 5.8-4.4 11.4-9 16.7-14 3.9-3.7 3.7-10.4 0-14.1-34.5-34.6-69.1-69.1-103.8-103.6-4.9-4.8-9.7-9.7-14.6-14.5v14.1c34.6-34.5 69.2-69.1 103.8-103.6 4.9-4.8 9.7-9.7 14.6-14.5 9.1-9.1-5-23.2-14.1-14.1-34.6 34.5-69.2 69.1-103.8 103.6-4.9 4.8-9.7 9.7-14.6 14.5-3.8 3.8-3.8 10.3 0 14.1 34.6 34.5 69.2 69.1 103.8 103.6 4.9 4.8 9.7 9.7 14.6 14.5v-14.1c-37.1 35.1-90.2 50-140.1 38.5-43.1-9.9-80.2-38.4-101.1-77.3-21.5-39.9-23.6-88.2-6.8-130.2 16-40.2 50.4-72.7 91.2-86.9C186.5 88.5 240 96.7 281 126.6c5.1 3.7 9.9 7.9 14.5 12.3 9.3 8.9 23.5-5.2 14.1-14.1z" />
+      <circle cx="290.7" cy="250" r="22.6" />
+      <path
+        d="M303.3 250c-.2 6.9-5.5 12.6-12.6 12.6-6.9 0-12.6-5.7-12.6-12.6 0-6.7 5.3-12.2 11.9-12.6 7.4-.4 13.1 5.5 13.3 12.6.4 12.8 20.4 12.9 20 0-.4-13.7-8.5-25.8-21.5-30.6-12.6-4.7-27.3-.8-35.9 9.5-8.8 10.5-10.4 25.7-3.4 37.6 7 12 20.7 17.8 34.2 15.5 15.5-2.6 26.1-16.7 26.6-32 .4-12.9-19.6-12.9-20 0z" />
+      <circle cx="375.1" cy="250" r="22.6" />
+      <path
+        d="M387.7 250c-.2 6.9-5.5 12.6-12.6 12.6-6.9 0-12.6-5.7-12.6-12.6 0-6.7 5.3-12.2 11.9-12.6 7.3-.4 13.1 5.5 13.3 12.6.4 12.8 20.4 12.9 20 0-.4-13.7-8.5-25.8-21.5-30.6-12.6-4.7-27.3-.8-35.9 9.5-8.8 10.5-10.4 25.7-3.4 37.6 7 12 20.7 17.8 34.2 15.5 15.5-2.6 26.1-16.7 26.6-32 .4-12.9-19.6-12.9-20 0z" />
+      <circle cx="457.7" cy="250" r="22.6" />
+      <path
+        d="M470.3 250c-.2 6.9-5.5 12.6-12.6 12.6-6.9 0-12.6-5.7-12.6-12.6 0-6.7 5.3-12.2 11.9-12.6 7.4-.4 13.1 5.5 13.3 12.6.4 12.8 20.4 12.9 20 0-.4-13.7-8.5-25.8-21.5-30.6-12.6-4.7-27.3-.8-35.9 9.5-8.8 10.5-10.4 25.7-3.4 37.6 7 12 20.7 17.8 34.2 15.5 15.5-2.6 26.1-16.7 26.6-32 .4-12.9-19.6-12.9-20 0z" />
+    </svg>
+    <svg fill="currentColor" width="2rem" height="2rem" slot="icon-active" viewBox="0 0 100 100">
+      <path
+        d="M38.917 34.167v-4.538a4.538 4.538 0 1 0 3.209 1.33l-3.209 3.208zM61.084 34.167v-4.538a4.538 4.538 0 1 0 3.209 1.33l-3.209 3.208z" />
+      <path
+        d="M50 8.25c-14.98 0-27.125 12.145-27.125 27.125v47.126a8.75 8.75 0 0 0 8.75 8.75c3.219 0 6.021-1.744 7.538-4.334h.01c.363-.503.951-.834 1.619-.834s1.256.331 1.619.834h.01c1.518 2.59 4.319 4.334 7.538 4.334 3.218 0 6.021-1.744 7.537-4.334h.01c.363-.503.951-.834 1.619-.834s1.256.331 1.619.834h.011c1.517 2.59 4.319 4.334 7.537 4.334a8.75 8.75 0 0 0 8.75-8.75c0-3.523.083-47.126.083-47.126C77.125 20.395 64.98 8.25 50 8.25zM30.667 34.167a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-8.25 8.25 8.25 8.25 0 0 1-8.25-8.25zM50 56.667c-6.269 0-11.453-4.637-12.316-10.667h24.633C61.453 52.03 56.27 56.667 50 56.667zm11.084-14.25a8.25 8.25 0 1 1 0-16.5c4.557 0 8.249 3.694 8.249 8.25s-3.692 8.25-8.249 8.25z" />
+    </svg>
+    <p>You can use <code>slot="icon"</code> and <code>slot="icon-active"</code> together!</p>
   </go-tab>
 </go-tabs>