feat: support design tokens and paragon 23 #1198

dcoa · 2025-02-27T23:16:42Z

Warning

This PR should not be merge to master directly, it should point to master-design-tokens once the branch has been created.

Description

This PR updates frontend app account to support CSS variables and the corresponding paragon design tokens.

Changes implemented:

Replace Paragon SCSS variables with CSS variables.
Replace deprecated components Input, ValidationFormGroup

Important

This PR requires a compatible version with paragon 23 of dependencies because of that the following PRs need to be merged first:

openedx-webhooks · 2025-02-27T23:16:47Z

Thanks for the pull request, @dcoa!

This repository is currently maintained by @openedx/2u-infinity.

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.

Details

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.

codecov · 2025-03-18T21:36:32Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 58.67%. Comparing base (95db89a) to head (e8e4da9).
Report is 1 commits behind head on master-design-tokens.

Additional details and impacted files

@@                   Coverage Diff                    @@
##           master-design-tokens    #1198      +/-   ##
========================================================
+ Coverage                 58.64%   58.67%   +0.03%     
========================================================
  Files                       119      119              
  Lines                      2413     2415       +2     
  Branches                    665      669       +4     
========================================================
+ Hits                       1415     1417       +2     
  Misses                      932      932              
  Partials                     66       66

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dcoa · 2025-03-18T21:41:42Z

src/tests/MockedPluginSlot.test.jsx


    // Direct children
-    const quote = component.querySelector(':scope > q');
+    const quote = component.querySelector(':scope  q');


I'm not 100% sure why used to work (or why after updating paragon is not working) but q is not direct children or article because is wrapped in a div, here the render:

<body> <div> <div role="article" > <div> PluginSlot_ <div> <q role="note" > How much wood could a woodchuck chuck if a woodchuck could chuck wood? </q> </div> </div> </div> </div> </body> ```

Yeah, based on the name of the test

renders as the slot children directly if there is content within

it seems like the test should be failing from a "it's not directly rendering the children, it's wrapping them in a couple layers of divs" perspective on latest master too. I double checked and got the same render output on latest master.

MockedPluginSlot is absolutely not behaving in the way that

renders as the slot children directly if there is content within

expects.

Since this is only testing a mock component, I think the best path forward here is to make an issue documenting the discrepancy and use your minimal change to get tests passing again as-is for this PR.

I created the corresponding issue in the MFE repo

open-craft-grove · 2025-03-20T17:03:25Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-03-21T22:09:57Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-03-26T00:05:51Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-03-31T21:52:33Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-11T03:11:14Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-11T14:40:03Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-13T04:49:29Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-22T03:45:05Z

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-22T04:51:23Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2025-04-28T03:41:29Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

brian-smith-tcril

Overall this is looking great! I left one comment with a question - once a decision on that is made it should be good to go!

src/account-settings/delete-account/ConfirmationModal.jsx

open-craft-grove · 2025-05-06T06:56:33Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Feb 27, 2025

openedx-webhooks added this to Contributions Feb 27, 2025

github-project-automation bot moved this to Needs Triage in Contributions Feb 27, 2025

dcoa mentioned this pull request Feb 27, 2025

Update frontend-app-account to use Design Tokens openedx/public-engineering#296

Closed

dcoa changed the title ~~feat: support design tokens and paragon 23~~ [WIP] feat: support design tokens and paragon 23 Feb 27, 2025

mphilbrick211 moved this from Needs Triage to Product Review in Contributions Mar 3, 2025

mphilbrick211 moved this from Product Review to Waiting on Author in Contributions Mar 3, 2025

dcoa force-pushed the dcoa/design-tokens-support branch 4 times, most recently from 4aa89ce to f081d9d Compare March 18, 2025 07:00

dcoa commented Mar 18, 2025

View reviewed changes

dcoa added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Mar 18, 2025

dcoa requested a review from brian-smith-tcril March 18, 2025 21:50

dcoa marked this pull request as ready for review March 18, 2025 22:12

dcoa force-pushed the dcoa/design-tokens-support branch from 3b99208 to 54693d0 Compare March 25, 2025 23:19

dcoa force-pushed the dcoa/design-tokens-support branch from 54693d0 to 54c1d2b Compare March 31, 2025 20:43

dcoa changed the title ~~[WIP] feat: support design tokens and paragon 23~~ feat: support design tokens and paragon 23 Mar 31, 2025

dcoa force-pushed the dcoa/design-tokens-support branch from 54c1d2b to 1f0034e Compare April 11, 2025 02:38

dcoa force-pushed the dcoa/design-tokens-support branch 2 times, most recently from a545b5d to 76c8017 Compare April 13, 2025 03:59

dcoa force-pushed the dcoa/design-tokens-support branch 2 times, most recently from 59682be to 5452064 Compare April 22, 2025 03:41

dcoa force-pushed the dcoa/design-tokens-support branch from 5452064 to 69acaf9 Compare April 28, 2025 02:03

brian-smith-tcril reviewed May 5, 2025

View reviewed changes

src/account-settings/delete-account/ConfirmationModal.jsx Show resolved Hide resolved

dcoa added 5 commits May 6, 2025 14:38

chore: update paragon to version 23

5c151dd

refactor: update paragon form components

cb8d81f

feat: add PARAGON_THEMES_URL to the env files

0a9f2b0

test: update test according to paragon updates

9af0932

refactor: update styles to css variables

e8e4da9

dcoa force-pushed the dcoa/design-tokens-support branch from 69acaf9 to e8e4da9 Compare May 6, 2025 04:39

brian-smith-tcril approved these changes May 7, 2025

View reviewed changes

brian-smith-tcril changed the base branch from master to master-design-tokens May 7, 2025 16:19

brian-smith-tcril merged commit f6917bb into openedx:master-design-tokens May 7, 2025
8 checks passed

github-project-automation bot moved this from Waiting on Author to Done in Contributions May 7, 2025

kaustavb12 added create-sandbox open-craft-grove should create a sandbox environment from this PR and removed create-sandbox open-craft-grove should create a sandbox environment from this PR labels May 9, 2025

feat: support design tokens and paragon 23 #1198

feat: support design tokens and paragon 23 #1198

Conversation

dcoa commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openedx-webhooks commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dcoa Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcoa Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

open-craft-grove commented Mar 20, 2025

Uh oh!

open-craft-grove commented Mar 21, 2025

Uh oh!

open-craft-grove commented Mar 26, 2025

Uh oh!

open-craft-grove commented Mar 31, 2025

Uh oh!

open-craft-grove commented Apr 11, 2025

Uh oh!

open-craft-grove commented Apr 11, 2025

Uh oh!

open-craft-grove commented Apr 13, 2025

Uh oh!

open-craft-grove commented Apr 22, 2025

Uh oh!

open-craft-grove commented Apr 22, 2025

Uh oh!

open-craft-grove commented Apr 28, 2025

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

open-craft-grove commented May 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dcoa commented Feb 27, 2025 •

edited

Loading

openedx-webhooks commented Feb 27, 2025 •

edited

Loading

codecov bot commented Mar 18, 2025 •

edited

Loading

dcoa Mar 18, 2025 •

edited

Loading

brian-smith-tcril Mar 21, 2025 •

edited

Loading