eui [EuiButton] Convert to Emotion

[EuiButton] Convert to Emotion

Open cchaos opened this issue 2 years ago • 9 comments

1. Moved Amsterdam-specific Sass overrides to default `global_styling/` folder

This just cleans up some of the unnecessary overrides and Sass files. But mostly leaves the variable / mixins in tact for now.

2. New theme-specific (Amsterdam only for now) button styling functions

Removed disabled as a specific BUTTON_COLOR but allow it to be passed into euiButtonColor for coloring
euiButtonColor() now returns both backgroundColor and color for proper text contrast
euiButtonFillColor() creates the fill (solid color, white/black text) styling combo
euiButtonEmptyColor() creates the empty style using text-variants for color and transparent hover backgrounds
useEuiButtonColorCSS() now accepts options such as the display: 'base' | 'fill' | 'empty' and returns both keys for color and display.
useEuiButtonRadiusCSS() returns the border-radius values by size of button
useEuiButtonFocusCSS() is just the translate animation

3. Button component updates

EuiButton

Renamed exported ButtonColor to EuiButtonColor and ButtonSize to EuiButtonSize
Using the new EuiButtonDisplay component as the render and passing on all the rest of the props to handle the button vs anchor logic
Using Emotion for color, fill, and disabled and removing associated classes.
Fixed outline focus color of text color fill buttons
Background colors for base buttons are no longer transparent

The new tinted colors are just slightly different from their old transparent counterpart. The biggest difference being in the text version which will now align better to forms.

Note This basically means this whole component is now Emotion since EuiButton now only handles superficial styling, everything else is passed through to the already Emotion EuiButtonDisplay.

EuiButtonEmpty

Using Emotion for color, and disabled and removing associated classes.

Note There's still more we can do here to make use of EuiButtonDisplay but I didn't want to get too far into the weeds.

EuiButtonIcon

Using Emotion for color, disabled, and display removing associated classes.

Note There's still more we can do here to make use of EuiButtonDisplay but I didn't want to get too far into the weeds.

EuiButtonGroup & Option

[Breaking]: Removed support for ghost. The combo styles between Emotion and CSS were too complex to maintain, but it felt safe to remove support (based an searching for usages - none) and will guide consumers to use colorMode instead once fully converted.
Using Emotion for color, disabled, and isSelected (as display='fill')

Note This still uses the old/deprecated EuiButtonDisplay for now

EuiButtonDisplay

Since this is the component that renders the actual element (button vs anchor) I have moved all the logic around the associated props of each from EuiButton to this file so all consumers of this can benefit / doesn't have to worry about the actual DOM element.

EuiButtonDisplayContent

I moved the currently applied disabled styles to be handled by EuiButtonDisplay instead while also applying truncation to the text span using the utility class.

Other updates

Added isButtonDisabled() utility for DRY-ing out the logic which compares the disabled, isDisabled, isLoading, and validity of href to determine final disabled state.
[EuiMarkdownEditorToolbar] Added data-test-subj props to empty buttons for tests