fix(/lib/components/table): prevent scrollbars around <Table>s

[multiwebinc]

Description

This moves the background color and border radius to the cells and places a div under the table for the box shadow effect. That way if a table is modified (rows or columns added or removed) or if the screen resolution changes, it won't create scrollbars around the table.

Fixes #605

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Just tested by trying it out

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[tulup-conner]

I love this idea, but we don't want to ship custom CSS. Can you find a way to accomplish this in Tailwind CSS via the theme instead of creating a stylesheet file?

[multiwebinc]

@tulup-conner What about like this?

[tulup-conner]

We will want a solution using Tailwind CSS purely, which has support for custom selectors like these. Inline CSS has other negative implications for users, e.g., it will break Content Security Policies.

[multiwebinc]

Edit: I think I might have found it. https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups. Let me test it out first.

@rluders @tulup-conner I was looking into the group-{modifier} class, however I need 2 levels of groups, because it needs to select the first/last child of <table> combined with the first/last <td> or <th>. Would you be opposed to using https://www.npmjs.com/package/tailwindcss-scoped-groups?

If not, the only thing I can do with tailwind is style the top borders in <thead> (if there is one) and bottom borders of <tfoot> (if there is one). Without knowing whether <tbody> is the first or last child, you can't add a border radius to any of the cells in it. Unless maybe I add two more props to the <Table> component - headless and footless and if either of these are true, it will add the border radius to the corresponding tbody cells.

[multiwebinc]

@rluders @tulup-conner Ok, I think that's it. No stylesheets. I didn't know about nested groups, so I didn't think it was possible without stylesheets.

[rluders]

@multiwebinc could you sync your branch with the main branch? It has some conflicts because the theme structure was changed. So, you may have to adjust a few things on your PR.

[multiwebinc]

@rluders What do you think, would it make sense to move the table.cell interface to table.body.cell to avoid confusion with table.head.cell?

[rluders]

@rluders What do you think, would it make sense to move the table.cell interface to table.body.cell to avoid confusion with table.head.cell?

I think that it makes sense. WDYT, @tulup-conner ?

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (a4f39f5) 99.42% compared to head (c82b488) 99.42%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #608   +/-   ##
=======================================
  Coverage   99.42%   99.42%           
=======================================
  Files         130      130           
  Lines        6450     6476   +26     
  Branches      485      485           
=======================================
+ Hits         6413     6439   +26     
  Misses         37       37           

Impacted Files	Coverage Δ
src/lib/components/Table/Table.tsx	100.00% <100.00%> (ø)
src/lib/components/Table/TableBody.tsx	100.00% <100.00%> (ø)
src/lib/components/Table/TableCell.tsx	100.00% <100.00%> (ø)
src/lib/components/Table/TableRow.tsx	100.00% <100.00%> (ø)
src/lib/theme/default.ts	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[rluders]

Well, I can't see any reason to keep this one pending. I'm accepting it, @multiwebinc. Thank you!