Skip to content
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

ButtonToggle: adopted TextUI #3759

Merged
merged 1 commit into from
Sep 13, 2024
Merged

ButtonToggle: adopted TextUI #3759

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
2 changes: 1 addition & 1 deletion docs/examples/textfield/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Example() {
<TextField
autoComplete="username"
id="header-example"
label="Username This simple description uses the Text component This simple description uses the Text component"
label="Username"
onChange={({ value }) => {
setInput(value);
}}
Expand Down
87 changes: 57 additions & 30 deletions packages/gestalt/src/ButtonToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import focusStyles from './Focus.css';
import Icon, { IconColor } from './Icon';
import icons from './icons/index';
import touchableStyles from './TapArea.css';
import TextUI from './Text';
import Text from './Text';
import TextUI from './TextUI';
import useFocusVisible from './useFocusVisible';
import useInExperiment from './useInExperiment';
import useTapFeedback from './useTapFeedback';
Expand All @@ -29,6 +30,22 @@ const SIZE_NAME_TO_PIXEL = {
lg: 12,
} as const;

const textSizes: {
[key: string]: '100' | '200' | '300' | '400' | '500' | '600';
} = {
sm: '200',
md: '300',
lg: '300',
};

const textSizesVR: {
[key: string]: 'xs' | 'sm' | 'md';
} = {
sm: 'xs',
md: 'sm',
lg: 'md',
};

type Props = {
/**
* Specifies the `id` of an associated element (or elements) whose contents or visibility are controlled by ButtonToggle so that screen reader users can identify the relationship between elements. See the [Accessibility guidelines](https://gestalt.pinterest.systems/web/buttontoggle#ARIA-attributes) for details on proper usage.
Expand Down Expand Up @@ -290,26 +307,30 @@ const ButtonToggleWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
);
}

const baseTypeClasses = classnames(sharedTypeClasses, touchableStyles.tapTransition, sizeStyles, {
[styles.disabled]: disabled && (color !== 'red' || selected),
[styles.disabledRed]: disabled && color === 'red' && !selected,
[styles.disabledTransparent]: disabled && color === 'transparent' && !selected,
[styles.enabled]: !disabled,
[borderStyles.noBorder]: color === 'red' && !selected,
[styles.selected]: !disabled && selected,
[styles.selectedDisabled]: disabled && selected,
[styles.thumbnailDark]: graphicSrc && isDarkMode !== selected,
[styles.thumbnailDisabled]: graphicSrc && disabled,
[styles.thumbnailLg]: size === 'lg' && graphicSrc,
[styles.thumbnailMd]: size === 'md' && graphicSrc,
[styles.thumbnailSm]: size === 'sm' && graphicSrc,
[styles[color]]: !disabled && !selected,
[styles.interactiveBorder]:
!disabled && !selected && !isFocused && color === 'transparent' && isInVRExperiment,
});
const childrenDivClasses = classnames(baseTypeClasses, styles.childrenDiv, {
[styles.compact]: text.length === 0,
});
const childrenDivClasses = classnames(
sharedTypeClasses,
touchableStyles.tapTransition,
sizeStyles,
styles.childrenDiv,
{
[styles.compact]: text.length === 0,
[styles.disabled]: disabled && (color !== 'red' || selected),
[styles.disabledRed]: disabled && color === 'red' && !selected,
[styles.disabledTransparent]: disabled && color === 'transparent' && !selected,
[styles.enabled]: !disabled,
[borderStyles.noBorder]: color === 'red' && !selected,
[styles.selected]: !disabled && selected,
[styles.selectedDisabled]: disabled && selected,
[styles.thumbnailDark]: graphicSrc && isDarkMode !== selected,
[styles.thumbnailDisabled]: graphicSrc && disabled,
[styles.thumbnailLg]: size === 'lg' && graphicSrc,
[styles.thumbnailMd]: size === 'md' && graphicSrc,
[styles.thumbnailSm]: size === 'sm' && graphicSrc,
[styles[color]]: !disabled && !selected,
[styles.interactiveBorder]:
!disabled && !selected && !isFocused && color === 'transparent' && isInVRExperiment,
},
);

const textColor =
(disabled && 'disabled') ||
Expand All @@ -334,15 +355,21 @@ const ButtonToggleWithForwardRef = forwardRef<HTMLButtonElement, Props>(function
size={SIZE_NAME_TO_PIXEL[size]}
/>
)}
<TextUI
align="center"
color={textColor}
overflow="breakWord"
size={size === 'sm' ? '200' : '300'}
weight="bold"
>
{text}
</TextUI>
{isInVRExperiment ? (
<TextUI align="center" color={textColor} overflow="breakWord" size={textSizesVR[size]}>
{text}
</TextUI>
) : (
<Text
align="center"
color={textColor}
overflow="breakWord"
size={textSizes[size]}
weight="bold"
>
{text}
</Text>
)}
{hasDropdown && (
<Icon
accessibilityLabel="dropdown"
Expand Down
Loading