Fix React Aria Button hover styles (#3453)

* Fiox hover styles and use className instead of inline to prepare for future css migration * Release notes * Cleanup * Update edit rule hover style
actualbudget · Sep 19, 2024 · e507b8f · e507b8f
1 parent 5e12d40
commit e507b8f
Show file tree

Hide file tree

Showing 17 changed files with 190 additions and 155 deletions.
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -7,6 +7,8 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { css } from 'glamor';
+
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
@@ -200,29 +202,29 @@ function Notification({
                 onRemove();
                 setLoading(false);
               }}
-              style={({ isHovered, isPressed }) => ({
-                backgroundColor: 'transparent',
-                border: `1px solid ${
-                  positive
-                    ? theme.noticeBorder
-                    : error
-                      ? theme.errorBorder
-                      : theme.warningBorder
-                }`,
-                color: 'currentColor',
-                ...styles.mediumText,
-                flexShrink: 0,
-                ...(isHovered || isPressed
-                  ? {
-                      backgroundColor: positive
-                        ? theme.noticeBackground
-                        : error
-                          ? theme.errorBackground
-                          : theme.warningBackground,
-                    }
-                  : {}),
-                ...narrowStyle,
-              })}
+              className={String(
+                css({
+                  backgroundColor: 'transparent',
+                  border: `1px solid ${
+                    positive
+                      ? theme.noticeBorder
+                      : error
+                        ? theme.errorBorder
+                        : theme.warningBorder
+                  }`,
+                  color: 'currentColor',
+                  ...styles.mediumText,
+                  flexShrink: 0,
+                  '&[data-hovered], &[data-pressed]': {
+                    backgroundColor: positive
+                      ? theme.noticeBackground
+                      : error
+                        ? theme.errorBackground
+                        : theme.warningBackground,
+                  },
+                  ...narrowStyle,
+                }),
+              )}
             >
               {button.title}
             </ButtonWithLoading>

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
+import { css } from 'glamor';
+
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
@@ -200,21 +202,23 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
     <Button
       variant="bare"
       aria-label="Sync"
-      style={({ isHovered, isPressed }) => ({
-        ...(isMobile
-          ? {
-              ...style,
-              WebkitAppRegion: 'none',
-              ...mobileIconStyle,
-            }
-          : {
-              ...style,
-              WebkitAppRegion: 'none',
-              color: desktopColor,
-            }),
-        ...(isHovered ? hoveredStyle : {}),
-        ...(isPressed ? activeStyle : {}),
-      })}
+      className={String(
+        css({
+          ...(isMobile
+            ? {
+                ...style,
+                WebkitAppRegion: 'none',
+                ...mobileIconStyle,
+              }
+            : {
+                ...style,
+                WebkitAppRegion: 'none',
+                color: desktopColor,
+              }),
+          '&[data-hovered]': hoveredStyle,
+          '&[data-pressed]': activeStyle,
+        }),
+      )}
       onPress={sync}
     >
       {isMobile ? (

diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
@@ -173,8 +173,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           transition: 'box-shadow .25s',
           WebkitAppRegion: 'no-drag',
           ...styles.smallText,
-          ...(renderProps.isDisabled ? {} : { ':hover': hoveredStyle }),
-          ...(renderProps.isDisabled ? {} : { ':active': activeStyle }),
+          ...(renderProps.isDisabled
+            ? {}
+            : {
+                '&[data-hovered]': hoveredStyle,
+                '&[data-pressed]': activeStyle,
+              }),
           ...(Icon ? { paddingLeft: 0 } : {}),
         }),
       );

diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx
@@ -95,10 +95,13 @@ const ButtonLink = ({ to, style, activeStyle, ...props }: ButtonLinkProps) => {
   const match = useMatch({ path });
   return (
     <Button
-      style={({ isPressed }) => ({
-        ...style,
-        ...(match || isPressed ? activeStyle : {}),
-      })}
+      className={String(
+        css({
+          ...style,
+          '&[data-pressed]': activeStyle,
+          ...(match ? activeStyle : {}),
+        }),
+      )}
       {...props}
       variant={props.buttonVariant}
       onPress={e => {

diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
@@ -1,5 +1,7 @@
 import { useRef, useState } from 'react';
 
+import { css } from 'glamor';
+
 import { SvgExpandArrow } from '../../icons/v0';
 import { type CSSProperties } from '../../style';
 
@@ -25,7 +27,7 @@ type SelectProps<Value> = {
   onChange?: (newValue: Value) => void;
   disabled?: boolean;
   disabledKeys?: Value[];
-  buttonStyle?: CSSProperties;
+  style?: CSSProperties;
 };
 
 /**
@@ -50,7 +52,7 @@ export function Select<const Value = string>({
   onChange,
   disabled = false,
   disabledKeys = [],
-  buttonStyle = {},
+  style = {},
 }: SelectProps<Value>) {
   const targetOption = options
     .filter(isValueOption)
@@ -69,12 +71,7 @@ export function Select<const Value = string>({
         onPress={() => {
           setIsOpen(true);
         }}
-        style={({ isHovered }) => ({
-          ...buttonStyle,
-          ...(isHovered
-            ? { backgroundColor: bare ? 'transparent' : undefined }
-            : {}),
-        })}
+        className={String(css(style))}
       >
         <View
           style={{

diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
@@ -1,5 +1,7 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
 
+import { css } from 'glamor';
+
 import { useNavigate } from '../../hooks/useNavigate';
 import { SvgCheveronLeft } from '../../icons/v1';
 import { styles, theme } from '../../style';
@@ -17,20 +19,20 @@ export function MobileBackButton({
   return (
     <Button
       variant="bare"
-      style={({ isHovered }) => ({
-        color: theme.mobileHeaderText,
-        justifyContent: 'center',
-        margin: 10,
-        paddingLeft: 5,
-        paddingRight: 3,
-        ...(isHovered
-          ? {
-              color: theme.mobileHeaderText,
-              background: theme.mobileHeaderTextHover,
-            }
-          : {}),
-        ...style,
-      })}
+      className={String(
+        css({
+          color: theme.mobileHeaderText,
+          justifyContent: 'center',
+          margin: 10,
+          paddingLeft: 5,
+          paddingRight: 3,
+          '&[data-hovered]': {
+            color: theme.mobileHeaderText,
+            background: theme.mobileHeaderTextHover,
+          },
+          ...style,
+        }),
+      )}
       onPress={onPress || (() => navigate(-1))}
       {...props}
     >

diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -2,6 +2,7 @@ import React, { memo, useCallback, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { AutoTextSize } from 'auto-text-size';
+import { css } from 'glamor';
 import memoizeOne from 'memoize-one';
 
 import { collapseModals, pushModal } from 'loot-core/client/actions';
@@ -780,14 +781,16 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
       >
         <Button
           variant="bare"
-          style={({ isPressed, isHovered }) => ({
-            flexShrink: 0,
-            color: theme.pageTextSubdued,
-            ...styles.noTapHighlight,
-            ...(isPressed || isHovered
-              ? { backgroundColor: 'transparent' }
-              : {}),
-          })}
+          className={String(
+            css({
+              flexShrink: 0,
+              color: theme.pageTextSubdued,
+              ...styles.noTapHighlight,
+              '&[data-hovered], &[data-pressed]': {
+                backgroundColor: 'transparent',
+              },
+            }),
+          )}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
@@ -974,14 +977,16 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
       >
         <Button
           variant="bare"
-          style={({ isPressed, isHovered }) => ({
-            flexShrink: 0,
-            color: theme.pageTextSubdued,
-            ...styles.noTapHighlight,
-            ...(isPressed || isHovered
-              ? { backgroundColor: 'transparent' }
-              : {}),
-          })}
+          className={String(
+            css({
+              flexShrink: 0,
+              color: theme.pageTextSubdued,
+              ...styles.noTapHighlight,
+              '&[data-hovered], &[data-pressed]': {
+                backgroundColor: 'transparent',
+              },
+            }),
+          )}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
@@ -1600,11 +1605,13 @@ export function BudgetTable({
           leftContent={
             <Button
               variant="bare"
-              style={({ isPressed, isHovered }) => ({
-                color: theme.mobileHeaderText,
-                margin: 10,
-                ...(isPressed || isHovered ? noBackgroundColorStyle : {}),
-              })}
+              className={String(
+                css({
+                  color: theme.mobileHeaderText,
+                  margin: 10,
+                  '&[data-hovered], &[data-pressed]': noBackgroundColorStyle,
+                }),
+              )}
               onPress={onOpenBudgetPageMenu}
             >
               <SvgLogo width="20" height="20" />
@@ -1913,18 +1920,18 @@ function MonthSelector({
             onPrevMonth();
           }
         }}
-        style={({ isHovered }) => ({
-          ...styles.noTapHighlight,
-          ...arrowButtonStyle,
-          opacity: prevEnabled ? 1 : 0.6,
-          color: theme.mobileHeaderText,
-          ...(isHovered
-            ? {
-                color: theme.mobileHeaderText,
-                background: theme.mobileHeaderTextHover,
-              }
-            : {}),
-        })}
+        className={String(
+          css({
+            ...styles.noTapHighlight,
+            ...arrowButtonStyle,
+            opacity: prevEnabled ? 1 : 0.6,
+            color: theme.mobileHeaderText,
+            '&[data-hovered]': {
+              color: theme.mobileHeaderText,
+              background: theme.mobileHeaderTextHover,
+            },
+          }),
+        )}
       >
         <SvgArrowThinLeft width="15" height="15" style={{ margin: -5 }} />
       </Button>
@@ -1952,18 +1959,18 @@ function MonthSelector({
             onNextMonth();
           }
         }}
-        style={({ isHovered }) => ({
-          ...styles.noTapHighlight,
-          ...arrowButtonStyle,
-          opacity: nextEnabled ? 1 : 0.6,
-          color: theme.mobileHeaderText,
-          ...(isHovered
-            ? {
-                color: theme.mobileHeaderText,
-                background: theme.mobileHeaderTextHover,
-              }
-            : {}),
-        })}
+        className={String(
+          css({
+            ...styles.noTapHighlight,
+            ...arrowButtonStyle,
+            opacity: nextEnabled ? 1 : 0.6,
+            color: theme.mobileHeaderText,
+            '&[data-hovered]': {
+              color: theme.mobileHeaderText,
+              background: theme.mobileHeaderTextHover,
+            },
+          }),
+        )}
       >
         <SvgArrowThinRight width="15" height="15" style={{ margin: -5 }} />
       </Button>

diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
@@ -95,7 +95,10 @@ export function FieldSelect({ fields, style, value, onChange }) {
         options={fields}
         value={value}
         onChange={onChange}
-        buttonStyle={{ color: theme.pageTextPositive }}
+        style={{
+          color: theme.pageTextPositive,
+          '&[data-hovered]': { color: theme.pageTextPositive },
+        }}
       />
     </View>
   );
@@ -135,7 +138,7 @@ export function OpSelect({
         options={opOptions}
         value={value}
         onChange={value => onChange('op', value)}
-        buttonStyle={style}
+        style={style}
       />
     </View>
   );

diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal.jsx
@@ -590,7 +590,7 @@ function SelectField({
       ]}
       value={value === null ? 'choose-field' : value}
       onChange={onChange}
-      buttonStyle={style}
+      style={style}
     />
   );
 }