State of Paragon Working Group (March 2023)

Owned by Adam Stankiewicz, created
Last updated: Mar 31, 2023
3 min read

Date: Mar 22, 2023

Introduction

The Paragon Working Group focuses primarily on the design system and UI component library used throughout the Open edX platform. The group is lead and maintained by 2U engineers and designers.

The goals of Paragon and the Paragon Working Group are to:

  • Develop and maintain a set of robust components that are efficient and low-cost to implement,

  • Maintain a comprehensive, public documentation website of best practices and developer details

  • Contribute to a consistent and delightful user experience in Open edX

The Principles of Paragon are:

  • Embrace reuse and ditch the unnecessary.

  • Strive for universal accessibility.

  • Build open source and theme ready.

  • Act like an owner.

Consider this report as a compilation of what we’ve done over the past year, what we’re looking at doing in the next 6 months, and a wider vision of the group’s future beyond that.

Accomplishments

Over the past year, our major accomplishments were:

  • Successfully onboarded and integrated RaccoonGang engineering team to work on Paragon engineering projects, fix bugs, and update the documentation site.

  • Successfully transitioned leadership from original design and tech lead to current team

  • First issue of the Paragon Newsletter was released.

  • Project management

    • Introduced GitHub Project board

    • Migrated from Jira to GitHub.

      • Issues and tasks are now in GitHub and findable accessible to the Open edX community

    • Improved and clarified contribution process.

    • Maintainers pilot (OEP-55).

      • PWG is now a public WG (weekly PWG meetings were previously not joinable outside of 2U/edX).

  • Added and updated a variety of new components (sample below):

    • Dropzone

    • Skeleton

    • Chip

    • SelectableBox

    • ProductTour

    • Bubble

    • Stack

    • Form.Autosuggest

    • Responsive behavior for Tabs

    • Form.Switch

    • OverflowScroll

  • Native support for internationalization (i18n) in Paragon UI components.

  • Tackled discrepancies between Figma design documentation and live UI component code implementation.

  • Accessibility fixes

  • Bug fixes

  • Miscellaneous “glue” tasks

    • Tracking Segment events to understand how consumers utilize the documentation site.

    • Additional re-usable custom React hooks to improve developer efficiency.

    • Algolia site search on the documentation website to make it easier to find specific components.

    • All 2000+ Material UI icons (sharp variants) available to engineers.

    • Pass-thru react-responsive components/hooks.

  • Improved “Usage Insights” on the documentation site to see which components are used by which projects, installed versions of Paragon in consuming projects, and number of Paragon imports in each project.

 

Further, we’ve made significant progress on the following initiatives:

  • Design tokens and support for runtime theming with CSS variables.

    • At a high-level, the design tokens initiative migrates our style definitions from SCSS to a platform-agnostic format (i.e., JSON) such that it may be transformed to various output formats (e.g., CSS variables). CSS variables may be used to support customization of the Paragon theme at runtime vs. build time.

  • Documentation site

    • Navigation re-design.

      • This effort is aimed at improving the navigation of the public documentation website. Goals include:

        • Making selected theme and theme options more obvious

        • Consolidating components into an easier-to-consume list

    • Page template re-design.

      • This effort is aimed at improving public documentation for Paragon. The goal is to have a more structured and comprehensive set of guidelines for designers and other consumers of Paragon UI. Guidelines would include best practices, accessibility notes, and more.

 

We continue to engage in a set of ongoing tasks; these tasks are work we need to be sure we’re doing on a regular basis, but we don’t want to lose sight of their importance. Those tasks are:

  • Accessibility updates

  • Fixing bugs

  • Security vulnerabilities

  • Supporting additional component use cases for UI components.

Concrete Plans - Next 6 Months

Over the next six months, the Paragon Working Group has some really exciting work queued up. We hope to drive {key metrics, description of impact, etc}. Our primary goals are to {work on / complete / another word} the following tasks and projects:

  • Design tokens

  • TypeScript

  • New and updated components (e.g., Multiselect)

  • Improved documentation.

Future Vision for the Group (Optional)

Moving beyond the next six months, the Paragon Working Group is really excited about making progress in {areas of interest}. Describe why these areas are interesting/important, and what their intended impact is. Include as much information as you wish here, but short and sweet is also OK.

  • Understanding and improving feedback loop between Open edX community and the design system / component library.

  • Design tooling

    • Figma → code integration.

    • UI to add/update design tokens.

  • Figma library for Open edX theme (the existing Paragon Figma library utilizes the edX.org theme).

  • Interestingly, our primary design tool, Figma is also working on new features to support design tokens, that may offer a way forward in integrating Paragon into Figma. How should we take advantage of these new features.

  • CMS for the Paragon documentation site to enable non-technical contributors to propose and make changes to the .documentation

Deep Dive: Accomplishment/In-progress Initiative/Ongoing Task/Concrete Plan (Optional)