Skip to content
Permalink
Browse files

fix(button): defensively set hover/focus/active styles from legacy gl…

…obals (#205)
  • Loading branch information
SiTaggart committed Nov 27, 2019
1 parent 194b360 commit 2a9ce57a61a0ef9c1aadc0cfe0c9c112b4bc784e
@@ -64,6 +64,12 @@ exports[`Button States Has a disabled state 1`] = `
border: none;
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
color: #ffffff;
}

.emotion-2:hover,
.emotion-2:active {
background-color: #b3d3e9;
@@ -130,6 +136,12 @@ exports[`Button States Has a disabled state 1`] = `
border: none;
}

.emotion-10:hover,
.emotion-10:focus,
.emotion-10:active {
color: #ffffff;
}

.emotion-14 {
position: relative;
font-size: 100%;
@@ -344,6 +356,12 @@ exports[`Button States Has a loading state 1`] = `
border: none;
}

.emotion-6:hover,
.emotion-6:focus,
.emotion-6:active {
color: #ffffff;
}

.emotion-6,
.emotion-6:hover,
.emotion-6:active,
@@ -478,6 +496,12 @@ exports[`Button States Has a loading state 1`] = `
border: none;
}

.emotion-22:hover,
.emotion-22:focus,
.emotion-22:active {
color: #ffffff;
}

.emotion-30 {
position: relative;
font-size: 100%;
@@ -904,6 +928,19 @@ exports[`Button Variants Has a destructive variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
color: #ffffff;
}

.emotion-2:hover {
border-color: #600101;
background-color: #600101;
@@ -1005,6 +1042,13 @@ exports[`Button Variants Has a destructive_link variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
@@ -1106,6 +1150,13 @@ exports[`Button Variants Has a link variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
@@ -1193,6 +1244,19 @@ exports[`Button Variants Has a primary variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
color: #ffffff;
}

.emotion-2:hover {
border-color: #032c5e;
background-color: #032c5e;
@@ -1311,6 +1375,13 @@ exports[`Button Variants Has a reset variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

<div
className="emotion-4"
>
@@ -1403,6 +1474,13 @@ exports[`Button Variants Has a secondary variant 1`] = `
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
.emotion-2:focus,
.emotion-2:active {
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-2:hover {
color: #032c5e;
border-color: #032c5e;
@@ -63,6 +63,16 @@ const baseEnabled = (props: ButtonWrapperProps): SerializedStyles =>
&:active {
box-shadow: ${themeGet('shadows.shadowFocus')(props)};
}
/*
defensively resetting from over zealous legacy global
styles "a {...}" when button is set as an anchor
*/
&:hover,
&:focus,
&:active {
text-decoration: none;
}
`,
]);
const baseLoading = (props: ButtonWrapperProps): SerializedStyles =>
@@ -88,6 +98,16 @@ const variantPrimaryBase = (props: ButtonWrapperProps): SerializedStyles => css`
border-width: ${themeGet('borderWidths.borderWidth20')(props)};
border-style: solid;
color: ${themeGet('textColors.colorTextInverse')(props)};
/*
defensively resetting from over zealous legacy global
styles "a {...}" when button is set as an anchor
*/
&:hover,
&:focus,
&:active {
color: ${themeGet('textColors.colorTextInverse')(props)};
}
`;

const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
@@ -201,6 +221,16 @@ const variantDestructiveBase = (props: ButtonWrapperProps): SerializedStyles =>
border-style: solid;
background-color: ${themeGet('backgroundColors.colorBackgroundDestructive')(props)};
color: ${themeGet('textColors.colorTextInverse')(props)};
/*
defensively resetting from over zealous legacy global
styles "a {...}" when button is set as an anchor
*/
&:hover,
&:focus,
&:active {
color: ${themeGet('textColors.colorTextInverse')(props)};
}
`;

const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles =>
@@ -60,4 +60,4 @@
"rollup-plugin-typescript2": "^0.21.2",
"typescript": "^3.5.2"
}
}
}

1 comment on commit 2a9ce57

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.