Blame · Button.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ForwardedRef} from 'react';
b69ab31	9	import type {ExclusiveOr} from './Types';
b69ab31	10	import type {ReactProps} from './utils';
b69ab31	11
b69ab31	12	import * as stylex from '@stylexjs/stylex';
b69ab31	13	import {forwardRef, type ReactNode} from 'react';
b69ab31	14	import {layout} from './theme/layout';
b69ab31	15	import {colors} from './theme/tokens.stylex';
b69ab31	16
b69ab31	17	/**
b69ab31	18	* StyleX tries to evaluate CSS variables and store them separately.
b69ab31	19	* Use a layer of indirection so the CSS variable is used literally.
b69ab31	20	*/
b69ab31	21	export const vars = {
b69ab31	22	fg: 'var(--foreground)',
b69ab31	23	border: 'var(--contrast-border)',
b69ab31	24	/** very bright border, usually only set in high-contrast themes */
b69ab31	25	activeBorder: 'var(--contrast-active-border, transparent)',
b69ab31	26	focusBorder: 'var(--focus-border, transparent)',
b69ab31	27	};
b69ab31	28
b69ab31	29	export const buttonStyles = stylex.create({
b69ab31	30	button: {
b69ab31	31	background: {
b69ab31	32	default: 'var(--button-secondary-background)',
b69ab31	33	':hover': 'var(--button-secondary-hover-background)',
b69ab31	34	},
b69ab31	35	color: 'var(--button-secondary-foreground)',
b69ab31	36	border: '1px solid var(--button-border)',
b69ab31	37	borderRadius: '2px',
b69ab31	38	padding: '4px 11px',
b69ab31	39	fontFamily: 'var(--font-family)',
b69ab31	40	lineHeight: '16px',
b69ab31	41	cursor: 'pointer',
b69ab31	42	gap: '8px',
b69ab31	43	outlineOffset: '2px',
b69ab31	44	outlineStyle: 'solid',
b69ab31	45	outlineWidth: '1px',
b69ab31	46	outlineColor: {
b69ab31	47	default: 'transparent',
b69ab31	48	':focus-visible': vars.focusBorder,
b69ab31	49	},
b69ab31	50	flexWrap: 'nowrap',
b69ab31	51	whiteSpace: 'nowrap',
b69ab31	52	},
b69ab31	53	primary: {
b69ab31	54	background: {
b69ab31	55	default: 'var(--button-primary-background)',
b69ab31	56	':hover': 'var(--button-primary-hover-background)',
b69ab31	57	},
b69ab31	58	color: 'var(--button-primary-foreground)',
b69ab31	59	},
b69ab31	60	icon: {
b69ab31	61	border: '1px solid',
b69ab31	62	borderColor: colors.subtleHoverDarken,
b69ab31	63	background: {
b69ab31	64	default: colors.subtleHoverDarken,
b69ab31	65	':hover': 'var(--button-icon-hover-background, rgba(90, 93, 94, 0.31))',
b69ab31	66	},
b69ab31	67	borderRadius: '5px',
b69ab31	68	color: vars.fg,
b69ab31	69	padding: '3px',
b69ab31	70	outlineStyle: {
b69ab31	71	default: 'solid',
b69ab31	72	':hover': 'dotted',
b69ab31	73	':focus-within': 'solid',
b69ab31	74	},
b69ab31	75	outlineOffset: 0,
b69ab31	76	outlineColor: {
b69ab31	77	default: 'transparent',
b69ab31	78	':hover': vars.activeBorder,
b69ab31	79	':focus-visible': vars.focusBorder,
b69ab31	80	},
b69ab31	81	},
b69ab31	82	disabled: {
b69ab31	83	opacity: '0.4',
b69ab31	84	cursor: 'not-allowed',
b69ab31	85	},
b69ab31	86	});
b69ab31	87
b69ab31	88	export const Button = forwardRef(
b69ab31	89	(
b69ab31	90	{
b69ab31	91	icon: iconProp,
b69ab31	92	primary: primaryProp,
b69ab31	93	disabled,
b69ab31	94	onClick,
b69ab31	95	children,
b69ab31	96	xstyle,
b69ab31	97	kind,
b69ab31	98	className,
b69ab31	99	...rest
b69ab31	100	}: {
b69ab31	101	className?: string;
b69ab31	102	children?: ReactNode;
b69ab31	103	disabled?: boolean;
b69ab31	104	xstyle?: stylex.StyleXStyles;
b69ab31	105	primary?: boolean;
b69ab31	106	icon?: boolean;
b69ab31	107	} & Omit<ReactProps<HTMLButtonElement>, 'className'> &
b69ab31	108	ExclusiveOr<
b69ab31	109	ExclusiveOr<
b69ab31	110	{
b69ab31	111	/**
b69ab31	112	* Render as a bright button, encouraged the primary confirmation action.
b69ab31	113	* Equivalent to kind='primary'.
b69ab31	114	*/
b69ab31	115	primary?: boolean;
b69ab31	116	},
b69ab31	117	{
b69ab31	118	/**
b69ab31	119	* Render as a smaller, more subtle button. Useful in toolbars or when using an icon instead of a label.
b69ab31	120	* Equivalent to kind='icon'.
b69ab31	121	*/
b69ab31	122	icon?: boolean;
b69ab31	123	}
b69ab31	124	>,
b69ab31	125	/** How to display the button. Can also provide `primary` or `icon` shorthand bool props instead. */
b69ab31	126	{kind?: 'primary' \| 'icon' \| undefined}
b69ab31	127	>,
b69ab31	128	ref: ForwardedRef<HTMLButtonElement>,
b69ab31	129	) => {
b69ab31	130	const primary = kind === 'primary' \|\| primaryProp === true;
b69ab31	131	const icon = kind === 'icon' \|\| iconProp === true;
b69ab31	132	const {className: stylexClassName, ...otherStylex} = stylex.props(
b69ab31	133	layout.flexRow,
b69ab31	134	buttonStyles.button,
b69ab31	135	primary && buttonStyles.primary,
b69ab31	136	icon && buttonStyles.icon,
b69ab31	137	disabled && buttonStyles.disabled,
b69ab31	138	xstyle,
b69ab31	139	);
b69ab31	140	return (
b69ab31	141	<button
b69ab31	142	tabIndex={disabled ? -1 : 0}
b69ab31	143	onClick={e => {
b69ab31	144	// don't allow clicking a disabled button
b69ab31	145	disabled !== true && onClick?.(e);
b69ab31	146	}}
b69ab31	147	ref={ref}
b69ab31	148	className={stylexClassName + (className ? ' ' + className : '')}
b69ab31	149	{...otherStylex}
b69ab31	150	disabled={disabled}
b69ab31	151	{...rest}>
b69ab31	152	{children}
b69ab31	153	</button>
b69ab31	154	);
b69ab31	155	},
b69ab31	156	);