Roux Components v1 by pangolingo · Pull Request #17 · thoughtbot/roux

pangolingo · 2026-05-22T16:33:56Z

This PR merges the working Roux Components branch into main.

What this adds:

11ty site for documenting Roux Components (in the /site directory)
Prettier autoformatting (this automatically acts on Markdown, HTML, and CSS)
- autoformatting has resulted in adjustments to some core Roux files:
  - markdown formatting (especially bullets)
  - standardizing whitespace in CSS files
  - - changing some CSS rules to multiline
CI Workflows
- build/compile the 11ty docs site and publish it to GitHub pages
- HTML validation
- a11y checks with AXE
- snapshot tests to call out CSS/HTML changes that affect how components look
Specific core CSS changes to support new components
- .button:disabled styles
- new blockquote styles
- new and adjusted variables for colors and font styles
- new sizing utilities

Also started a "sizing" set of utility classes, starting with widths

Uses 11ty to generate a static site for displaying a component library built with Roux.

- Set pathPrefix to /roux/ in production via SITE_ENV variable - Update CSS link to use Eleventy's url filter (to set the path prefix in prod) - Simplify deploy script environment variables

…kflow

…bot.dev

…sizes

enatario

AMAZING WORK! TRULY!

I think my only questions are:

Can we pair on this to go through it all together? I feel like I have mostly a handle on the breadth but might be good to just do a check all together.
It seems like we still might not be compiling the CSS into one file. I wonder how we can achieve that across the board since we push that in our docs. I know we had used lightning css before but it was tricky with this particular setup.

enatario · 2026-06-05T20:55:09Z

+
+## Considerations
+
+We use a simple `<div class="alert">` structure with modifier classes (e.g., `alert--success`, `alert--danger`) so visual styling is predictable and easy to extend. Each alert includes an appropriate ARIA live-region role:


Should we include some information about aria-live regions for this as they often go hand-in-hand with these types of components? Maybe not necessarily baked into the component itself.

I can link to MDN's page about live regions.
Are you suggesting we add an explanation of what they are right here? And are you also suggesting we remove the role attributes from the component examples?

enatario · 2026-06-05T20:55:49Z

+
+## Considerations
+
+If badges contain just a number or text that requires extra context, you should provide that context with a visually-hidden element. For example, a badge on a mail icon displaying "12" should read `12 <span class="u-hide-visually">unread messages</span>` so that assistive tech understands the intent. Or to be even more clear, include the label visible inside the badge: `12 unread messages`


enatario · 2026-06-05T20:57:09Z

+
+::preview{file="dialogs/basic.html" id="example_basic_modal" tall="true"}::
+
+### Slide-in Drawer Modal


I think I might want to update the CSS on this before launch to invert the animation and have it default to no animation and then create an opt-in approach (so using no-preference as the modifier instead of reduce).

enatario · 2026-06-05T20:58:17Z

+
+## Considerations
+
+Loaders should use either the `alert` or `status` ARIA roles. Use the "alert" role when the user needs to know immediately when loading finishes: for example, when submitting a form. This role causes assistive technologies to announce all changes in an assertive way, and could be annoying. Use the "status" role when the loading state is doesn't need immediate attention: for example, when loading extra page content.


Should we link to those roles on MDN?

enatario · 2026-06-05T21:00:36Z

+
+## Considerations
+
+Be sure to use headline levels in order (H1 followed by H2, etc) so that assistive technologies can navigate the page. Skipping a headline level causes confusion.


Perhaps we should also just tell folks to lean into typographic elements instead of plain divs where appropriate as well. The amount of divs I've seen that should be a p tag is astounding

enatario · 2026-06-05T21:01:23Z

+title: Spinning Loading Indicator
+---
+
+<div aria-busy="true">


enatario · 2026-06-05T21:02:50Z

+
+Much like Roux CSS, these components are meant as a baseline for you to build on top of, so feel free to adjust as needed. They're flexible and extendable, but opinionated about what matters.
+
+All components are accessible and semantic by default.


Suggested change

All components are accessible and semantic by default.

All components aim to be accessible and semantic by default.

pangolingo · 2026-06-05T21:47:02Z

Can we pair on this to go through it all together? I feel like I have mostly a handle on the breadth but might be good to just do a check all together.

Scheduled!

It seems like we still might not be compiling the CSS into one file. I wonder how we can achieve that across the board since we push that in our docs. I know we had used lightning css before but it was tricky with this particular setup.

I will work on this!

…is bug: microsoft/playwright#40998

garciadanny and others added 30 commits December 11, 2025 10:32

add initial component library exmamples

d6e2b96

add table components

5944dcb

Added button component

131eeec

Added pagination component

0bd3785

add form and search bar

3ffa757

add dialog components

bb07b79

add disclosure component

36c61a7

Added badge component

e4feda4

Built a Typography component

1e2e81e

Enhanced the Disclosure component

92f4ca8

Added a loading indicator component

cc576f3

Also started a "sizing" set of utility classes, starting with widths

Fixed up loading indicator and badge

0890395

Build initial static site for component library

