[Discuss] Strategies for auditing OUI usage #3803

joshuarrrr · 2023-04-07T00:38:52Z

As part of our efforts to provide a more cohesive experience across interfaces and components, we've committed to building out, expanding, and improving OUI. But to maximize the benefits of the work in OUI, it's important that OpenSearch Dashboards is actually consuming, implementing, and using the existing OUI components correctly and comprehensively.

Anecdotally, we know there are many gaps today, where Dashboards components and apps are either not using OUI components at all, using them incorrectly, or extending them through hacks and overrides. The goal of this issue is to determine strategies for finding, understanding, and fixing these antipatterns. In an ideal world, there would be a complete separation of responsibility between OUI and OpenSearch dashboards, with OUI responsible for all the components and styles that implement the OpenSearch Design System. As we dig deeper into the gaps, we may discover that's not a reasonable or desirable goal, but it's a useful framework to start with.

joshuarrrr · 2023-04-10T19:29:09Z

Hypothesis 1: Start by locating all `*.scss` files

Assumptions

The underlying assumption here is that OUI is the best place for all styling decisions and implementations, and that OpenSearch dashboards should simply be composing or using those OUI components, not defining or overriding styles.

Methods and Results

There are currently 250 *.scss files in the src directory of OpenSearch Dashboards (find ./src -name "*.scss" | wc -l)

1. Find directories with the most SASS content

The idea here is to find and rank (by file size) the directories with the most custom styling. Directories at the top of the list are good candidates for high-impact investigation, while those at the bottom may represent quick wins and low-hanging fruit. One problem with this approach is that subdirectories are not grouped together by plugin or core package.

find ./src -name "*.scss" | xargs dirname | sort -u |  xargs -I % bash -c 'printf "%\t" && du -ch %/*.scss --apparent-size | grep total' | awk '{print $2" | https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/"$1" |"}' | sort -hr | xargs -0 printf "size (bytes) | directory | notes\n---|---|---\n%s" | sed 's:\.\/::g'

Output

size (bytes)	directory	notes
7.4K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/home/public/application/components
7.0K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/maps_legacy/public/map
6.9K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualizations/public/wizard
6.6K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/styles
6.5K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_react/public/markdown
5.9K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/lib/layout
5.3K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/visualizations/views
4.9K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_default_editor/public
4.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_builder/public/application/components/data_tab
3.9K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/components
3.8K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui/typeahead
3.8K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui/filter_bar
3.7K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public/directives
3.6K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/core_app/styles
3.5K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/chrome/ui/header
3.3K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vega/public
3.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_overview/public/components
3.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/embeddable/public/lib/panel
3.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/dashboard/public/application/embeddable/grid
2.9K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_builder/public/application/components
2.7K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application
2.6K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header
2.6K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/doc_table
2.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/components/sidebar
2.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/advanced_settings/public/management_app
2.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/doc_table/components/table_row
2.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui/query_string_input
2.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/console/public/styles
2.0K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/components/legend
1.5K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualizations/public/components
1.5K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/lib
1.4K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_react/public/field_button
1.4K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui/saved_query_management
1.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualizations/public/embeddable
1.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public
1.2K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_legacy/public/paginate
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualize/public/application/components
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/components/tooltip
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeline/public/components
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_builder/public/application
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public/directives/cells
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_legacy/public/font_awesome
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/components/doc_viewer
1.1K	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/dashboard/public/application
871	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib
870	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button
858	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui/shard_failure_modal
841	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public
789	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/rendering
774	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_metric/public/components
746	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public/directives/timeline_expression_suggestions
674	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/expressions/public
661	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt
657	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/console/public/styles/components
623	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/components/vis_types
594	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeline/public
577	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/dashboard/public/application/embeddable/panel
524	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/tile_map/public
503	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/visualizations/point_series
497	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public/directives/timeline_help
467	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/saved_objects_management/public/management_section/objects_table/components
443	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown
442	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_tagcloud/public/components
440	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_ui_shared/__packages_do_not_import__/ace
431	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/timeline/public/directives/timeline_interval
409	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/components/aggs
398	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state
386	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/application/ui
367	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/dev_tools/public
365	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_markdown/public
331	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vega/public/vega_inspector
292	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public
284	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/inspector/public/views/requests
281	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/embeddable
278	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/doc_table/components
258	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/context/components/action_bar
240	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualize/public/application
236	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_builder/public/embeddable
233	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/input_control_vis/public
230	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/management/public/components/management_sidebar_nav
230	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/inspector/public/ui
207	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_table/public/components
201	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/context
192	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public/ui
188	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/inspector/public/views/data
183	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/embeddable/public
183	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular/directives
158	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/overlays/banners
155	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_react/public/code_editor
152	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/management/public/components/management_app
143	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/chrome/ui
141	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/overlays
138	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/home/public/application/components/tutorial
135	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/assets
127	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/dashboard/public/application/embeddable/viewport
124	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/region_map/public/components
98	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/input_control_vis/public/components/editor
96	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/input_control_vis/public/components/vis
93	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/saved_objects/public/save_modal
92	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/header
90	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/share/public/components
89	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/embeddable/public/lib/panel/panel_header
80	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/visualizations/public
78	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_timeseries/public/application/components/panel_config
78	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_help
76	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges
70	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/samples
53	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/discover/public/application/angular
52	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/inspector/public/views
47	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/navigation/public/top_nav_menu
30	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/saved_objects/public
30	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/navigation/public
29	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/share/public
28	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/opensearch_dashboards_overview/public
28	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/home/public/application
25	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/vis_type_vislib/public
23	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/inspector/public
23	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/console/public
22	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/plugins/data/public
22	https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/public/chrome

