feat(components): add TagButton (#1504)

.changeset/wet-turkeys-end.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add `TagButton`

packages/components/src/TagButton.tsx

@@ -0,0 +1,38 @@
+import type { ForwardedRef } from 'react';
+import type { ButtonProps } from 'react-aria-components';
+import type { TagVariants } from './TagGroup';
+
+import { forwardRef } from 'react';
+import { composeRenderProps } from 'react-aria-components';
+
+import { Button } from './Button';
+import { tag } from './TagGroup';
+
+interface TagButtonProps extends ButtonProps, Omit<TagVariants, 'variant'> {}
+
+const _TagButton = (
+	{ size = 'medium', ...props }: TagButtonProps,
+	ref: ForwardedRef<HTMLButtonElement>,
+) => {
+	return (
+		<Button
+			{...props}
+			ref={ref}
+			variant="default"
+			size={null}
+			className={composeRenderProps(props.className, (className, renderProps) =>
+				tag({ ...renderProps, size, variant: null, className }),
+			)}
+		/>
+	);
+};
+
+/**
+ * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
+ *
+ * https://react-spectrum.adobe.com/react-aria/Button.html
+ */
+const TagButton = forwardRef(_TagButton);
+
+export { TagButton };
+export type { TagButtonProps };

packages/components/src/TagGroup.tsx

@@ -39,7 +39,8 @@ const tag = cva(styles.tag, {
 	},
 });
 
-interface TagProps extends AriaTagProps, VariantProps<typeof tag> {}
+interface TagVariants extends VariantProps<typeof tag> {}
+interface TagProps extends AriaTagProps, TagVariants {}
 
 const _TagGroup = ({ className, ...props }: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) => {
 	return <AriaTagGroup {...props} ref={ref} className={group({ className })} />;
@@ -107,5 +108,5 @@ const _Tag = (
  */
 const Tag = forwardRef(_Tag);
 
-export { TagGroup, TagList, Tag };
-export type { TagGroupProps, TagListProps, TagProps };
+export { TagGroup, TagList, Tag, tag };
+export type { TagGroupProps, TagListProps, TagProps, TagVariants };

packages/components/src/index.ts

@@ -66,6 +66,7 @@ export type {
 	TableHeaderProps,
 } from './Table';
 export type { TabProps, TabsProps, TabListProps, TabPanelProps } from './Tabs';
+export type { TagButtonProps } from './TagButton';
 export type { TagGroupProps, TagListProps, TagProps } from './TagGroup';
 export type { TextProps } from './Text';
 export type { TextAreaProps } from './TextArea';
@@ -147,6 +148,7 @@ export {
 	TableHeader,
 } from './Table';
 export { Tab, Tabs, TabList, TabPanel } from './Tabs';
+export { TagButton } from './TagButton';
 export { TagGroup, TagList, Tag } from './TagGroup';
 export { Text } from './Text';
 export { TextArea } from './TextArea';

packages/components/src/styles/TagGroup.module.css

@@ -46,10 +46,12 @@
 
 .small {
 	font: var(--lp-text-label-2-medium);
+	height: var(--lp-size-20);
 }
 
 .medium {
 	font: var(--lp-text-label-1-medium);
+	height: var(--lp-size-24);
 }
 
 .default {

packages/components/stories/composition.stories.tsx

@@ -28,6 +28,7 @@ import {
 	RadioIconButton,
 	Select,
 	SelectValue,
+	TagButton,
 	Text,
 	ToastContainer,
 	ToastQueue,
@@ -256,3 +257,17 @@ export const DisabledWithTooltip: Story = {
 		);
 	},
 };
+
+export const TagWithOverlay: Story = {
+	render: () => {
+		return (
+			<TooltipTrigger>
+				<TagButton>
+					<Icon name="osmo" size="small" />
+					TagButton
+				</TagButton>
+				<Tooltip placement="right">Message</Tooltip>
+			</TooltipTrigger>
+		);
+	},
+};