Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is basically a squash of all the commits from #5989. When I merged
main
and because Caroline is no longer working at Elastic it was necessary to sign the contribution agreement. Because she did all the commits when she was still an Elastic employee I don't see an issue on squash all the commits into one.1. Moved Amsterdam-specific Sass overrides to default
global_styling/
folderThis 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
disabled
as a specificBUTTON_COLOR
but allow it to be passed intoeuiButtonColor
for coloringeuiButtonColor()
now returns bothbackgroundColor
andcolor
for proper text contrasteuiButtonFillColor()
creates thefill
(solid color, white/black text) styling comboeuiButtonEmptyColor()
creates theempty
style using text-variants for color and transparent hover backgroundsuseEuiButtonColorCSS()
now accepts options such as thedisplay: 'base' | 'fill' | 'empty'
and returns both keys for color and display.useEuiButtonRadiusCSS()
returns theborder-radius
values bysize
of buttonuseEuiButtonFocusCSS()
is just the translate animation3. Button component updates
EuiButton
ButtonColor
toEuiButtonColor
andButtonSize
toEuiButtonSize
EuiButtonDisplay
component as the render and passing on all the rest of the props to handle the button vs anchor logiccolor
,fill
, anddisabled
and removing associated classes.text
color fill buttonsThe 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.EuiButtonEmpty
color
, anddisabled
and removing associated classes.EuiButtonIcon
color
,disabled
, anddisplay
removing associated classes.EuiButtonGroup & Option
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.color
,disabled
, andisSelected
(asdisplay='fill'
)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
isButtonDisabled()
utility for DRY-ing out the logic which compares thedisabled
,isDisabled
,isLoading
, and validity ofhref
to determine finaldisabled
state.data-test-subj
props to empty buttons for testsChecklist
ghost
colors[ ] Checked Code Sandbox works for any docs examples