@salutejs/plasma-new-hope 0.247.0-canary.1715.12898857186.0 → 0.247.0-canary.1716.12909310713.0

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

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

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

@@ -1,6 +1,5 @@
 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';