Move table-responsive class from <table> tag to <div> tag above

[hannahiss]

Related issues

Linked to issue #1357 and PR #1674

Description

.table-responsive class was misused on some examples: it was positioned on the <table> tag, whereas the documentation says to wrap the table inside a HTML tag (<div>) with .table-responsive.

Motivation & Context

I saw this misuse while correcting some tables row height, on rich content tables examples.

Types of change

• Bug fix (non-breaking which fixes an issues)

Live previews

• https://deploy-preview-1710--boosted.netlify.app/docs/content/tables/#with-icons-or-thumbnails

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• My change introduces changes to the migration guide
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	c7954fa
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/63a95512aaaf720008d69942
😎 Deploy Preview	https://deploy-preview-1710--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[julien-deramond]

Was just looking at the overall modifications to check what's the topic of this PR. The rendering seems broken here:

The checkboxes are "glued" to the left hand side of the table.

[hannahiss]

Was just looking at the overall modifications to check what's the topic of this PR. The rendering seems broken here
The checkboxes are "glued" to the left hand side of the table.

Yes, your're right, so... Either we have a problem in the documentation (saying that .table-responsive should be on an element wrapping the <table> tag - which comes from Bootstrap), or we have a problem on the code of rich tables content...?

[julien-deramond]

There is a specific rule somewhere for the docs that can maybe cause this issue only in the docs:

.bd-content>.table th:first-child,
.bd-content>.table td:first-child,
.bd-content>.table-responsive .table th:first-child,
.bd-content>.table-responsive .table td:first-child {
 padding-left:0;
}

You can try your modification outside of the docs context. Maybe that's just the extra-css for the docs that is the issue.

[julien-deramond]

If you want to cheat a little bit, you could probably use a .table-responsive-{breakpoint} instead of .table-responsive so that it doesn't trigger the specific docs CSS 😇

[hannahiss]

It seems that this rule:

.bd-content {
  > .table,
  > .table-responsive .table {
    th,
    td {
      &:first-child {
        padding-left: 0;
      }
    }
  }
}

changes almost all tables over documentation, except the ones in Content>Tables section, because they are all wrapped inside <div class="bd-example"> that breaks the rule. By moving .table-responsive to the div above, I reactivated the rule on the rich content tables because they are missing <div class="bd-example"> (which I corrected in PR #1674)

Example from Back To Top > Sass options:

With the css rule:

Without the css rule:

Isn't it strange that all our tables across documentation do not respect our design specifications ?

Tables from ODS design specs:

Why should we keep this strange rule ?

[julien-deramond]

Since Boosted doc must respect our design guidelines as well. From what I understand, we can probably remove this rule entirely by "Boosted mod"ing it and have a slightly different display compared to Bootstrap.

[julien-deramond]

There's a rendering regression (size of checkboxes and texts) between the new version:

And the previous one:

[louismaximepiton]

There's a rendering regression (size of checkboxes and texts) between the new version:

And the previous one:

The issue comes from the fact that the direct .table of .bd-content have their font-size reduced. Shall we changed it ? Otherwise a quick solution here is to wrap those with a .bd-example.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication