Skip to content
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

[EuiAccordion] Disable transition on initial render when initialsOpen #8327

Merged

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Feb 17, 2025

Summary

closes #8299

This PR updates EuiAccordion to disable transitioning the content on initial render when initialIsOpen=true.
The transition should only happen on open/close toggle, not initial render.

before

Screen.Recording.2025-02-17.at.13.56.48.mov

after

Screen.Recording.2025-02-17.at.13.57.24.mov

QA

  • verify the EuiAccordion does not transition the isOpen state on initial render when initialIsOpen=true
  • verify transition happens for any other open or close toggle

General checklist

  • Browser QA
    • Checked in both light and dark 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)

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@mgadewoll mgadewoll marked this pull request as ready for review February 17, 2025 07:39
@mgadewoll mgadewoll requested a review from a team as a code owner February 17, 2025 07:39
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 👍🏻 Great job! 🥳


I compared the v99.2.0 docs with staging docs:

Screen.Recording.2025-02-17.at.13.17.46.mov

Toggling after initial render yields transition:

Screen.Recording.2025-02-17.at.13.20.57.mov

@mgadewoll mgadewoll merged commit c2ea240 into elastic:main Feb 18, 2025
6 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 26, 2025
`99.2.0-borealis.0` ⏩ `99.3.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)

---

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

- Updated table components to support adding tooltips to header cells
([#8273](elastic/eui#8273))
  - Added `columns.nameTooltip` on `EuiBasicTable`
  - Added `tooltipProps` prop on `EuiTableHeaderCell`
- Added `accent` color option to `EuiCallOut`
([#8303](elastic/eui#8303))
- Updated `EuiInlineEditForm`'s `onCancel` prop type to allow
uncontrolled mode usage
([#8307](elastic/eui#8307))
- Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`,
`EuiMarkdownFormat`, and `EuiMarkdownEditor` components.
([#8317](elastic/eui#8317))
- Updated `EuiAccordion` to prevent content from being transitioned on
initial render when `initialIsOpen=true`
([#8327](elastic/eui#8327))

**Bug fixes**

- Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date
would append the date instead of replace it
([#8311](elastic/eui#8311))

---------

Co-authored-by: Elastic Machine <[email protected]>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 26, 2025
`99.2.0-borealis.0` ⏩ `99.3.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)

---

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

- Updated table components to support adding tooltips to header cells
([elastic#8273](elastic/eui#8273))
  - Added `columns.nameTooltip` on `EuiBasicTable`
  - Added `tooltipProps` prop on `EuiTableHeaderCell`
- Added `accent` color option to `EuiCallOut`
([elastic#8303](elastic/eui#8303))
- Updated `EuiInlineEditForm`'s `onCancel` prop type to allow
uncontrolled mode usage
([elastic#8307](elastic/eui#8307))
- Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`,
`EuiMarkdownFormat`, and `EuiMarkdownEditor` components.
([elastic#8317](elastic/eui#8317))
- Updated `EuiAccordion` to prevent content from being transitioned on
initial render when `initialIsOpen=true`
([elastic#8327](elastic/eui#8327))

**Bug fixes**

- Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date
would append the date instead of replace it
([elastic#8311](elastic/eui#8311))

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit ac01a0c)
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Feb 27, 2025
`99.2.0-borealis.0` ⏩ `99.3.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)

---

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

- Updated table components to support adding tooltips to header cells
([elastic#8273](elastic/eui#8273))
  - Added `columns.nameTooltip` on `EuiBasicTable`
  - Added `tooltipProps` prop on `EuiTableHeaderCell`
- Added `accent` color option to `EuiCallOut`
([elastic#8303](elastic/eui#8303))
- Updated `EuiInlineEditForm`'s `onCancel` prop type to allow
uncontrolled mode usage
([elastic#8307](elastic/eui#8307))
- Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`,
`EuiMarkdownFormat`, and `EuiMarkdownEditor` components.
([elastic#8317](elastic/eui#8317))
- Updated `EuiAccordion` to prevent content from being transitioned on
initial render when `initialIsOpen=true`
([elastic#8327](elastic/eui#8327))

**Bug fixes**

- Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date
would append the date instead of replace it
([elastic#8311](elastic/eui#8311))

---------

Co-authored-by: Elastic Machine <[email protected]>
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 27, 2025
`98.2.2-borealis.0` ⏩ `99.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)

---

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

- Updated table components to support adding tooltips to header cells
([#8273](elastic/eui#8273))
  - Added `columns.nameTooltip` on `EuiBasicTable`
  - Added `tooltipProps` prop on `EuiTableHeaderCell`
- Added `accent` color option to `EuiCallOut`
([#8303](elastic/eui#8303))
- Updated `EuiInlineEditForm`'s `onCancel` prop type to allow
uncontrolled mode usage
([#8307](elastic/eui#8307))
- Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`,
`EuiMarkdownFormat`, and `EuiMarkdownEditor` components.
([#8317](elastic/eui#8317))
- Updated `EuiAccordion` to prevent content from being transitioned on
initial render when `initialIsOpen=true`
([#8327](elastic/eui#8327))

**Bug fixes**

- Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date
would append the date instead of replace it
([#8311](elastic/eui#8311))

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

- Changed `EuiFieldText` styles to prioritize `disabled` styling over
`readonly`. ([#8271](elastic/eui#8271))
- Added `plugs` and `web` glyphs to `EuiIcon`
([#8285](elastic/eui#8285))
- Update `title` on `EuiColorPalettePickerPaletteProps` to be optional
([#8289](elastic/eui#8289))

**Bug fixes**

- Fixed an issue with EuiDataGrid with auto row height resulting in a
table of 0 height ([#8251](elastic/eui#8251))
- Fixed `disabled` behavior of `EuiFieldText` to prevent input changes.
([#8271](elastic/eui#8271))

## [`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 support for `titleColor` variant `warning` on `EuiStat`
([#8278](elastic/eui#8278))

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

- Added two new icons: `createGenericJob` and `createGeoJob`
([#8248](elastic/eui#8248))
- Added new icon `section`
([#8261](elastic/eui#8261))

**Bug fixes**

- Ensures that the `values` of `EuiI18n` used in `EuiPagination` use
`key` attributes to prevent potential ["unique key"
warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).
([#8243](elastic/eui#8243))

**Breaking changes**

- Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal`
on any child `EuiDraggable` instead
([#8256](elastic/eui#8256))

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Arturo Castillo Delgado <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Lene Gadewoll <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiAccordion] Don't animate when set to be initially open
4 participants