Skip to content

Paragon without bootstrap#4384

Draft
bradenmacdonald wants to merge 24 commits into
release-23.xfrom
braden/paragon-next
Draft

Paragon without bootstrap#4384
bradenmacdonald wants to merge 24 commits into
release-23.xfrom
braden/paragon-next

Conversation

@bradenmacdonald

@bradenmacdonald bradenmacdonald commented Jul 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

This is a Claude-generated version of Paragon that doesn't use Bootstrap at all.

▶️ Preview it using the new Storybook site

Concern Old This prototype
Behavior react-bootstrap React Aria (useButton, useFocusRing)
Styling Bootstrap 4 SCSS, global classes CSS Modules over the same --pgn-* tokens
Theming API style-dictionary → CSS vars Unchanged — imported verbatim (src/tokens.css)
Types mixed .jsx/.tsx 100% TypeScript
Build Babel + tsc + Makefile Vite library mode + vite-plugin-dts
Tests Jest Vitest + Testing Library
Docs Gatsby + react-docgen v5 Storybook 10 (props from TS types)

Features:

  • Goal is to be fully compatible with the React component API and design tokens API.
  • Better accessibility than before, since it's based on react-aria-components instead of Bootstrap
  • 100% typed with TypeScript
  • Docs site matches the old docs site in functionality, but has a way simpler architecture using Storybook
  • Storybook provides a typed UI form that updates both the example JSX code and live preview. You can also edit the JSX code in any of the examples like you could on the old docs site.
    Screenshot of the component preview
    Screenshot of the component props edit form

bradenmacdonald and others added 2 commits July 21, 2026 15:33
@bradenmacdonald @claude
docs: ADR for Paragon Next
412874b 
Co-Authored-By: Claude <noreply@anthropic.com>
@bradenmacdonald @claude
feat: <Button> prototype
664dc7c 
Co-Authored-By: Claude <noreply@anthropic.com>
@netlify

netlify Bot commented Jul 22, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for paragon-openedx-v23 ready!

Name Link
🔨 Latest commit b186c66
🔍 Latest deploy log https://app.netlify.com/projects/paragon-openedx-v23/deploys/6a61555e4d776c00085979fe
😎 Deploy Preview https://deploy-preview-4384--paragon-openedx-v23.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@openedx-webhooks openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jul 22, 2026
@openedx-webhooks

openedx-webhooks commented Jul 22, 2026

Copy link
Copy Markdown

Thanks for the pull request, @bradenmacdonald!

This repository is currently maintained by @openedx/committers-paragon.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

  • If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
    • This process (including the steps you'll need to take) is documented here.
  • If it doesn't, simply proceed with the next step.
🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

  • Dependencies

    This PR must be merged before / after / at the same time as ...

  • Blockers

    This PR is waiting for OEP-1234 to be accepted.

  • Timeline information

    This PR must be merged by XX date because ...

  • Partner information

    This is for a course on edx.org.

  • Supporting documentation
  • Relevant Open edX discussion forum threads
🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

  • The size and impact of the changes that it introduces
  • The need for product review
  • Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

@github-project-automation github-project-automation Bot moved this to Needs Triage in Contributions Jul 22, 2026
@bradenmacdonald
bradenmacdonald force-pushed the braden/paragon-next branch 4 times, most recently from fcaa784 to 6f1131f Compare July 22, 2026 01:45
@bradenmacdonald bradenmacdonald mentioned this pull request Jul 22, 2026
Open
bradenmacdonald and others added 4 commits July 22, 2026 15:32
@bradenmacdonald
docs: design tokens playground
d1749ba
@claude @bradenmacdonald
feat: <Tabs> prototype
0337594 
Re-implement the Tabs module on the prototype's modern stack (React Aria +
CSS Modules over --pgn-* tokens), matching the Button / Collapsible / Stack
conventions.

- Behavior from React Aria's useTabList/useTab/useTabPanel + react-stately's
  useTabListState, replacing react-bootstrap Tabs and the MutationObserver
  aria-selected shim. Correct tablist/tab/tabpanel roles, arrow-key
  navigation, and aria-selected/aria-controls linkage.
- Declarative <Tabs><Tab eventKey title>…</Tab></Tabs> public API preserved:
  variant, defaultActiveKey/activeKey, onSelect, per-tab disabled and
  notification.
- Styling ported from src/Nav + src/Tabs SCSS into the global public class
  layer (src/styles/tabs.css): nav / nav-tabs / nav-pills / nav-inverse-* /
  nav-button-group over the same tokens, keyboard-only focus via
  [data-focus-visible].
- Storybook docs (Tabs.mdx + Tabs.stories.tsx) mirror src/Tabs/README.md with
  a controls-driven Playground and typechecked, editable live examples.
- Vitest coverage for selection, keyboard nav, disabled, controlled usage,
  notifications and per-tab classes.

Deliberate gaps documented in the docs: only the active panel is mounted, and
the responsive "More…" overflow dropdown is deferred with the Dropdown
migration (moreTabText retained but inert).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JXRJCx3Ny3iX9B2kvy4fYd
@claude @bradenmacdonald
fix(prototype): keep Storybook's tsconfig resolution inside the proto…
efb57f4 
…type

`build-storybook` failed with `Tsconfig not found @edx/typescript-config`.
oxc (rolldown's transform) resolves the nearest tsconfig whose include globs
actually match each file; the bare `.storybook` entry matched nothing (dot-dir
glob), so `.storybook/preview.tsx` escaped to the outer repo's tsconfig, which
extends `@edx/typescript-config` — a config that must not apply to the
prototype and isn't installed here.

Match the entry explicitly (`.storybook/**/*.tsx`) so preview.tsx resolves to
the prototype's own tsconfig. Scoped to `.tsx` so `.storybook/main.ts` (a
server-side config using `node:` builtins, not part of the browser build and
not covered by the restricted `types`) stays out of the type-check program,
exactly as before. `tsc`, `vite build`, `vitest`, and `build-storybook` all
pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JXRJCx3Ny3iX9B2kvy4fYd
@bradenmacdonald
docs: add tabs to design tokens playground
b186c66
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

core contributor PR author is a Core Contributor (who may or may not have write access to this repo). open-source-contribution PR author is not from Axim or 2U

Projects

Contributions
Status: Needs Triage

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@bradenmacdonald @openedx-webhooks @claude