fix(chat-button): update to latest with no icon option (#11577)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 29, 2024 · 4106d3d · 4106d3d
1 parent 82c22c9
commit 4106d3d
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 30 deletions.
diff --git a/.yarn/cache/@carbon-styles-npm-1.51.0-559dc8b13b-39f9e56f19.zip b/.yarn/cache/@carbon-styles-npm-1.51.0-559dc8b13b-39f9e56f19.zip
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -71,7 +71,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "^2.27.1",
-    "@carbon/styles": "1.51.0",
+    "@carbon/styles": "1.51.1",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",
     "flatpickr": "4.6.13",

diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts b/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts
@@ -31,6 +31,11 @@ export const Default = () => {
         <cds-chat-button size="lg">
           Primary ${Add16({ slot: 'icon' })}
         </cds-chat-button>
+        <br />
+        <br />
+        <cds-chat-button size="sm"> Primary </cds-chat-button>
+        <cds-chat-button size="md"> Primary </cds-chat-button>
+        <cds-chat-button size="lg"> Primary </cds-chat-button>
       </div>
       <div class="test-button-kinds">
         <h3>Kinds</h3>
@@ -50,6 +55,13 @@ export const Default = () => {
         <cds-chat-button kind="danger">
           Danger ${Add16({ slot: 'icon' })}
         </cds-chat-button>
+        <br />
+        <br />
+        <cds-chat-button kind="primary"> Primary </cds-chat-button>
+        <cds-chat-button kind="secondary"> Secondary </cds-chat-button>
+        <cds-chat-button kind="tertiary"> Tertiary </cds-chat-button>
+        <cds-chat-button kind="ghost"> Ghost </cds-chat-button>
+        <cds-chat-button kind="danger"> Danger </cds-chat-button>
       </div>
       <div class="test-button-quick-action">
         <h3>Quick action</h3>
@@ -66,6 +78,16 @@ export const Default = () => {
         <cds-chat-button is-quick-action disabled>
           Disabled ${Add16({ slot: 'icon' })}
         </cds-chat-button>
+        <br />
+        <br />
+        <cds-chat-button is-quick-action> Quick action </cds-chat-button>
+        <cds-chat-button is-quick-action is-selected>
+          Selected and Enabled
+        </cds-chat-button>
+        <cds-chat-button is-quick-action is-selected disabled>
+          Selected and disabled
+        </cds-chat-button>
+        <cds-chat-button is-quick-action disabled> Disabled </cds-chat-button>
       </div>
       <div class="test-button-skeleton">
         <h3>Skeleton</h3>

diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button.ts b/packages/carbon-web-components/src/components/chat-button/chat-button.ts
@@ -22,6 +22,23 @@ export { CHAT_BUTTON_SIZE, CHAT_BUTTON_KIND };
  */
 @customElement(`${prefix}-chat-button`)
 class CDSChatButton extends LitElement {
+  /**
+   * `true` if there is an icon.
+   */
+  private _hasIcon = false;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  private _handleSlotChange({ target }: Event) {
+    this._hasIcon = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+    this.requestUpdate();
+  }
+
   /**
    * `true` if the button should be disabled.
    */
@@ -70,6 +87,7 @@ class CDSChatButton extends LitElement {
     }
 
     let classes = `${prefix}--chat-btn`;
+    classes += this._hasIcon ? ` ${prefix}--chat-btn--with-icon` : '';
     classes += this.isQuickAction ? ` ${prefix}--chat-btn--quick-action` : '';
     classes += this.isSelected
       ? ` ${prefix}--chat-btn--quick-action--selected`
@@ -81,7 +99,11 @@ class CDSChatButton extends LitElement {
         size="${this.size}"
         kind="${this.kind}"
         ?disabled="${this.disabled}">
-        <slot></slot><slot name="icon" slot="icon"></slot>
+        <slot></slot
+        ><slot
+          name="icon"
+          slot="icon"
+          @slotchange="${this._handleSlotChange}"></slot>
       </cds-button>
     `;
   }

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@carbon/icons-react": "11.36.0",
     "@carbon/layout": "11.20.1",
-    "@carbon/styles": "1.51.0",
+    "@carbon/styles": "1.51.1",
     "@carbon/telemetry": "0.1.0",
     "@carbon/type": "11.25.1"
   },

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -95,7 +95,7 @@
     "@carbon/ibmdotcom-utilities": "2.4.0",
     "@carbon/layout": "11.20.1",
     "@carbon/motion": "11.16.1",
-    "@carbon/styles": "1.51.0",
+    "@carbon/styles": "1.51.1",
     "@carbon/telemetry": "0.1.0",
     "@carbon/web-components": "2.4.0",
     "lit": "^2.7.6",

diff --git a/packages/web-components/src/components/notice-choice/notice-choice.ts b/packages/web-components/src/components/notice-choice/notice-choice.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.

diff --git a/yarn.lock b/yarn.lock
@@ -3228,7 +3228,7 @@ __metadata:
   dependencies:
     "@carbon/icons-react": "npm:11.36.0"
     "@carbon/layout": "npm:11.20.1"
-    "@carbon/styles": "npm:1.51.0"
+    "@carbon/styles": "npm:1.51.1"
     "@carbon/telemetry": "npm:0.1.0"
     "@carbon/themes": "npm:11.32.0"
     "@carbon/type": "npm:11.25.1"
@@ -3337,7 +3337,7 @@ __metadata:
     "@carbon/motion": "npm:11.16.1"
     "@carbon/pictograms-react": "npm:11.57.0"
     "@carbon/react": "npm:1.51.1"
-    "@carbon/styles": "npm:1.51.0"
+    "@carbon/styles": "npm:1.51.1"
     "@carbon/telemetry": "npm:0.1.0"
     "@carbon/type": "npm:11.25.1"
     "@carbon/web-components": "npm:2.4.0"
@@ -3591,28 +3591,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/styles@npm:1.51.0":
-  version: 1.51.0
-  resolution: "@carbon/styles@npm:1.51.0"
-  dependencies:
-    "@carbon/colors": "npm:^11.20.0"
-    "@carbon/feature-flags": "npm:^0.16.0"
-    "@carbon/grid": "npm:^11.21.0"
-    "@carbon/layout": "npm:^11.20.0"
-    "@carbon/motion": "npm:^11.16.0"
-    "@carbon/themes": "npm:^11.32.0"
-    "@carbon/type": "npm:^11.25.0"
-    "@ibm/plex": "npm:6.0.0-next.6"
-  peerDependencies:
-    sass: ^1.33.0
-  peerDependenciesMeta:
-    sass:
-      optional: true
-  checksum: 10/39f9e56f192c1458a8ba11e2c0c0b58fe1b09e7212adfcc00b61fb270578949979c4ce4b8166193a5489ae347a0558855dae27f47ca0a7a09367cda94aa16fc0
-  languageName: node
-  linkType: hard
-
-"@carbon/styles@npm:^1.51.1":
+"@carbon/styles@npm:1.51.1, @carbon/styles@npm:^1.51.1":
   version: 1.51.1
   resolution: "@carbon/styles@npm:1.51.1"
   dependencies:
@@ -3686,7 +3665,7 @@ __metadata:
     "@carbon/ibm-products-styles": "npm:^2.27.1"
     "@carbon/icon-helpers": "npm:10.46.0"
     "@carbon/icons": "npm:11.36.0"
-    "@carbon/styles": "npm:1.51.0"
+    "@carbon/styles": "npm:1.51.1"
     "@floating-ui/dom": "npm:^1.6.3"
     "@ibm/telemetry-js": "npm:^1.2.1"
     "@open-wc/semantic-dom-diff": "npm:~0.18.0"