Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

Commit

Permalink
Merge branch 'fix/switch-focus'
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinkertrain
tinkertrain committed Apr 26, 2022
2 parents 396f457 + 0b18491 commit ab6bebd
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 33 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 22 additions & 8 deletions src/components/Switch/Switch.css.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { getColor } from '../../styles/utilities/color'
import forEach from '../../styles/utilities/forEach'
import styled from 'styled-components'
import { focusRing } from '../../styles/mixins/focusRing.css'
import { rgba } from '../../utilities/color'

export const config = {
backgroundColor: {
Expand All @@ -10,7 +12,7 @@ export const config = {
},
backgroundColorChecked: {
default: getColor('green.500'),
disabled: getColor('green.300'),
disabled: rgba(getColor('green.500'), 0.5),
hover: getColor('green.600'),
},
borderRadius: 100,
Expand Down Expand Up @@ -92,6 +94,14 @@ export const SwitchUI = styled('label')`
&.is-loading {
pointer-events: none;
}
&:hover .c-Switch__backdrop {
background-color: ${config.backgroundColor.hover};
}
&:hover .c-Switch__backdrop.is-checked {
background-color: ${config.backgroundColorChecked.hover};
}
`

export const InputUI = styled('input')`
Expand Down Expand Up @@ -123,7 +133,9 @@ export const BackdropUI = styled('div')`
z-index: 1;
&.is-focused {
background-color: ${config.backgroundColor.hover};
${focusRing};
--focusRingOffset: -2px;
--focusRingRadius: ${config.borderRadius}px;
}
&.is-disabled {
Expand All @@ -136,10 +148,6 @@ export const BackdropUI = styled('div')`
color: ${config.color.checked};
text-align: left;
&.is-focused {
background-color: ${config.backgroundColorChecked.hover};
}
&.is-disabled {
background-color: ${config.backgroundColorChecked.disabled};
color: ${config.color.disabled};
Expand Down Expand Up @@ -201,14 +209,20 @@ export const ToggleUI = styled('div')`
export const StateUI = styled('div')`
border-radius: 100px;
bottom: 0;
box-shadow: 0 0 0 2px ${getColor('state.error')};
${focusRing};
--focusRingOffset: -2px;
--focusRingRadius: ${config.borderRadius}px;
--focusRingColor: ${getColor('pink.900')};
display: block;
left: 0;
opacity: 0.7;
position: absolute;
right: 0;
top: 0;
z-index: 0;
&:before {
opacity: 1;
}
`

export default SwitchUI
199 changes: 176 additions & 23 deletions src/components/Switch/Switch.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { select, boolean } from '@storybook/addon-knobs'
import Switch from './'

<Meta
Expand All @@ -20,28 +19,182 @@ A Switch component is an alternative to a `Checkbox` that provides a switch-togg

<Canvas>
<Story name="default">
<Switch
checked={boolean('checked', false)}
disabled={boolean('disabled', false)}
isLoading={boolean('isLoading', false)}
size={select(
'Size',
{
lg: 'lg',
md: 'md',
sm: 'sm',
},
'md'
)}
state={select(
'State',
{
error: 'error',
default: '',
},
''
)}
/>
<div style={{ display: 'flex', width: '100%' }}>
<div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
<h2>sm</h2>
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
default:
</div>
<Switch size="sm" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
checked:
</div>
<Switch checked size="sm" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
disabled:
</div>
<Switch disabled size="sm" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
isLoading:
</div>
<Switch isLoading size="sm" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
error:
</div>
<Switch state="error" size="sm" />
<br />
</div>
<div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
<h2>md</h2>
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
default:
</div>
<Switch />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
checked:
</div>
<Switch checked />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
disabled:
</div>
<Switch disabled />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
isLoading:
</div>
<Switch isLoading />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
error:
</div>
<Switch state="error" />
<br />
</div>
<div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
<h2>lg</h2>
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
default:
</div>
<Switch size="lg" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
checked:
</div>
<Switch checked size="lg" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
disabled:
</div>
<Switch disabled size="lg" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
isLoading:
</div>
<Switch isLoading size="lg" />
<br />
<div
style={{
fontFamily: 'monospace',
fontSize: '11px',
margin: '10px 0 5px',
}}
>
error:
</div>
<Switch state="error" size="lg" />
<br />
</div>
</div>
</Story>
</Canvas>

Expand Down

0 comments on commit ab6bebd

Please sign in to comment.