Summary

Converted both EuiFacetButton and EuiFacetGroup to Emotion. The horizontal EuiFacetGroup is no longer using negative margins. It was converted to use flex and gap.

Facet in Emotion

With the use of gap the sizes of the components changes a little. Because we no longer have the margin top and bottom for each button.

Facet layout example

I deleted one of the examples in Facet Layout section. It was repeated:

Deprecated EuiButtonDisplay in favor of a new EuiButtonDisplay

The EuiFacetButton is a button so it makes sense to use the EuiButtonDisplay instead of a custom button with some CSS styles. But to use the EuiButtonDisplay I found some issues:

• It required a baseClassName.
• If no color is passed it creates a ${baseClassName}${colorToClassNameMap.primary}.
• The component uses Sass
• The children was being wrapped with a span and expected to receive text.
• The component only expects to have one icon.

So I decided to set this component to be deprecated. To do this I renamed the component toEuiButtonDisplayDeprecated.

The new component is meant to internal use only and for now it lives in src/components/button/button_display/_button_display.tsx:

• This component is basically a conversion from the old component to use Emotion
• The goal of the component is to be less strict and more reusable so for example we can pass custom children. If a children is not a string we assume is not text and the content is not wrapped in a span. This way it's easier to account for button components that don't follow the normal button structure (1 icon and text).
• The color prop was omitted because the old logic to apply colors to button components has to be rethought. Buttons that don't have a background color should also use this component. This logic should be thought of when we start converting other buttons that require backgrounds.
• All the EuiButtonProps types were copied to this new file and renamed as EuiButtonDisplayProps. I believe this component should have the common button props.

Deprecated EuiButtonContent in favour of EuiButtonDisplayContent

The idea of this component is to replace the EuiButtonContent. I called it EuiButtonDisplayContent because the way I see it in the future is this component to be an inner component of the EuiButtonDisplay. So we would always use the EuiButtonDisplay.

For example, the EuiButtonEmpty uses the EuiButtonContent but in the future, it could use the EuiButtonDisplay.

As we can see the EuiButtonEmpty could use the EuiButtonDisplay. No need to create a custom button and pass the the innerNode that is a EuiButtonContent.

EuiFacetButton is now using the new EuiButtonDisplay

With the new EuiButtonDisplay the goal is for all EUI button components to use the EuiButtonDisplay as a building block. So the new EuiFacetButton is now using this component.

EuiLoadingSpinner accepts new color prop

It's now possible to configure the EuiLoadingSpinner color. The new EuiButtonDisplayContent uses a EuiLoadingSpinner with this new color prop.

Checklist

• Checked in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• [ ] Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

Things to look out for when moving styles

• [ ] Anything in the backlog that could be a quick fix for that component?
• Convert global Sass vars to JS version like sizing
• [ ] Convert component-specific Sass vars to exported JS versions
• Convert side specific padding, margin, and position to -inline and -block (Logical properties)
• [ ] Reduce specificity where possible (usually by reducing class name chaining)
• Use gap property to add margin between items if using flex
• [ ] Can any still existing .js files be converted to TS?
• All animations or transitions are wrapped in euiCanAnimate

QA

• Does the output CSS match the previous CSS / as expected
• Does the rendered class read as expected