Internal customizations for widgets

[malincrist]

Goal

Enable customizations for components of the Developer Portal's widgets. Related issues: #1213

Details

Besides the global styles defined for the entire application, users can define local styles for each widget individually. The components that are stylable are now selectable, and the button edit for "edit local styles" appears when they are selected, as seen in the following screenshot:

By clicking on the button, a style editor pop-up will appear, with the allowed customizations for the selected component. The styles defined will be applied for all of the same components of the widget (i.e. defining a different background color for an input inside a widget will change the background color of all the inputs from inside the same widget)

Here is an example of how styling work for the inputs in the test console:

[github-actions[bot]]

Accessibility Insights Action: All applicable checks passed

• URLs: 13 URL(s) passed, and 0 were not scannable
• Rules: 29 check(s) passed, and 23 were not applicable
• Download the Accessibility Insights artifact to view the detailed results of these checks

---

This scan used axe-core 4.3.2 with Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

[azep-ninja]

When is this expected to go live? This is the last customizations needed to truly give the portal a better overall control of the UI.