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

Feat/numeric array filter sliders #114

Open
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

jarvisraymond-uchicago
Copy link

@jarvisraymond-uchicago jarvisraymond-uchicago commented Oct 14, 2022

Jira Ticket: MIDRC-5

New Features

This implements the front end design change for the range slider.

  • This includes an optional 'show total' prop that when passed, shows a total value calculated by subtracting the slider's lower bound value from the upper bound value
  • When the show total prop is not passed, the layout is similar to the previous design, with the min and max inputs aligned on the left and right of the slider
  • The new design includes numeric labels for the range slider, showing the maximum and minimum aligned on the left and right of the slider, in addition to color and sizing changes.
  • Development was done using story book only

Breaking Changes

This is a redesign of the component and would impact anywhere the component is currently used

BEFORE

Screen Shot 2022-10-14 at 2 50 06 PM

Design

https://xd.adobe.com/view/5ae05be7-d368-453f-8221-744abe876dfc-0fb3/screen/41843760-83e5-4bc9-a5c2-e16a7c9f3f36/
Screen Shot 2022-10-14 at 2 40 24 PM

AFTER

Screen Shot 2022-10-14 at 4 00 33 PM

output

@jarvisraymond-uchicago jarvisraymond-uchicago marked this pull request as ready for review October 24, 2022 20:22
Copy link
Contributor

@ocshawn ocshawn left a comment

Choose a reason for hiding this comment

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

just need some text contrast changes otherwise looks good

@@ -15,19 +15,23 @@
flex-wrap: wrap;
justify-content: space-between;
margin: 14px 0;
color: var(--g3-color__base-blue);
Copy link
Contributor

Choose a reason for hiding this comment

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

does not meet accessibility guidelines for contrast, need a darker color


.g3-range-filter__total {
background: var(--g3-color__silver);
color: var(--g3-color__base-blue);
Copy link
Contributor

Choose a reason for hiding this comment

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

does not meet accessibility guidelines for contrast

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants