[Emotion] Convert `EuiSteps` #6555

elizabetdev · 2023-01-26T19:39:26Z

Summary

This PR converts EuiSteps to Emotion (closes #6413) and closes #5847.

Design enhancements

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

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
- [ ] 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

Emotion conversion checklist

kibanamachine · 2023-01-26T20:02:07Z

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

kibanamachine · 2023-01-30T18:30:46Z

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

kibanamachine · 2023-01-31T13:54:09Z

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

kibanamachine · 2023-01-31T14:32:24Z

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

kibanamachine · 2023-01-31T15:46:32Z

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

kibanamachine · 2023-02-09T13:50:18Z

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

kibanamachine · 2023-02-09T16:14:25Z

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

kibanamachine · 2023-02-09T16:46:51Z

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

cee-chen

Hey Elizabet! Huge apologies, my EuiDataGrid work ended up taking most of my time today and I didn't end up being able to pull this PR down after all. I skimmed it super briefly and did notice a small bug with the titleSize="xs" example.

I'm out tomorrow but will be back on Monday to help address/clean up any code feedback etc before Tuesday's release. Am I cool to push up to this PR?

src/components/steps/step.styles.ts

kibanamachine · 2023-02-13T13:31:26Z

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

elizabetdev · 2023-02-13T13:43:19Z

@cee-chen I went through your review and pushed some changes.

Am I cool to push up to this PR?

Yes, no problem at all.

kibanamachine · 2023-02-13T14:00:38Z

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

- remove unnecessary `isDisabled` style - it's not doing anything - clean up lineGradient readability - add `euiStepTitleStyles` to avoid nesting CSS selectors - Remove ambiguous `small` vs `medium` sizes: pass the equivalent props instead, and rename the size variable to be clear that it's referring to the `xs` size, not the `s` size - use more logicalCSS (easier to read) and less logicalShorthandCSS (it's getting overridden anyway) + fix `medium` sized titles getting padding that they should not have been + bump up padding-top on `s` titles to center text a bit more - fix EuiStepNumber not actually having the default size that its props documentation claims it does

- remove unnecessary repeated `makeLineProgress` - it's defined once in `euiStepHorizontal` and it doesn't need to be redefined again - remove `:not` isDisabled class selector in favor of an `enabled` style - remove unused isComplete/isIncomplete styles - pull out separate euiStepHorizontalNumberStyles fn and remove unnecessary selector nesting on box shadow application (if it's selected, it can't also be loading/disabled/warning) - make emotion classNames more closely match passed `status`es - fix BEM class naming - Remove old prop documentation to now-removed `isSelected` and `isComplete` props, + remove `isSelected` var naming in favor of `isCurrent` - clean up unnecessarily verbose `isCurrent` spread operator

- create `euiStepNumberContentStyles` to reduce CSS nesting - rewrite JSX output to use a switch (w/ groupings for icon vs number types) and an aria labels map for clearer readability - move `createStepsNumber` to fn within map its used in (since it's fairly basic and only used for one specific purpose, there's no need to keep passing around euiTheme - prefer theme vars over static `px` sizes

src/components/tour/tour_step_indicator.tsx

+ fix missing specific titles for `danger` and `loading` statuses

cee-chen · 2023-02-14T02:29:36Z

src/components/steps/steps_horizontal.styles.ts

+      // Remove the respective lines if the first or last child
+      &:first-of-type > .euiStepHorizontal::before,
+      &:last-of-type > .euiStepHorizontal::after {
+        display: none;
+      }


Note for reference: I debated trying to flatten this by passing isFirst or isLast to the underying EuiStep, but decided against it - I don't think the extra code cruft is worth the slight CSS flattening, as consumers are unlikely to want to override this CSS

cee-chen

Hey Elizabet, done with my QA & cleanups and I think this is GTG. I just have one remaining comment I found while comparing prod vs dev, but I'm not sure if the change was intentional.

src/components/steps/step_number.styles.ts

kibanamachine · 2023-02-14T02:48:51Z

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

cee-chen · 2023-02-14T02:50:51Z

src/components/steps/step_horizontal.tsx

      onClick={onStepClick}
      disabled={disabled}
+      css={cssStyles}
+      data-step-status={status}


Note for reference: I added this new data-step-status util because we're not setting status classes via Emotion, and because it looks like Fleet is hooking into euiStepHorizontal-isIncomplete as an override (link).

If needed we can add this data attr to EuiStep as well, but I currently don't see the need / any Kibana usage

- remove unnecessary Fragments and divs

cee-chen · 2023-02-14T03:12:35Z

src/components/steps/step_horizontal.styles.ts

+    current: css`
+      ${euiShadowXSmall(euiThemeContext)}
+    `,


I see the CSS for this correctly appearing, but I can barely see this shadow at all on either light or dark mode. Am I just blind, or should we consider removing this? 🤷 @miukimiu, any opinions?

I could notice it in light mode. But I agree, it's almost unperceivable. So I removed it.

kibanamachine · 2023-02-14T03:23:21Z

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

… to medium

elizabetdev · 2023-02-14T12:56:03Z

Thanks @cee-chen for all the help and for finding some design inconsistencies. I pushed f2ea3c8 based on your final review.

kibanamachine · 2023-02-14T13:13:25Z

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

## Summary `[email protected]` ⏩ `[email protected]` --- ## [`75.1.0`](https://github.com/elastic/eui/tree/v75.1.0) - Added padding to `EuiStep` title to better align with icon ([#6555](elastic/eui#6555)) - Added a new `lineNumbers.annotations` API to `EuiCodeBlock`. This new feature displays an informational icon next to the specified line number(s), providing more context via popover ([#6580](elastic/eui#6580)) **Bug fixes** - Fixed bug in `EuiRange` where styles were applied incorrectly when custom ticks were passed but `showTicks` were false ([#6588](elastic/eui#6588)) - Fixed `fleetApp` and `agentApp` icons that were swapped ([#6590](elastic/eui#6590)) **CSS-in-JS conversions** - Converted `EuiSteps` to Emotion; Removed `$euiStepStatusColorsToFade`, `$euiStepNumberSize`, `$euiStepNumberSmallSize`, and `$euiStepNumberMargin` ([#6555](elastic/eui#6555))

Initial conversion

3dfa45d

elizabetdev added 2 commits January 30, 2023 17:56

WIP

eb56617

Align title

333dc1d

elizabetdev force-pushed the step-title-alignment branch from a4d73a5 to 333dc1d Compare January 30, 2023 18:07

Add CL

9baca6d

Add shouldRenderCustomStyles()

ff203c8

Removed unused class euiStepNumber__icon

49ebc91

Merge remote-tracking branch 'upstream/main' into step-title-alignment

f8f6e54

elizabetdev added 2 commits February 9, 2023 15:08

Reusing button bgs and colors

731e42e

Rename examples to .tsx

9957df9

Removed unused services

8cd48f3

elizabetdev marked this pull request as ready for review February 9, 2023 16:23

cee-chen reviewed Feb 10, 2023

View reviewed changes

src/components/steps/step.styles.ts Outdated Show resolved Hide resolved

src/components/steps/step.styles.ts Outdated Show resolved Hide resolved

src/components/steps/step.styles.ts Outdated Show resolved Hide resolved

elizabetdev added 5 commits February 13, 2023 12:10

Merge remote-tracking branch 'upstream/main' into step-title-alignment

e4f32b2

Fix small title padding top

8fc8eff

Avoid passing isSmall prop

ee27e51

Improve linearGradient to use variables

3376cec

Avoid passing isDisabled as a style prop

21f484d

Update changelog

06f6ab0

cee-chen added 5 commits February 13, 2023 14:14

[PR feedback] destructure euiTheme + simplify euiStepVariables

c869f25

Prefer using theme variables over static 2px width

cd9d12b

cee-chen reviewed Feb 14, 2023

View reviewed changes

src/components/tour/tour_step_indicator.tsx Show resolved Hide resolved

cee-chen added 2 commits February 13, 2023 18:21

Clean up unnecessary status vars with a map instead

7eb1ac8

+ fix missing specific titles for `danger` and `loading` statuses

[nit] grammar

8ac53e8

cee-chen reviewed Feb 14, 2023

View reviewed changes

cee-chen approved these changes Feb 14, 2023

View reviewed changes

src/components/steps/step_number.styles.ts Outdated Show resolved Hide resolved

cee-chen reviewed Feb 14, 2023

View reviewed changes

Misc docs cleanup

6fa6ce5

- remove unnecessary Fragments and divs

cee-chen reviewed Feb 14, 2023

View reviewed changes

Removed unnecessary shadow on current numbers and changed font-weight…

f2ea3c8

… to medium

elizabetdev enabled auto-merge (squash) February 14, 2023 12:53

elizabetdev merged commit 1b82dd8 into elastic:main Feb 14, 2023

cee-chen mentioned this pull request Feb 14, 2023

Upgrade EUI to v75.1.0 elastic/kibana#151200

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert `EuiSteps` #6555

[Emotion] Convert `EuiSteps` #6555

elizabetdev commented Jan 26, 2023 •

edited by cee-chen

Loading

kibanamachine commented Jan 26, 2023

kibanamachine commented Jan 30, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Feb 9, 2023

kibanamachine commented Feb 9, 2023

kibanamachine commented Feb 9, 2023

cee-chen left a comment •

edited

Loading

kibanamachine commented Feb 13, 2023

elizabetdev commented Feb 13, 2023

kibanamachine commented Feb 13, 2023

cee-chen Feb 14, 2023

cee-chen left a comment

kibanamachine commented Feb 14, 2023

cee-chen Feb 14, 2023

cee-chen Feb 14, 2023

elizabetdev Feb 14, 2023

kibanamachine commented Feb 14, 2023

elizabetdev commented Feb 14, 2023

kibanamachine commented Feb 14, 2023

[Emotion] Convert EuiSteps #6555

[Emotion] Convert EuiSteps #6555

Conversation

elizabetdev commented Jan 26, 2023 • edited by cee-chen Loading

Summary

Design enhancements

QA

General checklist

Emotion conversion checklist

kibanamachine commented Jan 26, 2023

kibanamachine commented Jan 30, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Jan 31, 2023

kibanamachine commented Feb 9, 2023

kibanamachine commented Feb 9, 2023

kibanamachine commented Feb 9, 2023

cee-chen left a comment • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Feb 13, 2023

elizabetdev commented Feb 13, 2023

kibanamachine commented Feb 13, 2023

cee-chen Feb 14, 2023

Choose a reason for hiding this comment

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 14, 2023

cee-chen Feb 14, 2023

Choose a reason for hiding this comment

cee-chen Feb 14, 2023

Choose a reason for hiding this comment

elizabetdev Feb 14, 2023

Choose a reason for hiding this comment

kibanamachine commented Feb 14, 2023

elizabetdev commented Feb 14, 2023

kibanamachine commented Feb 14, 2023

[Emotion] Convert `EuiSteps` #6555

[Emotion] Convert `EuiSteps` #6555

elizabetdev commented Jan 26, 2023 •

edited by cee-chen

Loading

cee-chen left a comment •

edited

Loading