1dd3ee4

Uses 11ty to generate a static site for displaying a component library built with Roux.

Rename component_library directory to component-library

f561b67

Add Github Actions workflow to deploy site to Github Pages

6c94038

Fixed component imports

b24d306

Update workflow to deploy from component_library branch

1f4876d

Added an alert component

3264e41

Configure pathPrefix for GitHub Pages deployment

86bf1d3

- Set pathPrefix to /roux/ in production via SITE_ENV variable - Update CSS link to use Eleventy's url filter (to set the path prefix in prod) - Simplify deploy script environment variables

Added a better label to the loading indicator

7750f61

Demo status vs alert roles for alert components

772a130

Use npm ci instead of npm install in the github action

90a3180

Apply pathPrefix to component links

59eb9bb

Added a quote component

8f014c6

Added a page header component

e1de6df

Set up a page footer and extracted page-nav component

e7b00d6

Update primary button

ad353cc

Improve disabled color

980c23f

Add lightningcss for css compilation

a7113f8

Merge branch 'main' into component_library

9503420

Updated GH workflow versions

584bd3a

pangolingo temporarily deployed to github-pages May 22, 2026 16:52 — with GitHub Actions Inactive

Fixed naming of HTML Validate config

34da847

pangolingo temporarily deployed to github-pages May 22, 2026 17:05 — with GitHub Actions Inactive

Fixed more GH workflow versions and added snapshot caching to the wor…

37ea91f

…kflow

pangolingo temporarily deployed to github-pages May 22, 2026 17:08 — with GitHub Actions Inactive

Added Playwright aria snapshot tests

fcb8c76

pangolingo deployed to github-pages May 22, 2026 17:14 — with GitHub Actions View deployment

pangolingo added 2 commits May 22, 2026 12:33

Split out snapshots into their own test and workflow

726430c

Use "continue on error" for snapshot tests

06ef3de

pangolingo temporarily deployed to github-pages May 22, 2026 17:34 — with GitHub Actions Inactive

Updated action version

62a5fa0

pangolingo deployed to github-pages May 22, 2026 17:40 — with GitHub Actions View deployment

pangolingo added 2 commits May 22, 2026 13:05

Autoformated snapshot tests

e0052ab

Improved component descriptions and removed AI language

743dc82

pangolingo mentioned this pull request May 22, 2026

add initial component library examples #4

Closed

Coverted Prod site URL from thoughtbot.github.io/roux to roux.thought…

e43b039

…bot.dev

pangolingo temporarily deployed to github-pages May 22, 2026 20:06 — with GitHub Actions Inactive

pangolingo added 3 commits May 22, 2026 15:46

Fixed an issue with preview tabs cropping their labels at large zoom …

fa10764

…sizes

Merge branch 'main' into component_library_2

9988a02

Updated snapshots after merging in main

388f938

pangolingo temporarily deployed to github-pages May 22, 2026 21:11 — with GitHub Actions Inactive

enatario reviewed Jun 5, 2026

View reviewed changes

pangolingo added 5 commits June 5, 2026 16:55

Updated Playwright version and added GH actions timeout to prevent th…

c98e7c4

…is bug: microsoft/playwright#40998

Merge branch 'main' into component_library_2

f8f3c9b

Updated snapshots after merging main

702a406

Fixes from PR feedback

da6bdb2

Autoformatting and fixing box-sizing bug

3880121

pangolingo deployed to github-pages June 5, 2026 22:12 — with GitHub Actions View deployment


		## Considerations

		We use a simple `<div class="alert">` structure with modifier classes (e.g., `alert--success`, `alert--danger`) so visual styling is predictable and easy to extend. Each alert includes an appropriate ARIA live-region role:


		## Considerations

		If badges contain just a number or text that requires extra context, you should provide that context with a visually-hidden element. For example, a badge on a mail icon displaying "12" should read `12 <span class="u-hide-visually">unread messages</span>` so that assistive tech understands the intent. Or to be even more clear, include the label visible inside the badge: `12 unread messages`


		::preview{file="dialogs/basic.html" id="example_basic_modal" tall="true"}::

		### Slide-in Drawer Modal


		## Considerations

		Loaders should use either the `alert` or `status` ARIA roles. Use the "alert" role when the user needs to know immediately when loading finishes: for example, when submitting a form. This role causes assistive technologies to announce all changes in an assertive way, and could be annoying. Use the "status" role when the loading state is doesn't need immediate attention: for example, when loading extra page content.


		## Considerations

		Be sure to use headline levels in order (H1 followed by H2, etc) so that assistive technologies can navigate the page. Skipping a headline level causes confusion.


		Much like Roux CSS, these components are meant as a baseline for you to build on top of, so feel free to adjust as needed. They're flexible and extendable, but opinionated about what matters.

		All components are accessible and semantic by default.

	All components are accessible and semantic by default.
	All components aim to be accessible and semantic by default.

Uh oh!

Conversation

pangolingo commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

enatario left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pangolingo commented Jun 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pangolingo commented May 22, 2026 •

edited

Loading