Paragon Roadmap

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)
  • Button ‘buttonType’ prop: https://github.com/edx/paragon/issues/358
  • Accessibility: hyperlink with icon as content needs required icon label #325
• 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