[EuiBetaBadge] Add alignment prop
#6361
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6361/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6361/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6361/ |
| export const ALIGNMENTS = ['baseline', 'middle', 'super'] as const; | ||
| export type BetaBadgeAlignment = typeof ALIGNMENTS[number]; |
There was a problem hiding this comment.
Personally I like/prefer limiting the options here, but just wanted to throw this out there - do we anticipate wanting to support all values of vertical-align (e.g. sub, top, text-bottom, etc...)?
Just thinking out loud, but if we see that kind of wildcard support being a possible future usecase, what we could also do instead of setting an enum is to make it an inline style instead of an Emotion class 🤷
There was a problem hiding this comment.
I think most of the users will never change this. I think the main issue here was the super was not looking as before because of that overflow: hidden.
But I see a possibility of some consumers aligning in the middle. But the super option.. Not sure... I'm even thinking if it should be here. It doesn't look good. 😬
|
@constancecchen I decided to remove the alignment option
I see use cases for |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6361/ |
|
I'm good with that! We can always tweak in the future without being a breaking change if someone requests more alignment types later. |
`[email protected]` ⏩ `[email protected]` - "Fixed EuiButtonGroup firing onChange twice" required changing some tests from `click` to `change` ___ ## [`70.4.0`](https://github.com/elastic/eui/tree/v70.4.0) - Updated `EuiTourStep.footerAction` type to accept `ReactNode[]` ([#6384](elastic/eui#6384)) - Vertically aligned all footer content so that `euiTourStepIndicator` is always centered ([#6384](elastic/eui#6384)) - Added `filterInCircle` glyph to `EuiIcon` ([#6385](elastic/eui#6385)) - Added `color` prop to `EuiBeacon` ([#6420](elastic/eui#6420)) - Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS utilities for creating min/max-width media queries ([#6431](elastic/eui#6431)) **Bug fixes** - Restores the previous match operator behaviour when the query value is split into multiple terms after analysis. ([#6409](elastic/eui#6409)) - Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side `EuiFlyout`s ([#6422](elastic/eui#6422)) - Fix bug in `EuiCard` where footer were not aligned to the bottom of the card ([#6424](elastic/eui#6424)) - Fixed multiple component media queries for consumers with custom theme breakpoints ([#6431](elastic/eui#6431)) ## [`70.3.0`](https://github.com/elastic/eui/tree/v70.3.0) - `EuiSearchBar` now automatically wraps special characters not used by query syntax in quotes ([#6356](elastic/eui#6356)) - Added `alignment` prop to `EuiBetaBadge` ([#6361](elastic/eui#6361)) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - Fixed `EuiPageTemplate` not correctly passing the `component` prop to the inner main content wrapper. ([#6352](elastic/eui#6352)) - `EuiSkipLink` now correctly calls `onClick` even when `fallbackDestination` is invalid ([#6355](elastic/eui#6355)) - Permanently fixed `EuiModal` to not cause scroll-jumping issues on modal open ([#6360](elastic/eui#6360)) - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) - Fixed bug in `EuiCard` where the inner content in vertical cards was not growing 100% in width ([#6377](elastic/eui#6377)) - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) **CSS-in-JS conversions** - Converted `EuiModal` to Emotion ([#6321](elastic/eui#6321)) **Fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) Co-authored-by: Constance Chen <[email protected]>
Summary
This PR adds a new
alignmentprop toEuiBetaBadgeand closes #6358.QA
Remove or strikethrough items that do not apply to your PR.
General checklist