Remove KUI usage in `home`

[joshuarrrr]

The home plugin uses a couple .kui* namespaced classes. See https://github.com/search?q=repo%3Aopensearch-project%2FOpenSearch-Dashboards+kui+NOT+trackUI+path%3A%2F%5Esrc%5C%2Fplugins%5C%2Fhome%2F&type=code

To resolve

Investigate and inspect the applied CSS of those classes. If necessary:

1. Document CSS rules provided by these classes
2. Replace these components with OUI components

[Aigerim-ai]

Document CSS rules provided by these classes

1. OpenSearch-Dashboards/src/plugins/home/public/application/components/tutorial/number_parameter.js in this file we have: className="visEditorSidebar__formControl kuiFieldGroupSection--wide">

   
   //sets flexbox of group field

.kuiFieldGroupSection--wide { flex: 1 1 auto;

& > * { width: 100%; } }

(OpenSearch-Dashboards/packages/osd-ui-framework/src/components/form_layout/_field_group.scss)
we have two files from OpenSearch-Dashboards/packages/osd-ui-framework/dist/kui_dark.css and from OpenSearch-Dashboards/packages/osd-ui-framework/dist/kui_dark.css for dark and white  modes:

//These are flexbox properties. *.kuiFieldGroupSection--wide > :** This is a child selector //with rules to all child elements.

.kuiFieldGroupSection--wide { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .kuiFieldGroupSection--wide > * { width: 100%; }

 ```className="kuiTextInput"```
OpenSearch-Dashboards/packages/osd-ui-framework/src/components/form/text_input/_text_input.scss

//set the width for default, large and small screens

.kuiTextInput { width: $kuiFormFieldDefaultWidth;

@include formControl; //@mixin formControlInvalid { // border-color: $kuiDangerBorderColor; //} &.kuiTextInput-isInvalid { @include formControlInvalid; } }

.kuiTextInput--small { width: $kuiFormFieldSmallWidth; }

.kuiTextInput--large { width: $kuiFormFieldLargeWidth; }

OpenSearch-Dashboards/packages/osd-ui-framework/dist/kui_dark.css and for OpenSearch-Dashboards/packages/osd-ui-framework/dist/kui_light.css

//css for input field

.kuiTextInput { width: 180px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 4px 12px 4px; font-size: 16px; font-weight: 400; line-height: 1.5; color: #DFE5EF; background-color: #16171c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; min-height: 32px; / 1 / }

.kuiTextInput:invalid { border-color: #F66; } .kuiTextInput:focus { outline: none; border-color: #1BA9F5; } .kuiTextInput:disabled { opacity: 0.4; cursor: not-allowed; } .kuiTextInput.kuiTextInput-isInvalid { border-color: #F66; }

.kuiTextInput--small { width: 60px; }

.kuiTextInput--large { width: 400px; }

2. OpenSearch-Dashboards/src/plugins/home/public/application/components/tutorial/string_parameter.js
in this file we have similar classes as in number_parameter.js:
```className="visEditorSidebar__formControl kuiFieldGroupSection--wide", className="kuiTextInput"```

[Aigerim-ai]

@joshuarrrr Hello! Can you please provide me how to find those components in our home page?