[META] OUI theme compliance for plugins - phase 1

[joshuarrrr]

Introduction

As part of a strategic initiative, the OpenSearch project is planning significant updates to the look and feel of OpenSearch Dashboards. To make this process efficient and maintainable, we're centralizing and consolidating UI patterns in the OUI library, which means that additional styling, overrides, and custom components in OpenSearch Dashboards and OpenSearch Dashboards plugins will be phased out.

This issues is to track phase 1 of OUI theme plugin compliance, which will involve changes to OUI typography and color SASS variables (for both dark and light mode). Final values are still TBD, but research values can be tracked in opensearch-project/oui#807.

Key dates

We expect to ship the updated theme as an experimental/optional theme in the 2.9 release (code freeze July 11, 2023), and to make it the default theme in 2.10 (code freeze August 22, 2023). In order for the UX time to review and approve all plugins, actions should be completed by August 6, 2023.

Actions required

1. Acknowledge the issue by adding an assignee who will serve as a point-of-contact
2. Provide screenshots and navigation instructions for important views and screens in your plugin or application. This will assist with both manual and automatic validation of compliance
3. Identify all typographic properties and styles (SASS and inline styles, JS props)
4. Create issues to mitigate typographic styles not inherited from OUI components or SASS variables
5. Identify all color values, including visualization colors and palettes (SASS and inline styles, JS props)
6. Create issues to mitigate typographic styles not inherited from OUI components or SASS variables
7. Resolve all mitigation issues
8. Validate and test plugin with updated OUI theme

Identify

The OpenSearch Dashboards team has created some scripts and tooling that may assist your efforts to identify typographic and color styles:

1. Search for typographic properties
2. Search for color values

Tracking issues

• Validate OUI theme compliance - phase 1  alerting-dashboards-plugin#575
• Validate OUI theme compliance - phase 1  anomaly-detection-dashboards-plugin#510
• https://github.com/opensearch-project/dashboards-catalog/issues/9
• Validate OUI theme compliance - phase 1  dashboards-i18n#26
• Validate OUI theme compliance - phase 1  dashboards-maps#425
• Validate OUI theme compliance - phase 1  dashboards-notifications#60
• Validate OUI theme compliance - phase 1  dashboards-observability#541
• Validate OUI theme compliance - phase 1  dashboards-query-workbench#83
• Validate OUI theme compliance - phase 1  dashboards-reporting#127
• Validate OUI theme compliance - phase 1 dashboards-search-relevance#223
• Validate OUI theme compliance - phase 1  dashboards-visualizations#190
• Validate OUI theme compliance - phase 1  index-management-dashboards-plugin#793
• Validate OUI theme compliance - phase 1  ml-commons-dashboards#217
• Validate OUI theme compliance - phase 1  security-analytics-dashboards-plugin#633
• Validate OUI theme compliance - phase 1 security-dashboards-plugin#1471

FAQs

Once these actions are completed, is a plugin fully OUI compliant?

No. Phase 1 is limited to typographic and color values, but we'll have additional phases as we move toward [the complete design vision](https://github.com//issues/4298).

How can I avoid future OUI compliance campaigns?

The best way to prevent future work and refactoring is to only use OUI React components, following the patterns in [the documentation website](https://oui.opensearch.org/1.0/#/). This means avoiding SASS, CSS, and inline styles altogether. If you believe your feature or design requires properties or components unavailable in OUI, please work with your UX partner to reconsider the design or [open issues in the OUI repository](https://github.com/opensearch-project/oui/issues/new/choose) that explain the use case and need.

[joshuarrrr]

https://github.com/opensearch-project/dashboards-i18n has no views or UI, so can be skipped in future campaigns.

[wbeckler]

plugin	status
opensearch-project/alerting-dashboards-plugin#575	unacknowledged, untriaged
opensearch-project/anomaly-detection-dashboards-plugin#510	unassigned, targeted to 2.10
https://github.com/opensearch-project/dashboards-catalog/issues/9	unacknowledged, untriaged, repo is missing untriaged workflow
opensearch-project/dashboards-maps#425	unassigned, targeted to 2.10
opensearch-project/dashboards-notifications#60	unacknowledged, untriaged
opensearch-project/dashboards-observability#541	unacknowledged, unassigned
opensearch-project/dashboards-query-workbench#83	unacknowledged, untriaged
opensearch-project/dashboards-reporting#127	unacknowledged, untriaged
opensearch-project/dashboards-search-relevance#223	assigned, no release target yet
opensearch-project/dashboards-visualizations#190	unacknowledged, untriaged
opensearch-project/index-management-dashboards-plugin#793	unacknowledged, untriaged
opensearch-project/security-analytics-dashboards-plugin#633	assigned, no release target yet

[joshuarrrr]

@wbeckler Can we update the table, and relabel for 2.11?

[joshuarrrr]

Today is code freeze - any remaining compliance will be in 2.11.

[joshuarrrr]

Removing release label. While all OpenSearch Dashboards plugins are still encouraged to resolve these compliance issues, to avoid disruptive OUI or theme related changes in the future, we'll instead prioritize resolving all known issues in opensearch-project/oui#895