Skip to content

Roux Components v1#17

Draft
pangolingo wants to merge 139 commits into
mainfrom
component_library_2
Draft

Roux Components v1#17
pangolingo wants to merge 139 commits into
mainfrom
component_library_2

Conversation

@pangolingo

@pangolingo pangolingo commented May 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

garciadanny and others added 30 commits December 11, 2025 10:32
@garciadanny
add initial component library exmamples
d6e2b96
@garciadanny
add table components
5944dcb
@pangolingo
Added button component
131eeec
@pangolingo
Added pagination component
0bd3785
@garciadanny
add form and search bar
3ffa757
@garciadanny
add dialog components
bb07b79
@garciadanny
add disclosure component
36c61a7
@pangolingo
Added badge component
e4feda4
@pangolingo
Built a Typography component
1e2e81e
@pangolingo
Enhanced the Disclosure component
92f4ca8
@pangolingo
Added a loading indicator component
cc576f3 
Also started a "sizing" set of utility classes, starting with widths
@pangolingo
Fixed up loading indicator and badge
0890395
@garciadanny
Build initial static site for component library
1dd3ee4 
Uses 11ty to generate a static site for displaying a component library
built with Roux.
@garciadanny
Rename component_library directory to component-library
f561b67
@garciadanny
Add Github Actions workflow to deploy site to Github Pages
6c94038
@pangolingo
Fixed component imports
b24d306
@garciadanny
Update workflow to deploy from component_library branch
1f4876d
@pangolingo
Added an alert component
3264e41
@garciadanny
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
@pangolingo
Added a better label to the loading indicator
7750f61
@pangolingo
Demo status vs alert roles for alert components
772a130
@pangolingo
Use npm ci instead of npm install in the github action
90a3180
@garciadanny
Apply pathPrefix to component links
59eb9bb
@pangolingo
Added a quote component
8f014c6
@pangolingo
Added a page header component
e1de6df
@pangolingo
Set up a page footer and extracted page-nav component
e7b00d6
@enatario
Update primary button
ad353cc
@enatario
Improve disabled color
980c23f
@enatario
Add lightningcss for css compilation
a7113f8
@pangolingo
Merge branch 'main' into component_library
9503420
@pangolingo pangolingo mentioned this pull request May 22, 2026
Closed
enatario
enatario reviewed Jun 5, 2026
View reviewed changes

@enatario enatario left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread site/component-library/alert.md Outdated
Comment thread site/component-library/badge.md
Comment thread site/component-library/dialog.md

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

### Slide-in Drawer Modal

@enatario enatario Jun 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@pangolingo pangolingo Jun 12, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR to update this

Comment thread site/component-library/loading-indicator.md Outdated
Comment thread site/component-library/typography.md
Comment thread site/examples/loading-indicator/basic.html
Comment thread site/index.md Outdated
@pangolingo

pangolingo commented Jun 5, 2026

Copy link
Copy Markdown
Contributor Author

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!

@pangolingo
Fixed CSS complilation:
079a774 
- lightning CSS plugin arguments were totally incorrect
- the CSS frm src was not running through lightningcss
@pangolingo pangolingo requested a review from enatario June 12, 2026 16:01
@pangolingo

pangolingo commented Jun 12, 2026

Copy link
Copy Markdown
Contributor Author

@enatario I believe I've address all you suggested changes except for the animation changes to dialogs/modals.

Good call on the CSS bundling - I had LightningCSS set up, but it wasn't configured correctly.

Updates are live.

@pangolingo pangolingo mentioned this pull request Jun 12, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@enatario enatario Awaiting requested review from enatario enatario is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@pangolingo @enatario @garciadanny