Commit 2761048

committed

fix(colorinput): indicate focus on ColorInput

1 parent 86bf15f commit 2761048Copy full SHA for 2761048

File tree

1 file changed

+18

-5

lines changed

src/components/ColorInput
- ColorInput.js

1 file changed

+18

-5

lines changed

`‎src/components/ColorInput/ColorInput.js‎`

Lines changed: 18 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,14 +2,15 @@ import React from 'react';`
`2`	`2`	`import propTypes from 'prop-types';`
`3`	`3`
`4`	`4`	`import styled, { css } from 'styled-components';`
	`5`	`+import { focusOutline } from '../common';`
`5`	`6`	`import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';`
`6`	`7`	`import Button from '../Button/Button';`
`7`	`8`	`import Bar from '../Bar/Bar';`
`8`	`9`
`9`	`10`	const StyledBar = styled(Bar)`
`10`	`11`	`height: 23px;`
`11`	`12`	`position: relative;`
`12`		`- top: -1px;`
	`13`	`+ top: 0;`
`13`	`14`	`;
`14`	`15`
`15`	`16`	export const StyledColorInput = styled.input`
@@ -20,6 +21,7 @@ export const StyledColorInput = styled.input`
`20`	`21`	`left: 0;`
`21`	`22`	`top: 0;`
`22`	`23`	`opacity: 0;`
	`24`	`+ z-index: 1;`
`23`	`25`	`;
`24`	`26`
`25`	`27`	`// TODO replace with SVG icon`
@@ -28,7 +30,7 @@ const ColorPreview = styled.div`
`28`	`30`	`height: 21px;`
`29`	`31`	`display: inline-block;`
`30`	`32`	`width: 35px;`
`31`		`- margin-right: 0.5rem;`
	`33`	`+ margin-right: 7px;`
`32`	`34`
`33`	`35`	`background: ${({ color }) => color};`
`34`	`36`
@@ -46,13 +48,12 @@ const ColorPreview = styled.div`
`46`	`48`	`;
`47`	`49`
`48`	`50`	const ChevronIcon = styled.span`
`49`		`- position: relative;`
`50`	`51`	`width: 0px;`
`51`	`52`	`height: 0px;`
`52`	`53`	`border-left: 6px solid transparent;`
`53`	`54`	`border-right: 6px solid transparent;`
`54`	`55`	`display: inline-block;`
`55`		`- margin-left: 0.5rem;`
	`56`	`+ margin-left: 6px;`
`56`	`57`
`57`	`58`	`${({ isDisabled }) =>`
`58`	`59`	`isDisabled`
@@ -65,6 +66,18 @@ const ChevronIcon = styled.span`
`65`	`66`	: css`
`66`	`67`	`border-top: 6px solid ${({ theme }) => theme.text};`
`67`	`68`	`}
	`69`	`+ &:after {`
	`70`	`+ content: '';`
	`71`	`+ box-sizing: border-box;`
	`72`	`+ position: absolute;`
	`73`	`+ top: ${({ variant }) => (variant === 'flat' ? '6px' : '8px')};`
	`74`	`+ right: 8px;`
	`75`	`+ width: 16px;`
	`76`	`+ height: 19px;`
	`77`	`+ }`
	`78`	`+ ${StyledColorInput}:focus + &:after {`
	`79`	`+ ${focusOutline}`
	`80`	`+ }`
`68`	`81`	`;
`69`	`82`
`70`	`83`	`// TODO make sure all aria and role attributes are in place`
`@@ -109,7 +122,7 @@ const ColorInput = React.forwardRef(function ColorInput(props, ref) {`
`109`	`122`	`ref={ref}`
`110`	`123`	`{...otherProps}`
`111`	`124`	`/>`
`112`		`- <ChevronIcon isDisabled={disabled} />`
	`125`	`+ <ChevronIcon isDisabled={disabled} variant={variant}/>`
`113`	`126`	`</Button>`
`114`	`127`	`);`
`115`	`128`	`});`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Commit 2761048

File tree

1 file changed

1 file changed

`‎src/components/ColorInput/ColorInput.js‎`

0 commit comments