From 0c1f656cf7b8a22391e4b76e79f01c6ef54a5e2a Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Thu, 14 Dec 2023 14:11:52 -0500
Subject: [PATCH] feat(tag): slug (#11226)

* feat(tag): tag with slug

* feat(tag): icon slot for tag

* feat(slug): add tag specific styles for slug

* chore(ci-check): fix ts errors
---
 .../src/components/checkbox/checkbox-story.ts |   1 -
 .../src/components/slug/slug-example-story.ts |  62 ++++++
 .../src/components/slug/slug-story.scss       |   4 +
 .../src/components/slug/slug.scss             | 201 ++++++++++++++++++
 .../src/components/tag/tag-story.ts           |   6 +-
 .../src/components/tag/tag.scss               |   4 +
 .../src/components/tag/tag.ts                 |  44 ++--
 7 files changed, 301 insertions(+), 21 deletions(-)

diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
index 5681f4ed5ab..24b7db11659 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
@@ -10,7 +10,6 @@
 import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
 import './index';
diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
index c196e0196eb..5da43c79d39 100644
--- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts
+++ b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
@@ -12,6 +12,7 @@ import { boolean } from '@storybook/addon-knobs';
 import View16 from '@carbon/icons/lib/view/16';
 import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
 import Folders16 from '@carbon/icons/lib/folders/16';
+import Asleep16 from '@carbon/icons/lib/asleep/16';
 import textNullable from '../../../.storybook/knob-text-nullable';
 import { prefix } from '../../globals/settings';
 import './index';
@@ -409,6 +410,67 @@ export const _Select = () => {
     </div> `;
 };
 
+const tagTypes = [
+  'red',
+  'magenta',
+  'purple',
+  'blue',
+  'cyan',
+  'teal',
+  'green',
+  'gray',
+  'cool-gray',
+  'warm-gray',
+  'high-contrast',
+  'outline',
+];
+
+export const _Tag = () => {
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="slug-tag-container">
+      ${tagTypes.map(
+        (e) => html`<cds-tag type="${e}"
+          >Tag
+          <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+        </cds-tag>`
+      )}
+    </div>
+
+    <div class="slug-tag-container">
+      ${tagTypes.map(
+        (e) =>
+          html`<cds-tag filter type="${e}">
+            Tag
+            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+          </cds-tag>`
+      )}
+    </div>
+
+    <div class="slug-tag-container">
+      ${tagTypes.map(
+        (e) =>
+          html`<cds-tag type="${e}">
+            ${Asleep16({ slot: 'icon' })} Tag
+            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+          </cds-tag>`
+      )}
+    </div>
+
+    <div class="slug-tag-container">
+      ${tagTypes.map(
+        (e) =>
+          html`<cds-tag filter type="${e}">
+            ${Asleep16({ slot: 'icon' })} Tag
+            <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+          </cds-tag>`
+      )}
+    </div>
+  `;
+};
+
 export const _TextInput = () => {
   return html`<style>
       ${styles}
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss
index 235df6aa15a..b2b39ca5aea 100644
--- a/packages/carbon-web-components/src/components/slug/slug-story.scss
+++ b/packages/carbon-web-components/src/components/slug/slug-story.scss
@@ -111,3 +111,7 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
 #{$prefix}-checkbox-group:not(:first-of-type) {
   margin-top: $spacing-07;
 }
+
+.slug-tag-container {
+  margin-bottom: $spacing-10;
+}
diff --git a/packages/carbon-web-components/src/components/slug/slug.scss b/packages/carbon-web-components/src/components/slug/slug.scss
index 1e9bea1cf89..4a2954e3cdb 100644
--- a/packages/carbon-web-components/src/components/slug/slug.scss
+++ b/packages/carbon-web-components/src/components/slug/slug.scss
@@ -18,6 +18,9 @@
 @use '@carbon/styles/scss/components/slug/index' as *;
 @use '../toggle-tip/toggletip.scss';
 
+// importing tag color tokens for the styling slug in tag component
+@use '@carbon/styles/scss/components/tag/index' as *;
+
 :host(#{$prefix}-slug) {
   @extend .#{$prefix}--slug;
 
@@ -133,3 +136,201 @@
     box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
   }
 }
+
+:host(#{$prefix}-slug[tag='red']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-red;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-red;
+  }
+
+  button:hover {
+    border-color: $tag-color-red;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-red;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='magenta']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-magenta;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-magenta;
+  }
+
+  button:hover {
+    border-color: $tag-color-magenta;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-magenta;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='purple']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-purple;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-purple;
+  }
+
+  button:hover {
+    border-color: $tag-color-purple;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-purple;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='blue']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-blue;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-blue;
+  }
+
+  button:hover {
+    border-color: $tag-color-blue;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-blue;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='cyan']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-cyan;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-cyan;
+  }
+
+  button:hover {
+    border-color: $tag-color-cyan;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-cyan;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='teal']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-teal;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-teal;
+  }
+
+  button:hover {
+    border-color: $tag-color-teal;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-teal;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='green']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-green;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-green;
+  }
+
+  button:hover {
+    border-color: $tag-color-green;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-green;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='cool-gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-cool-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-cool-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-cool-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-cool-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='warm-gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-warm-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-warm-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-warm-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-warm-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='high-contrast']) {
+  .#{$prefix}--slug__text {
+    color: $text-inverse;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $text-inverse;
+  }
+
+  button:hover {
+    border-color: $text-inverse;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $text-inverse;
+    }
+  }
+}
diff --git a/packages/carbon-web-components/src/components/tag/tag-story.ts b/packages/carbon-web-components/src/components/tag/tag-story.ts
index 154a07a02dd..ce6887efdf9 100644
--- a/packages/carbon-web-components/src/components/tag/tag-story.ts
+++ b/packages/carbon-web-components/src/components/tag/tag-story.ts
@@ -39,9 +39,7 @@ const types = [
 
 export const Default = () => {
   return html`
-    ${types.map(
-      (e) => html`<cds-tag size="sm" type="${e}">Tag content</cds-tag>`
-    )}
+    ${types.map((e) => html`<cds-tag type="${e}">Tag content</cds-tag>`)}
   `;
 };
 
@@ -67,7 +65,7 @@ Playground.parameters = {
     [`${prefix}-tag`]: () => ({
       disabled: boolean('Disabled (disabled)', false),
       title: textNullable('Title (title)', 'Clear Selection'),
-      size: select('Tag size (size)', sizes, null),
+      size: select('Tag size (size)', sizes, TAG_SIZE.MEDIUM),
       type: select(
         'Tag type (type)',
         Object.values(TAG_TYPE).reduce(
diff --git a/packages/carbon-web-components/src/components/tag/tag.scss b/packages/carbon-web-components/src/components/tag/tag.scss
index 736fe776ea5..96dd9aede8d 100644
--- a/packages/carbon-web-components/src/components/tag/tag.scss
+++ b/packages/carbon-web-components/src/components/tag/tag.scss
@@ -101,6 +101,10 @@ $css--plex: true !default;
   display: inline-flex;
 }
 
+:host(#{$prefix}-tag) ::slotted([slot='icon']) {
+  @extend .#{$prefix}--tag__custom-icon;
+}
+
 :host(#{$prefix}-tag[filter][disabled]) {
   .#{$prefix}--tag__close-icon {
     cursor: not-allowed;
diff --git a/packages/carbon-web-components/src/components/tag/tag.ts b/packages/carbon-web-components/src/components/tag/tag.ts
index a2c2ab6ed26..6545a05a588 100644
--- a/packages/carbon-web-components/src/components/tag/tag.ts
+++ b/packages/carbon-web-components/src/components/tag/tag.ts
@@ -32,12 +32,24 @@ class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
   protected _buttonNode!: HTMLButtonElement;
 
   /**
-   * Handler for @slotchange, will only be ran if user sets an element under the "icon" slot.
-   *
-   * @private
+   * Handles `slotchange` event.
    */
-  private _handleSlotChange() {
-    this.hasCustomIcon = true;
+  protected _handleSlugSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSTag).slugItem
+            )
+          : false
+      );
+    if (hasContent.length > 0) {
+      (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);
+      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');
+      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');
+    }
+    this.requestUpdate();
   }
 
   /**
@@ -122,31 +134,31 @@ class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       disabled,
-      _handleSlotChange: handleSlotChange,
-      hasCustomIcon,
       filter,
+      _handleSlugSlotChange: handleSlugSlotChange,
       title,
     } = this;
     return html`
+      <slot name="icon"></slot>
       <slot></slot>
-
+      <slot name="slug" @slotchange="${handleSlugSlotChange}"></slot>
       ${filter
         ? html`
             <button class="${prefix}--tag__close-icon" ?disabled=${disabled}>
-              <slot
-                name="icon"
-                aria-label="${title}"
-                @slotchange=${handleSlotChange}>
-                ${hasCustomIcon
-                  ? html``
-                  : html`${Close16({ 'aria-label': title })}`}
-              </slot>
+              ${Close16({ 'aria-label': title })}
             </button>
           `
         : ``}
     `;
   }
 
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
+  }
+
   /**
    * The name of the custom event fired before this tag is being closed upon a user gesture.
    * Cancellation of this event stops the user-initiated action of closing this tag.