Checkbox Component with Tailwind #654
Conversation
|
Hey @LoTerence , thanks for reviewing my PR, which I'm not very confident about. My understanding of how a checkbox is focused seems different from the SASS styles in the existing Checkbox component. I see a transition and duration in the SASS code, but Tailwind's peer-focus seems to apply the styles as long as the input is focused. What's correct? |
|
Hey Bitian, I understand your confusion. Its a pretty complex component now that I'm looking at it.
Its not that one is "correct" and the other is "incorrect". They are simply two different approaches of applying the highlight effect style. The difference is in the behavior. I would like to imitate the behavior of the previous component as much as possible. So the style shouldnt be applied only when the input is focused. Before, it looks like the style was applied when the checkbox is hovered over. We should try to implement it this way as well. Let me do the Checkbox component. I am going to totally redo it, so its going to be pretty different from Avas version. I will make a new branch off this branch to work off of, and close this PR. |
|
Wait a second, I just saw the figma, there is no hover state in Rishi's version of the Checkbox. Is this what you were asking about? Because that changes the behavior of the checkbox entirely. Could you follow up with Rishi and clarify with him about how the Checkbox is supposed to behave? Your version in tailwind-demo might actually be more correct. Sorry about the confusion. |
|
Tagging issue #583 |
|
@LoTerence Thanks for tagging the issue! Regarding the step "once the component is fully tested and verified working, remove the .scss file associated with that component and refactor away any old code", should I do this now or should that be done after this PR has been reviewed and merged in? |
|
Hey @bzzz-coding If you could do it now to knock out two birds with one stone, that would be good. If you want to open a new PR for that part, we can do that too. Check out Benny's PR #663 for an example of fully converting a component from scss to tailwind - it removes the scss and refactors away old code too. |
|
@LoTerence Thanks for reviewing my PR and providing feedback! I'll make the changes today. |
Co-authored-by: Terence Lo <[email protected]>
Co-authored-by: Terence Lo <[email protected]>
Co-authored-by: Terence Lo <[email protected]>
* update qualifier page 1 - aligned qualifier nav - use grid system instead of flex box for items * Refactor: update button styles for primary-dark theme * Feat: add ProgressIndicator component and integrate it into QualifierPage2 * Refactor: update border style in QualifierNav component * Refactor: dynamic grid layout in QualifierPage1 for responsive design * Feat: enhance RadioButtonForm to support skill selection callback * Feat: update RadioButtonForm dynamically render skill & experience levels * Add selectCOP and experience levels props to qualifiers * Feat: use context in QualiferPage2 to keep track of chosen experience level * Feat: integrate qualifiers context to manage selected COP in QualifierPage1 * Feat: refactor QualifierPage2 layout and improve skill selection handling * Refactor: - renamed experienceLevels to skills_matrix - refactored to use tw-components/Buttons.tsx & added second style - Ran npm run lint in frontend directory * update tech stack * feat: use new tw-button variant, fix merge --------- Co-authored-by: Terence Lo <[email protected]>
Changes
Screenshots, if applicable
Screenshot