Merge pull request #126 from 8845musign/fix-button-card-text-align

Text is not centered when wrap on ButtonCard
ubie-oss · Jul 26, 2024 · 65f25fa · 65f25fa
2 parents 9cb4c73 + 83b3481
commit 65f25fa
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/ButtonCard/ButtonCard.module.css b/src/components/ButtonCard/ButtonCard.module.css
@@ -12,6 +12,7 @@
   /* TODO: Replaced by tokens when @ubie/design-tokens is up-to-date. */
   line-height: 1.5;
   color: var(--color-text-main);
+  text-align: left;
   text-decoration: none;
   overflow-wrap: anywhere;
   cursor: pointer;

diff --git a/src/components/ButtonCard/ButtonCard.stories.tsx b/src/components/ButtonCard/ButtonCard.stories.tsx
@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { ButtonCard } from './ButtonCard';
+import { Box } from '../Box/Box';
 import { Flex } from '../Flex/Flex';
 
 export default {
@@ -21,6 +22,18 @@ export const Default: Story = {
   args: defaultArgs,
 };
 
+export const WrapText: Story = {
+  render: (args) => (
+    <Box width="200px">
+      <ButtonCard {...args} />
+    </Box>
+  ),
+  args: {
+    ...defaultArgs,
+    children: '自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分自分',
+  },
+};
+
 export const Disabled: Story = {
   render: (args) => <ButtonCard {...args} />,
   args: {