Skip to content

[EuiBottomBar] Expose --euiBottomBarOffset as css variable #9211

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
Dosant merged 3 commits into from
Nov 13, 2025
Merged

[EuiBottomBar] Expose --euiBottomBarOffset as css variable #9211

Dosant merged 3 commits into from
Nov 13, 2025

Conversation

@Dosant
Copy link
Contributor

@Dosant Dosant commented Nov 13, 2025 •
edited
Loading

Summary

Similar to #8872

Need to expose this bottom bar offset as a variable to apply it in kibana to application container instead of body

Why are we making this change?

To address this grid layout bug in Kibana: elastic/kibana#242893

Impact to users

No impact. The functionality works like before by default, just an addition css variable is available to be used if needed

@Dosant Dosant changed the title bottom bar var [EuiBottomBar] Expose --euiBottomBarOffset as css variable Nov 13, 2025
@Dosant Dosant marked this pull request as ready for review November 13, 2025 13:57
@Dosant Dosant requested a review from a team as a code owner November 13, 2025 13:57
@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 13, 2025

💚 Build Succeeded

History

@elasticmachine
Copy link
Collaborator

elasticmachine commented Nov 13, 2025

💚 Build Succeeded

weronikaolejniczak
weronikaolejniczak approved these changes Nov 13, 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.

LGTM! 🟢 Thanks for the unit tests and the doc entry, Anton!

