chore(checkbox): change checkbox docs and stories to use slot

ariellalgilmore · Dec 15, 2023 · d990e2d · d990e2d
1 parent 4cc4157
commit d990e2d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 43 deletions.
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/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/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>
   `;