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

[EuiPopover] Remove 2nd unnecessary anchor div wrapper #7311

Merged
merged 10 commits into from
Oct 30, 2023

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Oct 24, 2023

Summary

closes #2022

My war against unnecessary <div> wrappers will never end 🤘 (Also this cleanup is nice not just for DOM, but also because it removes a bunch of unnecessary extra CSS)

NOTE: Much of the massive diffs are from snapshot changes, and a lot of them go away if you hide whitespace changes. As always, please follow along by commit

Props deprecations:

2 props that were being applied to the now-removed div (anchorClassName and buttonRef) have been moved to the 1st parent div temporarily during the deprecation period (3 months).

Props table:
props table

VSCode jsdoc hint:
vs code

Consumer planning

Note that this is almost guaranteed to produce a metric butt-ton of snapshot churn in Kibana, which is why I'd like to combo this with #7310 if possible (to get all the snapshot churn out of the way at once).

  • There are 8 non-snapshot references to .euiPopover__anchor in Kibana that will need to be updated (link)
  • There are 2 CSS usages in Cloud that will need to be updated (but can only be updated once they upgrade to the EUI release with this change)
  • There are no meaningful usages in other Elastic consumers

QA

Regression/smoke-testing

General checklist

  • Browser QA
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
      - [ ] Checked for accessibility including keyboard-only and screenreader modes
      - [ ] Checked in both light and dark modes
  • Docs site QA
    • Props have proper autodocs (using @default if default values are missing) and **playground toggles**
  • 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)
      ⚠️ I opted to not mark the third changelog item as a breaking change, as I personally strongly don't think our DOM markup should be a guaranteed API (and consumers should avoid fragilely querying the DOM whenever possible).
  • Designer checklist - N/A

- move to outremost div instead
- replace it with `popoverRef` (combined for now until removal)
- pull non-hook logic from `useCombinedRefs` for use within class components

- write missing tests
- add display label to Emotion classNames for extra clarity
- use specific `data-test-subj`s instead of generic selectors, and use `simulate` instead of calling `onClick` directly
- make it visually clearer which props are deprecated
@cee-chen cee-chen marked this pull request as ready for review October 24, 2023 20:53
@cee-chen cee-chen requested a review from a team as a code owner October 24, 2023 20:53
@kibanamachine
Copy link

Preview staging links for this PR:

Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

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

👍 LGTM!

@cee-chen
Copy link
Member Author

I'm going to hold off on merging this (and the other popover PR) until after next Monday's release. We have enough larger/breaking changes in main as it is, and fixes that are more important to get into Kibana sooner rather than fighting over potential popover CI failures

@cee-chen cee-chen enabled auto-merge (squash) October 30, 2023 19:30
@cee-chen
Copy link
Member Author

buildkite test this

@elasticmachine
Copy link
Collaborator

elasticmachine commented Oct 30, 2023

💔 Build Failed

Failed CI Steps

History

@cee-chen
Copy link
Member Author

cee-chen commented Oct 30, 2023

😬 So it looks like npm is having a very bad no good terrible day right now - I'm going to override the failing CI and force merge this because all I did was fix a very minor type merge conflict, CI was passing before just now

@cee-chen cee-chen merged commit be84bc7 into elastic:main Oct 30, 2023
4 of 7 checks passed
@cee-chen cee-chen deleted the popover/dom-cleanup branch October 30, 2023 20:11
@cee-chen cee-chen mentioned this pull request Nov 27, 2023
jbudz pushed a commit to elastic/kibana that referenced this pull request Dec 18, 2023
`v90.0.0`⏩`v91.0.0-backport.0`

⚠️ While this upgrade pings many teams and has a large code diff, **the
majority of the changes are snapshots or tests-related** and do not
touch source code, so should theoretically only need a code review and
not dedicated QA.

The changes in EUI that required a large swathe of these updates are:

- **EuiPopover** removed an extra unnecessary `<div>` wrapper on its
anchors, which affected many snapshots and a few CSS overrides, which
should have been updated
- **EuiButtonGroup** now renders `<button>` elements instead of `<input
type="radio">` elements for single selection, which affected both
snapshots and E2E tests
- **EuiSuperDatePicker**'s absolute date input now requires an `Enter`
keypress when parsing dates (affected E2E tests)
- **EuiComboBox**, when rendered with `singleSelection={{ plainText:
'true' }}`, no longer renders a pill (i.e. text). This combobox type now
behaves more like an `EuiFieldText`, where the selection is rendered via
input `value` instead. This affected a high amount of E2E tests (both
FTR and Cypress), both in terms of updating assertions and changing
selections, but should **not** significantly affect user experience -
see elastic/eui#7332 for more.

