Repository: gravity-ui/uikit
Pull request #2144: feat(Checkbox): add xl size
Author: login: Leonid21B
Created: 2025-03-04T14:39:49Z | Merged: 2025-03-17T14:24:08Z

https://st.yandex-team.ru/STARTREK-53131


Diff:
diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index 12bc194345..6ddc046c85 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -105,6 +105,23 @@ $block: '.#{variables.$ns}checkbox';
                 height: 17px;
             }
         }
+
+        &_xl {
+            #{$block}__icon-svg_type_tick {
+                width: 16px;
+                height: 13px;
+            }
+
+            #{$block}__icon-svg_type_dash {
+                width: 22px;
+                height: 22px;
+            }
+
+            #{$block}__indicator {
+                width: 24px;
+                height: 24px;
+            }
+        }
     }
 
     &:hover {
diff --git a/src/components/Checkbox/README-ru.md b/src/components/Checkbox/README-ru.md
index 246bef13b5..7115167b93 100644
--- a/src/components/Checkbox/README-ru.md
+++ b/src/components/Checkbox/README-ru.md
@@ -57,10 +57,12 @@ LANDING_BLOCK-->
     code={`
 <Checkbox size="m">M Size</Checkbox>
 <Checkbox size="l">L Size</Checkbox>
+<Checkbox size="xl">XL Size</Checkbox>
 `}
 >
     <UIKit.Checkbox size="m">M Size</UIKit.Checkbox>
     <UIKit.Checkbox size="l">L Size</UIKit.Checkbox>
+    <UIKit.Checkbox size="xl">XL Size</UIKit.Checkbox>
 </ExampleBlock>
 
 LANDING_BLOCK-->
@@ -70,6 +72,7 @@ LANDING_BLOCK-->
 ```tsx
 <Checkbox size="m">M Size</Checkbox>
 <Checkbox size="l">L Size</Checkbox>
+<Checkbox size="xl">XL Size</Checkbox>
 ```
 
 <!--/GITHUB_BLOCK-->
diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index f5c7088681..db5a5b1d96 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -57,10 +57,12 @@ Use the `size` property to manage the `Checkbox` size. The default size is `m`.
     code={`
 <Checkbox size="m">M Size</Checkbox>
 <Checkbox size="l">L Size</Checkbox>
+<Checkbox size="xl">XL Size</Checkbox>
 `}
 >
     <UIKit.Checkbox size="m">M Size</UIKit.Checkbox>
     <UIKit.Checkbox size="l">L Size</UIKit.Checkbox>
+    <UIKit.Checkbox size="xl">XL Size</UIKit.Checkbox>
 </ExampleBlock>
 
 LANDING_BLOCK-->
@@ -70,6 +72,7 @@ LANDING_BLOCK-->
 ```tsx
 <Checkbox size="m">M Size</Checkbox>
 <Checkbox size="l">L Size</Checkbox>
+<Checkbox size="xl">XL Size</Checkbox>
 ```
 
 <!--/GITHUB_BLOCK-->
diff --git a/src/components/Checkbox/__stories__/Checkbox.stories.tsx b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
index ecf871e33f..cce03b5ab7 100644
--- a/src/components/Checkbox/__stories__/Checkbox.stories.tsx
+++ b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
@@ -35,12 +35,17 @@ export const Indeterminate: Story = {
 export const Size: Story = {
     render: (args) => (
         <Showcase>
-            <Checkbox {...args} size="m">
-                Size m
-            </Checkbox>
-            <Checkbox {...args} size="l">
-                Size l
-            </Checkbox>
+            <div style={{display: 'flex', alignItems: 'center', gap: '16px'}}>
+                <Checkbox {...args} size="m">
+                    Size m
+                </Checkbox>
+                <Checkbox {...args} size="l">
+                    Size l
+                </Checkbox>
+                <Checkbox {...args} size="xl">
+                    Size xl
+                </Checkbox>
+            </div>
         </Showcase>
     ),
 };
diff --git a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
index 3d8c49e084..b1e041e57e 100644
--- a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
+++ b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
@@ -8,18 +8,25 @@ export function CheckboxShowcase() {
             <ShowcaseItem title="Size">
                 <div style={{marginBlock: '1em'}}>
                     <Checkbox size="m" checked={false} content="size m" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Checkbox size="m" checked={true} content="size m" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Checkbox size="m" indeterminate={true} content="size m" />
                 </div>
                 <div style={{marginBlock: '1em'}}>
                     <Checkbox size="l" checked={false} content="size l" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Checkbox size="l" checked={true} content="size l" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Checkbox size="l" indeterminate={true} content="size l" />
                 </div>
+                <div style={{marginBlock: '1em'}}>
+                    <Checkbox size="xl" checked={false} content="size xl" />
+                    <span style={{margin: '8px'}} />
+                    <Checkbox size="xl" checked={true} content="size xl" />
+                    <span style={{margin: '8px'}} />
+                    <Checkbox size="xl" indeterminate={true} content="size xl" />
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Disabled">
                 <div style={{marginBlock: '1em'}}>
diff --git a/src/components/ControlLabel/ControlLabel.scss b/src/components/ControlLabel/ControlLabel.scss
index 5c580aee71..0f9d889a43 100644
--- a/src/components/ControlLabel/ControlLabel.scss
+++ b/src/components/ControlLabel/ControlLabel.scss
@@ -27,6 +27,11 @@ $block: '.#{variables.$ns}control-label';
         line-height: 18px;
     }
 
+    &_size_xl {
+        font-size: var(--g-text-body-2-font-size);
+        line-height: 25px;
+    }
+
     &__indicator {
         flex-shrink: 0;
     }
diff --git a/src/components/ControlLabel/types.ts b/src/components/ControlLabel/types.ts
index fa3d27dcb0..a2963ea98f 100644
--- a/src/components/ControlLabel/types.ts
+++ b/src/components/ControlLabel/types.ts
@@ -1,6 +1,6 @@
 import type {DOMProps, QAProps} from '../types';
 
-export type Size = 'm' | 'l';
+export type Size = 'm' | 'l' | 'xl';
 
 export type Props = React.PropsWithChildren<{
     labelClassName?: string;
diff --git a/src/components/Radio/README-ru.md b/src/components/Radio/README-ru.md
index 0bc54b2685..cd55fbcdce 100644
--- a/src/components/Radio/README-ru.md
+++ b/src/components/Radio/README-ru.md
@@ -53,10 +53,12 @@ LANDING_BLOCK-->
     code={`
 <Radio value="option 1" content="M Size" size="m"/>
 <Radio value="option 2" content="L Size" size="l"/>
+<Radio value="option 3" content="XL Size" size="xl"/>
 `}
 >
     <UIKit.Radio value="option 1" content="M Size" size="m"/>
     <UIKit.Radio value="option 2" content="L Size" size="l"/>
+    <UIKit.Radio value="option 3" content="XL Size" size="xl"/>
 </ExampleBlock>
 
 LANDING_BLOCK-->
@@ -66,6 +68,7 @@ LANDING_BLOCK-->
 ```tsx
 <Radio value="option 1" content="M Size" size="m"/>
 <Radio value="option 2" content="L Size" size="l"/>
+<Radio value="option 3" content="XL Size" size="xl"/>
 ```
 
 <!--/GITHUB_BLOCK-->
diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
index 4c34cd5de7..a05b774278 100644
--- a/src/components/Radio/Radio.scss
+++ b/src/components/Radio/Radio.scss
@@ -3,6 +3,7 @@
 $block: '.#{variables.$ns}radio';
 $discMarginMSize: 5px;
 $discMarginLSize: 6px;
+$discMarginXLSize: 8px;
 
 #{$block} {
     &__indicator {
@@ -93,6 +94,17 @@ $discMarginLSize: 6px;
                 inset: $discMarginLSize;
             }
         }
+
+        &_xl {
+            #{$block}__indicator {
+                width: 24px;
+                height: 24px;
+            }
+
+            #{$block}__disc::before {
+                inset: $discMarginXLSize;
+            }
+        }
     }
 
     &:hover {
diff --git a/src/components/Radio/__stories__/Radio.stories.tsx b/src/components/Radio/__stories__/Radio.stories.tsx
index 3cc80444d3..58268ac250 100644
--- a/src/components/Radio/__stories__/Radio.stories.tsx
+++ b/src/components/Radio/__stories__/Radio.stories.tsx
@@ -28,12 +28,17 @@ export const Checked: Story = {
 export const Size: Story = {
     render: (args) => (
         <Showcase>
-            <Radio {...args} size="m">
-                Size m
-            </Radio>
-            <Radio {...args} size="l">
-                Size l
-            </Radio>
+            <div style={{display: 'flex', alignItems: 'center', gap: '16px'}}>
+                <Radio {...args} size="m">
+                    Size m
+                </Radio>
+                <Radio {...args} size="l">
+                    Size l
+                </Radio>
+                <Radio {...args} size="xl">
+                    Size xl
+                </Radio>
+            </div>
         </Showcase>
     ),
 };
diff --git a/src/components/Radio/__stories__/RadioShowcase.tsx b/src/components/Radio/__stories__/RadioShowcase.tsx
index 57f3822224..60fe2fc4fb 100644
--- a/src/components/Radio/__stories__/RadioShowcase.tsx
+++ b/src/components/Radio/__stories__/RadioShowcase.tsx
@@ -8,14 +8,19 @@ export function RadioShowcase() {
             <ShowcaseItem title="Size">
                 <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="size m" value="value 1" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Radio size="m" content="size m" value="value 2" />
                 </div>
                 <div style={{marginBlock: '1em'}}>
                     <Radio size="l" content="size l" value="value 1" />
-                    <span style={{margin: '8px'}} />
+                    <span style={{margin: '16px'}} />
                     <Radio size="l" content="size l" value="value 2" />
                 </div>
+                <div style={{marginBlock: '1em'}}>
+                    <Radio size="xl" content="size xl" value="value 1" />
+                    <span style={{margin: '8px'}} />
+                    <Radio size="xl" content="size xl" value="value 2" />
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Disabled">
                 <div style={{marginBlock: '1em'}}>
diff --git a/src/components/RadioGroup/README.md b/src/components/RadioGroup/README.md
index 25c9234c3c..51d1e015b2 100644
--- a/src/components/RadioGroup/README.md
+++ b/src/components/RadioGroup/README.md
@@ -63,6 +63,7 @@ const options: RadioGroupOption[] = [
 ];
 <RadioGroup name="group1" defaultValue={options[0].value} options={options} size="m"/>
 <RadioGroup name="group2" defaultValue={options[0].value} options={options} size="l"/>
+<RadioGroup name="group3" defaultValue={options[0].value} options={options} size="xl"/>
 `}
 >
   <UIKit.RadioGroup name="group1" defaultValue="Value 1" options={
@@ -79,6 +80,13 @@ const options: RadioGroupOption[] = [
       {value: 'Value 3', content: 'Value 3'},
     ]
   } size="l"/>
+  <UIKit.RadioGroup name="group3" defaultValue="Value 1" options={
+    [
+      {value: 'Value 1', content: 'Value 1'},
+      {value: 'Value 2', content: 'Value 2'},
+      {value: 'Value 3', content: 'Value 3'},
+    ]
+  } size="xl"/>
 </ExampleBlock>
 
 LANDING_BLOCK-->
@@ -93,6 +101,7 @@ LANDING_BLOCK-->
   ];
   <RadioGroup name="group1" defaultValue={options[0].value} options={options} size="m"/>
   <RadioGroup name="group2" defaultValue={options[0].value} options={options} size="l"/>
+  <RadioGroup name="group3" defaultValue={options[0].value} options={options} size="xl"/>
 ```
 
 <!--/GITHUB_BLOCK-->
diff --git a/src/components/RadioGroup/RadioGroup.scss b/src/components/RadioGroup/RadioGroup.scss
index 6dc93bf1ae..f834016881 100644
--- a/src/components/RadioGroup/RadioGroup.scss
+++ b/src/components/RadioGroup/RadioGroup.scss
@@ -21,6 +21,14 @@ $block: '.#{variables.$ns}radio-group';
                         margin-inline-end: 15px;
                     }
                 }
+
+                &_xl {
+                    line-height: 24px;
+
+                    #{$block}__option:not(:last-child) {
+                        margin-inline-end: 15px;
+                    }
+                }
             }
         }
 
