fix(components): wrap Button string children with Text (#1705)

Author: Niznikr

.changeset/petite-teeth-itch.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Wrap `Button` string children with `Text`

packages/components/src/Button.tsx

@@ -14,6 +14,7 @@ import {
 import { PerceivableContext } from './Perceivable';
 import { ProgressBar } from './ProgressBar';
 import styles from './styles/Button.module.css';
+import { Text } from './Text';
 import { useLPContextProps } from './utils';
 
 const buttonStyles = cva(styles.base, {
@@ -71,7 +72,7 @@ const Button = ({ ref, ...props }: ButtonProps) => {
 					{isPending && (
 						<ProgressBar isIndeterminate aria-label="loading" className={styles.progress} />
 					)}
-					{children}
+					{typeof children === 'string' ? <Text>{children}</Text> : children}
 				</Provider>
 			))}
 		</AriaButton>

packages/components/stories/Button.stories.tsx

@@ -147,7 +147,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);