Skip to content

[EuiResizableContainer] Add resizable container callbacks #6236

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
merged 12 commits into from
Sep 28, 2022
Merged

[EuiResizableContainer] Add resizable container callbacks #6236

merged 12 commits into from
Sep 28, 2022

Conversation

@davismcphee
Copy link
Contributor

@davismcphee davismcphee commented Sep 14, 2022 •
edited
Loading

Summary

This PR adds support for onResizeStart and onResizeEnd callback props to EuiResizableContainer. The callbacks support resizing with a pointer or a keyboard, and a trigger: 'pointer' | 'key' parameter is passed to onResizeStart indicating which action triggered the resize.

Notes:

  • For pointers, onResizeStart is called on mousedown, and onResizeEnd is called on mouseup or mouseleave.
  • For keyboards, onResizeStart is called only on the first keydown event while the key remains pressed, and onResizeEnd is called on keyup. Tapping an arrow key repeatedly will called onResizeStart and onResizeEnd once for each tap.
  • If an arrow key is pressed while a pointer resize is in progress, onResizeEnd is called to signal the end of the pointer resize before onResizeStart('key') is called to signal the start of the keyboard resize.
  • If the opposite arrow key is pressed while a keyboard resize is in progress, onResizeEnd is called to signal the end of the previous keyboard resize before onResizeStart('key') is called to signal the start of the current keyboard resize. After changing resize directions, releasing the previous key will not call onResizeEnd again since it would signal the end of the current keyboard resize.
  • The related issue mentions potentially adding support for similar events to EuiResizablePanel, but I didn't get around to that in this PR.

(The GIF makes it look like some taps are missed due to the frame rate, but this should not actually happen)
resizable_container_callbacks

Resolves #6225.

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

@davismcphee davismcphee self-assigned this Sep 14, 2022
@davismcphee davismcphee force-pushed the resizable-container-callbacks branch from 879c4bc to 19aee7d Compare September 14, 2022 17:15
@kibanamachine
Copy link

kibanamachine commented Sep 14, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

4 similar comments
@kibanamachine
Copy link

kibanamachine commented Sep 14, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@kibanamachine
Copy link

kibanamachine commented Sep 14, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@kibanamachine
Copy link

kibanamachine commented Sep 14, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@kibanamachine
Copy link

kibanamachine commented Sep 15, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@davismcphee davismcphee marked this pull request as ready for review September 15, 2022 02:52
@kibanamachine
Copy link

kibanamachine commented Sep 15, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

cee-chen
cee-chen reviewed Sep 19, 2022
View reviewed changes
cee-chen
cee-chen reviewed Sep 19, 2022
View reviewed changes
cee-chen
cee-chen reviewed Sep 19, 2022
View reviewed changes
cee-chen
cee-chen reviewed Sep 19, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

All my comments are minor nits/nice-to-haves. QA looks and feels fantastic on the docs example, and the unit tests give me tons of confidence that this should work as expected. Thank you for the super clean and easy-to-read code - this PR is seriously fantastic! 🎉

@davismcphee davismcphee force-pushed the resizable-container-callbacks branch from 89217c0 to 8ed5195 Compare September 26, 2022 15:54
@kibanamachine
Copy link

kibanamachine commented Sep 26, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

davismcphee
davismcphee commented Sep 26, 2022
View reviewed changes
Copy link
Contributor Author

@davismcphee davismcphee left a comment

Choose a reason for hiding this comment

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

@constancecchen Thanks for all your feedback! I got a chance to update this PR today and think I've addressed all the concerns. Looking forward to making my first EUI contribution with this 🙂

cee-chen
cee-chen reviewed Sep 26, 2022
View reviewed changes
@cee-chen
Copy link
Contributor

cee-chen commented Sep 26, 2022 •
edited
Loading

That was my last set of comments, I promise! :)

@kibanamachine
Copy link

kibanamachine commented Sep 26, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

1 similar comment
@kibanamachine
Copy link

kibanamachine commented Sep 26, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

cee-chen
cee-chen approved these changes Sep 27, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Thank you again for the quality community contribution! ❤️

@cee-chen
Copy link
Contributor

cee-chen commented Sep 27, 2022

jenkins test this

@kibanamachine
Copy link

kibanamachine commented Sep 27, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@davismcphee
Fix issue where switching arrow key directions and releasing the firs…
9d728ca 
…t arrow key can trigger false resize end events
@davismcphee
Clean up resize callbacks code
06535a7
@davismcphee
Update container callbacks docs
c46b0b2
@davismcphee
Add resizable container callback Jest tests
0a49781
@davismcphee
Finish writing resize container callback tests
51086f8
@davismcphee
Add upcoming_changelog file
fbb2183
@davismcphee
Call onResizeEnd for keyboard resizes when the resize button is blurred
4c073ed
@davismcphee
[EuiResizableContainer] Convert resizable_container_callbacks.js to T…
07b1597 
…S, change resizable container callbacks to return void, clean up ResizeTrigger type, organize resizable container callbacks Jest tests
@davismcphee
[EuiResizableContainer] Fix resizable container callbacks example sou…
5020fbe 
…rce type
@davismcphee
[EuiResizableContainer] Simplify ResizeTrigger type
941fad6
@davismcphee davismcphee force-pushed the resizable-container-callbacks branch from 77470e6 to 941fad6 Compare September 27, 2022 20:47
@kibanamachine
Copy link

