Skip to content

Facelift: hover/active colors and section spacing #96989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
shawnborton wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Facelift: hover/active colors and section spacing #96989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/HeaderWithBackButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ function HeaderWithBackButton({
onThreeDotsButtonPress = () => {},
report,
policyAvatar,
policyAvatarSize = CONST.AVATAR_SIZE.DEFAULT,
titleStyles,
shouldShowReportAvatarWithDisplay = false,
shouldDisplayStatus,
shouldShowBackButton = true,
Expand Down Expand Up @@ -157,7 +159,7 @@ function HeaderWithBackButton({
<Header
title={title}
subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2]}
textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH1, titleStyles]}
subTitleLink={subTitleLink}
numberOfTitleLines={1}
isScreenHeader
Expand All @@ -177,10 +179,11 @@ function HeaderWithBackButton({
styles.headerProgressBar,
styles.headerProgressBarContainer,
styles.headerProgressBarFill,
styles.textHeadlineH2,
styles.textHeadlineH1,
subtitle,
title,
titleColor,
titleStyles,
translate,
openParentReportInCurrentTab,
shouldDisplayStatus,
Expand Down Expand Up @@ -289,7 +292,8 @@ function HeaderWithBackButton({
)}
{!!policyAvatar && (
<Avatar
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(policyAvatarSize)), styles.mr3]}
size={policyAvatarSize}
source={policyAvatar?.source}
name={policyAvatar?.name}
avatarID={policyAvatar?.id}
Expand Down
10 changes: 9 additions & 1 deletion src/components/HeaderWithBackButton/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';

import type {Action} from '@hooks/useSingleExecution';

import type CONST from '@src/CONST';
import type {StepCounterParams} from '@src/languages/params';
import type {TranslationPaths} from '@src/languages/types';
import type {Report} from '@src/types/onyx';
Expand All @@ -12,8 +13,9 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
import type IconAsset from '@src/types/utils/IconAsset';

import type {ReactNode} from 'react';
import type {StyleProp, ViewStyle} from 'react-native';
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';

type ThreeDotsMenuItem = {
/** An icon element displayed on the left side */
Expand Down Expand Up @@ -163,6 +165,12 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
/** Policy avatar to display in the header */
policyAvatar?: Icon;

/** Size of the policy avatar. Defaults to CONST.AVATAR_SIZE.DEFAULT */
policyAvatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;

/** Additional styles to apply to the title text */
titleStyles?: StyleProp<TextStyle>;

/** Additional styles to add to the component */
style?: StyleProp<ViewStyle>;

Expand Down
4 changes: 2 additions & 2 deletions src/components/LHNOptionsList/OptionRowLHN/OptionRow/Pressable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ function Pressable({optionItem, isOptionFocused, onSelectRow, onLayout, onHoverI
styles.sidebarLink,
styles.sidebarLinkInnerLHN,
StyleUtils.getBackgroundColorStyle(theme.sidebar),
isOptionFocused ? styles.sidebarLinkActive : null,
(hovered || isContextMenuActive) && !isOptionFocused ? styles.sidebarLinkHover : null,
isOptionFocused ? StyleUtils.getBackgroundColorStyle(theme.hoverComponentBG) : null,
(hovered || isContextMenuActive) && !isOptionFocused ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : null,
]}
role={CONST.ROLE.BUTTON}
accessibilityLabel={accessibilityLabelWithContextMenuHint}
Expand Down
4 changes: 2 additions & 2 deletions src/components/LHNOptionsList/OptionRowLHN/useOptionRowChrome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ function useOptionRowChrome({isOptionFocused, viewMode}: UseOptionRowChromeParam
);
const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];

const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
const hoveredBackgroundColor = theme.highlightBG;
const focusedBackgroundColor = theme.hoverComponentBG;

let avatarBackgroundColor: ColorValue = theme.sidebar;
if (isOptionFocused) {
Expand Down
18 changes: 16 additions & 2 deletions src/components/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import type {GestureResponderEvent, Role, StyleProp, TextStyle, ViewStyle} from
import type {AnimatedStyle} from 'react-native-reanimated';
import type {ValueOf} from 'type-fest';

import React, {useEffect, useMemo, useRef} from 'react';
import React, {useContext, useEffect, useMemo, useRef} from 'react';
import {View} from 'react-native';

import type {DisplayNameWithTooltip} from './DisplayNames/types';
Expand All @@ -53,6 +53,7 @@ import Hoverable from './Hoverable';
import Icon from './Icon';
import InlineIcon from './Icon/InlineIcon';
import {useMenuItemGroupActions, useMenuItemGroupState} from './MenuItemGroup';
import MenuItemHoverBackgroundContext from './MenuItemHoverBackgroundContext';
import PlaidCardFeedIcon from './PlaidCardFeedIcon';
import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
import RadioButton from './RadioButton';
Expand Down Expand Up @@ -313,6 +314,9 @@ type MenuItemBaseProps = ForwardedFSClassProps &
/** Should we remove the hover background color of the menu item */
shouldRemoveHoverBackground?: boolean;

/** Overrides the hover background color; falls back to the default hover background when omitted */
hoverBackgroundColor?: string;

rightIconAccountID?: number | string;

iconAccountID?: number;
Expand Down Expand Up @@ -576,6 +580,7 @@ function MenuItem({
shouldGreyOutWhenDisabled = true,
shouldRemoveBackground = false,
shouldRemoveHoverBackground = false,
hoverBackgroundColor,
shouldUseDefaultCursorWhenDisabled = false,
shouldShowLoadingSpinnerIcon = false,
isAnonymousAction = false,
Expand Down Expand Up @@ -634,6 +639,8 @@ function MenuItem({
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const cardHoverBackgroundColor = useContext(MenuItemHoverBackgroundContext);
const effectiveHoverBackgroundColor = hoverBackgroundColor ?? cardHoverBackgroundColor;
const combinedStyle = [styles.popoverMenuItem, style];
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
Expand Down Expand Up @@ -896,7 +903,14 @@ function MenuItem({
StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG,
focused && interactive && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG,
isHovered &&
interactive &&
!focused &&
!pressed &&
!shouldRemoveBackground &&
!shouldRemoveHoverBackground &&
(effectiveHoverBackgroundColor ? StyleUtils.getBackgroundColorStyle(effectiveHoverBackgroundColor) : styles.highlightBG),
] as StyleProp<ViewStyle>
}
disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
Expand Down
9 changes: 9 additions & 0 deletions src/components/MenuItemHoverBackgroundContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {createContext} from 'react';

/**
* Hover background color for MenuItems rendered inside a container card (e.g. Section), so a hovered row
* stands out from the card background. Undefined outside a card, where MenuItems use their default hover.
*/
const MenuItemHoverBackgroundContext = createContext<string | undefined>(undefined);

export default MenuItemHoverBackgroundContext;
173 changes: 91 additions & 82 deletions src/components/Section/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import ImageSVG from '@components/ImageSVG';
import Lottie from '@components/Lottie';
import type DotLottieAnimation from '@components/LottieAnimations/types';
import MenuItemHoverBackgroundContext from '@components/MenuItemHoverBackgroundContext';
import type {MenuItemWithLink} from '@components/MenuItemList';
import MenuItemList from '@components/MenuItemList';
import Text from '@components/Text';
Expand Down Expand Up @@ -144,94 +145,102 @@ function Section({

const lottieIllustration = isLottie ? illustration : undefined;
return (
<View style={[styles.pageWrapper, styles.cardSectionContainer, containerStyles, (isCentralPane || !!illustration) && styles.p0]}>
{banner}
{cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
/>
)}
{!!illustration && (
<View
style={[
styles.w100,
styles.dFlex,
styles.alignItemsCenter,
styles.justifyContentCenter,
StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG),
illustrationContainerStyle,
]}
>
<View style={[styles.cardSectionIllustration, illustrationStyle]}>
{isLottie ? (
<Lottie
source={illustration}
style={styles.h100}
webStyle={styles.h100}
loop
autoPlay
shouldLoadAfterInteractions={shouldUseNarrowLayout}
<MenuItemHoverBackgroundContext.Provider value={theme.hoverComponentBG}>
<View style={[styles.pageWrapper, styles.cardSectionContainer, containerStyles, (isCentralPane || !!illustration) && styles.p0]}>
{banner}
{cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
/>
)}
{!!illustration && (
<View
style={[
styles.w100,
styles.dFlex,
styles.alignItemsCenter,
styles.justifyContentCenter,
StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG),
illustrationContainerStyle,
]}
>
<View style={[styles.cardSectionIllustration, illustrationStyle]}>
{isLottie ? (
<Lottie
source={illustration}
style={styles.h100}
webStyle={styles.h100}
loop
autoPlay
shouldLoadAfterInteractions={shouldUseNarrowLayout}
/>
) : (
<ImageSVG
src={illustration}
contentFit="contain"
/>
)}
</View>
{overlayContent?.()}
</View>
)}
<View style={[styles.w100, isCentralPane && (shouldUseNarrowLayout ? styles.p5 : (contentPaddingOnLargeScreens ?? styles.p8)), centralPaneContainerStyle]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1]}>
{cardLayout === CARD_LAYOUT.ICON_ON_LEFT && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={[styles.flexGrow0, styles.justifyContentStart, iconContainerStyles]}
/>
) : (
<ImageSVG
src={illustration}
contentFit="contain"
)}
<View style={[styles.flexShrink1, styles.w100]}>
{renderTitle
? renderTitle()
: !!title && (
<Text
style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}
accessibilityRole={CONST.ROLE.HEADER}
>
{title}
</Text>
)}
</View>
{cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={iconContainerStyles}
/>
)}
</View>
{overlayContent?.()}
</View>
)}
<View style={[styles.w100, isCentralPane && (shouldUseNarrowLayout ? styles.p5 : (contentPaddingOnLargeScreens ?? styles.p8)), centralPaneContainerStyle]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1]}>
{cardLayout === CARD_LAYOUT.ICON_ON_LEFT && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={[styles.flexGrow0, styles.justifyContentStart, iconContainerStyles]}
/>
)}
<View style={[styles.flexShrink1, styles.w100]}>
{renderTitle
? renderTitle()
: !!title && (
<Text
style={[styles.textHeadline, styles.cardSectionTitle, titleStyles]}
accessibilityRole={CONST.ROLE.HEADER}
>
{title}
</Text>
)}
</View>
{cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
<IconSection
width={iconWidth}
height={iconHeight}
icon={icon}
iconContainerStyles={iconContainerStyles}
/>
)}
</View>

