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

[EuiTour] Style and a11y fixes #5225

Merged
merged 6 commits into from
Sep 30, 2021
Merged

[EuiTour] Style and a11y fixes #5225

merged 6 commits into from
Sep 30, 2021

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented Sep 29, 2021

Closes #5112 and closes #4843

Made subtitle optional

I ran into this where I wanted to use the EuiTour component more to indicate to users changes in the UI, so it wasn't more than a single step. Requiring two titles and body content was quite excessive. So I just made subtitle optional.

Fixed the footer background from extending beyond the popover bounds

Before
Screen Shot 2021-09-29 at 17 10 35 PM

After
Screen Shot 2021-09-29 at 17 10 26 PM

🔔 [Breaking] Changed how minWidth was applied and added maxWidth

Before, it was accepting a boolean, number or string and doing some className workarounds for the default of true. I noticed that this wasn't actually working (the default minWidth class was never getting applied) and so I just changed the type to CSSProperties['minWidth'] set the default to 300 and passed it along to panelStyle.

I also then added a similar thing for maxWidth.

Lowered the heading levels

They started at <h1>, but as per the guidance in #4843 , they should start at h2.

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

cchaos added 4 commits September 29, 2021 16:47
And instead maps directly to `CSSProperties[‘minWidth’]` and applies it directly to `panelStyle`.

Also adds `maxWidth` option.
@kibanamachine
Copy link

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

Copy link
Contributor

@miukimiu miukimiu left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉
+1 for making the subtitle optional. Tested locally in Chrome, Safari, Edge, and Firefox.

All the tests snapshots don't look good to me. Even old ones like EuiTourStep can be closed. I added some suggestions to fix the new tests that you added but I'm not a specialist. So maybe @thompsongl can take a look.

src/components/tour/tour_step.test.tsx Outdated Show resolved Hide resolved
src/components/tour/tour_step.test.tsx Outdated Show resolved Hide resolved
src/components/tour/tour_step.test.tsx Show resolved Hide resolved
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.

Thank you @cchaos! One question and one suggested change.

src/components/tour/tour_step.tsx Outdated Show resolved Hide resolved
src/components/tour/tour_step.tsx Outdated Show resolved Hide resolved
@kibanamachine
Copy link

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

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!

@cchaos cchaos merged commit e1a74cc into elastic:master Sep 30, 2021
@cchaos cchaos deleted the update/tour branch September 30, 2021 20:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiTour] Styling issues [EuiTourStep] Subtitle shouldn't be a h1
5 participants