Merge branch 'release-cwc/v2.1.0' into feat/data-table-slug

ariellalgilmore · Dec 14, 2023 · 69e97f1 · 69e97f1
2 parents 8f055c3 + 0c1f656
commit 69e97f1
Show file tree

Hide file tree

Showing 7 changed files with 301 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;