2. Find which plugins contain SASS files

37 of the 53 plugins in src/plugins contain at least one SASS file.

find ./src/plugins -type f -name "*.scss" | xargs dirname | uniq -c | sort -nr | uniq | awk '{print $2}' | cut -d / -f1-4 | sort -u | awk '{print "["$1"](https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/"$1") | "}' | xargs -0 printf "plugin directory | notes\n---|---\n%s" | sed 's:\.\/::g'

Output

plugin directory	notes
src/plugins/advanced_settings
src/plugins/console
src/plugins/dashboard
src/plugins/data
src/plugins/dev_tools
src/plugins/discover
src/plugins/embeddable
src/plugins/expressions
src/plugins/home
src/plugins/index_pattern_management
src/plugins/input_control_vis
src/plugins/inspector
src/plugins/management
src/plugins/maps_legacy
src/plugins/navigation
src/plugins/opensearch_dashboards_legacy
src/plugins/opensearch_dashboards_overview
src/plugins/opensearch_dashboards_react
src/plugins/opensearch_ui_shared
src/plugins/region_map
src/plugins/saved_objects
src/plugins/saved_objects_management
src/plugins/share
src/plugins/tile_map
src/plugins/timeline
src/plugins/vis_builder
src/plugins/vis_default_editor
src/plugins/vis_type_markdown
src/plugins/vis_type_metric
src/plugins/vis_type_table
src/plugins/vis_type_tagcloud
src/plugins/vis_type_timeline
src/plugins/vis_type_timeseries
src/plugins/vis_type_vega
src/plugins/vis_type_vislib
src/plugins/visualizations
src/plugins/visualize

3. Find which core services have SASS files

7 of the 19 src/core/public directories include SASS files (including the root directory). Note that these include the implementation and inclusion of OUI styles and themes, so are much less likely to represent improper usage.

find ./src/core -type f -name "*.scss" | xargs dirname | uniq -c | sort -nr | uniq | awk '{print $2}' | cut -d / -f1-5 | sort -u | awk '{print "["$1"](https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/"$1") | "}' | xargs -0 printf "core directory | notes\n---|---\n%s" | sed 's:\.\/::g'

Output

core directory	notes
src/core/public
src/core/public/application
src/core/public/chrome
src/core/public/core_app
src/core/public/overlays
src/core/public/rendering
src/core/public/styles

4. Find the largest SASS files in a directory