@@ -40,6 +48,14 @@ $block: '.#{variables.$ns}radio-group';
                         margin-block-end: 12px;
                     }
                 }
+
+                &_xl {
+                    line-height: 24px;
+
+                    #{$block}__option:not(:last-child) {
+                        margin-block-end: 18px;
+                    }
+                }
             }
         }
     }
diff --git a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
index 408e6f0f5a..908acc43d2 100644
--- a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
+++ b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
@@ -37,6 +37,9 @@ export const Size: Story = {
             <ShowcaseItem title="Size l">
                 <RadioGroup {...args} size="l" />
             </ShowcaseItem>
+            <ShowcaseItem title="Size xl">
+                <RadioGroup {...args} size="xl" />
+            </ShowcaseItem>
         </Showcase>
     ),
     args: {


Reviews:
user: login: amje
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T14:49:17Z
user: login: amje
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T13:12:49Z
user: login: amje
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T13:48:36Z
user: login: zamkovskaya
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T14:03:52Z
user: login: korvin89
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T14:09:13Z

Review comments:
diff_hunk: @@ -105,6 +105,23 @@ $block: '.#{variables.$ns}checkbox';
                 height: 17px;
             }
         }
+
+        &_xl {
path: src/components/Checkbox/Checkbox.scss
user: login: amje
body: Please add new size to the docs and storybook
created_at: 2025-03-04T14:49:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -35,12 +35,17 @@ export const Indeterminate: Story = {
 export const Size: Story = {
     render: (args) => (
         <Showcase>
-            <Checkbox {...args} size="m">
-                Size m
-            </Checkbox>
-            <Checkbox {...args} size="l">
-                Size l
-            </Checkbox>
+            <div style={{display: 'flex', alignItems: 'center', gap: '16px'}}>
+                <Checkbox {...args} size="m">
+                    Size m
+                </Checkbox>
+                <Checkbox {...args} size="l">
+                    Size l
+                </Checkbox>
+                <Checkbox {...args} size="xl">
+                    Size l
path: src/components/Checkbox/__stories__/Checkbox.stories.tsx
user: login: amje
body: ```suggestion
                    Size xl
```
created_at: 2025-03-17T13:11:12Z
author_association: CONTRIBUTOR

PR comments:
user: login: gravity-ui-bot
created_at: 2025-03-04T14:41:53Z
body: [Preview](https://preview.gravity-ui.com/uikit/2144/) is ready.
<!-- Sticky Pull Request Comment -->
author_association: CONTRIBUTOR
user: login: gravity-ui-bot
created_at: 2025-03-04T14:43:26Z
body: [Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/uikit/pulls/2144/index.html) is ready.
<!-- Sticky Pull Request Commentvisual tests report -->
author_association: CONTRIBUTOR
user: login: amje
created_at: 2025-03-04T14:49:57Z
body: RadioGroup seems to be broken in this size:
<img width="302" alt="" src="https://github.com/user-attachments/assets/b9523479-0115-478f-a491-1134eec08d52" />

author_association: CONTRIBUTOR