search

finos / a11y-theme-builder

DesignOps toolchain theme builder for accessibility inclusion using Atomic Design.
Apache License 2.0
46 stars 69 forks source link

[TB] Large border values impact molecules and components #992

Open aaronreed708 opened 3 months ago

aaronreed708 commented 3 months ago

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 commented 3 months ago

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](https://www.chromatic.com/) is a live hosting tool and more for StoryBook. I've used it for [my site](https://data-visualisation.pages.dev/), 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](https://www.chromatic.com/pricing) 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](https://667670df0aad8c9ddd0c7476-xmbhsqwapl.chromatic.com/?path=/story/sections-histogram--this-could-get-silly-but-useful) 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). image ### Showing the errors Here it is now [saying it found visual changes](https://www.chromatic.com/build?appId=667670df0aad8c9ddd0c7476&number=4). I undid my deliberate mistake that removed Histogram colours. That's caused 11 errors, [Here's an example](https://www.chromatic.com/test?appId=667670df0aad8c9ddd0c7476&id=667675f474bfb3167cf8f624) 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. image With diff on, the green shows what is actually wrong: image
aaronreed708 commented 3 months ago

@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.

Screenshot 2024-08-13 at 3 10 02 PM
toni-sharpe commented 3 months ago

@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 commented 3 months ago

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