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.

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

[EuiStepsHorizontal] Create size prop to generate smaller step circles for horizontal steps #6928

Merged
merged 8 commits into from
Jul 11, 2023
Merged

[EuiStepsHorizontal] Create size prop to generate smaller step circles for horizontal steps #6928

merged 8 commits into from
Jul 11, 2023

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Jul 10, 2023 •
edited
Loading

Fixes #6850

Summary

Creates the new size prop for EuiStepsHorizontal. This prop accepts s and m (small and medium) as values and defaults to m. s will produce a smaller circle around each step.

Horizontal steps size toggle

QA

  • Visit the Horizontal Steps page in staging and use the button group to change the step size from medium (default) to small.
    • There should be no changes to the text size, just the circle surrounding the step number / status

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
  • 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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

breehall
breehall commented Jul 11, 2023
View reviewed changes
src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -58,7 +112,7 @@ exports[`EuiStepHorizontal props status current is rendered 1`] = `
title="Current step is 1"
>
<span
class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-s-current-euiStepHorizontal__number"
class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-m-current-euiStepHorizontal__number"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change from s to m happens through out the EuiStepHorizontal tests and it's expected.

EuiStepHorizontal uses the EuiStepNumber component and before this PR, the titleSize prop was not being passed. That means the default size of s was being used and now that it's been updated to match the new size prop, m is being passed to EuiStepNumber.

@breehall breehall marked this pull request as ready for review July 11, 2023 15:31
@breehall breehall requested review from a team and ryankeairns July 11, 2023 15:32
@kibanamachine
Copy link

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

ryankeairns
ryankeairns approved these changes Jul 11, 2023
View reviewed changes
Copy link
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

Design looks good, tested in a few browsers and viewport sizes.
Thanks Bree!

1Copenut
1Copenut approved these changes Jul 11, 2023
View reviewed changes
Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

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

👍 LGTM!

@cee-chen
Copy link
Member

Really nice work on this Bree, it feels super elegant! I have a few minor code cleanup suggestions, but otherwise everything from the docs to the tests feel great!

cee-chen
cee-chen approved these changes Jul 11, 2023
View reviewed changes
Copy link
Member

@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.

Changes look great! :shipit:

@kibanamachine
Copy link

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

@breehall breehall merged commit 264892f into elastic:main Jul 11, 2023
@tkajtoch tkajtoch mentioned this pull request Jul 19, 2023
Merged
Ikuni17 pushed a commit to elastic/kibana that referenced this pull request Jul 27, 2023
@tkajtoch @cee-chen @kibanamachine
Upgrade @elastic/eui to 85.0.1 (#162209)
1c42ee9 
## Summary

`[email protected]` ⏩ `[email protected]`

## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1)

**Bug fixes**

- Fixed `EuiFilterGroup`'s responsive styles
([#6983](elastic/eui#6983))

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

- Updated `EuiThemeProvider` to set an Emotion theme context that
returns the values of `useEuiTheme()`
([#6913](elastic/eui#6913))
- Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous
size of `m` ([#6928](elastic/eui#6928))
- Added new `s` sizing to `EuiStepsHorizontal`
([#6928](elastic/eui#6928))
- Added `at` and `key` icon glyphs.
([#6934](elastic/eui#6934))
- Added a new `cloneElementWithCss` Emotion utility
([#6939](elastic/eui#6939))
- Updated `EuiPopover` to allow consumer control of all `focusTrapProps`
([#6955](elastic/eui#6955))

**Bug fixes**

- Fixed `EuiDataGrid` height calculation bug when browser zoom levels
are not 100% ([#6895](elastic/eui#6895))
- Fixed `EuiTab` not correctly passing selection color state to
`prepend` and `append` children
([#6938](elastic/eui#6938))
- Fixed `EuiInputPopover` to allow consumer control of its focus trap
via `focusTrapProps` ([#6955](elastic/eui#6955))

**Breaking changes**

- `EuiProvider` will no longer render multiple or duplicate nested
instances of itself. If a nested `EuiProvider` is detected, that
instance will return early without further processing, and will warn if
configured to do so via `setEuiDevProviderWarning`. For nested theming,
use `EuiThemeProvider` instead.
([#6949](elastic/eui#6949))
- Removed `onTrapDeactivation` prop from `EuiPopover`. Use
`focusTrapProps.onDeactivation` instead
([#6955](elastic/eui#6955))

**CSS-in-JS conversions**

- Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed
styles attached to `.euiFilterGroup__popoverPanel`
([#6957](elastic/eui#6957))

---------

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
ThomThomson pushed a commit to ThomThomson/kibana that referenced this pull request Aug 1, 2023
@tkajtoch @cee-chen @kibanamachine
Upgrade @elastic/eui to 85.0.1 (elastic#162209)
5f2e2ba 
## Summary

`[email protected]` ⏩ `[email protected]`

## [`85.0.1`](https://github.com/elastic/eui/tree/v85.0.1)

**Bug fixes**

- Fixed `EuiFilterGroup`'s responsive styles
([elastic#6983](elastic/eui#6983))

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

- Updated `EuiThemeProvider` to set an Emotion theme context that
returns the values of `useEuiTheme()`
([elastic#6913](elastic/eui#6913))
- Added `size` prop to `EuiStepsHorizontal`, defaulting to the previous
size of `m` ([elastic#6928](elastic/eui#6928))
- Added new `s` sizing to `EuiStepsHorizontal`
([elastic#6928](elastic/eui#6928))
- Added `at` and `key` icon glyphs.
([elastic#6934](elastic/eui#6934))
- Added a new `cloneElementWithCss` Emotion utility
([elastic#6939](elastic/eui#6939))
- Updated `EuiPopover` to allow consumer control of all `focusTrapProps`
([elastic#6955](elastic/eui#6955))

**Bug fixes**

- Fixed `EuiDataGrid` height calculation bug when browser zoom levels
are not 100% ([elastic#6895](elastic/eui#6895))
- Fixed `EuiTab` not correctly passing selection color state to
`prepend` and `append` children
([elastic#6938](elastic/eui#6938))
- Fixed `EuiInputPopover` to allow consumer control of its focus trap
via `focusTrapProps` ([elastic#6955](elastic/eui#6955))

**Breaking changes**

- `EuiProvider` will no longer render multiple or duplicate nested
instances of itself. If a nested `EuiProvider` is detected, that
instance will return early without further processing, and will warn if
configured to do so via `setEuiDevProviderWarning`. For nested theming,
use `EuiThemeProvider` instead.
([elastic#6949](elastic/eui#6949))
- Removed `onTrapDeactivation` prop from `EuiPopover`. Use
`focusTrapProps.onDeactivation` instead
([elastic#6955](elastic/eui#6955))

**CSS-in-JS conversions**

- Converted `EuiFilterGroup` and `EuiFilterButton` to Emotion; Removed
styles attached to `.euiFilterGroup__popoverPanel`
([elastic#6957](elastic/eui#6957))

---------

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
@breehall breehall deleted the feature/horizontal-step-small branch October 6, 2023 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@1Copenut 1Copenut 1Copenut approved these changes

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

@ryankeairns ryankeairns ryankeairns approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Steps] Small-sized horizontal steps
5 participants
@breehall @kibanamachine @cee-chen @ryankeairns @1Copenut