-
Notifications
You must be signed in to change notification settings - Fork 112
/
FormPillButton.tsx
82 lines (77 loc) · 2.62 KB
/
FormPillButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import * as React from 'react';
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
import type {BoxElementProps} from '@twilio-paste/box';
import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon';
import {pillStyles, hoverPillStyles} from './FormPill.styles';
import type {PillVariant} from './types';
interface FormPillStylesProps {
variant?: PillVariant;
selected?: boolean;
element?: BoxElementProps['element'];
children: React.ReactNode;
onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
isHoverable?: boolean;
isDismissable?: boolean;
/* We can't call this `disabled` because it conflicts with the internal `CompositeItem disabled prop */
isDisabled?: boolean;
i18nErrorLabel?: string;
}
export const FormPillButton = React.forwardRef<HTMLElement, FormPillStylesProps>(
(
{
element = 'FORM_PILL',
selected = false,
variant = 'default',
isHoverable = false,
isDisabled = false,
isDismissable = false,
i18nErrorLabel = '(error)',
...props
},
ref
) => {
const computedStyles = React.useMemo(() => {
const hasHoverStyles = isHoverable && !isDisabled;
return hasHoverStyles ? {...pillStyles[variant], ...hoverPillStyles[variant]} : pillStyles[variant];
}, [isHoverable, isDisabled, variant]);
return (
<Box
{...safelySpreadBoxProps(props)}
element={element}
ref={ref}
aria-selected={selected}
aria-disabled={isDisabled}
role="option"
type="button"
as="button"
margin="space0"
position="relative"
borderRadius="borderRadiusPill"
borderStyle="none"
cursor="default"
height="sizeIcon40"
fontFamily="inherit"
fontSize="fontSize20"
fontWeight="fontWeightMedium"
outline="none"
paddingLeft="space30"
paddingRight={isDismissable ? 'space80' : 'space30'}
transition="background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in, color 150ms ease-in"
{...computedStyles}
>
<Box display="flex" alignItems="center" columnGap="space20" opacity={isDisabled ? 0.3 : 1}>
{variant === 'error' ? (
<>
<ErrorIcon decorative size="sizeIcon10" />
<ScreenReaderOnly>{i18nErrorLabel}</ScreenReaderOnly>
</>
) : null}
{props.children}
</Box>
</Box>
);
}
);
FormPillButton.displayName = 'FormPillButton';