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

[Component] Radio Button #779

Open
nshki opened this Issue Jan 9, 2018 · 17 comments

Comments

Projects
3 participants
@nshki
Member

nshki commented Jan 9, 2018

Overview

We are looking for an awesome human to build this out as a React component, preferably within Storybook. You can view and get details (colors, dimensions, export SVGs, etc.) by visiting the Figma designs and creating a free account.

This is part of the app redesign (#691).

Screenshot from the Figma document:

screenshot 2018-01-09 at 6 18 41 pm

@nshki nshki added the design label Jan 9, 2018

@nshki nshki added this to TODO in UX/UI Enhancements via automation Jan 9, 2018

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Feb 13, 2018

I'd like to work on this issue!

@nshki

This comment has been minimized.

Member

nshki commented Feb 13, 2018

Take it away @aSquare14! :)

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Feb 17, 2018

What symbol should come up in checkbox after clicking? Also is the checkboxradio a button or input?

@nshki

This comment has been minimized.

Member

nshki commented Feb 18, 2018

@aSquare14 It's a custom shape, as shown in the mockups and the screenshot posted above!

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Feb 18, 2018

Okay ! I wanted to be sure, when I click on it, should it change state and a get filled up. And on clicking again should it be restored to original? Does it have state ?

@nshki

This comment has been minimized.

Member

nshki commented Feb 18, 2018

@aSquare14 You should be able to do it using a standard <input type="checkbox">! You can hide the actual input and have neighboring elements change visually using sibling selectors in your styles.

e.g.

/* ... */

.checkbox__input {
  display: none;
}

.checkbox__input:checked + .checkbox__mark {
  /* ... */
  display: block;
}
@aSquare14

This comment has been minimized.

Member

aSquare14 commented Feb 18, 2018

Thanks ! Will work on it ! Pretty helpful.

@aSquare14 aSquare14 self-assigned this Feb 27, 2018

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Mar 5, 2018

One Question ! When I click on it, what should pop up on the radiobutton ? A tick or it should look like CheckBoxRadioChecked?

@nshki

This comment has been minimized.

Member

nshki commented Mar 5, 2018

@aSquare14 It should look like CheckBoxRadioChecked you're exactly right.

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Mar 6, 2018

Hey ! Radiobuttons and Checkboxes are different! You asked me to use a checkbox but issue is named radiobutton ! Which one should I use ?
also I got the basic thing working !

@nshki

This comment has been minimized.

Member

nshki commented Mar 6, 2018

@aSquare14 It should look like the CheckBoxRadio mocks! Please see the original screenshot as well if you aren't sure which component you should be building for this issue.

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Mar 6, 2018

#780
Since the above is a checkbox , I think this issue requires a radio-button ! Hence, will have to use a <input type="radio"> .

@nshki

This comment has been minimized.

Member

nshki commented Mar 6, 2018

@aSquare14 Ah you know what, now that I go back and look at the Figma documents, I definitely made this unclear. If you could, would you be able to have the component generate both a checkbox and radio based on a prop that gets passed?

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Mar 6, 2018

Yes , I can do that ! On it !

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Mar 15, 2018

@nshki Code is getting messy if I try to have the component generate both a checkbox and radio based on a prop that gets passed. Can I create two components in this PR ?

  1. Radiobutton
  2. Simple Checkbox
    Because I have to use different logic for both of them. Radio is mutually exclusive while user can select as many checkboxes he/she wants.
@nshki

This comment has been minimized.

Member

nshki commented Mar 15, 2018

Yep, that sounds good to me!

@aSquare14 aSquare14 added this to To-Do ReactJs in RSGOC 2018: Team Rubies Jul 2, 2018

@aSquare14 aSquare14 moved this from To-Do ReactJs to In Progress in RSGOC 2018: Team Rubies Jul 3, 2018

@aSquare14

This comment has been minimized.

Member

aSquare14 commented Jul 3, 2018

I have restarted working on it !

@aSquare14 aSquare14 referenced this issue Jul 4, 2018

Closed

Radiobutton #911

@aSquare14 aSquare14 moved this from In Progress to To Review in RSGOC 2018: Team Rubies Sep 6, 2018

@aSquare14 aSquare14 moved this from To Review to Discussion Needed in RSGOC 2018: Team Rubies Sep 15, 2018

@julianguyen julianguyen moved this from Discussion Needed to To Do in RSGOC 2018: Team Rubies Oct 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment