/
Paragon Roadmap

Paragon Roadmap

Apr 02, 2019

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