@salutejs/plasma-new-hope 0.246.2-dev.0 → 0.247.0-canary.1715.12898857186.0

package/emotion/es/components/Button/Button.template-doc.mdx

@@ -8,6 +8,7 @@ import { PropsTable, Description } from '@site/src/components';
 # Button
 Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
 
+## Button
 <Description name="Button" />
 <PropsTable name="Button" />
 
@@ -33,13 +34,20 @@ export function App() {
         <div>
             <Button text="Текст" />
 
-            <Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
+            <Button text="Текст" contentLeft={<IconDownload />} />
 
-            <Button text="Текст" contentRight={<IconDownload color="inherit" />} />
+            <Button text="Текст" contentRight={<IconDownload />} />
+
+            <Button contentLeft={<IconDownload />} />
 
             <Button text="Текст" isLoading />
 
             <Button text="Текст" isLoading loader={<div>Loader...</div>} />
+
+            <Button>
+                <IconDownload />
+                <span>Текст</span>
+            </Button>
         </div>
     );
 }
@@ -48,7 +56,7 @@ export function App() {
 ## Примеры
 
 ### Размер кнопки
-Размер кнопки задается с помощью свойства `size`:
+Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:
 
 ```tsx live
 import React from 'react';
@@ -56,13 +64,11 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div>
+       <div>
             <Button text="Button" size="xl" />
             <Button text="Button" size="l" />
             <Button text="Button" size="m" />
             <Button text="Button" size="s" />
-            <Button text="Button" size="xs" />
-            <Button text="Button" size="xxs" />
         </div>
     );
 }
@@ -112,17 +118,13 @@ export function App() {
 
 ### Вид кнопки
 Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
-+ `"default"` – по умолчанию;
-+ `"accent"` – акцентная;
 + `"primary"` – основная;
 + `"secondary"` – вторичная;
-+ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
-+ `"dark"` – темная;
-+ `"black"` – черная;
-+ `"white"` – белая.
++ `"checked"` – выбранное состояние;
++ `"clear"` – без цветового сопровождения.
 
 ```tsx live
 import React from 'react';
@@ -130,18 +132,15 @@ import { Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
-            <Button text="Кнопка" size="s" view="default" />
+        <div>
             <Button text="Кнопка" size="s" view="primary" />
-            <Button text="Кнопка" size="s" view="accent" />
             <Button text="Кнопка" size="s" view="secondary" />
-            <Button text="Кнопка" size="s" view="clear" />
             <Button text="Кнопка" size="s" view="success" />
             <Button text="Кнопка" size="s" view="warning" />
             <Button text="Кнопка" size="s" view="critical" />
-            <Button text="Кнопка" size="s" view="dark" />
-            <Button text="Кнопка" size="s" view="black" />
-            <Button text="Кнопка" size="s" view="white" />
+            <Button text="Кнопка" size="s" view="checked" />
+            <Button text="Кнопка" size="s" view="overlay" />
+            <Button text="Кнопка" size="s" view="clear" />
         </div>
     );
 }
@@ -172,6 +171,29 @@ export function App() {
 }
 ```
 
+### Квадратные и круглые кнопки
+Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
+используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
+
+По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
+**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/{{ package }}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Button contentLeft={<IconDownload color="inherit" />} />
+
+            <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
+        </div>
+    );
+}
+```
+
 ### Гиперссылка
 Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
 

package/emotion/es/components/IconButton/IconButton.template-doc.mdx

@@ -44,9 +44,6 @@ import { IconClose } from '@salutejs/plasma-icons';
 export function App() {
     return (
         <div>
-            <IconButton size="xl">
-                <IconClose color="inherit" />
-            </IconButton>
             <IconButton size="l">
                 <IconClose color="inherit" />
             </IconButton>
@@ -69,12 +66,11 @@ export function App() {
 
 Возможные значения свойства `view`:
 + `"default"` – по умолчанию;
-+ `"accent"` – акцентная;
 + `"secondary"` – вторичная;
-+ `"clear"` – без цветового сопровождения.
 + `"success"` – успешное завершение;
 + `"warning"` – предупреждение;
 + `"critical"` – ошибка;
++ `"clear"` – без цветового сопровождения;
 + `"dark"` – темная;
 + `"black"` – черная;
 + `"white"` – белая.
@@ -86,19 +82,13 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
+        <div>
             <IconButton size="s" view="default">
                 <IconClose color="inherit" />
             </IconButton>
-            <IconButton size="s" view="accent">
-                <IconClose color="inherit" />
-            </IconButton>
             <IconButton size="s" view="secondary">
                 <IconClose color="inherit" />
             </IconButton>
-            <IconButton size="s" view="clear">
-                <IconClose color="inherit" />
-            </IconButton>
             <IconButton size="s" view="success">
                 <IconClose color="inherit" />
             </IconButton>
@@ -108,6 +98,9 @@ export function App() {
             <IconButton size="s" view="critical">
                 <IconClose color="inherit" />
             </IconButton>
+            <IconButton size="s" view="clear">
+                <IconClose color="inherit" />
+            </IconButton>
             <IconButton size="s" view="dark">
                 <IconClose  color="inherit" />
             </IconButton>
@@ -135,7 +128,7 @@ import { IconClose } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
+        <div>
             <IconButton pin="square-square">
                 <IconClose color="inherit" />
             </IconButton>

package/emotion/es/components/Tree/Tree.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import Tree from 'rc-tree';
+import 'rc-tree/assets/index.css';
 import { cx } from '../../utils';
 import { IconArrowWrapper, StyledArrow, base, StyledFolder, IconFolderWrapper } from './Tree.styles';
 import { sizeToIconSize } from './utils';