AdvancedTable: set checkbox column width to min-content (#2761)

Co-authored-by: Alex <alex-ju@users.noreply.github.com>
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>

Author: 4 people

.changeset/purple-poems-battle.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`AdvancedTable` - Always set the select checkbox column width to `min-content` so it does not grow when the `AdvancedTable` is narrower than the container

packages/components/src/components/hds/advanced-table/index.ts

@@ -251,17 +251,17 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   get gridTemplateColumns(): string {
     const { isSelectable, columns } = this.args;
 
-    // if there is no custom column widths, each column is the same width and they take up the available space (except the select checkbox)
-    if (!this.columnWidths) {
-      return `${isSelectable ? 'auto ' : ''}repeat(${columns.length}, 1fr)`;
-    }
-
-    // if there is a select checkbox, the first column is 'auto' width to hug the checkbox content
-    let style = isSelectable ? 'auto' : '';
+    // if there is a select checkbox, the first column has a 'min-content' width to hug the checkbox content
+    let style = isSelectable ? 'min-content ' : '';
 
-    // check the custom column widths, if the current column has a custom width use the custom width. otherwise take the available space.
-    for (let i = 0; i < this.columnWidths.length; i++) {
-      style += ` ${this.columnWidths[i] ? this.columnWidths[i] : '1fr'}`;
+    if (!this.columnWidths) {
+      // if there are no custom column widths, each column is the same width and they take up the available space
+      style += `repeat(${columns.length}, 1fr)`;
+    } else {
+      // check the custom column widths, if the current column has a custom width use the custom width. otherwise take the available space.
+      for (let i = 0; i < this.columnWidths.length; i++) {
+        style += ` ${this.columnWidths[i] ? this.columnWidths[i] : '1fr'}`;
+      }
     }
 
     return style;

showcase/app/styles/showcase-pages/advanced-table.scss

@@ -18,6 +18,10 @@ body.components-advanced-table {
     overflow-x: auto;
   }
 
+  .shw-component-advanced-table-narrow-wrapper {
+    width: fit-content;
+  }
+
     // align table cell content for icon plus text in cell
     .shw-component-advanced-table-cell-content-div {
       display: flex;

showcase/app/templates/components/advanced-table.hbs

@@ -909,6 +909,30 @@
 
   <Shw::Divider @level={{2}} />
 
+  <Shw::Text::H3>Wide container with a narrow AdvancedTable</Shw::Text::H3>
+
+  <div class="shw-component-advanced-table-narrow-wrapper">
+    <Hds::AdvancedTable
+      @isSelectable={{true}}
+      @onSelectionChange={{this.onMultiSelectUsersSelectionChange__demo3}}
+      @model={{this.model.userDataShort}}
+      @columns={{array (hash key="id" label="ID" width="150px") (hash key="name" label="Name" width="150px")}}
+    >
+      <:body as |B|>
+        <B.Tr
+          @selectionKey={{B.data.id}}
+          @isSelected={{B.data.isSelected}}
+          @selectionAriaLabelSuffix="row #{{B.data.id}}"
+        >
+          <B.Td>{{B.data.id}}</B.Td>
+          <B.Td>{{B.data.name}}</B.Td>
+        </B.Tr>
+      </:body>
+    </Hds::AdvancedTable>
+  </div>
+
+  <Shw::Divider @level={{2}} />
+
   <Shw::Text::H3>AdvancedTable with <code>colspan/rowspan</code> attributes</Shw::Text::H3>
 
   <Hds::AdvancedTable