[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

cee-chen · 2023-06-21T23:56:33Z

Summary

closes [Emotion] EuiCollapsibleNav #6389
- Converts EuiCollapsibleNav to Emotion (very little actually happening here as most of the heavy styles lifting is done by EuiFlyout)
- Converts EuiCollapsibleNavGroup to Emotion (much more going on here - I recommend following along by commit)
- Removes .euiCollapsibleNavGroup--[background] and .euiCollapsibleNavGroup--withHeading modifier classes
closes [EuiCollapsibleNavGroup] background="dark" should be re-written with Emotion colorMode="dark" #6776

QA

Confirm that production looks the same as staging
gh pr checkout 6865 && yarn storybook
Confirm that the background controls work as expected (in both light and dark mode) for EuiCollapsibleNavGroup

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Added or updated jest and cypress tests
A changelog entry exists and is marked appropriately

Emotion checklist

See #6389

+ set theme colorMode on all children within `background="dark"`

- doesn't seem to be doing anything or used, so presumably became deprecated in Amsterdam

- `EuiTitle` already sets a font weight of 700, so this isn't really being used meaningfully anywhere

- nest `euiCollapsibleNavGroup__heading` padding as well for consistency and so we can skip adding another Emotion var

… docs - since `background="dark"` now automatically sets the theme

- break from 'playground' example for `EuiCollapsibleGroupNav` to set up schema of different display types (since they're individually fairly different, and affect prop usage substantially)

- 50/50 on this, but it's useful for QA

cee-chen · 2023-06-22T00:03:46Z

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts

+ /* This class does not accept a custom className */
+ .euiAccordion__triggerWrapper {
+ padding: ${euiTheme.size.base};
+ }
+ `,
+ notCollapsible: css`
+ /* If the heading is not in an accordion, it needs the padding */
+ .euiCollapsibleNavGroup__heading {
+ padding: ${euiTheme.size.base};
+ }


The notCollapsible nested selector could technically be flattened out by applying it directly to .euiCollapsibleNavGroup__heading, but personally I prefer it written this way - it's clearer (at least in my opinion) what the contrasting states are and where the padding needs to be applied.

I'm also being a bit more lax in this component's CSS specificity since we're redesigning the component here shortly.

cee-chen · 2023-06-22T00:05:49Z

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts

+ .euiCollapsibleNavGroup__title,
+ .euiCollapsibleNavGroup__heading,
+ .euiAccordion__iconButton {
+ color: ${euiTheme.colors.ghost};
+ }


See above - several of these selectors could be flattened out (primarily the title/heading selectors), but I personally actually think it makes more sense to keep them combined so that the intent of what we're making a slightly brighter white is all in one place.

Again, I'm also being a bit more lax in this component's CSS specificity since we're redesigning the component, and I think the background prop may end up going away entirely with the redesign.

cee-chen · 2023-06-22T00:07:45Z

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts

+ // Background colors
+ none: css``,
+ light: css`
+ background-color: ${euiTheme.colors.body};


One semi-odd thing to note is that the light background flips in dark mode but the dark background does not flip to a light background (it stays dark).

I'm honestly not sure if this was intentional by the original designers, but it's how it behaves currently in prod and I wanted to keep things as 1:1 with prod as possible. Again, it's possible we may scrap the background prop shortly in the future in any case.

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx

cee-chen · 2023-06-22T00:11:10Z

src/components/collapsible_nav/collapsible_nav.stories.tsx

+/**
+ * Full pattern demo - this was copied from src-docs examples,
+ * and is meant to be an imitation of Kibana's production nav
+ */


I'm not sure I'm a super huge fan of this story. It feels like it has too much overlap with our docs and I'm not sure if the gain is worth it. Its useful for QA but I'm 50/50 on reverting the commit once QA is over.

Thoughts? Should I go ahead and revert this?

I agree this might be too close to what's in the docs. I responded to your other comment that maybe removing this one and adding a bit to the primary EuiCollapsibleNav example might be a good middle ground.

👍 thanks Trevor! I'll go ahead and revert. My only thought is that long-term, we should think about what we're going to do with all our existing docs once we're on EUI+ and Storybook combined. It might make sense then to move everything to Storybook, but right now a duplicated example is not all that helpful.

I had a time deciding how I thought about this one. I like your suggestion Cee, to long-term move things to Storybook and EUI+

kibanamachine · 2023-06-22T00:25:14Z

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

1Copenut

I left you two comments about the storybook organization. Ran through your QA steps (very helpful) and noticed one difference in prod and staging. Might be unrelated, but felt worth mentioning.

LMK if you have questions or want to discuss comments.

Thanks @cee-chen

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx

1Copenut · 2023-06-22T21:20:25Z

src/components/collapsible_nav/collapsible_nav.stories.tsx

+/**
+ * Full pattern demo - this was copied from src-docs examples,
+ * and is meant to be an imitation of Kibana's production nav
+ */


I agree this might be too close to what's in the docs. I responded to your other comment that maybe removing this one and adding a bit to the primary EuiCollapsibleNav example might be a good middle ground.

cee-chen · 2023-06-23T00:00:53Z

Re the EuiCode color change - that is expected / actually a bugfix. EuiCollapsibleNavGroup was previously not properly setting all children to dark mode when it should have been.

This reverts commit c3ced8c.

kibanamachine · 2023-06-23T00:27:39Z

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

1Copenut

💯 LGTM!

cee-chen · 2023-06-23T21:21:36Z

Thanks Trevor!

`eui@82.1.0` ⏩ `83.0.0` ⚠️ The biggest change in this PR by far is the `EuiButtonEmpty` Emotion conversion, which changes the DOM structure of the button slightly as well as several CSS classes around it. EUI has attempted to convert any custom EuiButtonEmpty CSS overrides where possible, but would super appreciate it if CODEOWNERS checked their touched files. If anything other than a snapshot or test was touched, please double check the display of your button(s) and confirm everything still looks shipshape. Feel free to ping us for advice if not. --- ## [`83.0.0`](https://github.com/elastic/eui/tree/v83.0.0) **Bug fixes** - Fixed `EuiPaginationButton` styling affected by `EuiButtonEmpty`'s Emotion conversion ([#6893](elastic/eui#6893)) **Breaking changes** - Removed `isPlaceholder` prop from `EuiPaginationButton` ([#6893](elastic/eui#6893)) ## [`82.2.1`](https://github.com/elastic/eui/tree/v82.2.1) - Updated supported Node engine versions to allow Node 16, 18 and >=20 ([#6884](elastic/eui#6884)) ## [`82.2.0`](https://github.com/elastic/eui/tree/v82.2.0) - Updated EUI's SVG icons library to use latest SVGO v3 optimization ([#6843](elastic/eui#6843)) - Added success color `EuiNotificationBadge` ([#6864](elastic/eui#6864)) - Added `badgeColor` prop to `EuiFilterButton` ([#6864](elastic/eui#6864)) - Updated `EuiBadge` to use CSS-in-JS for named colors instead of inline styles. Custom colors will still use inline styles. ([#6864](elastic/eui#6864)) **CSS-in-JS conversions** - Converted `EuiButtonGroup` and `EuiButtonGroupButton` to Emotion ([#6841](elastic/eui#6841)) - Converted `EuiButtonIcon` to Emotion ([#6844](elastic/eui#6844)) - Converted `EuiButtonEmpty` to Emotion ([#6863](elastic/eui#6863)) - Converted `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` to Emotion ([#6865](elastic/eui#6865)) - Removed Sass variables `$euiCollapsibleNavGroupLightBackgroundColor`, `$euiCollapsibleNavGroupDarkBackgroundColor`, and `$euiCollapsibleNavGroupDarkHighContrastColor` ([#6865](elastic/eui#6865)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Jeramy Soucy <jeramy.soucy@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

cee-chen and others added 12 commits June 21, 2023 16:23

Convert EuiCollapsibleNav to Emotion

eb8e07d

[EuiCollapsibleNavGroup] Set up base Emotion styles

dbd06eb

[EuiCollapsibleNavGroup] Convert background prop to Emotion

e069e93

+ set theme colorMode on all children within `background="dark"`

Remove unused focus animation

e24431a

- doesn't seem to be doing anything or used, so presumably became deprecated in Amsterdam

Remove unused font-weight

88f0237

- `EuiTitle` already sets a font weight of 700, so this isn't really being used meaningfully anywhere

Convert remaining padding CSS

c0586ad

- nest `euiCollapsibleNavGroup__heading` padding as well for consistency and so we can skip adding another Emotion var

Delete all Sass files

86118b5

Convert Enzyme tests to RTL

796ef7d

[docs] Remove now-unnecessary EuiThemeProvider from collapsible nav…

0f49c0c

… docs - since `background="dark"` now automatically sets the theme

Set up Storybooks

eebcabf

- break from 'playground' example for `EuiCollapsibleGroupNav` to set up schema of different display types (since they're individually fairly different, and affect prop usage substantially)

Add full pattern storybook demo

c3ced8c

- 50/50 on this, but it's useful for QA

changelog

bd1d1ad

cee-chen requested a review from 1Copenut June 22, 2023 00:11

cee-chen marked this pull request as ready for review June 22, 2023 00:11

cee-chen commented Jun 22, 2023

View reviewed changes

cee-chen mentioned this pull request Jun 22, 2023

[Emotion] EuiCollapsibleNav #6389

Closed

15 tasks

1Copenut reviewed Jun 22, 2023

View reviewed changes

Revert "Add full pattern storybook demo"

71bb4b8

This reverts commit c3ced8c.

cee-chen requested a review from 1Copenut June 23, 2023 00:04

1Copenut approved these changes Jun 23, 2023

View reviewed changes

cee-chen merged commit cf073fc into elastic:main Jun 23, 2023

cee-chen deleted the emotion/collapsible-nav branch June 23, 2023 21:21

breehall mentioned this pull request Jun 28, 2023

Upgrade EUI to 83.0.0 elastic/kibana#160813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

cee-chen commented Jun 21, 2023 •

edited

Loading

cee-chen Jun 22, 2023

cee-chen Jun 22, 2023

cee-chen Jun 22, 2023

cee-chen Jun 22, 2023

1Copenut Jun 22, 2023

cee-chen Jun 22, 2023

1Copenut Jun 23, 2023

kibanamachine commented Jun 22, 2023

1Copenut left a comment

1Copenut Jun 22, 2023

cee-chen commented Jun 23, 2023 •

edited

Loading

kibanamachine commented Jun 23, 2023

1Copenut left a comment

cee-chen commented Jun 23, 2023

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup #6865

Conversation

cee-chen commented Jun 21, 2023 • edited Loading

Summary

QA

General checklist

Emotion checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Jun 22, 2023

1Copenut left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cee-chen commented Jun 23, 2023 • edited Loading

kibanamachine commented Jun 23, 2023

1Copenut left a comment

Choose a reason for hiding this comment

cee-chen commented Jun 23, 2023

cee-chen commented Jun 21, 2023 •

edited

Loading

cee-chen commented Jun 23, 2023 •

edited

Loading