Merge branch 'main' into feat/ibmdotcom-styles-remove-react-class-2

packages/carbon-web-components/.storybook/main.js

@@ -1,19 +1,17 @@
 /**
  * @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.
  */
 
 const path = require('path');
 const sass = require('sass');
-const rtlcss = require('rtlcss');
 const deepReplace = require('../tools/deep-replace');
 
 const { getPaths } = deepReplace;
-const useRtl = process.env.STORYBOOK_CARBON_CUSTOM_ELEMENTS_USE_RTL === 'true';
 
 const arrayify = (value) =>
   Array.isArray(value) ? value : value != null ? [value] : []; // eslint-disable-line no-nested-ternary
@@ -117,7 +115,6 @@ module.exports = {
               plugins: () => [
                 require('../tools/postcss-fix-host-pseudo')(),
                 require('autoprefixer')(),
-                ...(useRtl ? [rtlcss] : []),
               ],
             },
           },

packages/carbon-web-components/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-03-01)
+
+
+### Bug Fixes
+
+* **chat-button:** update to latest with no icon option ([#11577](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11577)) ([4106d3d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4106d3d490a611ef99844fb6812b6790e5b678c3))
+* **content-switcher:** get current content-switcher-item on icon click ([#11602](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11602)) ([271295a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/271295a242e04fb185b042b73f11bc03e1657953)), closes [#10963](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10963)
+* **date picker:** detect change range interval console error ([#11532](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11532)) ([eee2c73](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eee2c73e434f4afed7eccde69017734d0deae0c9)), closes [#11490](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11490)
+* **dropdown:** visibility of warn-text and invalid-text ([#11573](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11573)) ([92225bb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/92225bb4842bc9cefdf9d302836da8291483dd24))
+* side panel story slug alignment ([#11594](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11594)) ([b0ee3b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b0ee3b759b91749137d69bd8f5f019c52edb867a))
+
+
+### Features
+
+* Add CWC Tearsheet ([#11545](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11545)) ([fd18753](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fd18753e21dcd9f11f537da50ce113e2811d131f))
+* cwc stacking tearsheets ([#11586](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11586)) ([7a1842e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a1842ef204f4196aaf62d67f45740ef41921933))
+
+
+
+
+
 # [2.4.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-02-26)
 
 

packages/carbon-web-components/README.md

@@ -28,16 +28,6 @@ with no framework tax, no framework silo.
 `@carbon/web-components` is a variant of Carbon Design System with Custom
 Elements v1 and Shadow DOM v1 specs.
 
-> The original repository, `carbon-web-components`, has been archived. All
-> future work for the package will take place in this monorepo. Please visit the
-> [original repository](https://github.com/carbon-design-system/carbon-web-components)
-> for full history of the files.
-
-The effort stems from
-https://github.com/carbon-design-system/issue-tracking/issues/121. If you are
-interested in this project, adding 👍 to the description of that GH issue, or
-even contributing, will be greatly appreciated!
-
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
@@ -88,7 +78,8 @@ version `v1.16.0`):
   src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.min.js"></script>
 ```
 
-These are the list of available components via CDN:
+<details>
+  <summary>See full list of available components via CDN</summary>
 
 - accordion.min.js
 - breadcrumb.min.js
@@ -132,21 +123,7 @@ These are the list of available components via CDN:
 - toggle.min.js
 - tooltip.min.js
 - ui-shell.min.js
-
-To use the right-to-left (RTL) version of the artifacts, change the file
-extention from `.min.js` to `.rtl.min.js`. For example:
-
-```html
-<!-- By `latest` tag (RTL) -->
-<script
-  type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.rtl.min.js"></script>
-
-<!-- By specific version (RTL) -->
-<script
-  type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.rtl.min.js"></script>
-```
+</details>
 
 #### Basic usage
 
@@ -205,22 +182,6 @@ instead:
 yarn add @carbon/web-components
 ```
 
-> NOTE: Carbon and Lit dependencies will be managed by Carbon Web Components
-> starting in `v1.19.0`. For earlier versions, these dependencies will have to
-> be installed separately:
->
-> npm:
->
-> ```bash
-> npm install --save carbon-components lit-html lit-element
-> ```
->
-> Yarn:
->
-> ```bash
-> yarn add carbon-components lit-html lit-element
-> ```
-
 #### Basic usage
 
 Our example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:
@@ -260,16 +221,11 @@ same manner as native HTML tags, for example:
 
 ## JavaScript framework support
 
-In addition to the available Web Component versions of Carbon components, this
-library also supports usage with JavaScript frameworks like Angular, React, and
-Vue if the desire is to use instead of the pure framework versions of Carbon
-components. Specifically for React, this library comes with a wrapper
-implementation around the Carbon Web Components for more seamless integration
-with your React application.
-
-This is achievable since Web Components is the modern browser standard, and
-works well with other front-end frameworks that exist in the application. In
-turn, this also comes with the benefits of encapsulation within the Shadow DOM:
+This package also supports integration with other JavaScript frameworks like
+Angular and Vue. This is achievable since Web Components is the modern browser
+standard, and works well with other front-end frameworks that exist in the
+application. In turn, this also comes with the benefits of encapsulation within
+the Shadow DOM:
 
 ### Angular
 
@@ -306,48 +262,6 @@ application can use those `.d.ts` files:
   as follows:
   `window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })`
 
-### React
-
-[![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/react)
-
-You can use wrapper React components in
-`@carbon/web-components/es/components-react` generated
-[automatically from the custom elements](./src/globals/wrappers/createReactCustomElementType.ts)
-which allows you to use our components seamlessly in your React code. Here's an
-example:
-
-```javascript
-import React from 'react';
-import { render } from 'react-dom';
-import CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
-
-const App = () => (
-  <CDSDropdown triggerContent="Select an item">
-    <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
-    <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
-    <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
-    <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
-    <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
-  </CDSDropdown>
-);
-
-render(<App />, document.getElementById('root'));
-```
-
-Note: Using the React wrapper requires an additional dependency,
-[`prop-types`](https://www.npmjs.com/package/prop-types).
-
-To run the wrapper React components in SSR environment requires Node `12.16.3`
-or above that supports
-["conditional mapping" feature](https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping):
-
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/react-ssr)
-
-Same Node version requirement applies to Next.js:
-
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/next)
-
 ### Vue
 
 [![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/vue)
@@ -380,21 +294,7 @@ information in several ways:
 
 ## Browser support
 
-- Latest Chrome/Safari/FF ESR
-- IE/Edge support is bast-effort basis
-  - Some components may not be supported
-
-To support IE, you need a couple additional setups:
-
-- Toolstack to re-transpile our code to ES5 (e.g. by specifying IE11 in
-  [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)
-  configuration)
-- Polyfills, listed
-  [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/carbon-web-components/src/polyfills/index.ts)
-
-Here's an example code that shows such setup:
-
-[![Edit carbon-web-components with IE](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/ie)
+- Latest Chrome/Safari/FF
 
 ## Coding conventions
 

packages/carbon-web-components/docs/styling.md

@@ -71,34 +71,6 @@ following:
 @include theme.add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
-## Dependency injection
-
-You can let our custom elements modules load alternate `CSSResult` module. Below
-example uses
-[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/)
-to let our custom elements modules load RTL version of `CSSResult` module that
-is shipped alongside with default `CSSResult` modules, instead of loading the
-default version:
-
-[![Edit @carbon/web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/rtl?)
-
-```javascript
-const reCssBundle = /\.css\.js$/i;
-
-...
-
-module.exports = {
-  ...
-  plugins: [
-    ...
-    new webpack.NormalModuleReplacementPlugin(reCssBundle, resource => {
-      resource.request = resource.request.replace(reCssBundle, '.rtl.css.js');
-    }),
-  ],
-  ...
-};
-```
-
 ## Creating derived components with different style
 
 You can create a derived class of our component and override

packages/carbon-web-components/examples/codesandbox/autoalign/.sassrc

@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}

packages/carbon-web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.4.0",
+  "version": "2.5.0-rc.0",
   "publishConfig": {
     "access": "public"
   },
@@ -70,8 +70,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibm-products-styles": "^2.27.1",
-    "@carbon/styles": "1.51.0",
+    "@carbon/ibm-products-styles": "^2.28.0",
+    "@carbon/styles": "1.52.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",
     "flatpickr": "4.6.13",
@@ -94,7 +94,7 @@
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.23.7",
     "@carbon/icon-helpers": "10.46.0",
-    "@carbon/icons": "11.36.0",
+    "@carbon/icons": "10.48.3",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.27.4",

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>

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>
     `;
   }