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

Feature/switch component #266

Merged
merged 45 commits into from
Sep 19, 2019
Merged

Feature/switch component #266

merged 45 commits into from
Sep 19, 2019

Conversation

m7kvqbe1
Copy link
Member

@m7kvqbe1 m7kvqbe1 commented Sep 9, 2019

Related issue

#194

Overview

Implement and document the responsive Switch component.

Reason

The switch component is a form component used to record a selection from a number of values. With regards to behaviour, a switch can be thought of like a radio field, allowing a single choice from a small number of options. The different between a switch and radio is presentation, a switch looks similar to a button group.

Work carried out

  • Implement the base Switch functionality
  • Add ResponsiveSwitch wrapper component
  • Style the base component
  • Create adapter for Formik compatibility
  • Add automated tests
  • Add developer documentation
  • Perform UAT down to Chrome 38 (and across multiple devices)
  • Re-organise the exports for Formik enhanced components
  • Add design documentation
  • Finish implementing responsive behaviour

Screenshot

2019-09-09 21 59 18

Developer notes

  • Using the CSS framework color() helper I seem to be unable to pick the same background.
  • Awaiting <Select /> implementation in order to finish adding responsive behaviour @mobile.

@m7kvqbe1 m7kvqbe1 self-assigned this Sep 9, 2019
@m7kvqbe1 m7kvqbe1 mentioned this pull request Sep 9, 2019
@m7kvqbe1 m7kvqbe1 changed the title WIP: Feature/switch component Feature/switch component [WIP] Sep 9, 2019
@m7kvqbe1
Copy link
Member Author

m7kvqbe1 commented Sep 9, 2019

The GIF preview makes the background look lighter than it is - using color(neutral, 0).

@m7kvqbe1 m7kvqbe1 marked this pull request as ready for review September 12, 2019 10:59
@m7kvqbe1 m7kvqbe1 changed the title Feature/switch component [WIP] Feature/switch component Sep 12, 2019
@hxltrhuxze
Copy link
Contributor

hxltrhuxze commented Sep 13, 2019

I think I'm gonna have to retweak the active state of the switch ever so slightly. Just realised it's re-rendering itself when the text goes bold, meaning it can potentially throw off other components that are situated next to it.

Maybe just darkening the text with no bold might be ok visually

Copy link
Contributor

@antictor antictor left a comment

Choose a reason for hiding this comment

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

Only comment is the switches moving around a little when selected

@m7kvqbe1
Copy link
Member Author

Only comment is the switches moving around a little when selected

The gif is slightly out of date - designer has resolved this with a slight style tweak.

@m7kvqbe1 m7kvqbe1 merged commit 5e991fa into develop Sep 19, 2019
@m7kvqbe1 m7kvqbe1 deleted the feature/switch-component branch September 19, 2019 13:44
@m7kvqbe1 m7kvqbe1 mentioned this pull request Sep 19, 2019
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.

None yet

3 participants