chore(merge): conflict again with cwc 2.1.0 (#11240)

### Related Ticket(s) Closes # {{Provide issue number link(s) to the related ticket(s) that this pull request addresses}} ### Description {{Add a human-readable description / detail summary of what the PR is changing and any details around how and why}} {{If applicable, include a screenshot indicating an example or examples of what the PR is changing in the application}} ### Changelog **New** - {{new thing}} **Changed** - {{changed thing}} **Removed** - {{removed thing}}
carbon-design-system · Dec 16, 2023 · a285c4d · a285c4d
1 parent 6514729
commit a285c4d
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 81 deletions.
diff --git a/.yarn/cache/@carbon-icons-react-npm-11.33.0-4f49841774-beb78e827e.zip b/.yarn/cache/@carbon-icons-react-npm-11.33.0-4f49841774-beb78e827e.zip
diff --git a/...eact-npm-1.45.0-538bcdbc48-f412e129b7.zip → ...eact-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip b/...eact-npm-1.45.0-538bcdbc48-f412e129b7.zip → ...eact-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip
diff --git a/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip b/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
   <style>
     /* Suppress custom element until styles are loaded */
     cds-checkbox:not(:defined) {
@@ -24,6 +24,6 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/checkbox.min.js"></script>
 </head>
 <body class="cds-theme-zone-white">
-  <cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
+  <cds-checkbox>Lorem Ipsum</cds-checkbox>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html
@@ -13,7 +13,7 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  
+
   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
@@ -24,6 +24,6 @@
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
+  <cds-checkbox>Lorem Ipsum</cds-checkbox>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json
@@ -11,7 +11,7 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/styles": "^1.34.0",
+    "@carbon/styles": "^1.45.0",
     "@carbon/web-components": "latest",
     "sass": "^1.64.1"
   },

diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "private": true,
-  "version": "2.1.0-rc.0",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -72,7 +72,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.44.0",
+    "@carbon/styles": "^1.45.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx b/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
@@ -28,15 +28,15 @@ import '@carbon/web-components/es/components/checkbox/index.js';
 ### HTML
 
 ```html
-<cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
+<cds-checkbox>Lorem Ipsum</cds-checkbox>
 ```
 
 Use `cds-checkbox-group` when handling multiple checkboxes
 
 ```html
 <cds-checkbox-group legend-text="Group label">
-  <cds-checkbox label-text="Lorem Ipsum 0"></cds-checkbox>
-  <cds-checkbox label-text="Lorem Ipsum 1"></cds-checkbox>
+  <cds-checkbox>Lorem Ipsum 0</cds-checkbox>
+  <cds-checkbox>Lorem Ipsum 1</cds-checkbox>
 </cds-checkbox-group>
 ```
 

diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
@@ -20,8 +20,8 @@ const checkboxLabel = 'Checkbox label';
 export const Default = () => {
   return html`
     <cds-checkbox-group legend-text="Group label">
-      <cds-checkbox label-text="${checkboxLabel}"></cds-checkbox>
-      <cds-checkbox label-text="${checkboxLabel}"></cds-checkbox>
+      <cds-checkbox>${checkboxLabel}</cds-checkbox>
+      <cds-checkbox>${checkboxLabel}</cds-checkbox>
     </cds-checkbox-group>
   `;
 };
@@ -31,29 +31,26 @@ Default.storyName = 'Default';
 export const Skeleton = () => {
   return html`
     <fieldset class="${prefix}--fieldset">
-      <cds-checkbox-skeleton
-        label-text="${checkboxLabel}"></cds-checkbox-skeleton>
+      <cds-checkbox-skeleton>${checkboxLabel}</cds-checkbox-skeleton>
     </fieldset>
   `;
 };
 
 export const Single = () => {
   return html`
-    <cds-checkbox
-      label-text="${checkboxLabel}"
-      helper-text="Helper text goes here"></cds-checkbox>
+    <cds-checkbox helper-text="Helper text goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
     <br /><br />
-    <cds-checkbox
-      label-text="${checkboxLabel}"
-      invalid
-      invalid-text="Invalid test goes here"></cds-checkbox>
+    <cds-checkbox invalid invalid-text="Invalid test goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
     <br /><br />
-    <cds-checkbox
-      label-text="${checkboxLabel}"
-      warn
-      warn-text="Warning test goes here"></cds-checkbox>
+    <cds-checkbox warn warn-text="Warning test goes here"
+      >${checkboxLabel}</cds-checkbox
+    >
     <br /><br />
-    <cds-checkbox label-text="${checkboxLabel}" readonly></cds-checkbox>
+    <cds-checkbox readonly>${checkboxLabel}</cds-checkbox>
   `;
 };
 
@@ -79,17 +76,15 @@ export const Playground = (args) => {
       ?readonly="${readonly}"
       ?warn="${warn}"
       warn-text="${warnText}">
-      <cds-checkbox
-        checked
-        label-text="Checkbox label"
-        @cds-checkbox-changed="${onChange}"></cds-checkbox>
-      <cds-checkbox
-        label-text="Checkbox label"
-        @cds-checkbox-changed="${onChange}"></cds-checkbox>
-      <cds-checkbox
-        disabled
-        label-text="Checkbox label"
-        @cds-checkbox-changed="${onChange}"></cds-checkbox>
+      <cds-checkbox checked @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
+      <cds-checkbox @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
+      <cds-checkbox disabled @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
     </cds-checkbox-group>
   `;
 };

diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.ts b/packages/carbon-web-components/src/components/checkbox/checkbox.ts
@@ -254,7 +254,9 @@ class CDSCheckbox extends FocusMixin(FormMixin(LitElement)) {
         part="label"
         class="${labelClasses}"
         title="${ifDefined(title)}">
-        <span class="${labelTextClasses}">${labelText}</span>
+        <span class="${labelTextClasses}"
+          >${labelText ? labelText : html`<slot></slot>`}</span
+        >
       </label>
       <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
       <div class="${prefix}--checkbox__validation-msg">

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
@@ -99,9 +99,9 @@ export const _Checkbox = (args) => {
         ?warn="${warn}"
         warn-text="${warnText}">
         <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
-        <cds-checkbox label-text="Checkbox label"></cds-checkbox>
-        <cds-checkbox label-text="Checkbox label"></cds-checkbox>
-        <cds-checkbox label-text="Checkbox label"></cds-checkbox>
+        <cds-checkbox>Checkbox label</cds-checkbox>
+        <cds-checkbox>Checkbox label</cds-checkbox>
+        <cds-checkbox>Checkbox label</cds-checkbox>
       </cds-checkbox-group>
 
       <cds-checkbox-group
@@ -111,13 +111,15 @@ export const _Checkbox = (args) => {
         invalid-text="${invalidText}"
         ?warn="${warn}"
         warn-text="${warnText}">
-        <cds-checkbox label-text="Checkbox label">
+        <cds-checkbox>
+          Checkbox label
           <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
         </cds-checkbox>
-        <cds-checkbox label-text="Checkbox label">
+        <cds-checkbox>
+          Checkbox label
           <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
         </cds-checkbox>
-        <cds-checkbox label-text="Checkbox label"></cds-checkbox>
+        <cds-checkbox>Checkbox label</cds-checkbox>
       </cds-checkbox-group>
 
       <cds-checkbox-group
@@ -127,17 +129,19 @@ export const _Checkbox = (args) => {
         invalid-text="${invalidText}"
         ?warn="${warn}"
         warn-text="${warnText}">
-        <cds-checkbox label-text="Checkbox label">
+        <cds-checkbox>
+          Checkbox label
           <cds-slug alignment="bottom-left" kind="inline">
             ${content}${actions}
           </cds-slug>
         </cds-checkbox>
-        <cds-checkbox label-text="Checkbox label">
+        <cds-checkbox>
+          Checkbox label
           <cds-slug alignment="bottom-left" kind="inline">
             ${content}${actions}
           </cds-slug>
         </cds-checkbox>
-        <cds-checkbox label-text="Checkbox label"></cds-checkbox>
+        <cds-checkbox>Checkbox label</cds-checkbox>
       </cds-checkbox-group>
     </div>
   `;

diff --git a/packages/carbon-web-components/src/components/slug/slug-story.mdx b/packages/carbon-web-components/src/components/slug/slug-story.mdx
@@ -0,0 +1,52 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Slug
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
+
+The slug is a component alerting the user of generated AI content.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/slug/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['slug'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-slug size="mini" alignment="bottom-left">
+  <div slot="body-text">
+    <p class="secondary">AI Explained</p>
+    <h1>84%</h1>
+    <p class="secondary bold">Confidence score</p>
+    <p class="secondary">
+      Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+      eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+    </p>
+    <hr />
+    <p class="secondary">Model type</p>
+    <p class="bold">Foundation model</p>
+  </div>
+</cds-slug>
+```
+
+## `<cds-slug>` attributes, properties and events
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-slug revert-active>`) and `false` means not setting the attribute (e.g.
+`<cds-slug>` without `revertActive` attribute).
+
+<Props of="cds-slug" />
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts
@@ -19,6 +19,7 @@ import { prefix } from '../../globals/settings';
 import './index';
 import '../icon-button/index';
 import styles from './slug-story.scss';
+import storyDocs from './slug-story.mdx';
 
 import { POPOVER_ALIGNMENT } from '../popover/defs';
 import { SLUG_SIZE } from './defs';
@@ -247,4 +248,7 @@ Playground.parameters = {
 
 export default {
   title: 'Experimental/Slug',
+  parameters: {
+    ...storyDocs.parameters,
+  },
 };
diff --git a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md
@@ -6,7 +6,7 @@
 
 ```
 <input
-  aria-checked="false"
+  aria-checked="true"
   aria-readonly="false"
   class="cds--checkbox"
   id="checkbox"
@@ -25,14 +25,18 @@
     </slot>
   </span>
 </label>
+<slot name="slug">
+</slot>
+<div class="cds--checkbox__validation-msg">
+</div>
 
 ```
 
 ####   `Should render with various attributes`
 
 ```
 <input
-  aria-checked="mixed"
+  aria-checked="true"
   aria-readonly="false"
   class="cds--checkbox"
   disabled=""
@@ -46,12 +50,16 @@
   part="label"
   title=""
 >
-  <span class="cds--checkbox-label-text cds--visually-hidden">
+  <span class="cds--checkbox-label-text">
     <slot>
-      label-text-foo
+      Checkbox label
     </slot>
   </span>
 </label>
+<slot name="slug">
+</slot>
+<div class="cds--checkbox__validation-msg">
+</div>
 
 ```