From ef7a8037c4d3ada51b12ec39cfbcc9f58dc88980 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Wed, 23 Nov 2022 08:03:21 +0100
Subject: [PATCH] fix(table): reduce space after checkboxes in row selection
 (#1272)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 scss/_tables.scss                       | 8 ++++++++
 site/content/docs/5.2/content/tables.md | 8 ++++----
 site/content/docs/5.2/migration.md      | 5 +++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index bca34b16e4..3f80b529fe 100644
--- 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
index 1032f1a798..7de7cb096e 100644
--- 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
index 9b231002c5..e41866ce9e 100644
--- 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.