Pass down the EUI classname attribute

[jusa3]

Each widget should provide styling options by passing down a classname property (see TitleWidget as an example).

[Pooya-Oladazimi]

As I looked the TitleWidget, I think we do not have to pass down the classname. we can assign the classname to the widget container and let user override it by using cascading in CSS with asterisk *

<div className={finalClassName}>
      {titleText &&
        <TitlePresentation
          titleText={titleText}
        />
      }

      {!titleText && isSuccess && data &&
        <TitlePresentation
          title={isOntology(data) ? data.getName() : data.getLabel()} />
      }

      {!titleText && isLoading && (defaultValue ? (
          <TitlePresentation titleText={defaultValue} />)
        : <EuiLoadingSpinner size="s" />)
      }

      {!titleText && isError && (defaultValue ?
        <TitlePresentation titleText={defaultValue} /> :
        <EuiText>{getErrorMessageToDisplay(error, "title")}</EuiText>)}
    </div>

and css:

.title-styles *{
  font-weight: bold;
}

[Pooya-Oladazimi]

The other issue with this approach (noticed in autocomplete) is that for complex component that comprises of many sub elements, we cannot customize all of them with one class for the parent component.
For example, in autocomplete, the className will affect which element? dropdown options? input box? terms tags?

[jusa3]

Pretty good approach to allow custom styling AND to solve our styling problem. But the problem, as you mentioned, is with complex components such as the EuiComboBox. It uses React Portals for the dropdown menu. So you can't pass custom and scoped styles like .custom-autocomplete-style .euiComboBoxOptionsList {}.
Changing .euiComboBoxOptionsList {} (globally) will affect all euiComboBoxes, but may be a solution.
I also tried .euiComboBoxOptions {} but it didn't work - why not?

There is the inputPopoverProps property to pass styles such as

inputPopoverProps={{
          style: { backgroundColor: '#aaa', padding: '10px' },
          // or className: "custom-autocomplete-options-style",
        }}

However, this only affects the dropdown menu (search bar), not the dropdown options.

This is also a problem in #144

[jusa3]

Added some css classes to restore the autocomplete widget style when the global style option of the EuiProvider is removed. As a proof of concept that this approach might work for all widgets:

2be1e16

Solves #144

[jusa3]

Defined some more requirements:

• multiple css classes for one widget (e.g. different styles for every badge of the breadcrumb widget)
  Not possible. Only basic styles can be modified.
• modifying EUI classes (e.g. euiComboBoxOptionsList of the autocomplete widget)
  Constraint of the EUI library. Developer can have a look into the ts4nfdiStyle classes or EUI directly on how to adapt those classes.
• complex components with multiple elements (e.g. autocomplete widget search bar, drop down menu, options)
  Use descendant selectors. Developer can have a look into the ts4nfdiStyle classes or EUI directly on how to adapt those classes.
• automatically applied ts4nfdi style
  If className input prop undefined, select ts4nfdiStyle
• a custom user style via input prop
  A className must be defined
• option to apply no style/omit default ts4nfdi style (if the consuming app has global EUI styles)
  className="none" results in basic EUI styles

@Pooya-Oladazimi Could you check if this approach works for solving both issues? Can you think of any other requirements?