Repository: salute-developers/plasma
Pull request #1843: PLASMA-4550: add xl button to plasma-giga
Author: login: iljs
Created: 2025-03-14T07:06:17Z | Merged: 2025-03-17T11:39:45Z

## PLASMA-GIGA

### Button
- Добавлен размер `xl`

### ButtonGroup
- Добавлен размер `xl`

### IconButton
- Добавлен размер `xl`

### What/why changed
<!-- GITHUB_RELEASE PR BODY: canary-version -->
<details>
  <summary>📦 Published PR as canary version: <code>Canary Versions</code></summary>
  <br />

  :sparkles: Test out this PR locally via:
  
  ```bash
  npm install @salutejs/plasma-giga@0.283.1-canary.1843.13897151661.0
  # or 
  yarn add @salutejs/plasma-giga@0.283.1-canary.1843.13897151661.0
  ```
</details>
<!-- GITHUB_RELEASE PR BODY: canary-version -->



Diff:
diff --git a/packages/plasma-giga/api/plasma-giga.api.md b/packages/plasma-giga/api/plasma-giga.api.md
index c5fea5af26e..ed3c1d30b27 100644
--- a/packages/plasma-giga/api/plasma-giga.api.md
+++ b/packages/plasma-giga/api/plasma-giga.api.md
@@ -1100,6 +1100,8 @@ black: PolymorphicClassName;
 white: PolymorphicClassName;
 };
 size: {
+xl: PolymorphicClassName;
+xlr: PolymorphicClassName;
 l: PolymorphicClassName;
 lr: PolymorphicClassName;
 m: PolymorphicClassName;
@@ -1182,6 +1184,8 @@ black: PolymorphicClassName;
 white: PolymorphicClassName;
 };
 size: {
+xl: PolymorphicClassName;
+xlr: PolymorphicClassName;
 l: PolymorphicClassName;
 lr: PolymorphicClassName;
 m: PolymorphicClassName;
@@ -1886,6 +1890,8 @@ black: PolymorphicClassName;
 white: PolymorphicClassName;
 };
 size: {
+xl: PolymorphicClassName;
+xlr: PolymorphicClassName;
 l: PolymorphicClassName;
 lr: PolymorphicClassName;
 m: PolymorphicClassName;
diff --git a/packages/plasma-giga/src/components/Button/Button.config.ts b/packages/plasma-giga/src/components/Button/Button.config.ts
index 8978c93f566..77e337e65e3 100644
--- a/packages/plasma-giga/src/components/Button/Button.config.ts
+++ b/packages/plasma-giga/src/components/Button/Button.config.ts
@@ -93,6 +93,42 @@ export const config = {
             `,
         },
         size: {
+            xl: css`
+                ${buttonTokens.buttonHeight}: 4rem;
+                ${buttonTokens.buttonWidth}: 12.5rem;
+                ${buttonTokens.buttonPadding}: 1.75rem;
+                ${buttonTokens.buttonRadius}: ${roundedRadius};
+                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 1.5rem;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
+
+                ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 -0.125rem;
+                ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.625rem;
+                ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
+            `,
+            xlr: css`
+                ${buttonTokens.buttonHeight}: 4rem;
+                ${buttonTokens.buttonWidth}: 12.5rem;
+                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 1.5rem;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
+
+                ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 0;
+                ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.625rem;
+                ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
+            `,
             l: css`
                 ${buttonTokens.buttonHeight}: 3.5rem;
                 ${buttonTokens.buttonWidth}: 12.5rem;
diff --git a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts
index 00e1fa7b033..2702d57264c 100644
--- a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts
+++ b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts
@@ -112,6 +112,33 @@ export const config = {
             `,
         },
         size: {
+            xl: css`
+                ${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
+                ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem;
+                ${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
+
+                ${buttonGroupTokens.buttonHeight}: 4rem;
+                ${buttonGroupTokens.buttonPadding}: 1.75rem;
+                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+            `,
+            xlr: css`
+                ${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
+                ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem;
+                ${buttonGroupTokens.buttonSideRadius}: ${roundedRadius};
+
+                ${buttonGroupTokens.buttonHeight}: 4rem;
+                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+            `,
             l: css`
                 ${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius};
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem;
diff --git a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx
index f4b37607d2e..5edd719b37f 100644
--- a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { Button } from '../Button/Button';
 
 import { ButtonGroup } from './ButtonGroup';
+import { config } from './ButtonGroup.config';
 
 type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
-const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+const { views, sizes } = getConfigVariations(config);
 const orientationValues = ['horizontal', 'vertical'];
 const gapValues = ['none', 'dense', 'wide'];
 const shapeValues = ['segmented', 'default'];
diff --git a/packages/plasma-giga/src/components/IconButton/IconButton.config.ts b/packages/plasma-giga/src/components/IconButton/IconButton.config.ts
index 35c2071d752..16f75b09037 100644
--- a/packages/plasma-giga/src/components/IconButton/IconButton.config.ts
+++ b/packages/plasma-giga/src/components/IconButton/IconButton.config.ts
@@ -80,6 +80,34 @@ export const config = {
             `,
         },
         size: {
+            xl: css`
+                ${iconButtonTokens.iconButtonHeight}: 4rem;
+                ${iconButtonTokens.iconButtonWidth}: 4rem;
+                ${iconButtonTokens.iconButtonPadding}: 1.75rem;
+                ${iconButtonTokens.iconButtonRadius}: 1rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
+            xlr: css`
+                ${iconButtonTokens.iconButtonHeight}: 4rem;
+                ${iconButtonTokens.iconButtonWidth}: 4rem;
+                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
+                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
+                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem;
+                ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
+            `,
             l: css`
                 ${iconButtonTokens.iconButtonHeight}: 3.5rem;
                 ${iconButtonTokens.iconButtonWidth}: 3.5rem;
diff --git a/packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx b/packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx
index 0a94c08e993..da2fc9ec291 100644
--- a/packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx
@@ -1,14 +1,14 @@
 import React, { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { IconClose } from '@salutejs/plasma-icons';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from './IconButton';
+import { config } from './IconButton.config';
 
 type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
 
-const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
-const sizes = ['l', 'm', 's', 'xs'];
+const { views, sizes } = getConfigVariations(config);
 const pins = [
     'square-square',
     'square-clear',
@@ -61,6 +61,8 @@ export default meta;
 
 const getSizeForIcon = (size) => {
     const map = {
+        xl: 's',
+        xlr: 's',
         mr: 's',
         lr: 's',
         m: 's',


Reviews:
user: login: denivladislav
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:41:42Z
user: login: denivladislav
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:49:08Z
user: login: iljs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:24:56Z
user: login: Yakutoc
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-14T12:27:27Z
user: login: iljs
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:35:36Z
user: login: Yakutoc
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-14T13:01:08Z
user: login: Yakutoc
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-14T13:02:16Z
user: login: Yakutoc
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-17T05:34:44Z

Review comments:
path: packages/plasma-giga/src/components/Button/Button.config.ts
user: login: denivladislav
body: В сторибуках для `ButtonGroup` и `IconButton` размер `xl` не добавился

<img width="1082" alt="storybook1" src="https://github.com/user-attachments/assets/6485b250-1c4c-4e1e-bb88-81dcf288314f" />

<img width="1186" alt="storybook2" src="https://github.com/user-attachments/assets/ff6657c6-f96d-4948-b219-4607d3f06129" />

created_at: 2025-03-14T08:41:42Z
author_association: CONTRIBUTOR
path: packages/plasma-giga/src/components/Button/Button.config.ts
user: login: iljs
body: complite

created_at: 2025-03-14T12:24:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -11,7 +11,7 @@ type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
 const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
path: packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx
user: login: Yakutoc
body: @iljs Давай здесь используем метод из @salutejs/plasma-sb-utils

```
const { views, sizes } = getConfigVariations(config);
```

посмотри как сделано в `Button.stories.tsx`
created_at: 2025-03-14T12:27:27Z
author_association: COLLABORATOR
diff_hunk: @@ -11,7 +11,7 @@ type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
 const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
path: packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.stories.tsx
user: login: iljs
body: fixed
created_at: 2025-03-14T12:35:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,14 +1,14 @@
 import React, { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { IconClose } from '@salutejs/plasma-icons';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from './IconButton';
+import { config } from './IconButton.config';
 
 type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
 
-const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
-const sizes = ['l', 'm', 's', 'xs'];
+const { views, sizes } = getConfigVariations(config);
path: packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx
user: login: Yakutoc
body: https://plasma.sberdevices.ru/pr/pr-1843/giga-storybook/?path=/story/data-entry-iconbutton--default&args=size:xl

сломалось 
created_at: 2025-03-14T13:01:08Z
author_association: COLLABORATOR
diff_hunk: @@ -1,14 +1,14 @@
 import React, { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { IconClose } from '@salutejs/plasma-icons';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { IconButton } from './IconButton';
+import { config } from './IconButton.config';
 
 type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };
 
-const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
-const sizes = ['l', 'm', 's', 'xs'];
+const { views, sizes } = getConfigVariations(config);
path: packages/plasma-giga/src/components/IconButton/IconButton.stories.tsx
user: login: Yakutoc
body: и давай поменяем на select

```
     size: {
            options: sizes,
            control: {
                type: 'select',
            },
        },
```
created_at: 2025-03-14T13:02:16Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-14T07:10:32Z
body: Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1843/
<!-- Sticky Pull Request CommentTheme Builder -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-14T07:39:16Z
body: Documentation preview deployed!

website: https://plasma.sberdevices.ru/pr/pr-1843/
giga storybook: https://plasma.sberdevices.ru/pr/pr-1843/giga-storybook/
<!-- Sticky Pull Request CommentLinks -->
author_association: CONTRIBUTOR