kibanamachine commented Sep 27, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

@cee-chen
Copy link
Contributor

cee-chen commented Sep 27, 2022

Looks great! Feel free to hit merge on this! 🎉

@davismcphee davismcphee merged commit c4bbf45 into elastic:main Sep 28, 2022
@davismcphee davismcphee deleted the resizable-container-callbacks branch September 28, 2022 00:17
@cee-chen cee-chen mentioned this pull request Nov 8, 2022
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request Nov 18, 2022
@elizabetdev @kibanamachine
Upgrade EUI to v70.2.4 (#144845)
c408ceb 
## Summary
`[email protected]` ⏩ `[email protected]`

⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and
`EuiFlexGrid`, primarily around switching margins and negative margins
to `gap`. Please do a quick QA pass of your app to scan for any issues.
We're happy to help resolve minor fixes, or potentially follow up after
PR merges. You can find us over in #eui!

## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4)

**Bug fixes**

- Fixed visual bug in nested `EuiFlexGroup`s, where the parent
`EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not
([#6381](elastic/eui#6381))

## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3)

**Bug fixes**

- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex`
CSS gap change ([#6380](elastic/eui#6380))

## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2)

- `EuiButton` now accepts `minWidth={false}`
([#6373](elastic/eui#6373))

**Bug fixes**

- `EuiButton` no longer outputs unnecessary inline styles for
`minWidth={0}` or `minWidth={false}`
([#6373](elastic/eui#6373))
- `EuiFacetButton` no longer reports type issues when passing props
accepted by `EuiButton`
([#6373](elastic/eui#6373))
- Fixed the shadow sizes of `.eui-yScrollWithShadows` and
`.eui-xScrollWithShadows`
([#6374](elastic/eui#6374))


## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1)

**Bug fixes**

- Re-fixed `EuiPageSection` not correctly merging `contentProps.css`
([#6365](elastic/eui#6365))
- Fixed `EuiTab` not defaulting to size `m`
([#6366](elastic/eui#6366))

## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0)

- Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This
can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`,
but will always remain accessible to keyboard and screen reader users.
([#6036](elastic/eui#6036))
- `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus
within its children ([#6036](elastic/eui#6036))
- Added `onFocus` prop callback to `EuiSuperDatePicker`
([#6320](elastic/eui#6320))

**Bug fixes**

- Fixed `EuiSelectable` to ensure the full options list is re-displayed
when the search bar is controlled and cleared using `searchProps.value`
([#6317](elastic/eui#6317))
- Fixed incorrect padding on `xl`-sized `EuiTabs`
([#6336](elastic/eui#6336))
- Fixed `EuiCard` not correctly merging `css` on its child `icon`s
([#6341](elastic/eui#6341))
- Fixed `EuiCheckableCard` not setting `css` on the correct DOM node
([#6341](elastic/eui#6341))
- Fixed a webkit rendering issue with `EuiModal`s containing
`EuiBasicTable`s tall enough to scroll
([#6343](elastic/eui#6343))
- Fixed bug in `to_initials` that truncates custom initials
([#6346](elastic/eui#6346))
- Fix bug in `EuiCard` where layout breaks when `horizontal` and
`selectable` are both passed
([#6348](elastic/eui#6348))

## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0)

- Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the
consumer render a hint below the search bar that will be displayed on
focus. ([#6319](elastic/eui#6319))
- Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your
popover contains `EuiDragDropContext`.
([#6329](elastic/eui#6329))

**Bug fixes**

- Fixed `EuiButton`'s cursor style when the button is disabled
([#6323](elastic/eui#6323))
- Fixed `EuiPageTemplate` not recognizing child
`EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props
([#6324](elastic/eui#6324))
- Fixed `EuiBetaBadge` to always respect its `anchorProps` values,
including when there is no tooltip content
([#6326](elastic/eui#6326))
- Temporarily patched `EuiModal` to not cause scroll-jumping issues on
modal open ([#6327](elastic/eui#6327))
- Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns &
sorting toolbar popovers
([#6329](elastic/eui#6329))
- Fixed `EuiButton` not correctly passing `textProps` for children
inside fragments or i18n components
([#6332](elastic/eui#6332))
- Fixed `EuiButton` not correctly respecting `minWidth={0}`
([#6332](elastic/eui#6332))

**CSS-in-JS conversions**

- Converted `EuiTabs` to Emotion
([#6311](elastic/eui#6311))

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

- Added the `enabled` option to the `<EuiInMemoryTable />`
`executeQueryOptions` prop. This option prevents the Query from being
executed when controlled by the consumer.
([#6284](elastic/eui#6284))

**Bug fixes**

- Fixed `EuiOverlayMask` to set a
`[data-relative-to-header=above|below]` attribute to replace the
`--aboveHeader` and `--belowHeader` classNames removed in its Emotion
conversion ([#6289](elastic/eui#6289))
- Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers
([#6293](elastic/eui#6293))
- Fixed `EuiToolTip` not respecting reduced motion preferences
([#6295](elastic/eui#6295))
- Fixed a bug with `EuiTour` where passing any `panelProps` would cause
the beacon to disappear
([#6298](elastic/eui#6298))

**Breaking changes**

- `@emotion/css` is now a required peer dependency, alongside
`@emotion/react` ([#6288](elastic/eui#6288))
- `@emotion/cache` is no longer required peer dependency, although your
project must still use it if setting custom cache/injection locations
([#6288](elastic/eui#6288))

**CSS-in-JS conversions**

- Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed
`euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`;
([#6263](elastic/eui#6263))
- Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion
([#6287](elastic/eui#6287))

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

- Added support for `fullWidth` prop on EuiForm, which will be the
default for all rows/controls within
([#6229](elastic/eui#6229))
- Added support for `onResizeStart` and `onResizeEnd` callbacks to
`EuiResizableContainer`
([#6236](elastic/eui#6236))
- Added optional case sensitive option matching to `EuiComboBox` with
the `isCaseSensitive` prop
([#6268](elastic/eui#6268))
- `EuiFlexItem` now supports `grow={0}`
([#6270](elastic/eui#6270))
- Added the `alignItems` prop to `EuiFlexGrid`
([#6281](elastic/eui#6281))
- Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`,
`indexTemporary`, `infinity`, `sortAscending`, and `sortDescending`
glyphs to `EuiIcon` ([#6282](elastic/eui#6282))

**Bug fixes**

- Fixed `EuiTextProps` to show the `color` type option `inherit` as
default ([#6267](elastic/eui#6267))
- `EuiFlexGroup` now correctly respects `gutterSize` when responsive
([#6270](elastic/eui#6270))
- Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array
not respecting `truncate` overrides
([#6280](elastic/eui#6280))

**Breaking changes**

- `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup`
instead for normal flex display
([#6270](elastic/eui#6270))
- `EuiFlexGrid` now uses modern `display: grid` CSS
([#6270](elastic/eui#6270))
- `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap`
CSS instead of margins and negative margins
([#6270](elastic/eui#6270))
- `EuiFlexGroup` no longer applies responsive styles to `column` or
`columnReverse` directions
([#6270](elastic/eui#6270))

**CSS-in-JS conversions**

- Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion
([#6270](elastic/eui#6270))

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

- Added `beta` glyph to `EuiIcon`
([#6250](elastic/eui#6250))
- Added `launch` and `spaces` glyphs to `EuiIcon`
([#6260](elastic/eui#6260))
- Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a
string of query selectors to fall back to if the `destinationId` does
not have a valid target. Defaults to `main`
([#6261](elastic/eui#6261))
- `EuiSkipLink` is now always an `a` tag to ensure that it is always
placed within screen reader link menus.
([#6261](elastic/eui#6261))

**Bug fixes**

- Fixed `EuiSuperDatePicker` not correctly merging passed `className`s
([#6253](elastic/eui#6253))
- Fixed `EuiColorStops` not correctly merging in passed
`data-test-subj`s, `style`s, or `...rest`
([#6255](elastic/eui#6255))
- Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper
instead of the panel. Use `wrapperProps.style` to pass styles to the
wrapper. ([#6255](elastic/eui#6255))
- Fixed custom `onClick`s passed to `EuiSkipLink` overriding
`overrideLinkBehavior`
([#6261](elastic/eui#6261))

**Breaking changes**

- Removed `inherit` and `ghost` color from `EuiListGroupItem`
([#6207](elastic/eui#6207))
- Changed default color to `text` instead of `inherit`
([#6207](elastic/eui#6207))

**CSS-in-JS conversions**

- Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed
`$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and
`$euiListGroupItemSizeTypes`;
([#6207](elastic/eui#6207))
- Converted `EuiBadgeGroup` to Emotion
([#6258](elastic/eui#6258))
- Converted `EuiBetaBadge` to Emotion
([#6258](elastic/eui#6258))
- Converted `EuiNotificationBadge` to Emotion
([#6258](elastic/eui#6258))

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

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@davismcphee davismcphee

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiResizableContainer] Add support for onResizeStart and onResizeEnd callback props

3 participants

@davismcphee @kibanamachine @cee-chen