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

Browser not supported