@Dosant Dosant merged commit 33cc143 into elastic:main Nov 13, 2025
10 checks passed
@acstll acstll mentioned this pull request Nov 17, 2025
Merged
acstll added a commit to elastic/kibana that referenced this pull request Nov 20, 2025
@acstll @elasticmachine
Update EUI to v109.1.0 (#243270)
f14b779 
- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0`
- `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0`

---

## Changes

- Updated i18n EUI mapping 6cc95b0
- Updated test in Unified Search
668948f

## Package updates

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

- Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for
positioning other fixed elements relative to the bottom bar's height
([#9211](elastic/eui#9211))
- Updated `boxesVertical` icon and restored `checkInCircleFilled`,
`errorFilled`, and `warningFilled` icons.
([#9194](elastic/eui#9194))
- Updated `EuiSuperDatePicker` with new time zone information, opt-in
via `timeZoneDisplayProps`.
([#9191](elastic/eui#9191))
- Updated the position of `EuiModal` by removing bottom padding in
`EuiOverlayMask` ([#9190](elastic/eui#9190))
- Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to
`componentDefaults` ([#9152](elastic/eui#9152))
- Updated `EuiSuperDatePicker` with new time window buttons for time
shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop.
([#9151](elastic/eui#9151))
- Added beta prop `hasAriaDisabled` to all base button components:
`EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`,
`EuiFilterButton` ([#9201](elastic/eui#9201))
- Added `euiDisabledSelector` variable that combines CSS selectors
`:disabled` and `[aria-disabled="true"]`
([#9201](elastic/eui#9201))
- Added custom test matchers that check for both `disabled` and
`aria-disabled` attributes:
([#9201](elastic/eui#9201))
  - React testing Library: `.toBeEuiDisabled()`
  - Enzyme: `.toHaveEuiDisabledProp()`
  - Cypress: `should('be.euiDisabled)`

**Bug fixes**

- Fixed unexpected duplicate columns in `EuiDataGrid` crashing the
column sorting by removing duplicate columns entirely
([#9209](elastic/eui#9209))
- Fixed a visual bug in `EuiTable` where long table row content would be
cut off on mobile screens
([#9206](elastic/eui#9206))
- Fixed virtualized `EuiCodeBlock` rendering blank lines when content
updates if scrolled. ([#9196](elastic/eui#9196))
- Fixed `EuiButtonGroup` button sizing to ensure square buttons when
used with `isIconOnly=true`
([#9170](elastic/eui#9170))

**Accessibility**

- Fixed an issue where portalled components like `EuiPopover` were not
included in `EuiFlyout`'s focus trap through
`includeSelectorInFocusTrap`, making them inaccessible to keyboard users
([#9103](elastic/eui#9103))

### `@elastic/eslint-plugin-eui`
[`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260)

- Added new `require-table-caption` rule.
([#9168](elastic/eui#9168))

---------

Co-authored-by: Elastic Machine <[email protected]>
andrimal pushed a commit to andrimal/kibana that referenced this pull request Nov 20, 2025
@acstll @elasticmachine @andrimal
Update EUI to v109.1.0 (elastic#243270)
86f782e 
- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0`
- `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0`

---

## Changes

- Updated i18n EUI mapping 6cc95b0
- Updated test in Unified Search
668948f

## Package updates

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

- Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for
positioning other fixed elements relative to the bottom bar's height
([elastic#9211](elastic/eui#9211))
- Updated `boxesVertical` icon and restored `checkInCircleFilled`,
`errorFilled`, and `warningFilled` icons.
([elastic#9194](elastic/eui#9194))
- Updated `EuiSuperDatePicker` with new time zone information, opt-in
via `timeZoneDisplayProps`.
([elastic#9191](elastic/eui#9191))
- Updated the position of `EuiModal` by removing bottom padding in
`EuiOverlayMask` ([elastic#9190](elastic/eui#9190))
- Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to
`componentDefaults` ([elastic#9152](elastic/eui#9152))
- Updated `EuiSuperDatePicker` with new time window buttons for time
shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop.
([elastic#9151](elastic/eui#9151))
- Added beta prop `hasAriaDisabled` to all base button components:
`EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`,
`EuiFilterButton` ([elastic#9201](elastic/eui#9201))
- Added `euiDisabledSelector` variable that combines CSS selectors
`:disabled` and `[aria-disabled="true"]`
([elastic#9201](elastic/eui#9201))
- Added custom test matchers that check for both `disabled` and
`aria-disabled` attributes:
([elastic#9201](elastic/eui#9201))
  - React testing Library: `.toBeEuiDisabled()`
  - Enzyme: `.toHaveEuiDisabledProp()`
  - Cypress: `should('be.euiDisabled)`

**Bug fixes**

- Fixed unexpected duplicate columns in `EuiDataGrid` crashing the
column sorting by removing duplicate columns entirely
([elastic#9209](elastic/eui#9209))
- Fixed a visual bug in `EuiTable` where long table row content would be
cut off on mobile screens
([elastic#9206](elastic/eui#9206))
- Fixed virtualized `EuiCodeBlock` rendering blank lines when content
updates if scrolled. ([elastic#9196](elastic/eui#9196))
- Fixed `EuiButtonGroup` button sizing to ensure square buttons when
used with `isIconOnly=true`
([elastic#9170](elastic/eui#9170))

**Accessibility**

- Fixed an issue where portalled components like `EuiPopover` were not
included in `EuiFlyout`'s focus trap through
`includeSelectorInFocusTrap`, making them inaccessible to keyboard users
([elastic#9103](elastic/eui#9103))

### `@elastic/eslint-plugin-eui`
[`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260)

- Added new `require-table-caption` rule.
([elastic#9168](elastic/eui#9168))

---------

Co-authored-by: Elastic Machine <[email protected]>
@Dosant Dosant mentioned this pull request Dec 2, 2025
Merged
eokoneyo pushed a commit to eokoneyo/kibana that referenced this pull request Dec 2, 2025
@acstll @elasticmachine @eokoneyo
Update EUI to v109.1.0 (elastic#243270)
9bd30d5 
- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0`
- `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0`

---

## Changes

- Updated i18n EUI mapping 6cc95b0
- Updated test in Unified Search
668948f

## Package updates

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

- Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for
positioning other fixed elements relative to the bottom bar's height
([elastic#9211](elastic/eui#9211))
- Updated `boxesVertical` icon and restored `checkInCircleFilled`,
`errorFilled`, and `warningFilled` icons.
([elastic#9194](elastic/eui#9194))
- Updated `EuiSuperDatePicker` with new time zone information, opt-in
via `timeZoneDisplayProps`.
([elastic#9191](elastic/eui#9191))
- Updated the position of `EuiModal` by removing bottom padding in
`EuiOverlayMask` ([elastic#9190](elastic/eui#9190))
- Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to
`componentDefaults` ([elastic#9152](elastic/eui#9152))
- Updated `EuiSuperDatePicker` with new time window buttons for time
shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop.
([elastic#9151](elastic/eui#9151))
- Added beta prop `hasAriaDisabled` to all base button components:
`EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`,
`EuiFilterButton` ([elastic#9201](elastic/eui#9201))
- Added `euiDisabledSelector` variable that combines CSS selectors
`:disabled` and `[aria-disabled="true"]`
([elastic#9201](elastic/eui#9201))
- Added custom test matchers that check for both `disabled` and
`aria-disabled` attributes:
([elastic#9201](elastic/eui#9201))
  - React testing Library: `.toBeEuiDisabled()`
  - Enzyme: `.toHaveEuiDisabledProp()`
  - Cypress: `should('be.euiDisabled)`

**Bug fixes**

- Fixed unexpected duplicate columns in `EuiDataGrid` crashing the
column sorting by removing duplicate columns entirely
([elastic#9209](elastic/eui#9209))
- Fixed a visual bug in `EuiTable` where long table row content would be
cut off on mobile screens
([elastic#9206](elastic/eui#9206))
- Fixed virtualized `EuiCodeBlock` rendering blank lines when content
updates if scrolled. ([elastic#9196](elastic/eui#9196))
- Fixed `EuiButtonGroup` button sizing to ensure square buttons when
used with `isIconOnly=true`
([elastic#9170](elastic/eui#9170))

**Accessibility**

- Fixed an issue where portalled components like `EuiPopover` were not
included in `EuiFlyout`'s focus trap through
`includeSelectorInFocusTrap`, making them inaccessible to keyboard users
([elastic#9103](elastic/eui#9103))

### `@elastic/eslint-plugin-eui`
[`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260)

- Added new `require-table-caption` rule.
([elastic#9168](elastic/eui#9168))

---------

Co-authored-by: Elastic Machine <[email protected]>
Dosant added a commit to elastic/kibana that referenced this pull request Dec 2, 2025
@Dosant
[Chrome Grid] Improve EuiBottomBar integration (#244868)
e9d50b6 
## Summary

fix #242893

With the grid layout, the bottom bar could have overlapped the content
area. This PR fixes it by adding padding to the content area equal to
the height of the bottom bar, which pushes the content up. This is
possible now due to elastic/eui#9211

### Before: 

<img width="1509" height="261" alt="Screenshot 2025-12-02 at 10 55 53"
src="https://github.com/user-attachments/assets/5edb3b98-9005-47b2-9c00-0fb9bc7fca51"
/>

### After:

<img width="1512" height="325" alt="Screenshot 2025-12-02 at 10 55 33"
src="https://github.com/user-attachments/assets/604a69a7-fa86-4787-b87e-313eb01607f0"
/>
NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Dec 2, 2025
@Dosant @NicholasPeretti
[Chrome Grid] Improve EuiBottomBar integration (elastic#244868)
28017dc 
## Summary

fix elastic#242893

With the grid layout, the bottom bar could have overlapped the content
area. This PR fixes it by adding padding to the content area equal to
the height of the bottom bar, which pushes the content up. This is
possible now due to elastic/eui#9211

### Before: 

<img width="1509" height="261" alt="Screenshot 2025-12-02 at 10 55 53"
src="https://github.com/user-attachments/assets/5edb3b98-9005-47b2-9c00-0fb9bc7fca51"
/>

### After:

<img width="1512" height="325" alt="Screenshot 2025-12-02 at 10 55 33"
src="https://github.com/user-attachments/assets/604a69a7-fa86-4787-b87e-313eb01607f0"
/>
JordanSh pushed a commit to JordanSh/kibana that referenced this pull request Dec 9, 2025
@Dosant @JordanSh
[Chrome Grid] Improve EuiBottomBar integration (elastic#244868)
d1c04de 
## Summary

fix elastic#242893

With the grid layout, the bottom bar could have overlapped the content
area. This PR fixes it by adding padding to the content area equal to
the height of the bottom bar, which pushes the content up. This is
possible now due to elastic/eui#9211

### Before: 

<img width="1509" height="261" alt="Screenshot 2025-12-02 at 10 55 53"
src="https://github.com/user-attachments/assets/5edb3b98-9005-47b2-9c00-0fb9bc7fca51"
/>

### After:

<img width="1512" height="325" alt="Screenshot 2025-12-02 at 10 55 33"
src="https://github.com/user-attachments/assets/604a69a7-fa86-4787-b87e-313eb01607f0"
/>
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

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Dosant @elasticmachine @weronikaolejniczak