feat: support design tokens and paragon 23 #450

dcoa · 2025-03-11T03:09:33Z

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 ora grading to support CSS variables and the corresponding paragon design tokens.

Changes implemented

Replace Paragon SCSS variables with CSS variables.
Update frontend build

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-03-11T03:09:37Z

Thanks for the pull request, @dcoa!

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

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.

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-26T12:59:24Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.94%. Comparing base (ed2457b) to head (0a1fcfe).
Report is 4 commits behind head on master-design-tokens.

Additional details and impacted files

@@                   Coverage Diff                    @@
##           master-design-tokens     #450      +/-   ##
========================================================
+ Coverage                 84.93%   85.94%   +1.01%     
========================================================
  Files                       185      185              
  Lines                      3862     3879      +17     
  Branches                    965      959       -6     
========================================================
+ Hits                       3280     3334      +54     
+ Misses                      564      527      -37     
  Partials                     18       18

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

open-craft-grove · 2025-03-26T13:41:34Z

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-27T03:18:17Z

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

open-craft-grove · 2025-04-01T07:02:03Z

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

open-craft-grove · 2025-04-01T07:32:00Z

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

brian-smith-tcril

Thanks for this PR! Overall this is looking really good!

I left a couple comments but nothing major.

I haven't tried testing this locally, and I think it'd likely be good get someone more familiar with this repo to take a look. @adamstankiewicz @MaxFrank13 any thoughts on people that should see this one?

brian-smith-tcril · 2025-05-12T12:44:20Z

src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx

      <AlertList topic="featureBasedEnrollmentGeneral" className="mb-3" />

      <section className="mb-3">
        <form className="form-inline">


I'm thinking maybe we should switch from form to Form here. Then this line could be

<Form inline>

brian-smith-tcril · 2025-05-12T12:44:51Z

src/ProgramEnrollments/LinkProgramEnrollments.jsx

    <>
      <h3>Link Program Enrollments</h3>
      <section className="my-3">
        <form>


Same thing about HTML form vs Paragon Form here.

brian-smith-tcril · 2025-05-12T12:45:21Z

src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx

      )}
      <h3>Program Enrollments Inspector</h3>
      <section className="my-3">
        <form>


Same thing about HTML form vs Paragon Form here

brian-smith-tcril · 2025-05-12T12:52:23Z

src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx

-          <label htmlFor="courseId">Course ID</label>
-          <Input ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" type="text" defaultValue={searchValue} />
+          <Form.Group>
+            <Form.Label htmlFor="courseId">Course ID</Form.Label>


I checked on the Paragon playground and it looks like this changes the label positioning

master

https://paragon-openedx-v22.netlify.app/playground/?code=N4Igxg9gJgpiBcIAELUoDwDMICcC2SYANgIYDOZAciXjALwA6I2%2BAtAJYB2RXMTAfA05o06UgCMYRJAAsALniIAxXI3AQArjjIwAklAEBhTdphJdAEXQB6CVMHCRo3ZwAOGuYVIVqtNXhxWAEYkRWDCCCJWMjxWABYmJE4aeiZILR19RLkAT1dUkDkYAA85RNhMEg0iOQA1EiINemAAZgBfJGsHJ1EAIQ85CGFc-LUyDXE8djLkYnIqFP8okMgomODEgDcSHHYSTjk1V128HZyBAGUYHbAZG365Qc5unpsWPH4UIW-OEDagA

This PR

https://paragon-openedx.netlify.app/playground/?code=N4Igxg9gJgpiBcIAELUoDwDMICcC2SYANgIYDOZAciXjALwA6I2%2BAtAJYB2RXMTAfA05oRSdADFceAHQBxHBACuAB0HDRIiVOkAZEgCMYRJAAsALniKScjcEpxkYASSgCAwvcdInAEXQB6axk9QyI1DU0g6Q9OMwVjYnIqGnomPBxWAEYkSyzCCCJWMjxWABYmJE4U20hFB2dXZFhMEkUiMwA1EiJFemAmAGYmAF8kf3CIsUDteSVVIUmxACFFMzMIYTMAT2VUkDJFfTx2MwrEimpaW1zsyELirIqANxIcdhJY22U3vFetgQAyjBXmATAEVmsNhNRAEWHh%2BCBhkA

