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?