fix(button): macOS and iOS focus indication

arturbien · arturbien · commit 7cf0224f515f · 2020-03-29T14:43:51.000+02:00
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -57,8 +57,8 @@ export const StyledButton = styled.button`
             outline: 2px solid transparent;
             outline-offset: -4px;
           `}
-          &:focus:after {
-            ${focusOutline}
+          &:focus:after, &:active:after {
+            ${!active && !isDisabled && focusOutline}
             outline-offset: -6px;
           }
         `
@@ -111,11 +111,13 @@ export const StyledButton = styled.button`
           &:active:before {
             ${!isDisabled && createBorderStyles({ invert: true })}
           }
-          &:focus:after {
-            ${focusOutline}
+          &:focus:after,
+          &:active:after {
+            ${!active && !isDisabled && focusOutline}
             outline-offset: -8px;
           }
-          &:active:focus:after {
+          &:active:focus:after,
+          &:active:after {
             top: ${active ? '0' : '1px'};
           }
         `}

Original file line number	Diff line number	Diff line change
@@ -57,8 +57,8 @@ export const StyledButton = styled.button`
`57`	`57`	`outline: 2px solid transparent;`
`58`	`58`	`outline-offset: -4px;`
`59`	`59`	`}
`60`		`- &:focus:after {`
`61`		`- ${focusOutline}`
	`60`	`+ &:focus:after, &:active:after {`
	`61`	`+ ${!active && !isDisabled && focusOutline}`
`62`	`62`	`outline-offset: -6px;`
`63`	`63`	`}`
`64`	`64`	`
@@ -111,11 +111,13 @@ export const StyledButton = styled.button`
`111`	`111`	`&:active:before {`
`112`	`112`	`${!isDisabled && createBorderStyles({ invert: true })}`
`113`	`113`	`}`
`114`		`- &:focus:after {`
`115`		`- ${focusOutline}`
	`114`	`+ &:focus:after,`
	`115`	`+ &:active:after {`
	`116`	`+ ${!active && !isDisabled && focusOutline}`
`116`	`117`	`outline-offset: -8px;`
`117`	`118`	`}`
`118`		`- &:active:focus:after {`
	`119`	`+ &:active:focus:after,`
	`120`	`+ &:active:after {`
`119`	`121`	`top: ${active ? '0' : '1px'};`
`120`	`122`	`}`
`121`	`123`	`}