feat(slug): callout and revert updates

ariellalgilmore · Jan 23, 2024 · e387131 · e387131
1 parent ff031e5
commit e387131
Show file tree

Hide file tree

Showing 20 changed files with 407 additions and 97 deletions.
diff --git a/...yles-npm-1.47.0-0d50a041b3-a320dd704f.zip → ...yles-npm-1.48.1-093486e984-c93c0cc69a.zip b/...yles-npm-1.47.0-0d50a041b3-a320dd704f.zip → ...yles-npm-1.48.1-093486e984-c93c0cc69a.zip
diff --git a/.yarn/cache/@carbon-themes-npm-11.29.1-874a79cba6-80e7ae2b10.zip b/.yarn/cache/@carbon-themes-npm-11.29.1-874a79cba6-80e7ae2b10.zip
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -68,7 +68,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "1.47.0",
+    "@carbon/styles": "1.48.1",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -332,6 +332,16 @@ class CDSDatePickerInput extends FocusMixin(LitElement) {
     `;
   }
 
+  updated() {
+    this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      ? this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.add('cds--slug--revert')
+      : this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.remove('cds--slug--revert');
+  }
+
   /**
    * The default value for `pattern` property.
    */

diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -676,6 +676,14 @@ class CDSDropdown extends ValidityMixin(
     this._hasSlug
       ? this.setAttribute('slug', '')
       : this.removeAttribute('slug');
+
+    this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      ? this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.add('cds--slug--revert')
+      : this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.remove('cds--slug--revert');
   }
 
   /**

diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -51,6 +51,8 @@
 }
 
 :host(#{$prefix}-modal-close-button) {
+  @extend .#{$prefix}--modal-close-button;
+
   outline: none;
 }
 

diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -174,13 +174,13 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-toggletip[alignment='left-bottom']),
 :host(#{$prefix}-slug[alignment='left-bottom']) {
   .#{$prefix}--popover-content {
-    inset-block-end: -50%;
+    inset-block-end: 50%;
     inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(0.5 * $popover-offset - 16px)
+      calc(0.5 * $popover-offset + 16px)
     );
   }
 }
@@ -190,13 +190,13 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-toggletip[alignment='left-top']),
 :host(#{$prefix}-slug[alignment='left-top']) {
   .#{$prefix}--popover-content {
-    inset-block-start: -50%;
+    inset-block-start: 50%;
     inset-inline-end: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
     transform: translate(
       calc(-1 * $popover-offset),
-      calc(-1 * 0.5 * $popover-offset + 16px)
+      calc(-1 * 0.5 * $popover-offset - 16px)
     );
   }
 }

diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -342,6 +342,14 @@ class CDSSelect extends FormMixin(LitElement) {
       // given reflecting `value` requires child `<option>`s/`<optgroup>`s being there beforehand
       this._selectNode.value = !value ? placeholderItemValue : value;
     }
+
+    this.querySelector('cds-slug')?.hasAttribute('revert-active')
+      ? this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.add('cds--slug--revert')
+      : this.shadowRoot
+          ?.querySelector("slot[name='slug']")
+          ?.classList.remove('cds--slug--revert');
   }
 
   render() {

diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts b/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,7 +41,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {

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
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -75,7 +75,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {
@@ -484,49 +484,27 @@ const tagTypes = [
 ];
 
 export const _Tag = () => {
-  return html`
-    <style>
+  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>
-  `;
+    <cds-tag type="red"
+      >Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+
+    <cds-tag filter type="purple">
+      Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+
+    <cds-tag type="blue">
+      ${Asleep16({ slot: 'icon' })} Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>
+    <cds-tag filter type="green">
+      ${Asleep16({ slot: 'icon' })} Tag
+      <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+    </cds-tag>`;
 };
 
 export const _TextInput = () => {

diff --git a/packages/carbon-web-components/src/components/slug/slug-form-story.ts b/packages/carbon-web-components/src/components/slug/slug-form-story.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -74,7 +74,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export default {

diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss
@@ -22,6 +22,14 @@
   }
 }
 
+.slug-container-example.centered {
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  block-size: calc(100vh - 84px);
+  inline-size: calc(100vw - 84px);
+}
+
 p {
   @include type-style('body-compact-01');
 }
@@ -111,7 +119,3 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
 #{$prefix}-checkbox-group:not(:first-of-type) {
   margin-block-start: $spacing-07;
 }
-
-.slug-tag-container {
-  margin-block-end: $spacing-10;
-}
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -81,7 +81,7 @@ const actions = html`
     ${Folders16({ slot: 'icon' })}
     <span slot="tooltip-content"> Folders </span>
   </cds-icon-button>
-  <cds-slug-action-button>View Literature</cds-slug-action-button>
+  <cds-slug-action-button>View details</cds-slug-action-button>
 `;
 
 export const Default = () => {
@@ -236,7 +236,7 @@ Playground.parameters = {
           tooltipAlignments,
           POPOVER_ALIGNMENT.BOTTOM
         ),
-        size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM),
+        size: select('Slug size (size)', sizes, SLUG_SIZE.EXTRA_SMALL),
         kind,
         dotType,
         aiTextLabel: textNullable('Ai text label', ''),
@@ -246,6 +246,38 @@ Playground.parameters = {
   },
 };
 
+export const Test = (args) => {
+  const { alignment, showActions } = args?.[`${prefix}-slug`] ?? {};
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="slug-container-example slug-container centered">
+      <cds-slug
+        open
+        alignment="${ifDefined(alignment)}"
+        size="${SLUG_SIZE.EXTRA_SMALL}">
+        ${content} ${showActions ? actions : ''}
+      </cds-slug>
+    </div>
+  `;
+};
+
+Test.parameters = {
+  knobs: {
+    [`${prefix}-slug`]: () => {
+      return {
+        alignment: select(
+          'Slug alignment to trigger button (alignment)',
+          tooltipAlignments,
+          POPOVER_ALIGNMENT.BOTTOM
+        ),
+        showActions: boolean('Show actions', false),
+      };
+    },
+  },
+};
+
 export default {
   title: 'Experimental/Slug',
   parameters: {