feat(tag): colour token updates (#310)

* feat: colour token updates - tag * feat: clickable tag variant * chore: doc update * chore: class name update * chore: colour token update * chore: minor fix * chore: code cleanup * fix: changed show all/ less button to kd-link * chore: code cleanup - tag group and skeleton * fix: keyboard controls for tag * chore: comments and migration guide notes * fix: outline-width value change
kyndryl-design-system · Jan 9, 2025 · 1c4bf17 · 1c4bf17
1 parent 93b8f17
commit 1c4bf17
Show file tree

Hide file tree

Showing 9 changed files with 9,773 additions and 9,620 deletions.
diff --git a/custom-elements.json b/custom-elements.json
diff --git a/src/components/reusable/tag/tag.scss b/src/components/reusable/tag/tag.scss
diff --git a/src/components/reusable/tag/tag.skeleton.ts b/src/components/reusable/tag/tag.skeleton.ts
@@ -34,24 +34,16 @@ export class TagSkeleton extends LitElement {
   @property({ type: String })
   tagSize = 'sm';
 
-  /**
-   * Shade `'light'` (default) and `'dark'` for tag.
-   */
-  @property({ type: String })
-  shade = 'light';
-
   override render() {
-    const shadeClass = this.shade === 'dark' ? '-dark' : '';
     const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small';
 
     const tagClasses = {
       tags: true,
-      [`${shadeClass}`]: true,
       [`${sizeClass}`]: true,
     };
 
     return html`
-      <div class="${classMap(tagClasses)}" shade=${this.shade}>
+      <div class="${classMap(tagClasses)}">
         <kyn-skeleton
           shape="rectangle"
           height="100%"

diff --git a/src/components/reusable/tag/tag.stories.js b/src/components/reusable/tag/tag.stories.js
@@ -10,22 +10,21 @@ export default {
       options: ['sm', 'md'],
       control: { type: 'select' },
     },
-    shade: {
-      options: ['light', 'dark'],
-      control: { type: 'select' },
-    },
     tagColor: {
       options: [
         'grey',
         'spruce',
-        'failed',
+        'interactive',
+        'blue',
+        'error',
         'warning',
-        'passed',
+        'success',
         'cat01',
         'cat02',
         'cat03',
         'cat04',
         'cat05',
+        'cat06',
       ],
       control: { type: 'select' },
     },
@@ -39,6 +38,11 @@ export default {
         type: 'boolean',
       },
     },
+    clickable: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   parameters: {
     design: {
@@ -51,10 +55,10 @@ export default {
 const args = {
   label: 'Tag Example',
   tagSize: 'md',
-  shade: 'light',
   tagColor: 'spruce',
   disabled: false,
   filter: false,
+  clickable: false,
   noTruncation: false,
 };
 
@@ -65,12 +69,13 @@ export const Tag = {
       <kyn-tag
         label=${args.label}
         tagSize=${args.tagSize}
-        shade=${args.shade}
         tagColor=${args.tagColor}
         ?disabled=${args.disabled}
         ?filter=${args.filter}
+        ?clickable=${args.clickable}
         ?noTruncation=${args.noTruncation}
         @on-close=${(e) => action(e.type)(e)}
+        @on-click=${(e) => action(e.type)(e)}
       /></kyn-tag>
     `;
   },

diff --git a/src/components/reusable/tag/tag.ts b/src/components/reusable/tag/tag.ts
@@ -45,10 +45,10 @@ export class Tag extends LitElement {
   noTruncation = false;
 
   /**
-   * Shade `'light'` (default) and `'dark'` for tag
+   * Determine if Tag is clickable.
    */
-  @property({ type: String })
-  shade = 'light';
+  @property({ type: Boolean })
+  clickable = false;
 
   /**
    * Color variants. Default spruce
@@ -64,18 +64,19 @@ export class Tag extends LitElement {
 
   override render() {
     const baseColorClass = `tag-${this.tagColor}`;
-    const shadeClass = this.shade === 'dark' ? '-dark' : '';
     const sizeClass = this.tagSize === 'md' ? 'tag-medium' : 'tag-small';
 
     const tagClasses = {
       tags: true,
       'tag-disable': this.disabled,
-      [`${baseColorClass}${shadeClass}`]: true,
+      'tag-clickable': this.clickable,
+      [`tag-clickable-${this.tagColor}`]: this.clickable,
+      [`${baseColorClass}`]: true,
       [`${sizeClass}`]: true,
       [`${sizeClass}-filter`]: this.filter,
     };
 
-    const iconOutlineClasses = `${baseColorClass}${shadeClass}-close-btn`;
+    const iconOutlineClasses = `${baseColorClass}-close-btn`;
     const iconOutlineOffsetClass = `tag-close-btn-${this.tagSize}`;
     const iconClasses = {
       'tag-close-btn': true,
@@ -97,21 +98,23 @@ export class Tag extends LitElement {
         ?disabled="${this.disabled}"
         ?filter=${this.filter}
         tagColor=${this.tagColor}
-        shade=${this.shade}
         title="${this.label}"
+        tabindex="${this.clickable ? '0' : '-1'}"
+        @click=${(e: any) => this.handleTagClick(e, this.label)}
+        @keydown=${(e: any) => this.handleTagPress(e, this.label)}
       >
         <span class="${classMap(labelClasses)}">${this.label}</span>
         ${this.filter
           ? html`
               <button
                 class="${classMap(iconClasses)}"
-                shade=${this.shade}
                 ?disabled="${this.disabled}"
                 title="${this.clearTagText}
                  ${this.label}"
                 aria-label="${this.clearTagText}
                  ${this.label}"
                 @click=${(e: any) => this.handleTagClear(e, this.label)}
+                @keydown=${(e: any) => this.handleTagClearPress(e, this.label)}
               >
                 <span>${unsafeSVG(clearIcon16)}</span>
               </button>
@@ -122,7 +125,8 @@ export class Tag extends LitElement {
   }
 
   private handleTagClear(e: any, value: string) {
-    if (!this.disabled) {
+    e.stopPropagation();
+    if (e.pointerType && !this.disabled) {
       const event = new CustomEvent('on-close', {
         detail: {
           value,
@@ -132,6 +136,49 @@ export class Tag extends LitElement {
       this.dispatchEvent(event);
     }
   }
+
+  private handleTagClearPress(e: any, value: string) {
+    e.stopPropagation();
+    // Keyboard key codes: 32 = SPACE | 13 = ENTER
+    if ((e.keyCode === 32 || e.keyCode === 13) && !this.disabled) {
+      const event = new CustomEvent('on-close', {
+        detail: {
+          value,
+          origEvent: e,
+        },
+      });
+      this.dispatchEvent(event);
+    }
+  }
+
+  private handleTagClick(e: any, value: string) {
+    if (!this.disabled && this.clickable) {
+      const event = new CustomEvent('on-click', {
+        detail: {
+          value,
+          origEvent: e,
+        },
+      });
+      this.dispatchEvent(event);
+    }
+  }
+
+  private handleTagPress(e: any, value: string) {
+    // Keyboard key codes: 32 = SPACE | 13 = ENTER
+    if (
+      (e.keyCode === 32 || e.keyCode === 13) &&
+      !this.disabled &&
+      this.clickable
+    ) {
+      const event = new CustomEvent('on-click', {
+        detail: {
+          value,
+          origEvent: e,
+        },
+      });
+      this.dispatchEvent(event);
+    }
+  }
 }
 
 declare global {

diff --git a/src/components/reusable/tag/tagGroup.scss b/src/components/reusable/tag/tagGroup.scss
@@ -11,29 +11,7 @@
   gap: 4px;
 }
 .tag-reveal-toggle {
-  @include typography.type-ui-03;
-  padding: 0 4px 0 4px;
-  background: 0 0;
-  border: none;
-  color: var(--kd-color-text-link);
-  border-radius: 2px;
-  cursor: pointer;
-  outline: 2px solid transparent;
-  min-width: 72px;
-  margin-left: 2px;
-
-  &:hover {
-    color: var(--kd-color-text-link-hover);
-    background-color: var(--kd-color-background-accent-subtle);
-  }
-
-  &:active {
-    color: var(--kd-color-text-pressed);
-  }
-
-  &:focus {
-    outline-color: var(--kd-color-border-focus);
-  }
+  margin-left: 4px;
 
   &-md {
     height: 24px;

diff --git a/src/components/reusable/tag/tagGroup.stories.js b/src/components/reusable/tag/tagGroup.stories.js
@@ -14,25 +14,6 @@ export default {
       options: ['sm', 'md'],
       control: { type: 'select' },
     },
-    shade: {
-      options: ['light', 'dark'],
-      control: { type: 'select' },
-    },
-    tagColor: {
-      options: [
-        'grey',
-        'spruce',
-        'failed',
-        'warning',
-        'passed',
-        'cat01',
-        'cat02',
-        'cat03',
-        'cat04',
-        'cat05',
-      ],
-      control: { type: 'select' },
-    },
   },
   parameters: {
     design: {
@@ -47,11 +28,10 @@ export const TagGroup = {
     filter: false,
     limitTags: false,
     tagSize: 'md',
-    textStrings:{
+    textStrings: {
       showAll: 'Show all',
       showLess: 'Show less',
     },
-    tagColor:"failed"
   },
   render: (args) => {
     return html`
@@ -85,7 +65,6 @@ export const Skeleton = {
       showLess: 'Show less',
     },
     tagSkeletonLength: 10,
-    shade: 'light',
   },
   render: (args) => {
     return html`
@@ -97,7 +76,7 @@ export const Skeleton = {
       >
         ${Array.from(
           { length: args.tagSkeletonLength },
-          () => html`<kyn-tag-skeleton shade=${args.shade}></kyn-tag-skeleton>`
+          () => html`<kyn-tag-skeleton></kyn-tag-skeleton>`
         )}
       </kyn-tag-group>
     `;

diff --git a/src/components/reusable/tag/tagGroup.ts b/src/components/reusable/tag/tagGroup.ts
@@ -8,6 +8,7 @@ import {
 import { classMap } from 'lit-html/directives/class-map.js';
 import './tag';
 import TagGroupScss from './tagGroup.scss';
+import '@kyndryl-design-system/shidoka-foundation/components/link';
 
 /**
  * Tag & Tag Group
@@ -64,14 +65,15 @@ export class TagGroup extends LitElement {
 
         ${this.limitTags && this.tags.length > 5
           ? html`
-              <button
+              <kd-link
                 class="${classMap(toggleBtnClasses)}"
-                @click=${() => this._toggleRevealed(!this.limitRevealed)}
+                standalone
+                @on-click=${() => this._toggleRevealed(!this.limitRevealed)}
               >
                 ${this.limitRevealed
                   ? this.textStrings.showLess
                   : html` ${this.textStrings.showAll}`}
-              </button>
+              </kd-link>
             `
           : null}
       </div>

diff --git a/src/stories/migration.mdx b/src/stories/migration.mdx
@@ -31,6 +31,10 @@ _No migration effort required._
 - Dropdown options
   - `selected` prop has been removed. Use the `value` prop from Dropdown to control the selection.
 
+#### Tag & Tag skeleton
+
+- `shade` prop is removed.
+
 #### Form Input Components
 
 - Radio Button Group , Number Input, Text Input , Text Area, Checkbox Group, Checkbox Subgroups, Dropdown