From 68a3bd651f94cd059c80a2b02c3b618a3e00d18f Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 6 Jul 2022 08:10:44 +0000
Subject: [PATCH] [REF] *: BS5: Migrate tables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- avoid black border in table of BS5

In BS5 there is a new rule:
```css
.table > :not(:first-child) {
    border-top: 2px solid currentColor;
}
```
This rule generate unwanted border in our visual, so we change the color
to the old one we have in BS4 and in some case set the `border-top` to
´none´.

PS: another solution is to use the `table-borderless` class, but then
we have `tr` flickering for the height in list view (edit mode).

- table background-color :
  * BS4:
  the background color is set with the `background-color` property
  * BS5:
  it's set with a box shadow and the `--table-accent-bg` CSS variable

Task ID: 2766483

Part-of: odoo/odoo#95450
---
 addons/mail/static/src/xml/activity_view.xml           |  2 +-
 addons/survey/views/survey_templates.xml               | 10 +++++-----
 .../static/src/legacy/scss/bootstrap_overridden.scss   |  1 +
 addons/web/static/src/legacy/scss/list_view.scss       |  1 +
 addons/web/static/src/views/graph/graph_renderer.xml   |  2 +-
 addons/web/static/src/views/pivot/pivot_renderer.xml   |  2 +-
 addons/website_sale/static/src/scss/website_sale.scss  |  8 ++++----
 addons/website_sale/views/templates.xml                |  4 ++--
 odoo/addons/base/tests/test_cloc.py                    |  4 ++--
 9 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/addons/mail/static/src/xml/activity_view.xml b/addons/mail/static/src/xml/activity_view.xml
index 12bbd1c9a25..54b59bd3a68 100644
--- a/addons/mail/static/src/xml/activity_view.xml
+++ b/addons/mail/static/src/xml/activity_view.xml
@@ -84,7 +84,7 @@
 
 <div t-name="mail.ActivityRenderer" class="o_activity_view" owl="1">
     <t t-if="!props.activity_types.length" t-call="web.NoContentHelper"/>
-    <table t-else="" class="table-bordered mb-5">
+    <table t-else="" class="table table-bordered mb-5">
         <t t-call="mail.ActivityViewHeader"/>
         <t t-call="mail.ActivityViewBody"/>
         <t t-call="mail.ActivityViewFooter"/>
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 5527e9f2e63..2e82f5ad469 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -553,14 +553,14 @@
 
     <template id="question_matrix" name="Question: matrix">
         <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
-        <table class="table table-hover o_survey_question_matrix text-white text-center mb-0"
+        <table class="table table-borderless o_survey_question_matrix text-white text-center mb-0"
                t-att-data-name="question.id"
                t-att-data-question-type="question.question_type"
                t-att-data-sub-questions="question.matrix_row_ids.ids">
             <thead>
                 <tr>
-                    <th class="border-0"> </th>
-                    <th class="border-0 font-weight-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
+                    <th> </th>
+                    <th class="font-weight-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
                 </tr>
             </thead>
             <tbody>
@@ -568,10 +568,10 @@
                 <!-- For matrix, we have an extra check because we have rows * columns total options -->
                 <t t-set="useKeySelection" t-value="useKeySelection and (len(question.suggested_answer_ids) * len(question.matrix_row_ids)) &lt; len(letters)" />
                 <tr class="bg-white text-white" t-foreach="question.matrix_row_ids" t-as="row_label" t-att-id="row_label.id">
-                    <th class="border-0 font-weight-normal text-left"><span t-field="row_label.value" /></th>
+                    <th class="font-weight-normal text-left"><span t-field="row_label.value" /></th>
                     <t t-foreach="question.suggested_answer_ids" t-as="col_label">
                         <t t-set="answer" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == col_label and line.matrix_row_id == row_label)"/>
-                        <td t-att-class="'o_survey_matrix_btn text-primary border-0 position-relative %s'
+                        <td t-att-class="'o_survey_matrix_btn text-primary position-relative %s'
                         % ('o_survey_selected' if answer else '')">
                             <input t-att-type="'checkbox' if question.matrix_subtype == 'multiple' else 'radio'"
                                    t-att-name="'%s_%s' % (question.id, row_label.id)" t-att-value='col_label.id'
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index 8a6998371db..2def9250efa 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -112,6 +112,7 @@ $headings-color: $o-main-headings-color !default;
 $table-accent-bg: rgba($black, .01) !default;
 $table-hover-bg: rgba($black, .04) !default;
 $table-border-color: $gray-200 !default;
