Refactor Switch

[aidamag]

Refactored some details:

• Input has now display: none and fixed aria labels.
• Removed animations.
• Removed variable hasLabel.
• We can change the state by clicking in the gap between label and switch.
• Fixed tests for the changes of the input.

[aidamag]

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.

[GomezIvann]

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 expression checked === undefined only check undefined value, but not null (which is very common). My suggest here is:

const handlerSwitchChange = (event) => {
   checked ?? setInnerChecked(event.target.checked);
   onChange?.(checked ?? event.target.checked);
};

[aidamag]

• Removed type checking for onChange function.
• About the handlerSwitchChange, we need to check innerChecked for the uncontrolled. With your solution, uncontrolled doesn't work. Removed event.target.checked because it was always undefined.

Edited
I had to put again the event.target.checked in handlerSwitchChange because it is needed for the uncontrolled too.

[GomezIvann]

• Removed type checking for onChange function.
• About the handlerSwitchChange, we need to check innerChecked for the uncontrolled. With your solution, uncontrolled doesn't work. Removed event.target.checked because it was always undefined.

Yes, you are right. My solution was for a handler in a <input type="checkbox" />, and in this case, it is on a <div>, which of course doesn't have a checked property.