open-craft-grove · 2025-05-12T15:12:25Z

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-05-13T08:22:00Z

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

brian-smith-tcril · 2025-05-13T17:09:51Z

closing/reopening to try to kick off ci

dcoa · 2025-05-19T02:45:43Z

@adamstankiewicz @MaxFrank13 just a friendly remainder over this PR

brian-smith-tcril

Thank you so much for this!

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

openedx-webhooks added this to Contributions Mar 11, 2025

github-project-automation bot moved this to Needs Triage in Contributions Mar 11, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Mar 11, 2025

dcoa force-pushed the dcoa/design-tokens-support branch from bbbc275 to 878b6a6 Compare March 26, 2025 02:49

dcoa added 2 commits March 26, 2025 16:09

chore: update paragon to version 23 and frontend-build compatible

cce6c34

refactor: update styles with css variables

ab31fb0

dcoa force-pushed the dcoa/design-tokens-support branch from 878b6a6 to 6bac785 Compare March 26, 2025 07:34

refactor: replace Input with Form.Control

d5112e4

dcoa force-pushed the dcoa/design-tokens-support branch from 6bac785 to d5112e4 Compare March 26, 2025 07:59

fix: select rendering

ec5065a

dcoa force-pushed the dcoa/design-tokens-support branch 3 times, most recently from 7cd6894 to c76933b Compare March 26, 2025 12:50

test: fix render issues

f878a88

dcoa force-pushed the dcoa/design-tokens-support branch from c76933b to f878a88 Compare March 26, 2025 12:52

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

dcoa marked this pull request as ready for review March 26, 2025 12:59

dcoa requested a review from brian-smith-tcril March 26, 2025 13:00

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

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

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

feat: add PARAGON_THEME_URLS to .env files

5b3e9a1

dcoa force-pushed the dcoa/design-tokens-support branch from c0f242b to 5b3e9a1 Compare April 1, 2025 06:04

brian-smith-tcril mentioned this pull request Feb 11, 2025

Update frontend-app-support-tools to use Design Tokens openedx/public-engineering#309

Closed

brian-smith-tcril reviewed May 12, 2025

View reviewed changes

mphilbrick211 moved this from Waiting on Author to Ready for Review in Contributions May 12, 2025

mphilbrick211 moved this from Ready for Review to In Eng Review in Contributions May 12, 2025

fix: replace all form with paragon component

0a1fcfe

dcoa force-pushed the dcoa/design-tokens-support branch from 5e1cb6e to 0a1fcfe Compare May 13, 2025 07:35

brian-smith-tcril closed this May 13, 2025

brian-smith-tcril reopened this May 13, 2025

github-project-automation bot moved this from In Eng Review to Done in Contributions May 13, 2025

openedx-webhooks added the core contributor PR author is a Core Contributor (who may or may not have write access to this repo). label May 19, 2025

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

View reviewed changes

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

brian-smith-tcril merged commit 0791605 into openedx:master-design-tokens May 21, 2025
6 checks passed

feat: support design tokens and paragon 23 #450

feat: support design tokens and paragon 23 #450

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

open-craft-grove commented Mar 26, 2025

Uh oh!

open-craft-grove commented Mar 27, 2025

Uh oh!

open-craft-grove commented Apr 1, 2025

Uh oh!

open-craft-grove commented Apr 1, 2025

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril May 12, 2025

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril May 12, 2025

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril May 12, 2025

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril May 12, 2025

Choose a reason for hiding this comment

master

This PR

Uh oh!

dcoa May 13, 2025

Choose a reason for hiding this comment

Uh oh!

open-craft-grove commented May 12, 2025

Uh oh!

open-craft-grove commented May 13, 2025

Uh oh!

brian-smith-tcril commented May 13, 2025

Uh oh!

dcoa commented May 19, 2025

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dcoa commented Mar 11, 2025 •

edited

Loading

openedx-webhooks commented Mar 11, 2025 •

edited

Loading

codecov bot commented Mar 26, 2025 •

edited

Loading

`master`