Blame · ButtonGroup.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 * as stylex from '@stylexjs/stylex';
b69ab31	9	import React from 'react';
b69ab31	10	import {colors} from './theme/tokens.stylex';
b69ab31	11
b69ab31	12	const styles = stylex.create({
b69ab31	13	group: {
b69ab31	14	display: 'flex',
b69ab31	15	flexWrap: 'nowrap',
b69ab31	16	// StyleX Hack to target Button children of the ButtonGroup
b69ab31	17	':not(#__unused__) > button:not(:first-child):not(:last-child)': {
b69ab31	18	borderRadius: 0,
b69ab31	19	borderLeft: '1px solid var(--button-secondary-foreground)',
b69ab31	20	},
b69ab31	21	// button may either be a direct child of the group, or one level deeper (e.g. wrapped in tooltip)
b69ab31	22	':not(#__unused__) > *:not(:first-child):not(:last-child) > button': {
b69ab31	23	borderRadius: 0,
b69ab31	24	borderLeft: '1px solid var(--button-secondary-foreground)',
b69ab31	25	},
b69ab31	26	':not(#__unused__) > *:first-child > button': {
b69ab31	27	borderTopRightRadius: 0,
b69ab31	28	borderBottomRightRadius: 0,
b69ab31	29	},
b69ab31	30	':not(#__unused__) > button:first-child': {
b69ab31	31	borderTopRightRadius: 0,
b69ab31	32	borderBottomRightRadius: 0,
b69ab31	33	},
b69ab31	34	':not(#__unused__) > *:last-child > button': {
b69ab31	35	borderTopLeftRadius: 0,
b69ab31	36	borderBottomLeftRadius: 0,
b69ab31	37	borderLeft: '1px solid var(--button-secondary-foreground)',
b69ab31	38	},
b69ab31	39	':not(#__unused__) > button:last-child': {
b69ab31	40	borderTopLeftRadius: 0,
b69ab31	41	borderBottomLeftRadius: 0,
b69ab31	42	borderLeft: '1px solid var(--button-secondary-foreground)',
b69ab31	43	},
b69ab31	44	},
b69ab31	45	icon: {
b69ab31	46	':not(#__unused__) > button:not(:first-child):not(:last-child)': {
b69ab31	47	borderLeftColor: colors.hoverDarken,
b69ab31	48	},
b69ab31	49	':not(#__unused__) > *:not(:first-child):not(:last-child) > button': {
b69ab31	50	borderLeftColor: colors.hoverDarken,
b69ab31	51	},
b69ab31	52	':not(#__unused__) > button:last-child': {
b69ab31	53	borderLeftColor: colors.hoverDarken,
b69ab31	54	},
b69ab31	55	':not(#__unused__) > *:last-child > button': {
b69ab31	56	borderLeftColor: colors.hoverDarken,
b69ab31	57	},
b69ab31	58	},
b69ab31	59	});
b69ab31	60
b69ab31	61	export function ButtonGroup({
b69ab31	62	children,
b69ab31	63	icon,
b69ab31	64	...rest
b69ab31	65	}: {
b69ab31	66	children: React.ReactNode;
b69ab31	67	/** If true, the border between buttons will be colored to match <Button icon> style buttons */
b69ab31	68	icon?: boolean;
b69ab31	69	'data-testId'?: string;
b69ab31	70	}) {
b69ab31	71	return (
b69ab31	72	<div {...stylex.props(styles.group, icon && styles.icon)} {...rest}>
b69ab31	73	{children}
b69ab31	74	</div>
b69ab31	75	);
b69ab31	76	}