Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug fix - Inconsistent table border width size on zoom and extra spaces between table cells #1130

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

ondrejkonec
Copy link

@ondrejkonec ondrejkonec commented Oct 3, 2022

Problems:

  • When zooming in/out, browser draw borders based on calculation (1px * [zoom]). So for example 1px * 150% = 1.5px and sometimes there is 1px border with and sometime 2px.
  • Table is poorly designed using transparent backgrounds, which cause display problems.

Solution:

  • Redesigned table (removed current pattern for displaying borders) and adding new solution
  • Added 0.01px workaround, where browsers will fallback to at least 1px
  • Changed the border-width to the appropriate decimal per scaling level at the end of the file
  • Removed opacity for disable table row, because it affects background color and also text => added text color and background color from Stacks color palette

Results:

Zoom 100%

All tables looks similar - There are only small things caused by the fact that I remove the transparent border.

Zoom 150%

Not sure why upload images here does not work, so please open each section in new window for compare.

Default table

Before
After

Table with horizontal lines (s-table__bx)

Before
After

Simple border (s-table__bx-simple)

Before
After

No borders (s-table__b0)

Before
After

Zebra striping (s-table__stripes)

Before
After

Spacing - small (s-table__sm)

Before
After

Spacing - Large (s-table__lg)

Before
After

Sortable tables (s-table__sortable)

Before
After

Bar graphs (s-table--progress-bar)

Before
After

Bulk actions (s-table--bulk)

Before
After

Total rows (s-table--totals)

Before
After

Inactive rows (<tr class="is-disabled">)

Before
After

Results

  • All tables now looks consistent with 1px border across browsers, table variants and zoom levels
  • There is no spacing between cells

Tested

  • Tested on Chrome 106.0.5249.91, Safari 15.6.1, Firefox 105.0.1, Edge 105.0.1343.53

Note

I created all variations of Table component in Figma, if designers would like to use it in their component library.

What do you think?

Hope it helps!

@netlify
Copy link

netlify bot commented Oct 3, 2022

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit cf3a9f1
🔍 Latest deploy log https://app.netlify.com/sites/stacks/deploys/633ab4675f7e5b0008be57b4
😎 Deploy Preview https://deploy-preview-1130--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant