Versions Compared

Old Version 48

changes.mady.by.user Adam Butterworth (Deactivated)

Saved on

compared with

New Version 49

changes.mady.by.user Adam Stankiewicz

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Today, design and technical ownership for Paragon lives with Adam Butterworth (Deactivated). Adam has transitioned to a new role, Product Design Manager for Engagement Theme and no longer has bandwidth to serve as the technical owner for Paragon.

Moving forward, Ben Warzeski (Deactivated) Adam Stankiewicz will be the technical owner. This document outlines the state of Paragon and its roadmap, followed by the responsibilities of the

Status
colourGreen
titletechnical owner
,
Status
colourBlue
titleDesign owner
,
Status
colourPurple
titleParagon working Group
,
Status
colourRed
titleSquad designer
, and
Status
colourYellow
titleengineering squad
.

...

Iframe
srchttps://docs.google.com/spreadsheets/d/e/2PACX-1vQWXsGvUEeb2VGrJbIDN_HGluBW_XNE9_dsBQa-2iB85yXJpfDPTu7TqGpIYy2hYrtAicHAvGtgOikS/pubchart?oid=1998965731&format=interactive
width709
frameborderhide
styleborder: solid 1px #aaa; background-color: white;
alignmiddle
height439

Source data: Paragon Components Status Google Sheet

...

  1. Ease of Access

  2. Ease of Use

  3. Increased Power and Value

Ease of Access

🔥 Make it possible to use Paragon in as many codebases as possible

Status
colourGreen
titletechnical owner

  • Enable the BD-39 effort to support Paragon in edx-platform

🔥 Make it easy to stay on the latest version of Paragon.

Status
colourGreen
titletechnical owner

https://openedx.atlassian.net/browse/

Jira Legacy
serverSystem JIRA
serverId13fd1930-5608-3aac-a5dd-21b934d3a4b4
keyPAR-382

🔥 Decouple component SASS to increase component modularity and enable runtime theming.

Status
colourGreen
titletechnical owner

  • Adopt CSS variables for theming

    • Upgrade to Bootstrap 5 (which uses css variables). Note ie11 is not supported.

    • Compile and publish Paragon SASS core, and each component sass independently as separate css files.

      • expect theming to be done via CSS Variables

Ensure Paragon support Webpack 5 module federation

Increase awareness of Paragon’s offerings

Status
colourGreen
titletechnical owner
Status
colourBlue
titleDesign owner

  • Develop and run regular Paragon trainings for engineers and designers

Ease of Use

🔥 Identify and fix inconsistencies between the Paragon design spec and component implementations.

Status
colourGreen
titletechnical owner
Status
colourBlue
titleDesign owner

  • Catalog and fix implementation discrepancies

  • Fix lingering bugs.

  • Remove aging dependencies like sanitize-html

🔥 Improve the clarity of the Paragon component documentation

Status
colourGreen
titletechnical owner
Status
colourBlue
titleDesign owner

https://openedx.atlassian.net/browse/

Jira Legacy
serverSystem JIRA
serverId13fd1930-5608-3aac-a5dd-21b934d3a4b4
keyPAR-416

Make the Paragon component api easier to use

Status
colourGreen
titletechnical owner

  • Develop strict guidelines on React component design in Paragon

    • prop naming

    • controlled vs. uncontrolled component paradigms

    • method of providing escape hatches for customization

    • standard levels and methods of flexibility in components

  • Refactor old components to conform to the new standards

Improve the clarity in design specs about where Paragon components are used

Status
colourBlue
titleDesign owner

  • Discover and create better ways to deliver design specs to engineering teams.

  • Share/teach this method to the design team

  • Encourage designers to understand the current state of implementation of components they use in their designs.

Increase the frequency that there is a component that matches our needs

Status
colourBlue
titleDesign owner
Status
colourGreen
titletechnical owner

  • Solicit feedback from designers and engineers on what is missing or on what they have made that may help others.

  • Review the OGSPs for product delivery teams and develop a list of potential additions.

Increased Power and Value

🔥 Add internationalization support
(enables language-forward components to be added to Paragon)

Status
colourGreen
titletechnical owner

https://openedx.atlassian.net/browse/

Jira Legacy
serverSystem JIRA
serverId13fd1930-5608-3aac-a5dd-21b934d3a4b4
keyPAR-411

Add i18n support with no dependency on frontend-platform

Add analytics features to clickable components

Status
colourGreen
titletechnical owner

  • Make Hyperlink and Button work with frontend-platform analytics service out of the box. For complex components (Collapsible) offer an api that can track events at varying levels of component hierarchy.

Reduce the risk of making changes to components

Status
colourGreen
titletechnical owner

  • Independently publish and version components via Lerna or other tool

    • Per component

    • icons published independently

Componentize common a11y needs

Status
colourGreen
titletechnical owner
Status
colourBlue
titleDesign owner

Make it easier to write a new component in Paragon (linting/code generators)

Status
colourGreen
titletechnical owner

...

Outline of responsibilities

...

Status
colourGreen
titletechnical owner
Ben Warzeski (Deactivated) Adam Stankiewicz

  • Directs the architectural roadmap

  • Implements the architectural direction: individually, via blended development, or may escalate to theme leadership to assemble a tiger team.

  • Ensures incoming Paragon bugs are triaged and resolved, as needed

    • Leveraging time from the working group to triage and support the design system.

  • Helping to facilitate Paragon Working Group meeting

  • Ensures engineers are supported in contributing to Paragon

  • Ensures pull requests are reviewed in a timely manner. Any frontend engineer at edX is permitted to perform code reviews at the discretion of the

    Status
    colourGreen
    titletechnical owner
    .

  • May implement new component designs when appropriate

...