Paragon Roadmap

Owned by Adam Butterworth (Deactivated)
Last updated: Apr 02, 2019
2 min read

Establish: Paragon Working Group

  • Representatives:
    • A Frontend Engineer from as many themes as possible
    • A11y (Jeff)
    • (UX) UI/Vis Designer
    • ... (get suggestions for others required)
  • Meeting:
    • Bi-weekly, 1 hour
    • Purpose: discuss issues, desired features, distribute workload

Phase 1: Project Tune Up (version 4.0)

"Reset" GreenKeeper

  • Upgrade project dependencies to current versions (prefer an all-at-once approach)
  • Delete Greenkeeper PRs and Issues
  • Ensure Greenkeeper is configured properly
    • Evaluate Renovate as replacement

Clear Stale Issues, PRs, Branches

  • Old issues may be valid, but we will take this opportunity to reset our vision
  • There are 14 Pages of Stale Branches
  • 5 pages of active branches, mostly greenkeeper
  • Clear project board

Upgrade linters to match current MFEs

Get a11y review to understand baseline

Phase 2: Minor Updates (4.x)

Let's work on all non-breaking improvements we can.

  • Create a mechanism to add deprecation warnings for old props.
  • Add per-component npm package exports
    • Support today's import @edx/paragon and also @edx/paragon-{componentName}
      • Look at "Bit"
  • Streamline exported package (today including a component from Paragon may add about 500kb to build)
    • Tree shaking
  • Swap icons to use FontAwesome React inline SVG: https://github.com/edx/paragon/issues/347
  • Storybook should style with edx-bootstrap v2 theme
  • Add more components with Reactstrap (non-breaking additions)
    • Add passthrough components
    • be judicious about what components we add to augment the library.
  • Docs
    • combine with edx bootstrap, do work to sort out best way to do this.
  • Component Interface Cleanup (maintain backwards compatibility)
    • Paragon components should have similar consistent props
    • write down decisions on naming. WOOw
  • Stop auto-generating ids on things where it doesn't make sense (i.e. <Icon />)
  • Support i18n
  • Analytics
  • remove hardcoded English labels


Major/Minor Grey Area

  • Stop using content in a component for aria-labels. They should be required when it makes sense, but not made for you.

Phase 3: Major Updates (5.0)

All breaking improvements.

  • Remove build targets themeable and static. Lose support for use in legacy applications.
  • Simplify the ways styles are added in Paragon
    • Prefer class strings over imported style objects
    • Remove includes of scss in .jsx files
  • Remove backwards compatibility for legacy props
  • remove asInput()
  • Open Issues (with proposed breaking changes)
  • Leverage Reactstrap (breaking change implementations)
    • Where appropriate swap Paragon implementations with Reactstrap passthroughs/wrappers.



Notes:


edx-platform is the only consumer of the "static" build:

edx/edx-platform – StatusBarAlert.jsx
edx/edx-platform – account_settings.html
edx/edx-platform – PasswordResetInput.jsx
edx/edx-platform – UpsellExperimentModal.jsx
edx/edx-platform – PortfolioExperimentUpsellModal.jsx
edx/edx-platform – PasswordResetConfirmation.jsx

edx/edx-platform – course-home-fragment.html
edx/edx-platform – StudentAccountDeletion.jsx
edx/edx-platform – StudentAccountDeletionModal.jsx
edx/edx-platform – choose.html
edx/edx-platform – dashboard.html