fix(harmony/Checkbox,harmony/Radio): fix input's width

taskany-inc · Feb 14, 2024 · a368761 · a368761
1 parent c6119a3
commit a368761
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 2 deletions.
diff --git a/src/harmony/Checkbox/Checkbox.module.css b/src/harmony/Checkbox/Checkbox.module.css
@@ -16,7 +16,7 @@
     cursor: pointer;
     background-color: transparent;
     border: 1px solid var(--check-default);
-    flex-basis: 1rem;
+    flex: 0 0 1rem;
     width: 1rem;
     height: 1rem;
     transition-duration: var(--transition-time);

diff --git a/src/harmony/Checkbox/Checkbox.stories.tsx b/src/harmony/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 
+import { Text } from '../Text/Text';
+
 import { Checkbox } from './Checkbox';
 
 export default {
@@ -44,3 +46,31 @@ export const Rounded: StoryFn<typeof Checkbox> = (args) => {
         </div>
     );
 };
+
+export const BigLabelInSmallContainer: StoryFn<typeof Checkbox> = (args) => {
+    return (
+        <div style={{ width: 400 }}>
+            <Checkbox
+                {...args}
+                view="rounded"
+                label={
+                    <Text size="s" weight="regular" lines={2} ellipsis>
+                        very longest criteria title for this goal user@taskany.org changed goal from verus nobis to
+                        verus nobis as criteria 3 weeks ago
+                    </Text>
+                }
+                defaultChecked
+            />
+            <Checkbox
+                {...args}
+                view="default"
+                label={
+                    <Text size="s" weight="regular" lines={2} ellipsis>
+                        very longest criteria title for this goal user@taskany.org changed goal from verus nobis to
+                        verus nobis as criteria 3 weeks ago
+                    </Text>
+                }
+            />
+        </div>
+    );
+};
diff --git a/src/harmony/Radio/Radio.module.css b/src/harmony/Radio/Radio.module.css
@@ -16,7 +16,7 @@
     cursor: pointer;
     background-color: transparent;
     border: 1px solid var(--check-default);
-    flex-basis: 0.875rem;
+    flex: 0 0 0.875rem;
     width: 0.875rem;
     height: 0.875rem;
     border-radius: 50%;

diff --git a/src/harmony/Radio/Radio.stories.tsx b/src/harmony/Radio/Radio.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 
+import { Text } from '../Text/Text';
+
 import { Radio } from './Radio';
 
 export default {
@@ -30,3 +32,29 @@ export const Labeled: StoryFn<typeof Radio> = (args) => {
         </div>
     );
 };
+
+export const BigLabelInSmallContainer: StoryFn<typeof Radio> = (args) => {
+    return (
+        <div style={{ width: 400 }}>
+            <Radio
+                {...args}
+                label={
+                    <Text size="s" weight="regular" lines={2} ellipsis>
+                        very longest criteria title for this goal user@taskany.org changed goal from verus nobis to
+                        verus nobis as criteria 3 weeks ago
+                    </Text>
+                }
+                defaultChecked
+            />
+            <Radio
+                {...args}
+                label={
+                    <Text size="s" weight="regular" lines={2} ellipsis>
+                        very longest criteria title for this goal user@taskany.org changed goal from verus nobis to
+                        verus nobis as criteria 3 weeks ago
+                    </Text>
+                }
+            />
+        </div>
+    );
+};