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
Refactor Switch #1309
Refactor Switch #1309
Conversation
- Input has display: none - Removed animations - removed variable hasLabel - We can change the state by clicking in the gap between label and switch.
Because the outline can overlap with other components, I added a margin of 12px to the sides of the switch. Chromatic tests are going to fail because of this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some comments:
- I see a lot this piece of code:
if (typeof onChange === "function") {
onChange(isChecked);
}
We now do not have the need of checking the type since typescript does that for us. We can refactor this code by simply: onChange?.(isChecked);
. What do you think?
- In the onChange handler
handlerSwitchChange
we use the event.target.value, which can only be true or false, why do we check it with ?? operator? Also, the expressionchecked === undefined
only checkundefined
value, but notnull
(which is very common). My suggest here is:
const handlerSwitchChange = (event) => {
checked ?? setInnerChecked(event.target.checked);
onChange?.(checked ?? event.target.checked);
};
Edited |
Yes, you are right. My solution was for a handler in a |
Refactored some details: