feat(data-table): sync with @carbon/react v11 (#10516)

* feat(data-table): sync with v11 * fix(data-table): fix to compile * fix(table): more compile error fix * fix(data-table): address some comments * fix(data-table): sizes, checkbox, skeleton * chore(data-table): restructuring story directory * fix(data-table): overflow hover on menu * fix(data-table): updated docs * feat(data-table): dispatching elements * fix(data-table): single story folder and example update * fix(data-table): cleanup * fix(data-table): addressed comments * fix(data-table): addressed comments * fix(data-table): addressed final comments * fix(data-table): refactored styles for attribute within host * fix(data-table): emit tokens --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 20, 2023 · 7041b19 · 7041b19
1 parent 560a753
commit 7041b19
Show file tree

Hide file tree

Showing 70 changed files with 5,779 additions and 3,043 deletions.
diff --git a/.../packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html b/.../packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html
@@ -19,33 +19,27 @@
       }
     </style>
     <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/data-table.min.js"></script>
-    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/pagination.min.js"></script>
   </head>
   <body>
-    <h1>Default tabe</h1>
     <cds-table>
       <cds-table-head>
         <cds-table-header-row>
-          <cds-table-header-cell>Foo</cds-table-header-cell>
-          <cds-table-header-cell>Bar</cds-table-header-cell>
-          <cds-table-header-cell>Baz</cds-table-header-cell>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
         </cds-table-header-row>
       </cds-table-head>
       <cds-table-body>
         <cds-table-row>
-          <cds-table-cell>Foo1</cds-table-cell>
-          <cds-table-cell>Bar1</cds-table-cell>
-          <cds-table-cell>Baz1</cds-table-cell>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
         </cds-table-row>
         <cds-table-row>
-          <cds-table-cell>Foo2</cds-table-cell>
-          <cds-table-cell>Bar2</cds-table-cell>
-          <cds-table-cell>Baz2</cds-table-cell>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
         </cds-table-row>
         <cds-table-row>
-          <cds-table-cell>Foo3</cds-table-cell>
-          <cds-table-cell>Bar3</cds-table-cell>
-          <cds-table-cell>Baz3</cds-table-cell>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
         </cds-table-row>
       </cds-table-body>
     </cds-table>
@@ -56,14 +50,27 @@ <h1>Default tabe</h1>
 
     <h1>Sortable table</h1>
     <div id="sortable-table"></div>
-    <script src="./sortable-table.js"></script>
-
-    <br />
-    <br />
-    <br />
-
-    <h1>Sortable table with pagination</h1>
-    <div id="sortable-pagination"></div>
-    <script src="./sortable-pagination.js"></script>
+    <cds-table is-sortable>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
   </body>
 </html>
diff --git a/...s/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/data.js b/...s/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/data.js
diff --git a/...s/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/defs.js b/...s/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/defs.js
diff --git a/...ackages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html b/...ackages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html
@@ -25,26 +25,22 @@ <h1>Default tabe</h1>
     <cds-table>
       <cds-table-head>
         <cds-table-header-row>
-          <cds-table-header-cell>Foo</cds-table-header-cell>
-          <cds-table-header-cell>Bar</cds-table-header-cell>
-          <cds-table-header-cell>Baz</cds-table-header-cell>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
         </cds-table-header-row>
       </cds-table-head>
       <cds-table-body>
         <cds-table-row>
-          <cds-table-cell>Foo1</cds-table-cell>
-          <cds-table-cell>Bar1</cds-table-cell>
-          <cds-table-cell>Baz1</cds-table-cell>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
         </cds-table-row>
         <cds-table-row>
-          <cds-table-cell>Foo2</cds-table-cell>
-          <cds-table-cell>Bar2</cds-table-cell>
-          <cds-table-cell>Baz2</cds-table-cell>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
         </cds-table-row>
         <cds-table-row>
-          <cds-table-cell>Foo3</cds-table-cell>
-          <cds-table-cell>Bar3</cds-table-cell>
-          <cds-table-cell>Baz3</cds-table-cell>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
         </cds-table-row>
       </cds-table-body>
     </cds-table>
@@ -55,14 +51,27 @@ <h1>Default tabe</h1>
 
     <h1>Sortable table</h1>
     <div id="sortable-table"></div>
-    <script src="./sortable-table.js"></script>
-
-    <br />
-    <br />
-    <br />
-
-    <h1>Sortable table with pagination</h1>
-    <div id="sortable-pagination"></div>
-    <script src="./sortable-pagination.js"></script>
+    <cds-table is-sortable>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
   </body>
 </html>