feat(tag): tag with slug

carbon-design-system · Dec 13, 2023 · 0b2bc29 · 0b2bc29
1 parent 764412e
commit 0b2bc29
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 13 deletions.
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
@@ -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';
@@ -330,6 +331,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 = (args) => {
+  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({ class: `${prefix}--tag__custom-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({ class: `${prefix}--tag__custom-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
@@ -110,3 +110,7 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
 #{$prefix}-radio-button-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/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.ts b/packages/carbon-web-components/src/components/tag/tag.ts
@@ -40,6 +40,27 @@ class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
     this.hasCustomIcon = true;
   }
 
+  /**
+   * Handles `slotchange` event.
+   */
+  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) {
+      // this._hasSlug = Boolean(hasContent);
+      (hasContent[0] as HTMLElement).setAttribute('size', 'sm');
+      (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');
+    }
+    this.requestUpdate();
+  }
+
   /**
    * Handles `click` event on this element.
    *
@@ -128,25 +149,28 @@ class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
       title,
     } = this;
     return html`
+      <slot name="icon" aria-label="${title}" @slotchange=${handleSlotChange}>
+        ${hasCustomIcon ? html`` : null}
+      </slot>
       <slot></slot>
-
+      <slot name="slug" @slotchange="${this._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.