Skip to content

Commit

Permalink
fix(react-button): apply hover only on devices that support hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@mainframev
mainframev committed Jun 18, 2024
1 parent b059abe commit 43cdd8c
Show file tree
Hide file tree
Showing 5 changed files with 284 additions and 188 deletions.
220 changes: 131 additions & 89 deletions ...ges/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,15 @@ const useRootBaseClassName = makeResetStyles({
fontFamily: tokens.fontFamilyBase,
outlineStyle: 'none',

':hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
borderColor: tokens.colorNeutralStroke1Hover,
color: tokens.colorNeutralForeground1Hover,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
borderColor: tokens.colorNeutralStroke1Hover,
color: tokens.colorNeutralForeground1Hover,

cursor: 'pointer',
cursor: 'pointer',
},
},

':hover:active': {
Expand Down Expand Up @@ -83,11 +86,14 @@ const useRootBaseClassName = makeResetStyles({
borderColor: 'ButtonText',
},

':hover': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
forcedColorAdjust: 'none',
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
forcedColorAdjust: 'none',
},
},

':hover:active': {
Expand Down Expand Up @@ -138,8 +144,11 @@ const useRootStyles = makeStyles({
outline: {
backgroundColor: tokens.colorTransparentBackground,

':hover': {
backgroundColor: tokens.colorTransparentBackgroundHover,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackgroundHover,
},
},

':hover:active': {
Expand All @@ -151,10 +160,13 @@ const useRootStyles = makeStyles({
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForegroundOnBrand,

':hover': {
backgroundColor: tokens.colorBrandBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForegroundOnBrand,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorBrandBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForegroundOnBrand,
},
},

':hover:active': {
Expand All @@ -168,11 +180,13 @@ const useRootStyles = makeStyles({
...shorthands.borderColor('HighlightText'),
color: 'HighlightText',
forcedColorAdjust: 'none',

':hover': {
backgroundColor: 'HighlightText',
...shorthands.borderColor('Highlight'),
color: 'Highlight',
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: 'HighlightText',
...shorthands.borderColor('Highlight'),
color: 'Highlight',
},
},

':hover:active': {
Expand All @@ -189,19 +203,21 @@ const useRootStyles = makeStyles({
backgroundColor: tokens.colorSubtleBackground,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2,

':hover': {
backgroundColor: tokens.colorSubtleBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2Hover,
[`& .${iconFilledClassName}`]: {
display: 'inline',
},
[`& .${iconRegularClassName}`]: {
display: 'none',
},
[`& .${buttonClassNames.icon}`]: {
color: tokens.colorNeutralForeground2BrandHover,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorSubtleBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2Hover,
[`& .${iconFilledClassName}`]: {
display: 'inline',
},
[`& .${iconRegularClassName}`]: {
display: 'none',
},
[`& .${buttonClassNames.icon}`]: {
color: tokens.colorNeutralForeground2BrandHover,
},
},
},

Expand All @@ -221,11 +237,14 @@ const useRootStyles = makeStyles({
},

'@media (forced-colors: active)': {
':hover': {
color: 'Highlight',

[`& .${buttonClassNames.icon}`]: {
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
color: 'Highlight',

[`& .${buttonClassNames.icon}`]: {
color: 'Highlight',
},
},
},
':hover:active': {
Expand All @@ -241,16 +260,18 @@ const useRootStyles = makeStyles({
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2,

':hover': {
backgroundColor: tokens.colorTransparentBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2BrandHover,
[`& .${iconFilledClassName}`]: {
display: 'inline',
},
[`& .${iconRegularClassName}`]: {
display: 'none',
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackgroundHover,
...shorthands.borderColor('transparent'),
color: tokens.colorNeutralForeground2BrandHover,
[`& .${iconFilledClassName}`]: {
display: 'inline',
},
[`& .${iconRegularClassName}`]: {
display: 'none',
},
},
},

Expand All @@ -267,9 +288,12 @@ const useRootStyles = makeStyles({
},

'@media (forced-colors: active)': {
':hover': {
backgroundColor: tokens.colorTransparentBackground,
color: 'Highlight',
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackground,
color: 'Highlight',
},
},
':hover:active': {
backgroundColor: tokens.colorTransparentBackground,
Expand Down Expand Up @@ -328,22 +352,24 @@ const useRootDisabledStyles = makeStyles({
[`& .${buttonClassNames.icon}`]: {
color: tokens.colorNeutralForegroundDisabled,
},
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorNeutralBackgroundDisabled,
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
color: tokens.colorNeutralForegroundDisabled,

':hover': {
backgroundColor: tokens.colorNeutralBackgroundDisabled,
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
color: tokens.colorNeutralForegroundDisabled,

cursor: 'not-allowed',
cursor: 'not-allowed',

[`& .${iconFilledClassName}`]: {
display: 'none',
},
[`& .${iconRegularClassName}`]: {
display: 'inline',
},
[`& .${buttonClassNames.icon}`]: {
color: tokens.colorNeutralForegroundDisabled,
[`& .${iconFilledClassName}`]: {
display: 'none',
},
[`& .${iconRegularClassName}`]: {
display: 'inline',
},
[`& .${buttonClassNames.icon}`]: {
color: tokens.colorNeutralForegroundDisabled,
},
},
},

Expand Down Expand Up @@ -376,11 +402,13 @@ const useRootDisabledStyles = makeStyles({
':focus': {
...shorthands.borderColor('GrayText'),
},

':hover': {
backgroundColor: 'ButtonFace',
...shorthands.borderColor('GrayText'),
color: 'GrayText',
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: 'ButtonFace',
...shorthands.borderColor('GrayText'),
color: 'GrayText',
},
},

':hover:active': {
Expand All @@ -394,9 +422,11 @@ const useRootDisabledStyles = makeStyles({
// Appearance variations
outline: {
backgroundColor: tokens.colorTransparentBackground,

':hover': {
backgroundColor: tokens.colorTransparentBackground,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackground,
},
},

':hover:active': {
Expand All @@ -405,9 +435,11 @@ const useRootDisabledStyles = makeStyles({
},
primary: {
...shorthands.borderColor('transparent'),

':hover': {
...shorthands.borderColor('transparent'),
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
...shorthands.borderColor('transparent'),
},
},

':hover:active': {
Expand All @@ -420,10 +452,12 @@ const useRootDisabledStyles = makeStyles({
subtle: {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),

':hover': {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),
},
},

':hover:active': {
Expand All @@ -434,10 +468,12 @@ const useRootDisabledStyles = makeStyles({
transparent: {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),

':hover': {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor('transparent'),
},
},

':hover:active': {
Expand All @@ -460,18 +496,24 @@ const useRootFocusStyles = makeStyles({
...createCustomFocusIndicatorStyle({
...shorthands.borderColor(tokens.colorStrokeFocus2),
boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
':hover': {
boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
...shorthands.borderColor(tokens.colorStrokeFocus2),
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
...shorthands.borderColor(tokens.colorStrokeFocus2),
},
},
}),

// BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)
'@supports (-moz-appearance:button)': {
...createCustomFocusIndicatorStyle({
boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
':hover': {
boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,
// Query devices that support hover: https://www.w3.org/TR/mediaqueries-4/#any-input
'@media (any-hover: hover)': {
':hover': {
boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,
},
},
}),
},
Expand Down
Loading

0 comments on commit 43cdd8c

Please sign in to comment.