+$table-group-separator-color: $gray-200 !default;
 
 // Buttons
 //
diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss
index ebebeb8e1f6..63891723b18 100644
--- a/addons/web/static/src/legacy/scss/list_view.scss
+++ b/addons/web/static/src/legacy/scss/list_view.scss
@@ -346,6 +346,7 @@
     }
 
     .o_optional_columns_dropdown_toggle {
+        border-top: none;
         cursor: pointer;
         padding: 0 5px;
         text-align: center;
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
index c6f6c215c91..24d5cad1928 100644
--- a/addons/web/static/src/views/graph/graph_renderer.xml
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -3,7 +3,7 @@
 
     <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
         <div class="o_graph_custom_tooltip popover show p-2 o_debounce_disabled mw-100">
-            <table class="table table-sm overflow-hidden m-0">
+            <table class="table table-borderless table-sm overflow-hidden m-0">
                 <thead>
                     <tr>
                         <th class="o_measure align-baseline border-0" t-esc="measure" />
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index c0b9bfd2714..b004a332d86 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -5,7 +5,7 @@
         <div class="o_pivot table-responsive">
 
             <table
-                class="table-hover table table-sm table-bordered bg-white"
+                class="table-hover table table-sm table-bordered table-borderless bg-white"
                 t-att-class="{
                     o_enable_linking: !model.metaData.disableLinking,
                     o_sample_data_disabled: model.useSampleModel,
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 8aff49a0a90..5df260bb235 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -119,11 +119,11 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         }
     }
 
-    .table-striped tbody tr:nth-of-type(even) {
-        background-color: rgba(0, 0, 0, 0.025);
+    .table-striped tbody tr td:nth-of-type(even) {
+        --table-accent-bg: rgba(0, 0, 0, 0.025);
     }
-    .table-striped tbody tr:nth-of-type(odd) {
-        background-color: rgba(0, 0, 0, 0);
+    .table-striped tbody tr td:nth-of-type(odd) {
+        --table-accent-bg: rgba(0, 0, 0, 0);
     }
     *:not(#product_attributes_simple) > .table-sm tbody td {
         padding-top: 0.75rem;
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 0b5cd12ded5..6bef1d01e6e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1880,8 +1880,8 @@
                       </td>
                   </tr>
                   <tr id="order_total">
-                      <td class="text-right"><strong>Total:</strong></td>
-                      <td class="text-xl-right">
+                      <td class="text-right border-top border-bottom-0"><strong>Total:</strong></td>
+                      <td class="text-xl-right border-top border-bottom-0">
                           <strong t-field="website_sale_order.amount_total" class="monetary_field"
                               t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
                       </td>
diff --git a/odoo/addons/base/tests/test_cloc.py b/odoo/addons/base/tests/test_cloc.py
index 29c4c0ec74b..4c87b3c735d 100644
--- a/odoo/addons/base/tests/test_cloc.py
+++ b/odoo/addons/base/tests/test_cloc.py
@@ -108,10 +108,10 @@ SCSS_TEST = '''
 .o_content > .o_list_view > .table-responsive > .table {
     // List views always have the table-sm class, maybe we should remove
     // it (and consider it does not exist) and change the default table paddings
-    @include o-list-view-full-width-padding($base: $table-cell-padding-sm, $ratio: 2);
+    @include o-list-view-full-width-padding($base-x: $table-cell-padding-x-sm, $base-y: $table-cell-padding-y-sm, $ratio: 2);
     &:not(.o_list_table_grouped) {
         @include media-breakpoint-up(xl) {
-            @include o-list-view-full-width-padding($base: $table-cell-padding-sm, $ratio: 2.5);
+            @include o-list-view-full-width-padding($base-x: $table-cell-padding-x-sm, $base-y: $table-cell-padding-y-sm, $ratio: 2.5);
         }
     }