Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
code revie w comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@supreethmr
supreethmr committed Jul 3, 2020
1 parent 0645856 commit 7a753a7
Show file tree
Hide file tree
Showing 27 changed files with 152 additions and 176 deletions.
51 changes: 14 additions & 37 deletions packages/terra-switch/src/Switch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import classNamesBind from 'classnames/bind';
import ThemeContext from 'terra-theme-context';
import { FormattedMessage } from 'react-intl';
import { KEY_SPACE, KEY_RETURN } from 'keycode-js';
import { enableFocusStyles, removeFocusStyles, restoreFocusStyles } from './_SwitchUtils';
import { removeFocusStyles, restoreFocusStyles } from './_SwitchUtils';
import styles from './Switch.module.scss';

const cx = classNamesBind.bind(styles);
Expand All @@ -16,10 +16,6 @@ const SWITCH_STATE = Object.freeze({
});

const propTypes = {
/**
* Id of the Switch button.
*/
switchId: PropTypes.string.isRequired,
/**
* Whether or not the Switch is checked ("ON").
*/
Expand Down Expand Up @@ -47,7 +43,6 @@ const defaultProps = {

const Switch = (props) => {
const {
switchId,
isChecked,
isDisabled,
onChange,
Expand All @@ -68,7 +63,7 @@ const Switch = (props) => {
const handleOnKeyDown = (event) => {
if (event.nativeEvent.keyCode === KEY_RETURN || event.nativeEvent.keyCode === KEY_SPACE) {
event.preventDefault();
enableFocusStyles(sliderButton.current);
restoreFocusStyles(sliderButton.current);
if (onChange) {
onChange(!isChecked, event);
}
Expand All @@ -84,38 +79,17 @@ const Switch = (props) => {
restoreFocusStyles(sliderButton.current);
};

const labelClassNames = cx([
'label-text',
{ 'is-disabled': isDisabled },
]);

const statusLabelClassNames = cx([
'status-label-text',
{ 'is-disabled': isDisabled },
]);

const trayClassNames = cx([
'tray',
{ 'is-selected': isChecked },
{ 'is-disabled': isDisabled },
]);

const sliderClassNames = cx([
'slider',
{ 'is-selected': isChecked },
{ 'is-disabled': isDisabled },
]);

const statusLabelText = isChecked ? SWITCH_STATE.ON : SWITCH_STATE.OFF;

const switchClassNames = classNames(cx(
'switch',
{ 'is-enabled': !isDisabled },
{ 'is-disabled': isDisabled },
{ 'is-selected': isChecked },
theme.className,
),
customProps.className);

delete customProps.className;
let switchAttrs;
if (!isDisabled) {
switchAttrs = {
Expand All @@ -125,26 +99,29 @@ const Switch = (props) => {
onMouseDown: handleOnMouseDown,
onKeyDown: handleOnKeyDown,
};
} else {
switchAttrs = {
'aria-disabled': true,
};
}

return (
<div
{...customProps}
{...switchAttrs}
id={switchId}
disabled={isDisabled}
aria-label={labelText}
aria-checked={isChecked}
role="switch"
className={switchClassNames}
data-terra-switch-show-focus-styles
ref={sliderButton}
>
<div className={cx('label-container')}>
<div className={labelClassNames}>{labelText}</div>
<div className={statusLabelClassNames}>{statusLabelText}</div>
<div aria-hidden className={cx('label-container')}>
<div className={cx('label-text')}>{labelText}</div>
<div className={cx('status-label-text')}>{statusLabelText}</div>
</div>
<div className={trayClassNames}>
<div className={sliderClassNames} />
<div aria-hidden className={cx('tray')}>
<div className={cx('slider')} />
</div>
</div>
);
Expand Down
227 changes: 116 additions & 111 deletions packages/terra-switch/src/Switch.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,71 +4,16 @@

:local {
.switch {
border: 0;
cursor: default;
display: inline-flex;
flex-direction: row;

&:hover {
.slider:not(.is-disabled) {
background-color: var(--terra-switch-slider-hover-background-color, #fff);
border: var(--terra-switch-slider-hover-border, 0);
box-shadow: var(--terra-switch-slider-hover-box-shadow, 2px 0 2px 0 rgba(0, 0, 0, 0.2), -2px 0 2px 0 rgba(0, 0, 0, 0.2),
1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.2));
}

.slider.is-selected:not(.is-disabled) {
background-color: var(--terra-switch-slider-selected-hover-background-color, #fff);
border: var(--terra-switch-slider-selected-hover-border, 0);
box-shadow: var(--terra-switch-slider-selected-hover-box-shadow, 2px 0 2px 0 rgba(0, 0, 0, 0.2), -2px 0 2px 0 rgba(0, 0, 0, 0.2),
-1px 0 0 0 #01639e, 0 0 4px 1px rgba(0, 0, 0, 0.2));
}
}

&:active {
.slider:not(.is-disabled) {
background-color: var(--terra-switch-slider-active-background-color, #fff);
border: var(--terra-switch-slider-active-border, 0);
box-shadow: var(--terra-switch-slider-active-box-shadow, inset 0 0 0 1px #fff, inset 5px 2px 4px 2px #e6e7e8, 2px 0 2px 0 rgba(0, 0, 0, 0.2),
-2px 0 2px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.2)); // pressed state.
}

.slider.is-selected:not(.is-disabled) {
background-color: var(--terra-switch-slider-selected-active-background-color, #fff);
border: var(--terra-switch-slider-selected-active-border, 0);
box-shadow: var(--terra-switch-slider-selected-active-box-shadow, inset 0 0 0 1px #fff, inset 5px 2px 4px 2px #e6e7e8, 2px 0 2px 0 rgba(0, 0, 0, 0.2),
-2px 0 2px 0 rgba(0, 0, 0, 0.2), -1px 0 0 0 #01639e, 0 0 4px 1px rgba(0, 0, 0, 0.2)); // pressed state.
}
}

&:focus {
border: 0;
outline: 0;

&[data-terra-switch-show-focus-styles='true'] .slider:not(.is-disabled) {
background-color: var(--terra-switch-slider-focus-background-color, #fff);
border: var(--terra-switch-slider-focus-border, 0);
box-shadow: var(--terra-switch-slider-focus-box-shadow, 1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.3));
outline: var(--terra-switch-slider-focus-outline, 2px dashed #000);
outline-offset: var(--terra-switch-slider-focus-outline-offset, 2px);
}

&[data-terra-switch-show-focus-styles='true'] .slider.is-selected:not(.is-disabled) {
background-color: var(--terra-switch-slider-selected-focus-background-color, #fff);
border: var(--terra-switch-slider-selected-focus-border, 0);
}
}

&:not(.is-disabled) {
cursor: pointer;
}
outline: 0;
}

.label-container {
flex: 0 1 auto;
margin-right: var(--terra-switch-label-margin-right, 1.42857rem);

.is-disabled {
cursor: default;
}
}

.label-text {
Expand All @@ -87,31 +32,6 @@
text-align: left;
}

.tray.is-selected {
background-color: var(--terra-switch-tray-selected-background-color, #0079be);
border: var(--terra-switch-tray-selected-border, 1px solid #01639e);
box-shadow: var(--terra-switch-tray-selected-box-shadow, none);

&.is-disabled {
background-color: var(--terra-switch-tray-selected-disabled-background-color, #434a4d);
border: var(--terra-switch-tray-selected-disabled-border, 1px solid #434a4d);
box-shadow: var(--terra-switch-tray-selected-disabled-box-shadow, none);
opacity: var(--terra-switch-tray-selected-disabled-opacity, 0.3);
}

&:hover:not(.is-disabled) {
background-color: var(--terra-switch-tray-selected-hover-background-color, #0065a3);
border: var(--terra-switch-tray-selected-hover-border, 1px solid #01639e);
box-shadow: var(--terra-switch-tray-selected-hover-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.4));
}

&:active:not(.is-disabled) {
background-color: var(--terra-switch-tray-selected-active-background-color, #0065a3);
border: var(--terra-switch-tray-selected-active-border, 1px solid #004164);
box-shadow: var(--terra-switch-tray-selected-active-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.4));
}
}

.tray {
background-color: var(--terra-switch-tray-default-background-color, #dedfe0);
border: var(--terra-switch-tray-border, 1px solid #909496);
Expand All @@ -121,26 +41,11 @@
height: var(--terra-switch-tray-height, 1.57142rem);
left: 0;
margin: var(--terra-switch-tray-margin, 0.5rem);
outline: 0;
position: relative;
right: 0;
top: 0;
transition: transform var(--terra-switch-tray-transition, 0.2s) cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: var(--terra-switch-tray-width, 2.42857rem);

&.is-disabled {
background-color: var(--terra-switch-tray-default-disabled-background-color, #d3d4d5);
border: var(--terra-switch-tray-default-disabled-border, 1px solid #434a4d);
box-shadow: var(--terra-switch-tray-default-disabled-box-shadow, none);
cursor: default;
opacity: var(--terra-switch-tray-default-disabled-opacity, 0.3);
}

&:hover:not(.is-disabled) {
background-color: var(--terra-switch-tray-default-hover-background-color, #b9bbbc);
border: var(--terra-switch-tray-default-hover-border, 1px solid #909496);
box-shadow: var(--terra-switch-tray-default-hover-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.3));
}
}

.slider {
Expand All @@ -150,30 +55,130 @@
box-shadow: var(--terra-switch-slider-box-shadow, 1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.3));
height: var(--terra-switch-slider-height, 1.357142rem);
left: var(--terra-switch-slider-left, 0.06rem);
outline: 0;
overflow: hidden;
position: absolute;
top: var(--terra-switch-slider-top, 0);
transition: transform var(--terra-switch-slider-transition, 0.2s) cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: var(--terra-switch-slider-width, 1.357142rem);
}

&.is-disabled {
background-color: var(--terra-switch-slider-disabled-background-color, #fff);
box-shadow: var(--terra-switch-slider-disabled-box-shadow, 0 0 0 1.5px #64696c);
cursor: default;
opacity: var(--terra-switch-slider-disabled-opacity, 0.8);
.is-selected {
.tray {
background-color: var(--terra-switch-tray-selected-background-color, #0079be);
border: var(--terra-switch-tray-selected-border, 1px solid #01639e);
box-shadow: var(--terra-switch-tray-selected-box-shadow, none);
}

&.is-selected {
.slider {
background-color: var(--terra-switch-slider-selected-background-color, #fff);
box-shadow: var(--terra-switch-slider-selected-box-shadow, 0 0 4px 1px rgba(0, 0, 0, 0.3), -1px 0 0 0 #01639e);
transform: var(--terra-switch-slider-selected-transform, translateX(0.8rem));

&.is-disabled {
background-color: var(--terra-switch-slider-selected-disabled-background-color, #fff);
box-shadow: var(--terra-switch-slider-selected-disabled-box-shadow, none);
cursor: default;
opacity: var(--terra-switch-slider-selected-disabled-opacity, 0.8);
}
}

.is-disabled {
.tray {
background-color: var(--terra-switch-tray-default-disabled-background-color, #d3d4d5);
border: var(--terra-switch-tray-default-disabled-border, 1px solid #434a4d);
box-shadow: var(--terra-switch-tray-default-disabled-box-shadow, none);
opacity: var(--terra-switch-tray-default-disabled-opacity, 0.3);
}

.slider {
background-color: var(--terra-switch-slider-disabled-background-color, #fff);
box-shadow: var(--terra-switch-slider-disabled-box-shadow, 0 0 0 1.5px #64696c);
opacity: var(--terra-switch-slider-disabled-opacity, 0.8);
}
}

.is-disabled.is-selected {
.tray {
background-color: var(--terra-switch-tray-selected-disabled-background-color, #434a4d);
border: var(--terra-switch-tray-selected-disabled-border, 1px solid #434a4d);
box-shadow: var(--terra-switch-tray-selected-disabled-box-shadow, none);
opacity: var(--terra-switch-tray-selected-disabled-opacity, 0.3);
}

.slider {
background-color: var(--terra-switch-slider-selected-disabled-background-color, #fff);
box-shadow: var(--terra-switch-slider-selected-disabled-box-shadow, none);
opacity: var(--terra-switch-slider-selected-disabled-opacity, 0.8);
}
}

.is-enabled {
cursor: pointer;

&:hover {
.slider {
background-color: var(--terra-switch-slider-hover-background-color, #fff);
border: var(--terra-switch-slider-hover-border, 0);
box-shadow: var(--terra-switch-slider-hover-box-shadow, 2px 0 2px 0 rgba(0, 0, 0, 0.2), -2px 0 2px 0 rgba(0, 0, 0, 0.2),
1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.2));
}

.tray {
background-color: var(--terra-switch-tray-default-hover-background-color, #b9bbbc);
border: var(--terra-switch-tray-default-hover-border, 1px solid #909496);
box-shadow: var(--terra-switch-tray-default-hover-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.3));
}
}

&:active {
.slider {
background-color: var(--terra-switch-slider-active-background-color, #fff);
border: var(--terra-switch-slider-active-border, 0);
box-shadow: var(--terra-switch-slider-active-box-shadow, inset 0 0 0 1px #fff, inset 5px 2px 4px 2px #e6e7e8, 2px 0 2px 0 rgba(0, 0, 0, 0.2),
-2px 0 2px 0 rgba(0, 0, 0, 0.2), 1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.2)); // pressed state.
}
}

&[data-terra-switch-show-focus-styles='true']:focus {
.slider {
background-color: var(--terra-switch-slider-focus-background-color, #fff);
border: var(--terra-switch-slider-focus-border, 0);
box-shadow: var(--terra-switch-slider-focus-box-shadow, 1px 0 0 0 #909496, 0 0 4px 1px rgba(0, 0, 0, 0.3));
outline: var(--terra-switch-slider-focus-outline, 2px dashed #000);
outline-offset: var(--terra-switch-slider-focus-outline-offset, 2px);
}
}
}

.is-enabled.is-selected {
&:hover {
.slider {
background-color: var(--terra-switch-slider-selected-hover-background-color, #fff);
border: var(--terra-switch-slider-selected-hover-border, 0);
box-shadow: var(--terra-switch-slider-selected-hover-box-shadow, 2px 0 2px 0 rgba(0, 0, 0, 0.2), -2px 0 2px 0 rgba(0, 0, 0, 0.2),
-1px 0 0 0 #01639e, 0 0 4px 1px rgba(0, 0, 0, 0.2));
}

.tray {
background-color: var(--terra-switch-tray-selected-hover-background-color, #0065a3);
border: var(--terra-switch-tray-selected-hover-border, 1px solid #01639e);
box-shadow: var(--terra-switch-tray-selected-hover-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.4));
}
}

&:active {
.slider {
background-color: var(--terra-switch-slider-selected-active-background-color, #fff);
border: var(--terra-switch-slider-selected-active-border, 0);
box-shadow: var(--terra-switch-slider-selected-active-box-shadow, inset 0 0 0 1px #fff, inset 5px 2px 4px 2px #e6e7e8, 2px 0 2px 0 rgba(0, 0, 0, 0.2),
-2px 0 2px 0 rgba(0, 0, 0, 0.2), -1px 0 0 0 #01639e, 0 0 4px 1px rgba(0, 0, 0, 0.2)); // pressed state.
}

.tray {
background-color: var(--terra-switch-tray-selected-active-background-color, #0065a3);
border: var(--terra-switch-tray-selected-active-border, 1px solid #004164);
box-shadow: var(--terra-switch-tray-selected-active-box-shadow, inset 0 1px 5px 0 rgba(0, 0, 0, 0.4));
}
}

&[data-terra-switch-show-focus-styles='true']:focus {
.slider {
background-color: var(--terra-switch-slider-selected-focus-background-color, #fff);
border: var(--terra-switch-slider-selected-focus-border, 0);
}
}
}
Expand Down
Loading

0 comments on commit 7a753a7

Please sign in to comment.