From f69c96793d96da2d6050f440bf44656d86b4d2b9 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 11 Apr 2023 16:59:52 +0300
Subject: [PATCH 1/4] fix(ControlLabel): allow control text to be stretched

---
 src/components/ControlLabel/ControlLabel.scss | 5 +++++
 src/components/ControlLabel/ControlLabel.tsx  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ControlLabel/ControlLabel.scss b/src/components/ControlLabel/ControlLabel.scss
index c7149b2aec..114c5c7147 100644
--- a/src/components/ControlLabel/ControlLabel.scss
+++ b/src/components/ControlLabel/ControlLabel.scss
@@ -27,7 +27,12 @@ $block: '.#{variables.$ns}control-label';
         line-height: 18px;
     }
 
+    &__indicator {
+        flex-shrink: 0;
+    }
+
     &__text {
+        flex-grow: 1;
         white-space: normal;
 
         #{$block}_disabled & {
diff --git a/src/components/ControlLabel/ControlLabel.tsx b/src/components/ControlLabel/ControlLabel.tsx
index d16e6b5a84..30ff9bd6bf 100644
--- a/src/components/ControlLabel/ControlLabel.tsx
+++ b/src/components/ControlLabel/ControlLabel.tsx
@@ -32,7 +32,7 @@ export const ControlLabel = forwardRef<HTMLLabelElement, Props>(
                 className={b({size, disabled}, className)}
                 data-qa={qa}
             >
-                {control}
+                <span className={b('indicator')}>{control}</span>
                 {children ? <span className={b('text', labelClassName)}>{children}</span> : null}
             </label>
         );

From 5e9a6001ec25956feea7c9996fb6fe59c9460609 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 11 Apr 2023 17:07:40 +0300
Subject: [PATCH 2/4] fix(ControlLabel): remove duplicated styles

---
 src/components/Checkbox/Checkbox.scss | 1 -
 src/components/Radio/Radio.scss       | 1 -
 src/components/Switch/Switch.scss     | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index 22bca52d13..90baf58bba 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -4,7 +4,6 @@ $block: '.#{variables.$ns}checkbox';
 
 #{$block} {
     &__indicator {
-        flex-shrink: 0;
         display: inline-block;
         position: relative;
         cursor: inherit;
diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
index 8477c38fdc..d757fc88bd 100644
--- a/src/components/Radio/Radio.scss
+++ b/src/components/Radio/Radio.scss
@@ -6,7 +6,6 @@ $discMarginLSize: 6px;
 
 #{$block} {
     &__indicator {
-        flex-shrink: 0;
         display: inline-block;
         position: relative;
         cursor: inherit;
diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss
index 7410a40636..ddbc3e5ad2 100644
--- a/src/components/Switch/Switch.scss
+++ b/src/components/Switch/Switch.scss
@@ -11,7 +11,6 @@ $block: '.#{variables.$ns}switch';
     }
 
     &__indicator {
-        flex-shrink: 0;
         display: inline-block;
         position: relative;
 

From af833033f3dbf9260ff18bb7e5216f140647b06e Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 11 Apr 2023 17:19:42 +0300
Subject: [PATCH 3/4] fix(ControlLabel): use cloneElement for control

---
 src/components/ControlLabel/ControlLabel.tsx | 8 ++++++--
 src/components/ControlLabel/types.ts         | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ControlLabel/ControlLabel.tsx b/src/components/ControlLabel/ControlLabel.tsx
index 30ff9bd6bf..65635690ef 100644
--- a/src/components/ControlLabel/ControlLabel.tsx
+++ b/src/components/ControlLabel/ControlLabel.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, cloneElement} from 'react';
 import {block} from '../utils/cn';
 import {Props} from './types';
 
@@ -24,6 +24,10 @@ export const ControlLabel = forwardRef<HTMLLabelElement, Props>(
         },
         ref,
     ) => {
+        const clonedControl = cloneElement(control, {
+            className: b('indicator', control.props.className),
+        });
+
         return (
             <label
                 ref={ref}
@@ -32,7 +36,7 @@ export const ControlLabel = forwardRef<HTMLLabelElement, Props>(
                 className={b({size, disabled}, className)}
                 data-qa={qa}
             >
-                <span className={b('indicator')}>{control}</span>
+                {clonedControl}
                 {children ? <span className={b('text', labelClassName)}>{children}</span> : null}
             </label>
         );
diff --git a/src/components/ControlLabel/types.ts b/src/components/ControlLabel/types.ts
index 0a8f06bcb9..df78bbfa69 100644
--- a/src/components/ControlLabel/types.ts
+++ b/src/components/ControlLabel/types.ts
@@ -1,4 +1,4 @@
-import {PropsWithChildren, ReactNode} from 'react';
+import {PropsWithChildren, ReactElement} from 'react';
 import {DOMProps, QAProps} from '../types';
 
 export type Size = 'm' | 'l';
@@ -8,7 +8,7 @@ export type Props = PropsWithChildren<{
     title?: string;
     disabled?: boolean;
     size?: Size;
-    control: ReactNode;
+    control: ReactElement;
 }> &
     DOMProps &
     QAProps;

From cc1b422da52ad283175f9d4b9f29da7570467521 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 11 Apr 2023 19:26:39 +0300
Subject: [PATCH 4/4] fix(ControlLabel): add stories

---
 src/components/Checkbox/__stories__/Checkbox.stories.tsx | 9 +++++++++
 src/components/Switch/__stories__/Switch.stories.tsx     | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/components/Checkbox/__stories__/Checkbox.stories.tsx b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
index c99878492a..67d1aed3c9 100644
--- a/src/components/Checkbox/__stories__/Checkbox.stories.tsx
+++ b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
@@ -37,6 +37,15 @@ const LabelTemplate: Story<CheckboxProps> = (args) => (
         <Checkbox {...args} size="m" content="content m" />
         <span style={{margin: '16px'}} />
         <Checkbox {...args} size="l" content="content l" />
+        <div style={{width: 200, marginTop: 10}}>
+            <Checkbox {...args} size="m" style={{width: '100%'}}>
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                    <span>Full</span>
+                    <span>width</span>
+                    <span>content</span>
+                </div>
+            </Checkbox>
+        </div>
     </>
 );
 export const Label = LabelTemplate.bind({});
diff --git a/src/components/Switch/__stories__/Switch.stories.tsx b/src/components/Switch/__stories__/Switch.stories.tsx
index 4b997f5129..9657ce750f 100644
--- a/src/components/Switch/__stories__/Switch.stories.tsx
+++ b/src/components/Switch/__stories__/Switch.stories.tsx
@@ -34,6 +34,15 @@ const LabelTemplate: Story<SwitchProps> = (args) => (
         <Switch {...args} size="m" content="content m" />
         <span style={{margin: '16px'}} />
         <Switch {...args} size="l" content="content l" />
+        <div style={{width: 200, marginTop: 10}}>
+            <Switch {...args} size="m" style={{width: '100%'}}>
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                    <span>Full</span>
+                    <span>width</span>
+                    <span>content</span>
+                </div>
+            </Switch>
+        </div>
     </>
 );
 export const Label = LabelTemplate.bind({});