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

[EuiContextMenu] Support new renderItem custom content in items arrays #7510

Merged
merged 4 commits into from
Feb 7, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Feb 5, 2024

Summary

closes #7507

Example usage:

const CustomComponent = () => (
  <div data-test-subj="custom">Hello world</div>
);

<EuiContextMenu
  initialPanelId={1}
  panels={[
    {
      id: 1,
      title: 'Testing renderItem',
      items: [
        // Default context menu item
        {
          name: 'Renders an EuiContextMenuItem',
          panel: 2,
        },
        // Custom items
        {
          renderItem: () => <h3>Subtitle</h3>,
        },
        {
          key: 'custom',
          renderItem: CustomComponent,
        },
      ],
    },
  ]}
/>

This API intentionally matches EuiCollapsibleNavBeta.Item's API (see #7228 and elastic/kibana#167326).

QA

General checklist

  • Browser QA
    • Checked in Chrome, Safari, Edge, and Firefox
  • Docs site QA
    • Updated documentation
    • [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles - the typescript inferred prop for this sucks because it uses ExclusiveUnion, not sure if there's anything we can do about that
  • 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 - N/A

- for developers who want to mix both the items arrays and custom content
@cee-chen cee-chen force-pushed the context-menu/renderItem branch from 8bfd3ce to 2ce3373 Compare February 5, 2024 19:22
@cee-chen cee-chen marked this pull request as ready for review February 5, 2024 19:55
@cee-chen cee-chen requested a review from a team as a code owner February 5, 2024 19:55
@tkajtoch tkajtoch self-requested a review February 7, 2024 15:20
Comment on lines +61 to +65
ExclusiveUnion<
EuiContextMenuPanelItemDescriptorEntry,
EuiContextMenuPanelItemSeparator
>,
EuiContextMenuPanelItemRenderCustom
Copy link
Member

Choose a reason for hiding this comment

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

[Not a change request] We should simplify the type here someday and find a way to render an understandable definition in the props table

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To clarify, ExclusiveUnion<> is already pretty terrible in our current props table (https://eui.elastic.co/v93.0.0/#/navigation/context-menu) - but we should definitely make this a tech debt item for some day!

Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

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

The changes look great!

- I keep forgetting storybooks!
@cee-chen cee-chen enabled auto-merge (squash) February 7, 2024 16:32
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Feb 7, 2024

💚 Build Succeeded

History

@cee-chen cee-chen merged commit b2687f2 into elastic:main Feb 7, 2024
7 checks passed
@cee-chen cee-chen deleted the context-menu/renderItem branch February 7, 2024 17:23
cee-chen added a commit to elastic/kibana that referenced this pull request Feb 20, 2024
`v93.0.0` ⏩ `v93.1.1`

---

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

**This is a patch release primarily intended for use by Kibana.**

- Added top-level `EuiTreeView.Item` export
([#7526](elastic/eui#7526))

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

- Added `index` glyph to `EuiIcon`
([#7498](elastic/eui#7498))
- Updated `EuiHighlight` to accept an array of `search` strings, which
allows highlighting multiple, separate words within its children. This
new type and behavior *only* works if `highlightAll` is also set to
true. ([#7496](elastic/eui#7496))
- Updated `EuiContextMenu` with a new `panels.items.renderItem`
property, which allows rendering completely custom items next to
standard `EuiContextMenuItem` objects
([#7510](elastic/eui#7510))
- `EuiSuperDatePicker` updates:
- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop.
Passing this prop allows controlling and overriding the default unit
rounding behavior. ([#7501](elastic/eui#7501))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`intervalUnits` prop. Passing this prop allows controlling and
overriding the default unit rounding behavior.
([#7501](elastic/eui#7501))
- Updated `onRefreshChange` to pass back a new `intervalUnits` key that
contains the current interval unit format (seconds, minutes, or hours).
([#7501](elastic/eui#7501))
- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop,
which defaults to true (current behavior). To preserve displaying the
unit that users select for relative time, set this to false.
([#7502](elastic/eui#7502))
- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop,
which accepts a minimum number in milliseconds
([#7516](elastic/eui#7516))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`minInterval` prop, which accepts a minimum number in milliseconds
([#7516](elastic/eui#7516))

**Bug fixes**

- Fixed `EuiHighlight` to not parse `search` strings as regexes
([#7496](elastic/eui#7496))
- Fixed `EuiSuperDatePicker` submit bug when used within `<form>`
elements ([#7504](elastic/eui#7504))
- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to
items without expandable children
([#7513](elastic/eui#7513))

**CSS-in-JS conversions**

- Converted `EuiTreeView` to Emotion. Updates as part of the conversion:
([#7513](elastic/eui#7513))
  - Removed `.euiTreeView__wrapper` div node
  - Enforced consistent `icon` size based on `display` size
fkanout pushed a commit to fkanout/kibana that referenced this pull request Mar 4, 2024
`v93.0.0` ⏩ `v93.1.1`

---

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

**This is a patch release primarily intended for use by Kibana.**

- Added top-level `EuiTreeView.Item` export
([elastic#7526](elastic/eui#7526))

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

- Added `index` glyph to `EuiIcon`
([elastic#7498](elastic/eui#7498))
- Updated `EuiHighlight` to accept an array of `search` strings, which
allows highlighting multiple, separate words within its children. This
new type and behavior *only* works if `highlightAll` is also set to
true. ([elastic#7496](elastic/eui#7496))
- Updated `EuiContextMenu` with a new `panels.items.renderItem`
property, which allows rendering completely custom items next to
standard `EuiContextMenuItem` objects
([elastic#7510](elastic/eui#7510))
- `EuiSuperDatePicker` updates:
- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop.
Passing this prop allows controlling and overriding the default unit
rounding behavior. ([elastic#7501](elastic/eui#7501))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`intervalUnits` prop. Passing this prop allows controlling and
overriding the default unit rounding behavior.
([elastic#7501](elastic/eui#7501))
- Updated `onRefreshChange` to pass back a new `intervalUnits` key that
contains the current interval unit format (seconds, minutes, or hours).
([elastic#7501](elastic/eui#7501))
- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop,
which defaults to true (current behavior). To preserve displaying the
unit that users select for relative time, set this to false.
([elastic#7502](elastic/eui#7502))
- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop,
which accepts a minimum number in milliseconds
([elastic#7516](elastic/eui#7516))
- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new
`minInterval` prop, which accepts a minimum number in milliseconds
([elastic#7516](elastic/eui#7516))

**Bug fixes**

- Fixed `EuiHighlight` to not parse `search` strings as regexes
([elastic#7496](elastic/eui#7496))
- Fixed `EuiSuperDatePicker` submit bug when used within `<form>`
elements ([elastic#7504](elastic/eui#7504))
- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to
items without expandable children
([elastic#7513](elastic/eui#7513))

**CSS-in-JS conversions**

- Converted `EuiTreeView` to Emotion. Updates as part of the conversion:
([elastic#7513](elastic/eui#7513))
  - Removed `.euiTreeView__wrapper` div node
  - Enforced consistent `icon` size based on `display` size
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.

[EuiContextMenu] renderItem wildcard content
4 participants