[EuiPageTemplate] Allow `panelled={true}` #7044

cee-chen · 2023-08-07T15:55:58Z

Summary

This PR is meant to resolve page template issues that Kibana is now facing with the new serverless designs (elastic/kibana#160640). With the redesigns, a pushed collapsible nav is now visible on all pages and the sidebars are generally less used.

Devs now need the ability to set a panelled (white background) page without a sidebar being present, which our current code does not allow for. Credit goes to @sebelga for this simple solution in elastic/kibana#160640 (comment).

New styles (previously was not achievable via props):

Previous styles (`true` previously defaulted to `undefined`):

QA

https://eui.elastic.co/pr_7044/#/templates/page-template/examples#simple-page-with-header-and-sections

General checklist

~~Added~~ Updated documentation
Added or updated jest ~~and cypress tests~~
A changelog entry exists and is marked appropriately
~~[ ] Checked for breaking changes and labeled appropriately~~
- This could arguably be a breaking change, but I opted for a bugfix. Personally, I think the previous logic was an oversight. In general this change should not affect too many Kibana usages as well, as most templates default to panelled={undefined} or panelled={false}.
~~[ ] Updated the Figma library counterpart~~
- Not sure what to do here, Figma allows true/false selection but I'm not savvy enough at it to know if undefined also needs to be a new option

~~- [ ] Checked in both light and dark modes~~
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles
~~- [ ] Checked Code Sandbox works for any docs examples~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~

kibanamachine · 2023-08-07T16:19:31Z

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

kibanamachine · 2023-08-07T16:19:49Z

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

- the first `simple` example now has three different panelled states that can display

kibanamachine · 2023-08-07T19:04:52Z

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

kibanamachine · 2023-08-07T19:10:13Z

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

cee-chen · 2023-08-07T19:14:56Z

jenkins test this

kibanamachine · 2023-08-07T19:39:09Z

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

1Copenut · 2023-08-07T21:15:02Z

buildkite test this

kibanamachine · 2023-08-07T21:40:45Z

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

elasticmachine · 2023-08-07T21:56:31Z

💚 Build Succeeded

Buildkite Build
Commit: 7d8d02c

History

💚 Build #231 succeeded 072842b
💚 Build #221 succeeded 4574f4f

sebelga · 2023-08-08T09:54:59Z

Thanks for fixing this quickly! 🎉 Sorry I could not open myself the PR for it, got caught in other PRs.

cee-chen · 2023-08-08T15:16:44Z

@sebelga No worries at all, thanks so much for diagnosing the issue in the first place!

breehall

These changes look good to me. I've verified in that the styling update as expected in staging.

sebelga · 2023-08-21T10:49:30Z

@cee-chen Do you know when the upgrade in Kibana to v87 will be done? cheers!

EDIT: Discard my question, just seeing elastic/kibana#163961 🎉

`v86.0.0`⏩`v87.1.0` ⚠️ The biggest set of type changes in this PR come from the breaking change that makes `pageSize` and `pageSizeOptions` now optional props for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and `EuiDataGrid.pagination`. This caused several other components that were cloning EUI's pagination type to start throwing type warnings about `pageSize` being optional. Where I came across these errors, I modified the extended types to require `pageSize`. These types and their usages may end up changing again in any case once the Shared UX team looks into #56406. --- ## [`87.1.0`](https://github.com/elastic/eui/tree/v87.1.0) - Updated the underlying library powering `EuiAutoSizer`. This primarily affects typing around the `disableHeight` and `disableWidth` props ([#6798](elastic/eui#6798)) - Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and `EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter typing ([#6798](elastic/eui#6798)) - Updated `EuiDatePickerRange` to support `compressed` display ([#7058](elastic/eui#7058)) - Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop ([#7061](elastic/eui#7061)) - Added a new `panelMinWidth` prop to `EuiInputPopover` ([#7071](elastic/eui#7071)) - Added a new `inputPopoverProps` prop for `EuiRange`s and `EuiDualRange`s with `showInput="inputWithPopover"` set ([#7082](elastic/eui#7082)) **Bug fixes** - Fixed `EuiToolTip` overriding instead of merging its `aria-describedby` tooltip ID with any existing `aria-describedby`s ([#7055](elastic/eui#7055)) - Fixed `EuiSuperDatePicker`'s `compressed` display ([#7058](elastic/eui#7058)) - Fixed `EuiAccordion` to remove tabbable children from sequential keyboard navigation when the accordion is closed ([#7064](elastic/eui#7064)) - Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs ([#7065](elastic/eui#7065)) **Accessibility** - Removed the default `dialog` role and `tabIndex` from push `EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual accessibility management. ([#7065](elastic/eui#7065)) ## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0) - Added beta `componentDefaults` prop to `EuiProvider`, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. ([#6923](elastic/eui#6923)) - `EuiPortal`'s `insert` prop can now be configured globally via `EuiProvider.componentDefaults` ([#6941](elastic/eui#6941)) - `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be configured globally via `EuiProvider.componentDefaults` ([#6942](elastic/eui#6942)) - `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and `showPerPageOptions` props can now be configured globally via `EuiProvider.componentDefaults` ([#6951](elastic/eui#6951)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow `pagination.pageSize` to be undefined. If undefined, `pageSize` defaults to `EuiTablePagination`'s `itemsPerPage` component default. ([#6993](elastic/eui#6993)) - `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s `pagination.pageSizeOptions` will now fall back to `EuiTablePagination`'s `itemsPerPageOptions` component default. ([#6993](elastic/eui#6993)) - Updated `EuiHeaderLinks`'s `gutterSize` spacings ([#7005](elastic/eui#7005)) - Updated `EuiHeaderAlert`'s stacking styles ([#7005](elastic/eui#7005)) - Added `toolTipProps` to `EuiListGroupItem` that allows customizing item tooltips. ([#7018](elastic/eui#7018)) - Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers via `popoverContent` and `popoverProps` ([#7031](elastic/eui#7031)) - Improved the contrast ratio of disabled titles within `EuiSteps` and `EuiStepsHorizontal` to meet WCAG AA guidelines. ([#7032](elastic/eui#7032)) - Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a more clear visual indication of the current step ([#7048](elastic/eui#7048)) **Bug fixes** - Single uses of `<EuiHeaderSectionItem side="right" />` now align right as expected without needing a previous `side="left"` sibling. ([#7005](elastic/eui#7005)) - `EuiPageTemplate` now correctly displays `panelled={true}` ([#7044](elastic/eui#7044)) **Breaking changes** - `EuiTablePagination`'s default `itemsPerPage` is now `10` (was previously `50`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25, 50]` (was previously `[10, 20, 50, 100]`). This can be configured through `EuiProvider.componentDefaults`. ([#6993](elastic/eui#6993)) - Removed `border` prop from `EuiHeaderSectionItem` (unused since Amsterdam theme) ([#7005](elastic/eui#7005)) - Removed `borders` object configuration from `EuiHeader.sections` ([#7005](elastic/eui#7005)) **CSS-in-JS conversions** - Converted `EuiHeaderAlert` to Emotion; Removed unused `.euiHeaderAlert__dismiss` CSS ([#7005](elastic/eui#7005)) - Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and `EuiHeaderSectionItemButton` to Emotion ([#7005](elastic/eui#7005)) - Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed `$euiHeaderLinksGutterSizes` Sass variables ([#7005](elastic/eui#7005)) - Removed `$euiHeaderBackgroundColor` Sass variable; use `$euiColorEmptyShade` instead ([#7005](elastic/eui#7005)) - Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead ([#7005](elastic/eui#7005)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

cee-chen added 2 commits August 7, 2023 08:54

Set up test

a13a8f8

Allow panelled to be true

4574f4f

cee-chen added 2 commits August 7, 2023 11:38

Update docs to account for new behavior

47597f0

- the first `simple` example now has three different panelled states that can display

changelog

072842b

cee-chen requested review from a team and breehall August 7, 2023 19:15

cee-chen marked this pull request as ready for review August 7, 2023 19:15

Merge branch 'main' into page-template-inner

7d8d02c

breehall approved these changes Aug 8, 2023

View reviewed changes

cee-chen merged commit 299f44e into elastic:main Aug 8, 2023

cee-chen deleted the page-template-inner branch August 8, 2023 15:59

cee-chen mentioned this pull request Aug 15, 2023

Upgrade EUI to v87.1.0 elastic/kibana#163961

Merged

sebelga mentioned this pull request Aug 22, 2023

[Chrome UI] Fix background color in serverless elastic/kibana#164419

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiPageTemplate] Allow `panelled={true}` #7044

[EuiPageTemplate] Allow `panelled={true}` #7044

cee-chen commented Aug 7, 2023 •

edited

Loading

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

cee-chen commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

1Copenut commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

elasticmachine commented Aug 7, 2023

sebelga commented Aug 8, 2023

cee-chen commented Aug 8, 2023

breehall left a comment

sebelga commented Aug 21, 2023 •

edited

Loading

[EuiPageTemplate] Allow panelled={true} #7044

[EuiPageTemplate] Allow panelled={true} #7044

Conversation

cee-chen commented Aug 7, 2023 • edited Loading

Summary

New styles (previously was not achievable via props):

Previous styles (true previously defaulted to undefined):

QA

General checklist

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

cee-chen commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

1Copenut commented Aug 7, 2023

kibanamachine commented Aug 7, 2023

elasticmachine commented Aug 7, 2023

💚 Build Succeeded

History

sebelga commented Aug 8, 2023

cee-chen commented Aug 8, 2023

breehall left a comment

Choose a reason for hiding this comment

sebelga commented Aug 21, 2023 • edited Loading

[EuiPageTemplate] Allow `panelled={true}` #7044

[EuiPageTemplate] Allow `panelled={true}` #7044

cee-chen commented Aug 7, 2023 •

edited

Loading

Previous styles (`true` previously defaulted to `undefined`):

sebelga commented Aug 21, 2023 •

edited

Loading