{renderSubtitle
? renderSubtitle?.()
: !!subtitle && (
<View
style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt2, subtitleStyles]}
>
<Text style={[styles.textNormal, subtitleMuted && styles.colorMuted, subtitleTextStyles]}>{subtitle}</Text>
</View>
)}

<View style={[styles.w100, childrenStyles]}>{children}</View>

<View style={[styles.w100]}>{!!menuItems && <MenuItemList menuItems={menuItems} />}</View>
{renderSubtitle
? renderSubtitle?.()
: !!subtitle && (
<View
style={[
styles.flexRow,
styles.alignItemsCenter,
styles.w100,
cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt2,
subtitleStyles,
]}
>
<Text style={[styles.textNormal, subtitleMuted && styles.colorMuted, subtitleTextStyles]}>{subtitle}</Text>
</View>
)}

<View style={[styles.w100, childrenStyles]}>{children}</View>

<View style={[styles.w100]}>{!!menuItems && <MenuItemList menuItems={menuItems} />}</View>
</View>
</View>
</View>
</MenuItemHoverBackgroundContext.Provider>
);
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/TabSelector/getBackground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ function getBackgroundColor({routesLength, tabIndex, affectedTabs, theme, positi
return position.interpolate({
inputRange,
outputRange: inputRange.map((i) => {
return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG;
return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.hoverComponentBG : theme.appBG;
}),
}) as unknown as Animated.AnimatedInterpolation<string>;
}

return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG;
return affectedTabs.includes(tabIndex) && isActive ? theme.hoverComponentBG : theme.appBG;
}

return theme.border;
return theme.hoverComponentBG;
}

export default getBackgroundColor;
Loading
Loading