display prop now accepts real CSS
The reason this is breaking is because the old value
inlineBlock needed to change to snake case
inline-block. This shouldn't be a big deal since
inline-block is default.
[New] EuiPopoverPanel (internal only)
Some other EUI components were duplicating the
.euiPopover__panel classes on EuiPanel instances to recreate the popover styles. Instead, I've pulled that EuiPanel out of EuiPopover directly and created EuiPopovePanel that other components like EuiComboBox now use. It mainly handles the styling based on
EuiPopoverPanelContext to pass through
The popover title and footer components used a complicated set of parent/child selectors to inherit padding and/or create margins to account for panel padding. Instead of sticking with the nested selectors, I opted for creating a context that the EuiPopoverTitle and Footer components used to decide how it should handle those margins and it's own padding size.
This is debatable whether context here is really necessary, so I'm open to other options that don't require going back to nested selectors.
Other changes of note from the old
- I've kept the naming of the component to be
.euiPopover__panel instead of
.euiPopoverPanel mainly to reduce breaks.
- I've remove the old
.euiPopover__panel-isOpen class in favor of using a data attribute that exists or doesn't called
[New] EuiPopoverArrow (internal only)
This new component mainly handles the styling based on
arrowPosition. The styles for this element used to be a complicated set of multiple pseudo elements, borders, and clip-paths. I've reduced this complexity to a single
:before element with borders to create the triangle and then using the
filter: drop-shadow() method of creating the shadow on the whole panel. Using
filter takes into account the actual outline of an element where as
box-shadow is only ever square.
There is a slight difference between the render of the two methods even with the exact same values. This difference isn't enough to consider a whole different set of values for the
property option for
In order to quickly support the same values for this shadow size in both methods, I just added the property as an optional key in the optional parameter.
[New] JS mixin for
I needed this in order to re-use the variable in JS. I decided not to put it in the global theme at least for now and push the decision down the road on how we want to handle component-based re-usable variables.
For quickly creating
[Update] Increased the opacity of shadow color in dark mode
It's always been pretty hard to see the outlines of panels with just a simple shadow, this helps a little bit, but I think we can follow up at some point with something even better.
[Conversion] EuiPopover & parts
- EuiPopover: Base styles are pretty simple. Moves the popover panel and arrow to external components.
- EuiInputPopover: This simply was ensuring the popover wrapper adhered to the same form width sizing by applying the new variable (but only when
- EuiPopoverFooter & EuiPopoverTitle: See EuiPopoverPanel section above for inherited padding details. Otherwise nothing has changed except fo removing the padding classes.
- [x] Checked in both light and dark modes
- [x] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs and playground toggles
- [x] Added documentation
- [x] Checked Code Sandbox works for any docs examples
- [x] Added or updated jest and cypress tests
- [x] 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