Skip to content

[Visual Refresh] Button style cleanup #8736

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.

Sign up for GitHub

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

Jump to bottom
Merged
mgadewoll merged 6 commits into from
Jun 4, 2025
Merged

[Visual Refresh] Button style cleanup #8736

mgadewoll merged 6 commits into from
Jun 4, 2025

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Jun 3, 2025 •
edited by weronikaolejniczak
Loading

Summary

This PR is a follow-up to this previous PR that introduced new button styles.
It cleans up a few smaller styles issues that we noticed after merging the previous PR.

Changes

  • fixed the positioning of EuiHeaderSectionItemButton notifications
  • fixed the selected styling of EuiCollabsibleNavItem
  • removes a border on EuiResizableCollapseButton

QA

  • verify there is no regression for the position of notification badges (large viewport) and dots (small viewport) for EuiHeaderSectionItemButton between staging and production
  • verify the EuiResizableCollapseButton has no border
  • verify EuiCollabsibleNavItem has a visible selected state

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll mgadewoll self-assigned this Jun 3, 2025
@elasticmachine
Copy link
Collaborator

elasticmachine commented Jun 3, 2025

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Jun 3, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review June 3, 2025 13:59
@mgadewoll mgadewoll requested a review from a team as a code owner June 3, 2025 13:59
@weronikaolejniczak weronikaolejniczak self-requested a review June 4, 2025 10:29
weronikaolejniczak
weronikaolejniczak approved these changes Jun 4, 2025
View reviewed changes
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes, VRT image updates and components in the documentation tested. LGTM! 🟢

@mgadewoll mgadewoll merged commit be04a2c into elastic:main Jun 4, 2025
6 checks passed
@JasonStoltz JasonStoltz mentioned this pull request Jun 11, 2025
Merged
JasonStoltz added a commit to elastic/kibana that referenced this pull request Jun 17, 2025
@JasonStoltz @mgadewoll @elasticmachine
Upgrade EUI to v103.0.0 (#223414)
61ea2f3 
`102.3.0` ⏩ `103.0.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)

## Changes

[#8736](elastic/eui#8736),
[#8732](elastic/eui#8732), and
[#8732](elastic/eui#8732) include a number of
small style tweaks `EuiResizableCollapseButton`, `EuiTitle`, and
`EuiListGroupItem`.

[#8756](elastic/eui#8756) and
[#8744](elastic/eui#8744) rename a couple of
icons:

`questionInCircle` -> `question`
`iInCircle` > `info`

In both cases, the old name is **backwards-compatible** (unless
importing directly from `assets` folder (see more in the release notes
regarding that). However, the old name will eventually be deprecated as
a part of a larger set of deprecations.

**No action is required at this time to handle this renaming. We will
issue a dedicated PR to Kibana to replace the old names with the new
names in the future**

[#8725](elastic/eui#8725) adds Sky Blue, Yellow,
and Orange palettes to EUI's [color
palettes](https://eui.elastic.co/docs/utilities/color-palettes/#recommended-quantitative-palettes),
as well as new tokens for Risk, Neutral, and Warning.

**[Breaking change]** Please note that as part of this change, the
following tokens have been renamed:
`euiColorVisNeutral0` -> `euiColorVisBase0`
`euiColorVisWarning0` -> `euiColorVisWarning1`

The original tokens still exist, but have been updated to use new colors
in a way that would be breaking. This PR updates the existing references
in 0b21d2d.

## Package updates

### `@elastic/eui`

## [`v103.0.0`](https://github.com/elastic/eui/releases/v103.0.0)

- Replaced `question` icon glyph
([#8756](elastic/eui#8756))
- Updated `EuiResizableCollapseButton` to use an empty button
([#8736](elastic/eui#8736))
- Added `info` icon glyph
([#8744](elastic/eui#8744))
- Removed uppercase styling from `EuiText` `h6` headings to match
`EuiTitle` ([#8732](elastic/eui#8732))
- Removed heavier font weight from `xs` and `s` `EuiListGroupItem` sizes
for consistency ([#8732](elastic/eui#8732))
- Updated the `font-weight` of default `EuiFilterButton` and
`EuiButtonGroupButton` to `450`
([#8734](elastic/eui#8734))
- Added color pallete functions and related hooks:
([#8725](elastic/eui#8725))
  - `euiPaletteSkyBlue`, `useEuiPaletteSkyBlue`
  - `euiPaletteYellow`, `useEuiPaletteYellow`
  - `euiPaletteOrange`, `useEuiPaletteOrange`
- Added new tokens on `colors.vis`:
([#8725](elastic/eui#8725))
  -  `euiColorVisNeutral0`
  -  `euiColorVisNeutral1`
  -  `euiColorVisWarning1`
  -  `euiColorVisRisk0`
  -  `euiColorVisRisk1`
- Updated the value of token `colors.vis.euiColorVisWarning0`
([#8725](elastic/eui#8725))
- Updated EuiFilterButton's `numActiveFilters` prop to accept percentage
values ([#8705](elastic/eui#8705))

**Bug fixes**

- Fixed visual positioning issue for notifications in
`EuiHeaderSectionItemButton`
([#8736](elastic/eui#8736))
- Fixed a visual issue where `EuiCollabsibleNavItem` did not have a
visible selected state
([#8736](elastic/eui#8736))
- Fixed handling of unregistered code block languages in
`EuiMarkdownFormat` ([#8729](elastic/eui#8729))

**Breaking changes**

- Renamed `colors.vis.euiColorVisNeutral0` to `euiColorVisBase0`
([#8725](elastic/eui#8725))

### `@elastic/eui-theme-borealis`

##
[`v2.0.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v200)

- Added new tokens on `colors.vis`:
([#8725](elastic/eui#8725))
  -  `euiColorVisNeutral0`
  -  `euiColorVisNeutral1`
  -  `euiColorVisWarning1`
  -  `euiColorVisRisk0`
  -  `euiColorVisRisk1`
- Updated the value of token `colors.vis.euiColorVisWarning0`
([#8725](elastic/eui#8725))

**Bug fixes**

- Fixed missing source map warnings emitted by some bundlers by
excluding source maps from being published
([#8764](elastic/eui#8764))
- To align with `@elastic/eui` and many other popular packages, we made
a call to not ship source maps anymore

**Breaking changes**

- Renamed `colors.vis.euiColorVisNeutral0` to `euiColorVisBase0`
([#8725](elastic/eui#8725))

<!--ONMERGE {"backportTargets":["8.19","9.0"]} ONMERGE-->

---------

Co-authored-by: Lene Gadewoll <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees

@mgadewoll mgadewoll

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mgadewoll @elasticmachine @weronikaolejniczak