feat(core/tabs): add oval tab headers

siemens · Sep 23, 2022 · 0e32dca · 0e32dca
1 parent 811be9b
commit 0e32dca
Show file tree

Hide file tree

Showing 16 changed files with 547 additions and 289 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1331,13 +1331,13 @@ export declare interface IxTabItem extends Components.IxTabItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['disabled', 'icon', 'layout', 'placement', 'selected', 'small']
+  inputs: ['counter', 'disabled', 'icon', 'layout', 'placement', 'rounded', 'selected', 'small']
 })
 @Component({
   selector: 'ix-tab-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['disabled', 'icon', 'layout', 'placement', 'selected', 'small']
+  inputs: ['counter', 'disabled', 'icon', 'layout', 'placement', 'rounded', 'selected', 'small']
 })
 export class IxTabItem {
   protected el: HTMLElement;
@@ -1352,13 +1352,13 @@ export declare interface IxTabs extends Components.IxTabs {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['layout', 'placement', 'selected', 'small']
+  inputs: ['layout', 'placement', 'rounded', 'selected', 'small']
 })
 @Component({
   selector: 'ix-tabs',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['layout', 'placement', 'selected', 'small']
+  inputs: ['layout', 'placement', 'rounded', 'selected', 'small']
 })
 export class IxTabs {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1069,6 +1069,10 @@ export namespace Components {
         "label": string;
     }
     interface IxTabItem {
+        /**
+          * Set counter value
+         */
+        "counter": number;
         /**
           * Set disabled tab
          */
@@ -1085,6 +1089,10 @@ export namespace Components {
           * Set selected placement
          */
         "placement": 'bottom' | 'top';
+        /**
+          * Set rounded tab
+         */
+        "rounded": boolean;
         /**
           * Set selected tab
          */
@@ -1103,6 +1111,10 @@ export namespace Components {
           * Set placement style
          */
         "placement": 'bottom' | 'top';
+        /**
+          * Set rounded tabs
+         */
+        "rounded": boolean;
         /**
           * Set default selected tab by index
          */
@@ -2966,6 +2978,10 @@ declare namespace LocalJSX {
         "onItemClick"?: (event: CustomEvent<MouseEvent>) => void;
     }
     interface IxTabItem {
+        /**
+          * Set counter value
+         */
+        "counter"?: number;
         /**
           * Set disabled tab
          */
@@ -2982,6 +2998,10 @@ declare namespace LocalJSX {
           * Set selected placement
          */
         "placement"?: 'bottom' | 'top';
+        /**
+          * Set rounded tab
+         */
+        "rounded"?: boolean;
         /**
           * Set selected tab
          */
@@ -3000,6 +3020,10 @@ declare namespace LocalJSX {
           * Set placement style
          */
         "placement"?: 'bottom' | 'top';
+        /**
+          * Set rounded tabs
+         */
+        "rounded"?: boolean;
         /**
           * Set default selected tab by index
          */

diff --git a/packages/core/src/components/tab-item/readme.md b/packages/core/src/components/tab-item/readme.md
@@ -11,14 +11,16 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property    | Attribute   | Description            | Type                    | Default    |
-| ----------- | ----------- | ---------------------- | ----------------------- | ---------- |
-| `disabled`  | `disabled`  | Set disabled tab       | `boolean`               | `false`    |
-| `icon`      | `icon`      | Set icon only tab      | `boolean`               | `false`    |
-| `layout`    | `layout`    | Set layout width style | `"auto" \| "stretched"` | `'auto'`   |
-| `placement` | `placement` | Set selected placement | `"bottom" \| "top"`     | `'bottom'` |
-| `selected`  | `selected`  | Set selected tab       | `boolean`               | `false`    |
-| `small`     | `small`     | Set small size tab     | `boolean`               | `false`    |
+| Property    | Attribute   | Description            | Type                    | Default     |
+| ----------- | ----------- | ---------------------- | ----------------------- | ----------- |
+| `counter`   | `counter`   | Set counter value      | `number`                | `undefined` |
+| `disabled`  | `disabled`  | Set disabled tab       | `boolean`               | `false`     |
+| `icon`      | `icon`      | Set icon only tab      | `boolean`               | `false`     |
+| `layout`    | `layout`    | Set layout width style | `"auto" \| "stretched"` | `'auto'`    |
+| `placement` | `placement` | Set selected placement | `"bottom" \| "top"`     | `'bottom'`  |
+| `rounded`   | `rounded`   | Set rounded tab        | `boolean`               | `false`     |
+| `selected`  | `selected`  | Set selected tab       | `boolean`               | `false`     |
+| `small`     | `small`     | Set small size tab     | `boolean`               | `false`     |
 
 
 ----------------------------------------------

diff --git a/packages/core/src/components/tab-item/tab-item.scss b/packages/core/src/components/tab-item/tab-item.scss
@@ -24,6 +24,10 @@ ix-tab-item {
   background-color: var(--theme-tab--background);
   color: var(--theme-tab--color);
 
+  &.circle {
+    height: 72px;
+  }
+
   &.top {
     &::after {
       top: 0;
@@ -63,16 +67,17 @@ ix-tab-item {
     vertical-align: middle;
   }
 
-  &:hover {
+  &:hover:not(.circle) {
     background-color: var(--theme-tab--background--hover);
     color: var(--theme-tab-color-hover);
+    cursor: pointer;
 
     &::after {
       background-color: var(--theme-tab-indicator--background--hover);
     }
   }
 
-  &:active {
+  &:active:not(.circle) {
     background-color: var(--theme-tab--background--active);
     color: var(--theme-tab-color--active);
 
@@ -82,9 +87,18 @@ ix-tab-item {
   }
 
   &:focus-visible {
-    outline: 1px solid var(--theme-focus--border-color);
+    outline: 0px solid var(--focus--border-color);
+
+    .circle {
+      outline: 1px solid var(--focus--border-color);
+    }
   }
 
+  &:focus-visible:not(.circle) {
+    outline: 1px solid var(--focus--border-color);
+  }
+
+
   &.disabled {
     color: var(--theme-tab--color--disabled);
     background-color: var(--theme-tab--background--disabled);
@@ -94,7 +108,7 @@ ix-tab-item {
     }
   }
 
-  &.selected {
+  &.selected:not(.disabled) {
     background-color: var(--theme-tab--background--selected);
     color: var(--theme-tab--color--selected);
 
@@ -115,4 +129,79 @@ ix-tab-item {
       padding: $default-space $tiny-space;
     }
   }
+
+
+  .circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 48px;
+    background-color: var(--theme-animated-tab-indicator--background);
+    border-radius: 50%;
+    border: 2px solid var(--theme-animated-tab-circle--border-color);
+    color: var(--theme-an…icon--color);
+    cursor: pointer;
+
+    &.selected:not(.disabled) {
+      background-color: var(--theme-animated-tab-circle--background--selected);
+      color: var(--theme-animated-tab-icon--color--selected);
+      border-color: var(--theme-animated-tab-circle--border-color--selected);
+
+      &:hover {
+        background-color: var(--theme-animated-tab-circle--background--selected);
+      }
+    }
+
+    &:hover {
+      background-color: var(--theme-animated-tab-circle--background--hover);
+    }
+
+    &:active {
+      background-color: var(--theme-animated-tab-circle--background--active);
+    }
+
+    &:active {
+      background-color: var(--theme-animated-tab-circle--background--active);
+    }
+
+    &.disabled {
+      background-color: var(--theme-animated-tab-circle--background--disabled);
+      border-color: var(--theme-animated-tab-circle--border-color--disabled);
+    }
+
+  }
+
+  .counter {
+    position: absolute;
+    z-index: 1;
+    height: 16px;
+    width: auto;
+    background-color: var(--theme-pill-outline--background);
+    border: 1px solid var(--theme-tab-pill--border-color);
+    border-radius: 100px;
+    bottom: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-left: $tiny-space;
+    padding-right: $tiny-space;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--theme-pill-outline--color);
+    cursor: pointer;
+
+    &.selected {
+      border-color: var(--theme-tab-pill--border-color--selected);
+    }
+
+    &.disabled {
+      border-color: var(--theme-tab-pill--border-color--disabled);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+
 }
diff --git a/packages/core/src/components/tab-item/tab-item.tsx b/packages/core/src/components/tab-item/tab-item.tsx
@@ -35,6 +35,16 @@ export class TabItem {
    */
   @Prop() icon = false;
 
+  /**
+   * Set rounded tab
+   */
+  @Prop() rounded = false;
+
+  /**
+   * Set counter value
+   */
+   @Prop() counter: number;
+
   /**
    * Set layout width style
    */
@@ -50,6 +60,7 @@ export class TabItem {
     disabled: boolean;
     small: boolean;
     icon: boolean;
+    circle: boolean;
     layout: 'auto' | 'stretched';
     placement: 'bottom' | 'top';
   }) {
@@ -61,6 +72,7 @@ export class TabItem {
       stretched: props.layout === 'stretched',
       bottom: props.placement === 'bottom',
       top: props.placement === 'top',
+      circle: props.circle
     };
   }
 
@@ -74,11 +86,15 @@ export class TabItem {
           icon: this.icon,
           layout: this.layout,
           placement: this.placement,
+          circle: this.rounded,
         })}
-        tabindex="0"
+        tabIndex={0}
       >
-        <div class="text">
-          <slot></slot>
+        <div class={{ circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled }}>
+            <slot></slot>
+        </div>
+        <div class={{ counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled }}>
+          {this.counter}
         </div>
       </Host>
     );

diff --git a/packages/core/src/components/tab-item/test/tab-item.spec.tsx b/packages/core/src/components/tab-item/test/tab-item.spec.tsx
@@ -23,6 +23,7 @@ describe('tab-item', () => {
     <div class="text">
       Some text
     </div>
+    <div class="counter hidden"></div>
   </ix-tab-item>`);
   });
 });
diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md
@@ -11,12 +11,13 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property    | Attribute   | Description                       | Type                    | Default    |
-| ----------- | ----------- | --------------------------------- | ----------------------- | ---------- |
-| `layout`    | `layout`    | Set layout width style            | `"auto" \| "stretched"` | `'auto'`   |
-| `placement` | `placement` | Set placement style               | `"bottom" \| "top"`     | `'bottom'` |
-| `selected`  | `selected`  | Set default selected tab by index | `number`                | `0`        |
-| `small`     | `small`     | Set tab items to small size       | `boolean`               | `false`    |
+| Property    | Attribute   | Description                       | Type                    | Default     |
+| ----------- | ----------- | --------------------------------- | ----------------------- | ----------- |
+| `layout`    | `layout`    | Set layout width style            | `"auto" \| "stretched"` | `'auto'`    |
+| `placement` | `placement` | Set placement style               | `"bottom" \| "top"`     | `'bottom'`  |
+| `rounded`   | `rounded`   | Set rounded tabs                  | `any`                   | `undefined` |
+| `selected`  | `selected`  | Set default selected tab by index | `number`                | `0`         |
+| `small`     | `small`     | Set tab items to small size       | `boolean`               | `false`     |
 
 
 ----------------------------------------------

diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
@@ -32,6 +32,11 @@ export class Tabs {
    */
   @Prop() small = false;
 
+  /**
+   * Set rounded tabs
+   */
+   @Prop() rounded = false;
+
   /**
    * Set default selected tab by index
    */
@@ -207,6 +212,8 @@ export class Tabs {
     tabs.forEach((element, index) => {
       if (this.small) element.setAttribute('small', 'true');
 
+      if(this.rounded) element.setAttribute('rounded', 'true');
+
       element.setAttribute('layout', this.layout);
       element.setAttribute(
         'selected',