fix(table): reduce space after checkboxes in row selection (#1272)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Nov 23, 2022 · ef7a803 · ef7a803
1 parent 34de2c4
commit ef7a803
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -48,6 +48,14 @@
   > tbody {
     vertical-align: inherit;
   }
+
+  // Boosted mod
+  // When using checkboxes in the first column, force width to ensure correct spacing on this column
+  &.has-checkbox tr > :first-child {
+    width: $spacer * 2;
+    max-width: $spacer * 2;
+  }
+  // End mod
 }
 
 .table-group-divider {

diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md
@@ -633,7 +633,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 ## Rich content tables
 
 ### Row selection
-Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within `<th>` and `<td>` to display checkboxes and use the `checked` attribute.
+Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within `<th>` and `<td>` to display checkboxes and use the `checked` attribute, and use `.has-checkbox` on the table to get correct spacing on the first column.
 
 {{< callout info >}}
 #### Selection feature
@@ -642,7 +642,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 {{< /callout >}}
 
 <div>
-  <table class="table table-sm table-hover table-responsive">
+  <table class="table table-sm table-hover table-responsive has-checkbox">
     <thead>
       <tr>
         <th scope="col">
@@ -778,7 +778,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 
 ```html
 <div>
-  <table class="table table-sm table-hover table-responsive">
+  <table class="table table-sm table-hover table-responsive has-checkbox">
     <thead>
       <tr>
         <th scope="col">
@@ -840,7 +840,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
 Use SVG to display thumbnails or icons in your table data cell elements.
 
 <div>
-  <table class="table table-sm table-hover table-responsive align-middle">
+  <table class="table table-sm table-hover table-responsive align-middle has-checkbox">
     <thead>
       <tr>
         <th scope="col">

diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
@@ -33,6 +33,11 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
 
 - <span class="badge bg-warning">Warning</span> All forms examples have been modified to add a `.mt-2` to all submit buttons in order to always have 30px between the last form control and the button. Please reflect this modification into your websites.
 
+### Contents
+
+- **Tables**
+  - <span class="badge bg-warning">Warning</span> Reintroduction of `.has-checkbox` from v4 to correct spacing of first column when having row selection.
+
 ### Examples
 
 - <span class="badge bg-success">New</span> There is a new RTL section in the examples.