fix: Fix i8n errors by adding spans to button children

.changeset/sixty-steaks-jump.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": minor
+---
+
+Add spans to button children to fix i8n errors

packages/components/src/Button.tsx

@@ -4,12 +4,7 @@ import type { ButtonProps as AriaButtonProps, ContextValue } from 'react-aria-co
 
 import { cva } from 'class-variance-authority';
 import { createContext, useContext } from 'react';
-import {
-	Button as AriaButton,
-	composeRenderProps,
-	Provider,
-	TextContext,
-} from 'react-aria-components';
+import { Button as AriaButton, composeRenderProps } from 'react-aria-components';
 
 import { PerceivableContext } from './Perceivable';
 import { ProgressBar } from './ProgressBar';
@@ -67,12 +62,12 @@ const Button = ({ ref, ...props }: ButtonProps) => {
 			)}
 		>
 			{composeRenderProps(props.children, (children, { isPending }) => (
-				<Provider values={[[TextContext, { className: isPending ? styles.pending : undefined }]]}>
+				<>
 					{isPending && (
 						<ProgressBar isIndeterminate aria-label="loading" className={styles.progress} />
 					)}
-					{children}
-				</Provider>
+					<span className={styles.content}>{children}</span>
+				</>
 			))}
 		</AriaButton>
 	);

packages/components/src/DatePicker.tsx

@@ -21,6 +21,7 @@ import {
 	PopoverContext,
 	Provider,
 	Text,
+	TextContext,
 	useSlottedContext,
 } from 'react-aria-components';
 
@@ -181,22 +182,30 @@ const DatePickerValue = () => {
 	const { locale } = useLocale();
 	const date = state?.formatValue(locale, { month: 'short' });
 
-	return <Text className={styles.value}>{date}</Text>;
+	return (
+		<TextContext.Provider value={undefined}>
+			<Text className={styles.value}>{date}</Text>
+		</TextContext.Provider>
+	);
 };
 
 const DateRangePickerValue = () => {
 	const state = useContext(DateRangePickerStateContext);
 	const { locale } = useLocale();
 	const date = state?.formatValue(locale, { month: 'short' });
 
-	return date?.start === date?.end ? (
-		<Text className={styles.value}>{date?.end}</Text>
-	) : (
-		<>
-			<Text>{date?.start}</Text>
-			<Icon name="arrow-right-thin" size="small" />
-			<Text className={styles.value}>{date?.end}</Text>
-		</>
+	return (
+		<TextContext.Provider value={undefined}>
+			{date?.start === date?.end ? (
+				<Text className={styles.value}>{date?.end}</Text>
+			) : (
+				<>
+					<Text>{date?.start}</Text>
+					<Icon name="arrow-right-thin" size="small" />
+					<Text className={styles.value}>{date?.end}</Text>
+				</>
+			)}
+		</TextContext.Provider>
 	);
 };
 

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

@@ -27,6 +27,14 @@
 	opacity: 0.64;
 }
 
+.content {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--lp-spacing-200);
+	min-width: 0;
+}
+
 .small {
 	font: var(--lp-text-label-2-semibold);
 	padding: calc(3px + var(--lp-button-padding, 0px)) var(--lp-spacing-300);
@@ -142,15 +150,12 @@
 .button[data-pending] {
 	cursor: wait;
 
-	& [data-icon] {
+	& [data-icon],
+	.content {
 		opacity: 50%;
 	}
 }
 
-.pending {
-	opacity: 50%;
-}
-
 .progress {
 	--fill-color: currentColor;
 }
@@ -164,4 +169,9 @@
 	& [data-icon]:last-child {
 		fill: var(--lp-color-fill-ui-secondary);
 	}
+
+	& .content {
+		flex: 1;
+		gap: var(--lp-spacing-300);
+	}
 }

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

@@ -33,7 +33,7 @@
 		fill: var(--lp-color-fill-ui-secondary);
 	}
 
-	&[data-disabled] > :where([data-icon]) {
+	&[data-disabled] :where([data-icon]) {
 		opacity: 0.64;
 	}
 }

packages/components/stories/Button.stories.tsx

@@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from 'react';
 import { fireEvent, userEvent, within } from 'storybook/test';
 
 import { Button } from '../src/Button';
-import { Text } from '../src/Text';
 
 const meta: Meta<typeof Button> = {
 	component: Button,
@@ -75,23 +74,22 @@ const play: PlayFunction<ReactRenderer> = async ({
 };
 
 export const Default: Story = {
-	render: (args) => renderStates({ children: <Text>Default</Text>, ...args }),
+	render: (args) => renderStates({ children: 'Default', ...args }),
 	play,
 };
 
 export const Primary: Story = {
-	render: (args) => renderStates({ children: <Text>Primary</Text>, variant: 'primary', ...args }),
+	render: (args) => renderStates({ children: 'Primary', variant: 'primary', ...args }),
 	play,
 };
 
 export const Minimal: Story = {
-	render: (args) => renderStates({ children: <Text>Minimal</Text>, variant: 'minimal', ...args }),
+	render: (args) => renderStates({ children: 'Minimal', variant: 'minimal', ...args }),
 	play,
 };
 
 export const Destructive: Story = {
-	render: (args) =>
-		renderStates({ children: <Text>Destructive</Text>, variant: 'destructive', ...args }),
+	render: (args) => renderStates({ children: 'Destructive', variant: 'destructive', ...args }),
 	play,
 	parameters: {
 		a11y: {
@@ -108,20 +106,20 @@ export const WithIcon: Story = {
 	args: {
 		children: (
 			<>
-				<Text>With icon </Text>
+				With icon
 				<Icon name="add" size="small" />
 			</>
 		),
 	},
 };
 
 export const Small: Story = {
-	render: (args) => renderStates({ children: <Text>Default</Text>, size: 'small', ...args }),
+	render: (args) => renderStates({ children: 'Default', size: 'small', ...args }),
 	play,
 };
 
 export const Large: Story = {
-	render: (args) => renderStates({ children: <Text>Default</Text>, size: 'large', ...args }),
+	render: (args) => renderStates({ children: 'Default', size: 'large', ...args }),
 	play,
 };
 
@@ -147,7 +145,7 @@ export const Pending: Story = {
 		return <Button isPending={isPending} onPress={handlePress} {...args} />;
 	},
 	args: {
-		children: <Text>Pending</Text>,
+		children: 'Pending',
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);