[TB] Large border values impact molecules and components

[aaronreed708]

Problem/Concern

I discovered today that if you set the border width in the border atom to 8 or above, the secondary buttons on the Buttons Standard molecule start to become un-useable. With a 16px border, the text on a secondary button is unreadable. Do we need to provide some kind of limit to the value? Should we put in warning text? Do we not allow secondary buttons to be affected by borders? Looking for the right answer.

Proposed Solution

[toni-sharpe]

General note: with this sort of problem screen-shots greatly enhance the ability of other devs to understand the issue. I know a bit about target areas and borders, but need screen-shots at least, even better, a link to a sand-box, dev env. or story-book.

Do you use story-book? If so is there a live version? In the closed section below is an elaboration of how this tool with another called Chromatic could be very useful.

It's also worth noting the a11y tab I have on StoryBook.

Chromatic and Storybook are cool

Intro

This tool - Chromatic is a live hosting tool and more for StoryBook.

I've used it for my site, I think it's quite new, maybe buggy, but I've found it very useful. On top of StoryBook, which is exceptional, it's really cool.

(note, these links may break, so the screen-shots will help)

My site is well storied.

It's pricey but you're open source so might get free access. Plus, I'm just using the free version and it's showing me errors.

Sharable and broken

Here's my initial, actual, sharable StoryBook focused on a purposefully broken visual (also useful). Note that it's commit based, so this should exist even as my site advances (needs proof, and check on how long these are kept).

Showing the errors

Here it is now saying it found visual changes. I undid my deliberate mistake that removed Histogram colours. That's caused 11 errors, Here's an example

There's an option "Diff" to toggle difference highlighting which I have turned off so my Histogram appears with hue alternated bars as it should.

With diff on, the green shows what is actually wrong:

[aaronreed708]

@toni-sharpe good point! We do not currently have storybook running, but we have done work toward that goal. I don't think it has wrapped up, yet.

Here is the issue when I've set the border size to 12px in the design system.

[toni-sharpe]

@aaronreed708 and the code for this? I know the basic CSS solution here, but the context would be required to make sure the solution is good.

[aaronreed708]

Not sure how far down you want to look. The standard buttons panel on the right side in the snapshot above is: https://github.com/finos/a11y-theme-builder/blob/dev/code/src/ui/src/pages/molecules/ButtonsStandardMolecule.tsx