From a36876144d2289bcf8457693e9c95b5fbdc1ba27 Mon Sep 17 00:00:00 2001
From: Maksim Sviridov <enemyworld@gmail.com>
Date: Wed, 14 Feb 2024 14:53:51 +0300
Subject: [PATCH] fix(harmony/Checkbox,harmony/Radio): fix input's width

---
 src/harmony/Checkbox/Checkbox.module.css  |  2 +-
 src/harmony/Checkbox/Checkbox.stories.tsx | 30 +++++++++++++++++++++++
 src/harmony/Radio/Radio.module.css        |  2 +-
 src/harmony/Radio/Radio.stories.tsx       | 28 +++++++++++++++++++++
 4 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/harmony/Checkbox/Checkbox.module.css b/src/harmony/Checkbox/Checkbox.module.css
index d2bb7e0d..8b7a5579 100644
--- 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
index f13fc8bc..026dcdea 100644
--- 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
index 451bd728..6d41e93b 100644
--- 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
index 05f0ef29..4adbf015 100644
--- 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>
+    );
+};