Switch-Component

[supreethmr]

Summary

Resolves #2520

Switch component represents toggle button that indicates whether a setting is on or off and provide users with instantaneous feedback.

Deployment:
https://terra-core-deployed-pr-2846.herokuapp.com/components/terra-switch/switch/switch

Requirements:

zeplin.

Bidirectionality:

Alignment will be mirrored in rtl orientation.

Accessibility:

Component will be keyboard navigatable

• Component can be focused with tab
• Pressing enter or space on the switch component will open the dropdown and focus the first option

React Props:

Prop	Type	Default	Description
isOn	boolean	false	Indicates Whether or not the Switch is enabled ("ON")
disabled	boolean	false	If true, the user won't be able to toggle the switch.
labelText	string	''	Text of the label.
onChange	function	none	Callback fired when the switch state is changed.

[dkasper-was-taken]

Set an aria-label containing the labelText on the root button element.

[dkasper-was-taken]

Set <button> to <div>, this will resolve the focus issue with the preventDefault removed and associated css change.

[supreethmr]

Are you referring to prevent default of mouseDown Event..?

[supreethmr]

changed button to div : 22dedf6f . but we need preventDefault on both handleKeyDown and handleMouseDown to keep switch focus styles consistent in IE.

[dkasper-was-taken]

Remove prevent default on mouseDown.

[supreethmr]

I tried removing this. but if we remove focus styles starts appear for mouse interactions in IE.

[dkasper-was-taken]

Just checked, yeah you are correct, that part combined with the focus is correct. Disregard this comment.

[dkasper-was-taken]

No longer needed with associated div change.

[supreethmr]

But after removing sliderButton.current.focus(); focus styles were not getting displayed in IE.

[dkasper-was-taken]

Just checked, yeah you are correct IE 10 has issues.

[dkasper-was-taken]

Update to display: inline-flex.

[supreethmr]

updated to inline-flex

[dkasper-was-taken]

Changing the button to a div will remove the need for this pseudo selector.

[supreethmr]

removed

[dkasper-was-taken]

If isDisabled is set the following attribute should not be set on the switch:

      tabIndex="0"
      onBlur={handleOnBlur}
      onClick={handleOnClick}
      onMouseDown={handleOnMouseDown}
      onKeyDown={handleOnKeyDown}

Can instead add some dependent logic like:

  let switchAttrs;
  if (!isDisabled) {
    switchAttrs = {
      tabIndex: '0',
      onBlur: handleOnBlur,
      onClick: handleOnClick,
      onMouseDown: handleOnMouseDown,
      onKeyDown: handleOnKeyDown,
    };
  }

[supreethmr]

added attributes variable

[dkasper-was-taken]

Now that there is a single entry point for the control we can remove the individual is-disabled classes from the sub-elements and instead with child/nested selectors from the parent tray's is-disabled class.

[supreethmr]

but Since now we have changed button to div disabled is not happening as it was happening before when button was wrapped around all other controls. sub-elements do have theme variables for disabled styles like tray has theme variables for background-color, box-shadow and border styles. So removing these classes will enable focus styles of slider on TAB key press and hover styles on mouse hover, even when switch is disabled.

[dkasper-was-taken]

If focus is no longer possible with the isDisabled check in the javascript, we can remove this qualifiers for not(.is-disabled)

[supreethmr]

this we can remove only whole component was just a button but now after changing this to div we still need to prevent focus styles for disabled switch.

[dkasper-was-taken]

@supreethmr Here is a branch for reference to the proposed changes for the disabled behavior.
add-switch-component...add-switch-component-revised

There are some ways to reduce the css further, but I didn't want to mess with any of the variables.

[supreethmr]

@supreethmr Here is a branch for reference to the proposed changes for the disabled behavior.
add-switch-component...add-switch-component-revised

There are some ways to reduce the css further, but I didn't want to mess with any of the variables.

Thank you for creating branch for code changes. I have updated the PR with suggested changes : 7a753a7

With Dave's approval, I'm good with this now.

[jeremyfuksa]

I'm still good with this refactor.

[PaulSolDev]

Functional review complete. No issues identified.