Skip to content

[Eui(Dual)Range] Updated EuiRangeLevel color property to accept CSS color values #5171

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
Merged
elizabetdev merged 21 commits into from
Sep 27, 2021
Merged

[Eui(Dual)Range] Updated EuiRangeLevel color property to accept CSS color values #5171

elizabetdev merged 21 commits into from
Sep 27, 2021

Conversation

@elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Sep 13, 2021 •
edited
Loading

Summary

Closes #4467.

This PR updates the EuiRangeLevel color property to accept hex values.

levels-custom-hex-colors@2x

Ignore the levels not being positioned correctly (#5172)

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

@kibanamachine
Copy link

kibanamachine commented Sep 13, 2021

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

@kibanamachine
Copy link

kibanamachine commented Sep 13, 2021

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

@elizabetdev elizabetdev marked this pull request as ready for review September 13, 2021 15:11
thompsongl
thompsongl suggested changes Sep 13, 2021
View reviewed changes
Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

Thanks, @miukimiu!

elizabetdev and others added 3 commits September 13, 2021 17:46
@elizabetdev @thompsongl
Update src/components/form/range/range_levels.tsx
6ab6c6d 
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
@elizabetdev @thompsongl
Update src/components/form/range/range_levels.tsx
e1db17f 
Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
@elizabetdev
Adding new test
e45eb7d
@kibanamachine
Copy link

kibanamachine commented Sep 13, 2021

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

thompsongl
thompsongl previously approved these changes Sep 14, 2021
View reviewed changes
Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

Code changes LGTM!

cchaos
cchaos suggested changes Sep 14, 2021
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Thanks for tackling this one!

src/components/form/range/range_levels.tsx Outdated
);

const levelClasses = classNames('euiRangeLevel', {
'euiRangeLevel--customColor': isHexColor,
Copy link
Contributor

@cchaos cchaos Sep 14, 2021

Choose a reason for hiding this comment

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

Just thinking out loud, and definitely not necessary, but we don't allow for consumers to pass custom classes or data-test-subj to the levels at the moment. Should we do that, or should we just url-ify the custom color ones and append that instead of just customColor?

@kibanamachine
Copy link

kibanamachine commented Sep 14, 2021

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

@thompsongl thompsongl mentioned this pull request Sep 14, 2021
Merged
7 tasks
@kibanamachine
Copy link

kibanamachine commented Sep 21, 2021

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

@thompsongl thompsongl self-requested a review September 21, 2021 17:10
@kibanamachine
Copy link

kibanamachine commented Sep 21, 2021

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

@elizabetdev elizabetdev changed the title [Eui(Dual)Range] Updated EuiRangeLevel color property to accept hex values [Eui(Dual)Range] Updated EuiRangeLevel color property to accept CSS color values Sep 21, 2021
@elizabetdev elizabetdev requested a review from cchaos September 21, 2021 18:49
elizabetdev
elizabetdev commented Sep 21, 2021
View reviewed changes
@kibanamachine
Copy link

kibanamachine commented Sep 22, 2021

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

cchaos
cchaos approved these changes Sep 22, 2021
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

👍 Changes LGTM! Don't forget to rebase and update CL 😉

@kibanamachine
Copy link

kibanamachine commented Sep 22, 2021

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

@kibanamachine
Copy link

kibanamachine commented Sep 27, 2021

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

@elizabetdev elizabetdev merged commit 7996049 into elastic:master Sep 27, 2021
@breehall breehall mentioned this pull request Oct 1, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@cchaos cchaos cchaos approved these changes

@thompsongl thompsongl thompsongl approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiRange] Support custom color options

4 participants

@elizabetdev @kibanamachine @cchaos @thompsongl