---

##
[`v91.0.0-backport.0`](https://github.com/elastic/eui/tree/v91.0.0-backport.0)

**This is a backport release only intended for use by Kibana.**

- Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs.
- `EuiSelectable` now allows configurable text truncation via
`listProps.truncationProps`
([#7388](elastic/eui#7388))
- `EuiTextTruncate` now supports a new `calculationDelayMs` prop for
working around font loading or layout shifting scenarios
([#7388](elastic/eui#7388))

**Bug fixes**

- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where
scrollbar widths were not being accounted for
([#7392](elastic/eui#7392))

## [`91.0.0`](https://github.com/elastic/eui/tree/v91.0.0)

- Updated the background color of `EuiPopover`s in dark mode to increase
visibility & contrast against other page/panel backgrounds
([#7310](elastic/eui#7310))
- Memoized `EuiDataGrid` to prevent unneeded re-renders
([#7324](elastic/eui#7324))
- Added a configurable `role` prop to `EuiAccordion`
([#7326](elastic/eui#7326))
- Added a configurable `role` prop to `EuiGlobalToastList`
([#7328](elastic/eui#7328))
- For greater flexibility, `EuiSuperDatePicker` now allows users to
paste ISO 8601, RFC 2822, and Unix timestamps in the `Absolute` tab
input, in addition to timestamps in the `dateFormat` prop
([#7331](elastic/eui#7331))
- Plain text `EuiComboBox`es now behave more like a normal text
field/input. Backspacing will no longer delete the entire value, and
selected values can now be double clicked and copied.
([#7332](elastic/eui#7332))
- `EuiDataGrid`'s display settings popover now allows users to clear the
"Lines per row" input before typing in a new number
([#7338](elastic/eui#7338))
- Improved the UX of `EuiSuperDatePicker`'s Absolute tab for users
manually typing in timestamps
([#7341](elastic/eui#7341))
- Updated `EuiI18n`s with multiple `tokens` to accept dynamic `values`
([#7341](elastic/eui#7341))

**Bug fixes**

- Fixed `EuiComboBox`'s `onSearchChange` callback to pass the correct
`hasMatchingOptions` value
([#7334](elastic/eui#7334))
- Fixed an `EuiSelectableTemplateSitewide` bug where the `popoverButton`
behavior would break if passed a non-DOM React wrapper
([#7339](elastic/eui#7339))

**Deprecations**

- `EuiPopover`: deprecated `anchorClassName`. Use `className` instead
([#7311](elastic/eui#7311))
- `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead
([#7311](elastic/eui#7311))
- `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target
`.euiPopover` instead if necessary
([#7311](elastic/eui#7311))
- Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed.
([#7325](elastic/eui#7325))

**Breaking changes**

- Removed deprecated `euiPaletteComplimentary` - use
`euiPaletteComplementary` Instead
([#7333](elastic/eui#7333))

**Accessibility**

- Updated `type="single"` `EuiButtonGroup`s to render standard buttons
instead of radio buttons under the hood, per recent a11y recommendations
([#7325](elastic/eui#7325))
- `EuiAccordion` now defaults to a less screenreader-noisy `group` role
instead of `region`. If your accordion contains significant enough
content to be a document landmark role, you may re-configure it back to
`region`. ([#7326](elastic/eui#7326))
- Reduced screen reader noisiness when sorting `EuiDataGrid` columns via
toolbar ([#7327](elastic/eui#7327))
- `EuiGlobalToastList` now defaults to a `log` role. If your toasts will
always require immediate user action, consider (with caution) using the
`alert` role instead.
([#7328](elastic/eui#7328))

**CSS-in-JS conversions**

- Updated `$euiFontFamily` and `$euiCodeFontFamily` to match Emotion
fonts ([#7332](elastic/eui#7332))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
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.

[EuiPopover] Are 2 wrapper components necessary?
4 participants