Once a particular plugin or directory has been identified for further investigation, we can also check for the SASS files with the most content.

find ./src/plugins/vis_type_timeseries -type f -name "*.scss" | xargs du -h --apparent-size  | sort -hr | awk '{print $1" | ["$2"](https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/"$2") | "}' | xargs -0 printf "size (bytes) | file | notes\n---|---|---\n%s" | sed 's:\.\/::g'

Example

size (bytes)	file	notes
2.5K	src/plugins/vis_type_timeseries/public/application/visualizations/views/_metric.scss
1.5K	src/plugins/vis_type_timeseries/public/application/visualizations/views/_gauge.scss
929	src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss
908	src/plugins/vis_type_timeseries/public/application/visualizations/views/_top_n.scss
569	src/plugins/vis_type_timeseries/public/application/components/vis_types/_vis_types.scss
549	src/plugins/vis_type_timeseries/public/application/_variables.scss
531	src/plugins/vis_type_timeseries/public/application/components/_markdown_editor.scss
446	src/plugins/vis_type_timeseries/public/application/visualizations/views/_annotation.scss
443	src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/_markdown.scss
437	src/plugins/vis_type_timeseries/public/application/components/_no_data.scss
388	src/plugins/vis_type_timeseries/public/application/components/aggs/_agg_row.scss
379	src/plugins/vis_type_timeseries/public/application/components/_index.scss
378	src/plugins/vis_type_timeseries/public/application/components/_vis_editor_visualization.scss
369	src/plugins/vis_type_timeseries/public/application/components/_error.scss
355	src/plugins/vis_type_timeseries/public/application/index.scss
248	src/plugins/vis_type_timeseries/public/application/components/_color_picker.scss
238	src/plugins/vis_type_timeseries/public/application/components/_series_editor.scss
223	src/plugins/vis_type_timeseries/public/application/components/_annotations_editor.scss
127	src/plugins/vis_type_timeseries/public/application/_mixins.scss
87	src/plugins/vis_type_timeseries/public/application/components/_vis_picker.scss
82	src/plugins/vis_type_timeseries/public/application/visualizations/views/_index.scss
59	src/plugins/vis_type_timeseries/public/application/components/_color_rules.scss
57	src/plugins/vis_type_timeseries/public/application/_tvb_editor.scss
54	src/plugins/vis_type_timeseries/public/application/components/vis_types/_index.scss
52	src/plugins/vis_type_timeseries/public/application/components/panel_config/_panel_config.scss
26	src/plugins/vis_type_timeseries/public/application/components/panel_config/_index.scss
26	src/plugins/vis_type_timeseries/public/application/components/_vis_editor.scss
21	src/plugins/vis_type_timeseries/public/application/components/aggs/_index.scss

Analysis

From Result 1, it appears there's a lot of SASS content in the home plugin. Sorting the files by size gives us a starting point:

3.4K    ./src/plugins/home/public/application/components/_solutions_section.scss
1.6K    ./src/plugins/home/public/application/components/_home.scss
1.2K    ./src/plugins/home/public/application/components/_add_data.scss
644     ./src/plugins/home/public/application/components/_welcome.scss
328     ./src/plugins/home/public/application/components/_index.scss
305     ./src/plugins/home/public/application/components/_synopsis.scss
138     ./src/plugins/home/public/application/components/tutorial/_tutorial.scss
56      ./src/plugins/home/public/application/components/_sample_data_set_cards.scss
28      ./src/plugins/home/public/application/index.scss

Starting with the first file,

OpenSearch-Dashboards/src/plugins/home/public/application/components/_solutions_section.scss

Lines 31 to 33 in 416eb50

    
           .homSolutions { 
        
             margin-top: -($euiSizeXL + $euiSizeL + $euiSizeM); 
        
           }

we see lots of styling for classes .homSolution*. Searching for those classes leads us to

OpenSearch-Dashboards/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx

Line 72 in 416eb50

data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}

and

OpenSearch-Dashboards/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx

Line 61 in 416eb50

