@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

package/styled-components/cjs/components/Button/Button.template-doc.mdx

@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
@@ -55,7 +55,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -68,6 +68,48 @@ export function App() {
 }
 ```
 
+### Ширина кнопки
+Ширина кнопки регулируется с помощью свойства `stretching`.
+Возможные значения свойства `contentPlacing`:
++ `auto` – ширина подстраивается под контент;
++ `filled` – кнопка растягивается на всю доступную ширину;
++ `fixed` – кнопка фиксированной ширины.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <Button text="Button" stretching="fixed" />
+            <Button text="Button" stretching="auto" />
+            <Button text="Button" stretching="filled" />
+        </div>
+    );
+}
+```
+
+### Позиционирование контента внутри
+Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
+Возможные значения свойства `contentPlacing`:
++ `default` – контент центрируется;
++ `relaxed` – контент распологается по краям.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{package}}';
+
+export function App() {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
+            <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
+        </div>
+    );
+}
+```
+
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"primary"` – основная;
@@ -80,7 +122,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -106,7 +148,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 
 export function App() {
     return (
@@ -132,15 +174,15 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
 import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
         <div>
-            <Button contentLeft={<IconDownload color="inherit" />} />
+            <Button contentLeft={<IconDownload />} />
 
-            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
+            <Button contentLeft={<IconDownload />} pin="circle-circle" />
         </div>
     );
 }
@@ -151,7 +193,8 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Button } from '@salutejs/{{package}}';
+import { IconDownload } from '@salutejs/plasma-icons';
 
 export function App() {
     return (

package/styled-components/cjs/components/Button/Button.tokens.js

@@ -9,11 +9,13 @@ var classes = exports.classes = {
   autoStretching: 'button-stretching-auto',
   filledStretching: 'button-stretching-filled',
   fixedStretching: 'button-stretching-fixed',
+  contentRelaxed: 'button-content-relaxed',
   buttonSquare: 'button-square',
   buttonItem: 'button-item'
 };
 var tokens = exports.tokens = {
   buttonColor: '--plasma-button-color',
+  buttonValueColor: '--plasma-button-value-color',
   buttonBackgroundColor: '--plasma-button-background-color',
   buttonColorHover: '--plasma-button-color-hover',
   buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -32,6 +34,9 @@ var tokens = exports.tokens = {
   buttonFontWeight: '--plasma-button-font-weight',
   buttonLetterSpacing: '--plasma-button-letter-spacing',
   buttonLineHeight: '--plasma-button-line-height',
+  buttonLeftContentMargin: '--plasma-button-left-content-margin',
+  buttonRightContentMargin: '--plasma-button-right-content-margin',
+  buttonValueMargin: '--plasma-button-value-margin',
   buttonDisabledOpacity: '--plasma-button-disabled-opacity',
   buttonFocusColor: '--plasma-button-focus-color',
   buttonSpinnerColor: '--plasma-button-spinner-color',

package/styled-components/cjs/components/Button/variations/_stretching/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Button = /*#__PURE__*/require("../../Button.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);

package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx

@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/{{ package }}';
+import { Checkbox } from '@salutejs/s{{package}}';
 
 export function App() {
     return (
@@ -31,7 +31,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Checkbox } from '@salutejs/{{ package }}';
+import { Checkbox } from '@salutejs/s{{package}}';
 
 export function App() {
     return (

package/styled-components/cjs/components/Chip/Chip.template-doc.mdx

@@ -72,7 +72,7 @@ export function App() {
 Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
 + `"default"` – основная;
 + `"secondary"` – вторичная;
-+ `"accent"` – акцентный;
++ `"accent"` – акцентый.
 
 ```tsx live
 import React from 'react';

package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx

@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
 ## Клавиатурная навигация
 
 Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
--  `Tab` - переход на target (input)
+-  `Tab` - переход на таргет (инпут)
 -  `Shift` + `tab` - выход с него (теряем фокус)
 -  `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
 -  `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
--  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
--  Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
--  Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
--  В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
+-  `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
+-  Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
+-  Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
+-  В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
 -  Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
--  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
--  Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
--  Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
+-  Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)  
+-  Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
+-  Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
 -  Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
--  Если удалили последний чип, то фокусируемся на target
+-  Если удалили последний чип, то фокусируемся на таргете
 -  Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
 -  Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
--  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
--  Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
+-  Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
+-  Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
 
 ### Single 
 
@@ -178,12 +178,12 @@ export function App() {
 ```
 
 ### Применение пользовательского фильтра 
-`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
-которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
+`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
+которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
 
 ```tsx live
 import React from 'react';
-import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
+import { Combobox } from '@salutejs/{{ package }}';
 
 export function App() {
     const [value, setValue] = React.useState(['item_0']);

package/styled-components/cjs/components/Counter/Counter.template-doc.mdx

@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Примеры
 
-### Максимальное значение числового badge
+### Максимальное значение числового бейджа
 Задается с помощью свойства `maxCount`.
 
 ```tsx live 
@@ -28,7 +28,7 @@ export function App() {
 }
 ```
 
-### Размер числового badge
+### Размер числового бейджа
 Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
 
 ```tsx live 
@@ -45,7 +45,7 @@ export function App() {
 }
 ```
 
-### Вид числового badge
+### Вид числового бейджа
 Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
 
 + `"primary"` – основной бейдж;
@@ -53,8 +53,8 @@ export function App() {
 + `"positive"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"negative"` – ошибка;
-+ `"dark"` – темный badge;
-+ `"light"` – светлый badge.
++ `"dark"` – темный бэйдж;
++ `"light"` – светлый бэйдж.
 
 ```tsx live 
 import React from 'react';

package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx

@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
 а также определить отступы от точки с помощью `offset`.
  
 У компонента Drawer есть 2 режима отображения: 
-- модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
-- немодальный - нет подложки, scroll и фокус не заблокированы.
+модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус; 
+немодальный - нет подложки, скролл и фокус не заблокированы.
 
 ```tsx live
 import React, { useRef } from 'react';
 import { IconDone } from '@salutejs/plasma-icons';
-import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
 
 import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/{{ package }}';