Skip to content

[Visual Refresh] Update floating border on EuiPanel#8270

Merged
mgadewoll merged 1 commit intoelastic:eui-theme/borealisfrom
mgadewoll:eui-theme/panel-floating-border-fix
Jan 14, 2025
Merged

[Visual Refresh] Update floating border on EuiPanel#8270
mgadewoll merged 1 commit intoelastic:eui-theme/borealisfrom
mgadewoll:eui-theme/panel-floating-border-fix

Conversation

@mgadewoll
Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll commented Jan 13, 2025 •
edited
Loading

Summary

Important

This PR merges into a feature branch.

This PR updates the implementation of the floating border on EuiPanel to fix the issue of the transparent border on light mode showing with colored full-width content (e.g. for EuiSplitPanel)

Instead of adding the floating border on the panel element directly, this PR adds a pseudo element for the border.
This will:

  • prevent transparent borders from showing as the border overlaps the content instead of sitting around the content
  • ensures layout parity between light and dark mode (having a conditional border on dark mode would otherwise mean that light and dark mode have slightly different dimensions for panels as borders add to the size)
before after
Screenshot 2025-01-13 at 10 52 52 Screenshot 2025-01-13 at 10 53 31

QA

Note

To enable Borealis in EUI PR deployments, you'll need to:

  • add the following localStorage item: eui-experimental-theme-enabled: true
  • reload the page
  • select Borealis from the theme switcher
  • verify the floating border on EuiSplitPanel (Storybook, EUI docs) is visible for Borealis only
  • verify the border does not affect dimensions between light and dark mode
  • verify panels look the same between production and staging

@mgadewoll mgadewoll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh labels Jan 13, 2025
@mgadewoll mgadewoll self-assigned this Jan 13, 2025
@mgadewoll mgadewoll marked this pull request as ready for review January 13, 2025 10:54
@mgadewoll mgadewoll requested a review from a team as a code owner January 13, 2025 10:54
@mgadewoll
refactor: updates border implementation on panels
11d4754 
- prevents transparent borders showing on colored full-width content, e.g. for EuiSplitPanel
@mgadewoll mgadewoll force-pushed the eui-theme/panel-floating-border-fix branch from 2168cd7 to 11d4754 Compare January 13, 2025 15:47
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jan 13, 2025

Preview staging links for this PR:

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jan 13, 2025 •
edited
Loading

💚 Build Succeeded

History

cc @mgadewoll

@weronikaolejniczak
Copy link
Copy Markdown
Contributor

weronikaolejniczak commented Jan 14, 2025 •
edited
Loading

LGTM 👍🏻 Great job, Lene!

Testing

Storybook (Borealis)

Screen.Recording.2025-01-14.at.12.01.33.mov

Storybook (Amsterdam)

Screen.Recording.2025-01-14.at.12.05.00.mov

EUI Docs (Borealis)

Screen.Recording.2025-01-14.at.12.03.45.mov

EUI Docs (Amsterdam)

Screen.Recording.2025-01-14.at.12.06.13.mov
Screen.Recording.2025-01-14.at.12.15.02.mov

Production vs Staging (Amsterdam)

Screen.Recording.2025-01-14.at.12.06.13.mov
Screen.Recording.2025-01-14.at.12.13.09.mov

@mgadewoll mgadewoll merged commit 100d15e into elastic:eui-theme/borealis Jan 14, 2025
@acstll acstll mentioned this pull request Jan 22, 2025
Merged
acstll added a commit to acstll/kibana that referenced this pull request Jan 23, 2025
@acstll
Update jest snapshots (className in EuiPanel)
6f5dca6 
elastic/eui#8270
acstll added a commit to acstll/kibana that referenced this pull request Jan 23, 2025
@acstll
[security_solution] Update case for hard-coded hex values in unit test
e1e01a3 
elastic/eui#8270
acstll added a commit to elastic/kibana that referenced this pull request Jan 30, 2025
@acstll @elasticmachine
@nickofthyme @kibanamachine
Upgrade EUI to v99.1.0 (#207724)
0c18b44 
`99.0.0-borealis.1` ⏩ `99.1.0-borealis.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)

---

# `@elastic/eui`

## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0)

- Updated `EuiColorPalettePicker` - adds `append` to
`EuiColorPalettePickerPaletteProps` to support appending custom content
to the title ([#8208](elastic/eui#8208))
- Updated font-weight and font-size of `EuiBetaBadge`s to improve
legibility ([#8255](elastic/eui#8255))
- Added suppport for `titleColor` variant `warning` on `EuiStat`
([#8278](elastic/eui#8278))

# `@elastic/eui-theme-borealis`

## `v0.0.9`

- [Visual Refresh] Support new theme tokens on JSON exports
([#8277](elastic/eui#8277))
- Remap few colors for EuiLoadingSpinner and EuiLoadingChart
([#8276](elastic/eui#8276))
- [Visual Refresh] Update floating border on EuiPanel
([#8270](elastic/eui#8270))

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: nickofthyme <nicholas.partridge@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@mgadewoll mgadewoll mentioned this pull request Mar 3, 2025
Merged
3 tasks
@mgadewoll mgadewoll mentioned this pull request Mar 11, 2025
Merged
24 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@mgadewoll mgadewoll

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) visual refresh

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@mgadewoll @kibanamachine @elasticmachine @weronikaolejniczak