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

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

Merged
merged 21 commits into from
Sep 27, 2021
Merged

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

merged 21 commits into from
Sep 27, 2021

Conversation

miukimiu
Copy link
Contributor

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

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

@kibanamachine
Copy link

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

@miukimiu miukimiu 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!

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

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-docs/src/views/range/levels.js Outdated Show resolved Hide resolved
src/components/form/range/range_levels.tsx Outdated Show resolved Hide resolved
src/components/form/range/range_levels.tsx Outdated
);

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

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

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

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

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

@miukimiu miukimiu 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
@kibanamachine
Copy link

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

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

@kibanamachine
Copy link

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

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

@thompsongl thompsongl thompsongl approved these changes

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

[EuiRange] Support custom color options
4 participants
@miukimiu @kibanamachine @cchaos @thompsongl