Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [BD-46] Component generator refactoring #3076

Conversation

PKulkoRaccoonGang
Copy link
Contributor

@PKulkoRaccoonGang PKulkoRaccoonGang commented May 16, 2024

Description

Since the file structure of Paragon components has changed, the component generator was refactored

  • File creation _variables.scss has been removed from the template
  • Updated documentation
  • the component-generator directory was excluded from stylelint checking

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

@openedx-webhooks
Copy link

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

@openedx-webhooks openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label May 16, 2024
Copy link

netlify bot commented May 16, 2024

Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9e347cb
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx/deploys/664da99a82d586000844e26e
😎 Deploy Preview https://deploy-preview-3076--paragon-openedx.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

codecov bot commented May 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.68%. Comparing base (a2b552c) to head (9e347cb).
Report is 4 commits behind head on alpha.

Additional details and impacted files
@@           Coverage Diff           @@
##            alpha    #3076   +/-   ##
=======================================
  Coverage   93.68%   93.68%           
=======================================
  Files         229      229           
  Lines        3740     3740           
  Branches      876      905   +29     
=======================================
  Hits         3504     3504           
+ Misses        232      231    -1     
- Partials        4        5    +1     

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

Copy link
Contributor

@brian-smith-tcril brian-smith-tcril left a comment

Choose a reason for hiding this comment

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

This is looking great! I left a couple suggestions about linking to the tokens readme instead of having tokens information outside of there. Those are just suggestions, if you feel it makes more sense to keep the information where it is now I'm not opposed to that idea.

README.md Outdated
Comment on lines 318 to 319
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it'd be nice to keep the design token documentation in the tokens directory and link to it instead.

Suggested change
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component.
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).

this way we can keep the documentation in one place and we don't need to remember all the places it needs to be updated if it is changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I edited it, thanks! Your proposal looks more concise 💯

Comment on lines 74 to 75
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component.
If you wish to use CSS variables (which is the preferred way of styling the components since values can be
easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).

same suggestion as before

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Same, thanks

@brian-smith-tcril brian-smith-tcril merged commit 05e9096 into openedx:alpha May 22, 2024
10 checks passed
@openedx-semantic-release-bot

🎉 This PR is included in version 23.0.0-alpha.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blended PR is managed through 2U's blended developmnt program released on @alpha
Projects
No open projects
Status: No status
Development

Successfully merging this pull request may close these issues.

5 participants