So we've found a couple components in the home plugin that are using custom classes and styling. One thing to note is that some of these classes are being added to Eui namespaced components (<EuiFlexItem>), while others are defined on regular elements (<section>, <h2>). One open question is which of those we care more about fixing first.

But before we think about fixing, we need to better understand the context of use. In this case, the SolutionsSection component is used here:

Next steps:

Are there other OUI components we should be using here?
Are all the existing styles necessary?
What would happen if all the custom styling was removed?

Questions

1. Does OUI usage/OpenSearch Design System compliance mandate React?

EUI was designed and built with the idea that it could be consumed in two ways, either via React components, or by directly using the classes and style definitions directly. In forking to OUI, we made the early decision to no longer support class/style-only usage. But that means it's nearly impossible for any non-React OpenSearch Dashboards plugin to be compliant with the design system.

2. Are there some components that are specific enough they should only be styled and defined in OpenSearch Dashboards, not OUI?

rednaksi91 · 2023-04-13T22:29:14Z

Love the proposal.
As the next step, we plan to audit the Dashboards core .scss files with a goal to identify opportunities to substitute class/style-only usage w/ React components + inform component iteration roadmap. (ignoring Angular-based files for now)
Please expand on the above suggestion.

joshuarrrr · 2023-05-02T18:54:11Z

@andreymyssak @SergeyMyssak @curq - Now that you've audited some of the plugins, anything else we need to capture here, or should we close this discussion and make any subsequent template updates in #3945?

curq · 2023-05-03T00:54:19Z

@joshuarrrr I think it is okay to close this discussion and move to the #3945, where we can continue any future discussions and make further updates to templates as needed.

BSFishy · 2023-05-22T21:38:54Z

I think this issue can be closed. Plugins with Sass have had issues created for them (ex #4076), with related info put into each individual issue. I'm about to create similar issues for core services. I'm also going to make a meta issue to track everything

joshuarrrr · 2023-05-22T23:37:51Z

Thanks @BSFishy and @curq!

github-actions bot added the untriaged label Apr 7, 2023

aoguan1990 assigned joshuarrrr Apr 10, 2023

joshuarrrr removed the untriaged label Apr 10, 2023

joshuarrrr mentioned this issue Apr 17, 2023

[Table Vis] move format table logic to table render and consolidate types #3397

Merged

8 tasks

joshuarrrr removed their assignment May 2, 2023

seanneumann added the OUI Issues that require migration to OUI label May 18, 2023

seanneumann added this to Look & Feel May 18, 2023

rednaksi91 moved this to Done in Look & Feel May 18, 2023

joshuarrrr closed this as completed May 22, 2023

joshuarrrr added the OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks label Jun 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discuss] Strategies for auditing OUI usage #3803

[Discuss] Strategies for auditing OUI usage #3803

joshuarrrr commented Apr 7, 2023

joshuarrrr commented Apr 10, 2023 •

edited

Loading

rednaksi91 commented Apr 13, 2023

joshuarrrr commented May 2, 2023

curq commented May 3, 2023

BSFishy commented May 22, 2023

joshuarrrr commented May 22, 2023

[Discuss] Strategies for auditing OUI usage #3803

[Discuss] Strategies for auditing OUI usage #3803

Comments

joshuarrrr commented Apr 7, 2023

joshuarrrr commented Apr 10, 2023 • edited Loading

Hypothesis 1: Start by locating all *.scss files

Assumptions

Methods and Results

1. Find directories with the most SASS content

2. Find which plugins contain SASS files

3. Find which core services have SASS files

4. Find the largest SASS files in a directory

Analysis

Questions

1. Does OUI usage/OpenSearch Design System compliance mandate React?

2. Are there some components that are specific enough they should only be styled and defined in OpenSearch Dashboards, not OUI?

rednaksi91 commented Apr 13, 2023

joshuarrrr commented May 2, 2023

curq commented May 3, 2023

BSFishy commented May 22, 2023

joshuarrrr commented May 22, 2023

joshuarrrr commented Apr 10, 2023 •

edited

Loading

Hypothesis 1: Start by locating all `*.scss` files