-
Notifications
You must be signed in to change notification settings - Fork 861
[EuiPageHeader] Reduce gap between right side buttons #8529
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Preview staging links for this PR:
|
💚 Build Succeeded
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yup, sounds about right, thanks for tackling this @ryankeairns!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested the change on desktop and mobile resolutions. It looks way better now!
`101.2.0` ⏩ `101.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([#8550](elastic/eui#8550))
`101.2.0` ⏩ `101.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([elastic#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([elastic#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([elastic#8550](elastic/eui#8550)) (cherry picked from commit 1204458) # Conflicts: # package.json # src/dev/license_checker/config.ts # yarn.lock
`101.2.0` ⏩ `101.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([elastic#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([elastic#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([elastic#8550](elastic/eui#8550)) (cherry picked from commit 1204458)
> [!Note] > This PR is a manual backport of the already merged #217491 `101.0.1` ⏩ `101.3.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([#8550](elastic/eui#8550)) #### [`v101.2.0`](https://github.com/elastic/eui/releases/v101.2.0) - Added `showToolTip` prop on `EuiColorPickerSwatch` ([#8512](elastic/eui#8512)) **Bug fixes** - Fixed a visual issue of overlapping borders for layered `EuiPanel`s ([#8519](elastic/eui#8519)) - Fixes wrong `colorMode` styling for the search in `EuiHeader` with `theme="dark"` ([#8496](elastic/eui#8496)) **Accessibility** - Improved the accessibility of `EuiColorPicker` by adding color label tooltips on hover and focus for color swatches ([#8512](elastic/eui#8512)) - Added `disableScreenReaderOutput` prop on `EuiToolTip` to manually control if the tooltip content should be read when focusing the trigger. This prevents duplicate screen reader output when the tooltip content and `aria-label` on the trigger element have the same text content. ([#8508](elastic/eui#8508)) - Improves text color contrast for `EuiButton` with `color="warning"` in high contrast mode ([#8496](elastic/eui#8496)) - Improves contrast and visible distinction of the following components in high contrast mode: ([#8496](elastic/eui#8496)) - `EuiCode` - `EuiBadge` - `EuiBetaBadge` - `EuiNotificationBadge` **Dependency updates** - Updated `prismjs` to v1.30.0 ([#8506](elastic/eui#8506)) #### [`v101.1.0`](https://github.com/elastic/eui/releases/v101.1.0) - Updates `EuiTableRow` styles to check support for `:has(+)` selector ([#8498](elastic/eui#8498)) <!--ONMERGE {"backportTargets":["9.0"]} ONMERGE--> --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>
Summary
Y'all, it was too much gap. Reduced from large to medium to match (what I believe to be) the original design.
Before
After
