fix(DataTable): do not show selectAll header with radio selection (#1…

…3920) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 6, 2023 · a1b12bd · a1b12bd
1 parent 7469c25
commit a1b12bd
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 6 deletions.
diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
@@ -244,7 +244,11 @@ export const Playground = (args) => (
           <Table {...getTableProps()}>
             <TableHead>
               <TableRow>
-                <TableSelectAll {...getSelectionProps()} />
+                {args.radio ? (
+                  <th scope="col" />
+                ) : (
+                  <TableSelectAll {...getSelectionProps()} />
+                )}
                 {headers.map((header, i) => (
                   <TableHeader key={i} {...getHeaderProps({ header })}>
                     {header.header}

diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js
@@ -201,6 +201,11 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
   sortRow: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js b/packages/react/src/components/DataTable/stories/DataTable-selection.stories.js
@@ -185,7 +185,11 @@ export const Playground = (args) => (
         <Table {...getTableProps()}>
           <TableHead>
             <TableRow>
-              <TableSelectAll {...getSelectionProps()} />
+              {args.radio ? (
+                <th scope="col" />
+              ) : (
+                <TableSelectAll {...getSelectionProps()} />
+              )}
               {headers.map((header, i) => (
                 <TableHeader key={i} {...getHeaderProps({ header })}>
                   {header.header}

diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js b/packages/react/src/components/DataTable/stories/DataTable-sorting.stories.js
@@ -111,6 +111,11 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
   rows: {
     table: {
       disable: true,

diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js
@@ -361,12 +361,10 @@ Playground.argTypes = {
   useZebraStyles: {
     control: { type: 'boolean' },
   },
-  radio: {
-    control: { type: 'boolean' },
-  },
   isSortable: { control: { type: 'boolean' } },
   persistent: { control: { type: 'boolean' } },
   overflowMenuOnHover: {
     control: { type: 'boolean' },
   },
+  radio: { table: { disable: true } },
 };
diff --git a/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js b/...act/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content.stories.js
@@ -328,7 +328,11 @@ export const Playground = (args) => {
                 <TableHead>
                   <TableRow>
                     <TableExpandHeader />
-                    <TableSelectAll {...getSelectionProps()} />
+                    {args.radio ? (
+                      <th scope="col" />
+                    ) : (
+                      <TableSelectAll {...getSelectionProps()} />
+                    )}
                     {headers.map((header, i) => (
                       <TableHeader key={i} {...getHeaderProps({ header })}>
                         {header.header}

diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion.stories.js
@@ -196,3 +196,11 @@ export const Playground = (args) => (
     )}
   </DataTable>
 );
+
+Playground.argTypes = {
+  radio: {
+    table: {
+      disable: true,
+    },
+  },
+};