From a80553d1dba42992f247c5089caba54a04da6e1d Mon Sep 17 00:00:00 2001 From: Vadim Kudriavtsev Date: Fri, 20 Dec 2024 12:51:07 +0300 Subject: [PATCH] fix: Button & IconButton storybook & docs --- .gitignore | 1 + .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + .../components/Button/Button.template-doc.mdx | 34 +++++--- .../src/components/Button/Button.types.ts | 14 ++-- .../IconButton/IconButton.template-doc.mdx | 22 +++-- .../components/Button/Button.stories.tsx | 9 +- .../components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.tsx | 2 +- .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + .../src/components/Button/Button.stories.tsx | 2 + scaffold/scaffold-components.js | 19 ++++- .../src/helpers/getConfigVariations.ts | 63 ++++++++++++++ utils/plasma-sb-utils/src/helpers/index.ts | 1 + .../docs/components/Button.mdx | 29 +++---- .../docs/components/IconButton.mdx | 78 +++++++++++------ .../docs/components/Button.mdx | 27 +++++- .../docs/components/IconButton.mdx | 22 +++-- .../plasma-ui-docs/docs/components/Button.mdx | 1 - .../docs/components/Button.mdx | 30 +++---- .../docs/components/IconButton.mdx | 83 +++++++++++++------ .../sdds-cs-docs/docs/components/Button.mdx | 4 +- .../sdds-dfa-docs/docs/components/Button.mdx | 32 ++++--- .../docs/components/IconButton.mdx | 22 +++-- .../docs/components/Button.mdx | 35 ++++---- .../docs/components/IconButton.mdx | 16 ++-- .../sdds-serv-docs/docs/components/Button.mdx | 39 +++++---- .../docs/components/IconButton.mdx | 22 +++-- 33 files changed, 426 insertions(+), 199 deletions(-) create mode 100644 utils/plasma-sb-utils/src/helpers/getConfigVariations.ts diff --git a/.gitignore b/.gitignore index 1e3e7ec808..36790f1402 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ node_modules/ .idea/ +.nx/ tsconfig.tsbuildinfo tsconfig.es.tsbuildinfo cypress/snapshots/**/__diff_output__ diff --git a/packages/plasma-asdk/src/components/Button/Button.stories.tsx b/packages/plasma-asdk/src/components/Button/Button.stories.tsx index a439337b27..76226604a1 100644 --- a/packages/plasma-asdk/src/components/Button/Button.stories.tsx +++ b/packages/plasma-asdk/src/components/Button/Button.stories.tsx @@ -95,6 +95,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/plasma-b2c/src/components/Button/Button.stories.tsx b/packages/plasma-b2c/src/components/Button/Button.stories.tsx index b14ffa834c..6bc686264d 100644 --- a/packages/plasma-b2c/src/components/Button/Button.stories.tsx +++ b/packages/plasma-b2c/src/components/Button/Button.stories.tsx @@ -95,6 +95,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx b/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx index 7b7743c9c3..763df1fa89 100644 --- a/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx +++ b/packages/plasma-new-hope/src/components/Button/Button.template-doc.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -34,18 +33,18 @@ export function App() {
} /> @@ -56,7 +55,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -64,11 +63,13 @@ import { Button } from '@salutejs/{{ package }}'; export function App() { return ( -
+
); } @@ -118,13 +119,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 +137,18 @@ import { Button } from '@salutejs/{{ package }}'; export function App() { return ( -
+
+
); } diff --git a/packages/plasma-new-hope/src/components/Button/Button.types.ts b/packages/plasma-new-hope/src/components/Button/Button.types.ts index 32ecfb0a39..fd5cd6fba4 100644 --- a/packages/plasma-new-hope/src/components/Button/Button.types.ts +++ b/packages/plasma-new-hope/src/components/Button/Button.types.ts @@ -58,8 +58,7 @@ type CustomButtonProps = { loader?: ReactNode; /** * Кнопка растягивается на всю доступную ширину - * @deprecated - * Использовать stretching + * @deprecated Использовать stretching */ stretch?: boolean; /** @@ -73,8 +72,7 @@ type CustomButtonProps = { stretching?: Stretching; /** * Кнопка принимает соотношение сторон 1:1 - * @deprecated - * Использовать для этого случая IconButton + * @deprecated Использовать для этого случая IconButton */ square?: boolean; /** @@ -82,7 +80,7 @@ type CustomButtonProps = { */ focused?: boolean; /** - * кнопка неактивна + * Кнопка неактивна */ disabled?: boolean; /** @@ -99,8 +97,7 @@ type CustomButtonProps = { size?: string; /** * Добавить рамку при фокусе - * @deprecated - * использовать focused + * @deprecated использовать focused */ outlined?: boolean; /** @@ -115,8 +112,7 @@ type CustomButtonProps = { shiftRight?: boolean; /** * Степень размытия фона - * @deprecated - * для кнопок без прозрачности не работает + * @deprecated для кнопок без прозрачности не работает */ blur?: Blur; }; diff --git a/packages/plasma-new-hope/src/components/IconButton/IconButton.template-doc.mdx b/packages/plasma-new-hope/src/components/IconButton/IconButton.template-doc.mdx index b5f76c368e..a1c67069a6 100644 --- a/packages/plasma-new-hope/src/components/IconButton/IconButton.template-doc.mdx +++ b/packages/plasma-new-hope/src/components/IconButton/IconButton.template-doc.mdx @@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + @@ -56,6 +59,9 @@ export function App() { + + +
); } @@ -66,11 +72,12 @@ export function App() { Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
+ + + + + + @@ -98,9 +111,6 @@ export function App() { - - - @@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx index aa2bcee11b..5113cf2ea6 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx @@ -1,15 +1,16 @@ import * as React from 'react'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; -import { disableProps } from '@salutejs/plasma-sb-utils'; +import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils'; import { IconMic } from '../../../../components/_Icon'; import { WithTheme } from '../../../_helpers'; import { Button } from './Button'; +import { config } from './Button.config'; + +const { views, sizes } = getConfigVariations(config); -const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light']; -const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs']; const stretchingValues = ['auto', 'filled', 'fixed']; const pinValues = [ '', @@ -79,7 +80,7 @@ const meta: Meta = { }, table: { defaultValue: { summary: 'bottom' } }, }, - ...disableProps(['value']), + ...disableProps(['value', 'focused', 'pin']), }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx index 62bf2d0e98..938b5597da 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx @@ -79,7 +79,7 @@ const meta: Meta = { }, table: { defaultValue: { summary: 'bottom' } }, }, - ...disableProps(['value']), + ...disableProps(['value', 'pin', 'focused']), }, }; diff --git a/packages/plasma-ui/src/components/Button/Button.stories.tsx b/packages/plasma-ui/src/components/Button/Button.stories.tsx index 4b1ab3f2d7..fb8e078aae 100644 --- a/packages/plasma-ui/src/components/Button/Button.stories.tsx +++ b/packages/plasma-ui/src/components/Button/Button.stories.tsx @@ -60,6 +60,8 @@ const meta: Meta = { 'onFocus', 'onBlur', 'blur', + 'pin', + 'focused', ]), }, }; diff --git a/packages/plasma-web/src/components/Button/Button.stories.tsx b/packages/plasma-web/src/components/Button/Button.stories.tsx index b14ffa834c..6bc686264d 100644 --- a/packages/plasma-web/src/components/Button/Button.stories.tsx +++ b/packages/plasma-web/src/components/Button/Button.stories.tsx @@ -95,6 +95,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/plasma-web/src/components/Button/Button.tsx b/packages/plasma-web/src/components/Button/Button.tsx index df45c80c80..2e49f93491 100644 --- a/packages/plasma-web/src/components/Button/Button.tsx +++ b/packages/plasma-web/src/components/Button/Button.tsx @@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(buttonConfig, config); const ButtonComponent = component(mergedConfig); /** - * Кнопка. + * Компонент Button. */ export const Button = ButtonComponent; diff --git a/packages/sdds-cs/src/components/Button/Button.stories.tsx b/packages/sdds-cs/src/components/Button/Button.stories.tsx index 70981fcb95..da5dd19abf 100644 --- a/packages/sdds-cs/src/components/Button/Button.stories.tsx +++ b/packages/sdds-cs/src/components/Button/Button.stories.tsx @@ -97,6 +97,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/sdds-dfa/src/components/Button/Button.stories.tsx b/packages/sdds-dfa/src/components/Button/Button.stories.tsx index c0db68906c..4149e5c27f 100644 --- a/packages/sdds-dfa/src/components/Button/Button.stories.tsx +++ b/packages/sdds-dfa/src/components/Button/Button.stories.tsx @@ -97,6 +97,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/sdds-finportal/src/components/Button/Button.stories.tsx b/packages/sdds-finportal/src/components/Button/Button.stories.tsx index c0db68906c..4149e5c27f 100644 --- a/packages/sdds-finportal/src/components/Button/Button.stories.tsx +++ b/packages/sdds-finportal/src/components/Button/Button.stories.tsx @@ -97,6 +97,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/sdds-insol/src/components/Button/Button.stories.tsx b/packages/sdds-insol/src/components/Button/Button.stories.tsx index 78e4a79343..54a658965d 100644 --- a/packages/sdds-insol/src/components/Button/Button.stories.tsx +++ b/packages/sdds-insol/src/components/Button/Button.stories.tsx @@ -98,6 +98,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/packages/sdds-serv/src/components/Button/Button.stories.tsx b/packages/sdds-serv/src/components/Button/Button.stories.tsx index c0db68906c..4149e5c27f 100644 --- a/packages/sdds-serv/src/components/Button/Button.stories.tsx +++ b/packages/sdds-serv/src/components/Button/Button.stories.tsx @@ -97,6 +97,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; diff --git a/scaffold/scaffold-components.js b/scaffold/scaffold-components.js index b7916de807..4001941ebd 100644 --- a/scaffold/scaffold-components.js +++ b/scaffold/scaffold-components.js @@ -11,9 +11,12 @@ async function main() { npm_config_package: npmConfigPackage, npm_config_vertical: npmConfigVertical, npm_config_exclude: npmConfigExclude, + INCLUDE_COMPONENTS: npmConfigInclude, } = process.env || {}; const excludeList = npmConfigExclude ? npmConfigExclude.split(',').map((component) => component?.trim()) : []; + const includeList = npmConfigInclude ? npmConfigInclude.split(',').map((component) => component?.trim()) : []; + const hasIncludeList = Boolean(includeList.length); if (!npmConfigPackage) { return; @@ -31,9 +34,19 @@ async function main() { // INFO: Получаем актуальный список директорий компонентов // например ['AutoComplete','Avatar','AvatarGroup','Badge','Button','ButtonGroup','Cell'] - const components = (await readdir(packageDir)).filter( - (component) => !excludeList.includes(component.toLowerCase()), - ); + const components = (await readdir(packageDir)).filter((component) => { + const isExcluded = excludeList.includes(component.toLowerCase()); + + if (isExcluded) { + return false; + } + + if (hasIncludeList) { + return includeList.includes(component.toLowerCase()); + } + + return true; + }); // INFO: Собираем шаблоны документации для компонентов // [ diff --git a/utils/plasma-sb-utils/src/helpers/getConfigVariations.ts b/utils/plasma-sb-utils/src/helpers/getConfigVariations.ts new file mode 100644 index 0000000000..42f31ed030 --- /dev/null +++ b/utils/plasma-sb-utils/src/helpers/getConfigVariations.ts @@ -0,0 +1,63 @@ +const sizesOrder = ['xxs', 'xxsr', 'xs', 'xsr', 's', 'sr', 'm', 'mr', 'l', 'lr', 'xl', 'xlr', 'xxl', 'xxlr']; + +const nonExistSizeOrder = sizesOrder.length; + +const sortSizes = (sizes: string[]) => { + return sizes.sort((a, b) => { + const aIndex = sizesOrder.indexOf(a); + const bIndex = sizesOrder.indexOf(b); + + return (aIndex === -1 ? nonExistSizeOrder : aIndex) - (bIndex === -1 ? nonExistSizeOrder : bIndex); + }); +}; + +const viewsOrder = [ + 'default', + 'accent', + 'primary', + 'secondary', + 'clear', + 'success', + 'warning', + 'critical', + 'positive', + 'negative', + 'dark', + 'black', + 'white', +]; + +const nonExistViewOrder = viewsOrder.length; + +const sortViews = (views: string[]) => { + return views.sort((a, b) => { + const aIndex = viewsOrder.indexOf(a); + const bIndex = viewsOrder.indexOf(b); + + return (aIndex === -1 ? nonExistViewOrder : aIndex) - (bIndex === -1 ? nonExistViewOrder : bIndex); + }); +}; + +const sortLexicographically = (keys: string[]) => keys.sort((a, b) => a.localeCompare(b)); + +const filterCss = (keys: string[]) => keys.filter((keys) => keys !== 'css'); + +// filter xsr, xssr... +const filterRSizes = (sizes: string[]) => sizes.filter((size) => !size.endsWith('r')); + +export const getConfigVariations = ( + config: { variations?: { view?: object; size?: object } }, + props?: { skipRSizes: boolean }, +) => { + const { skipRSizes = true } = props || {}; + + const viewsKeys = Object.keys(config.variations?.view || {}); + const sizesKeys = Object.keys(config.variations?.size || {}); + const views = filterCss(viewsKeys); + const sizes = skipRSizes ? filterRSizes(filterCss(sizesKeys)) : filterCss(sizesKeys); + + return { + views: sortViews(sortLexicographically(views)), + sizes: sortSizes(sizes), + }; +}; diff --git a/utils/plasma-sb-utils/src/helpers/index.ts b/utils/plasma-sb-utils/src/helpers/index.ts index 36d8e48790..e170325be4 100644 --- a/utils/plasma-sb-utils/src/helpers/index.ts +++ b/utils/plasma-sb-utils/src/helpers/index.ts @@ -2,5 +2,6 @@ export { disableProps } from './disableProps'; export { flattenPalette } from './flattenPalette'; export { extractCanvasThemeColors, extractWebThemeColors } from './themeColors'; export { getOpacityFromHex, getGroupedTokens } from './colorTokens'; +export { getConfigVariations } from './getConfigVariations'; export type { GroupedTokens } from './colorTokens'; diff --git a/website/plasma-b2c-docs/docs/components/Button.mdx b/website/plasma-b2c-docs/docs/components/Button.mdx index 858d8f8807..e41f3cab88 100644 --- a/website/plasma-b2c-docs/docs/components/Button.mdx +++ b/website/plasma-b2c-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -35,18 +34,18 @@ export function App() {
} />
@@ -57,7 +56,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -103,7 +102,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; @@ -122,12 +121,13 @@ export function App() { ### Вид кнопки Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"primary"` – основная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -138,14 +138,15 @@ import { Button } from '@salutejs/plasma-b2c'; export function App() { return ( -
+
+ +
); } diff --git a/website/plasma-b2c-docs/docs/components/IconButton.mdx b/website/plasma-b2c-docs/docs/components/IconButton.mdx index 0c40b863f3..dd84f91163 100644 --- a/website/plasma-b2c-docs/docs/components/IconButton.mdx +++ b/website/plasma-b2c-docs/docs/components/IconButton.mdx @@ -25,7 +25,7 @@ export function App() { return (
- +
); @@ -45,17 +45,23 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + - + - + - + - + + + +
); @@ -63,14 +69,16 @@ export function App() { ``` ### Вид кнопки -Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: +Вид кнопки задается с помощью свойства `view`. +Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -82,33 +90,36 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
- + + + + - + + + + - + - + - - - - + - + - +
); @@ -117,7 +128,6 @@ export function App() { ### Границы кнопки Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`: - + `square` – обычное скругление; + `circle` – сильное скругление; + `clear` – нет скругления. @@ -129,14 +139,28 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
- - - - - - - +
+ + + + + + + + + + + + + + + + + + + + +
); } diff --git a/website/plasma-giga-docs/docs/components/Button.mdx b/website/plasma-giga-docs/docs/components/Button.mdx index 8fde928fb4..0fcaab8971 100644 --- a/website/plasma-giga-docs/docs/components/Button.mdx +++ b/website/plasma-giga-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -56,7 +55,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -65,9 +64,12 @@ import { Button } from '@salutejs/plasma-giga'; export function App() { return (
+
); } @@ -116,7 +118,18 @@ export function App() { ``` ### Вид кнопки -Вид кнопки задается с помощью свойства `view`: +Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: ++ `"default"` – по умолчанию; ++ `"accent"` – акцентная; ++ `"primary"` – основная; ++ `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. ++ `"success"` – успешное завершение; ++ `"warning"` – предупреждение; ++ `"critical"` – ошибка; ++ `"dark"` – темная; ++ `"black"` – черная; ++ `"white"` – белая. ```tsx live import React from 'react'; @@ -124,12 +137,18 @@ import { Button } from '@salutejs/plasma-giga'; export function App() { return ( -
+
+
); } diff --git a/website/plasma-giga-docs/docs/components/IconButton.mdx b/website/plasma-giga-docs/docs/components/IconButton.mdx index a581c89dc1..b683df599c 100644 --- a/website/plasma-giga-docs/docs/components/IconButton.mdx +++ b/website/plasma-giga-docs/docs/components/IconButton.mdx @@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + @@ -56,6 +59,9 @@ export function App() { + + +
); } @@ -66,11 +72,12 @@ export function App() { Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
+ + + + + + @@ -98,9 +111,6 @@ export function App() { - - - @@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
diff --git a/website/plasma-ui-docs/docs/components/Button.mdx b/website/plasma-ui-docs/docs/components/Button.mdx index 830312c728..514580f318 100644 --- a/website/plasma-ui-docs/docs/components/Button.mdx +++ b/website/plasma-ui-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button diff --git a/website/plasma-web-docs/docs/components/Button.mdx b/website/plasma-web-docs/docs/components/Button.mdx index b036e615c5..2c8ab3e3ac 100644 --- a/website/plasma-web-docs/docs/components/Button.mdx +++ b/website/plasma-web-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -35,18 +34,18 @@ export function App() {
} />
@@ -57,7 +56,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -103,7 +102,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; @@ -122,12 +121,13 @@ export function App() { ### Вид кнопки Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"primary"` – основная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -138,14 +138,15 @@ import { Button } from '@salutejs/plasma-web'; export function App() { return ( -
+
+ +
); } @@ -212,7 +209,6 @@ export function App() { ```tsx live import React from 'react'; import { Button } from '@salutejs/plasma-web'; -import { IconDownload } from '@salutejs/plasma-icons'; export function App() { return ( diff --git a/website/plasma-web-docs/docs/components/IconButton.mdx b/website/plasma-web-docs/docs/components/IconButton.mdx index c87fb9fc9e..c0647982dd 100644 --- a/website/plasma-web-docs/docs/components/IconButton.mdx +++ b/website/plasma-web-docs/docs/components/IconButton.mdx @@ -25,7 +25,7 @@ export function App() { return (
- +
); @@ -40,21 +40,28 @@ export function App() { ```tsx live import React from 'react'; import { IconButton } from '@salutejs/plasma-web'; +import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + - + - + - + - + + + +
); @@ -62,13 +69,16 @@ export function App() { ``` ### Вид кнопки -Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: +Вид кнопки задается с помощью свойства `view`. + +Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -76,36 +86,40 @@ export function App() { ```tsx live import React from 'react'; import { IconButton } from '@salutejs/plasma-web'; +import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
- + + + + - + + + + - + - + - - - - + - + - +
); @@ -121,18 +135,33 @@ export function App() { ```tsx live import React from 'react'; import { IconButton } from '@salutejs/plasma-web'; +import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
- - - - - - - +
+ + + + + + + + + + + + + + + + + + + + +
); } -``` \ No newline at end of file +``` diff --git a/website/sdds-cs-docs/docs/components/Button.mdx b/website/sdds-cs-docs/docs/components/Button.mdx index 48f6a8bb64..c224fe052e 100644 --- a/website/sdds-cs-docs/docs/components/Button.mdx +++ b/website/sdds-cs-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -97,7 +96,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; @@ -188,7 +187,6 @@ export function App() { ```tsx live import React from 'react'; import { Button } from '@salutejs/sdds-cs'; -import { IconDownload } from '@salutejs/plasma-icons'; export function App() { return ( diff --git a/website/sdds-dfa-docs/docs/components/Button.mdx b/website/sdds-dfa-docs/docs/components/Button.mdx index 125f4dcc13..035c1b2abc 100644 --- a/website/sdds-dfa-docs/docs/components/Button.mdx +++ b/website/sdds-dfa-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -34,18 +33,18 @@ export function App() {
} />
@@ -56,7 +55,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -69,6 +68,8 @@ export function App() {
); } @@ -118,13 +119,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 +137,18 @@ import { Button } from '@salutejs/sdds-dfa'; export function App() { return ( -
+
+
); } diff --git a/website/sdds-dfa-docs/docs/components/IconButton.mdx b/website/sdds-dfa-docs/docs/components/IconButton.mdx index 5f9f61e826..0185bc1d0c 100644 --- a/website/sdds-dfa-docs/docs/components/IconButton.mdx +++ b/website/sdds-dfa-docs/docs/components/IconButton.mdx @@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + @@ -56,6 +59,9 @@ export function App() { + + +
); } @@ -66,11 +72,12 @@ export function App() { Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
+ + + + + + @@ -98,9 +111,6 @@ export function App() { - - - @@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
diff --git a/website/sdds-insol-docs/docs/components/Button.mdx b/website/sdds-insol-docs/docs/components/Button.mdx index 082079eda3..4f0f8585a9 100644 --- a/website/sdds-insol-docs/docs/components/Button.mdx +++ b/website/sdds-insol-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -34,18 +33,18 @@ export function App() {
} />
@@ -56,7 +55,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"xl"`, `"l"`, `"m"`, `"s"`, `"xs"` или `"xxs"`: +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -102,7 +101,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; @@ -120,13 +119,17 @@ export function App() { ### Вид кнопки Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: -+ `"default"` – основная; ++ `"default"` – по умолчанию; ++ `"accent"` – акцентная; ++ `"primary"` – основная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"checked"` – выбранное состояние; -+ `"clear"` – без цветового сопровождения. ++ `"dark"` – темная; ++ `"black"` – черная; ++ `"white"` – белая. ```tsx live import React from 'react'; @@ -134,15 +137,18 @@ import { Button } from '@salutejs/sdds-insol'; export function App() { return ( -
+
); } @@ -202,7 +208,6 @@ export function App() { ```tsx live import React from 'react'; import { Button } from '@salutejs/sdds-insol'; -import { IconDownload } from '@salutejs/plasma-icons'; export function App() { return ( diff --git a/website/sdds-insol-docs/docs/components/IconButton.mdx b/website/sdds-insol-docs/docs/components/IconButton.mdx index 1c41f2f0d2..d24d0896ed 100644 --- a/website/sdds-insol-docs/docs/components/IconButton.mdx +++ b/website/sdds-insol-docs/docs/components/IconButton.mdx @@ -72,11 +72,12 @@ export function App() { Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -88,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
+ + + + + + @@ -104,9 +111,6 @@ export function App() { - - - @@ -134,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
diff --git a/website/sdds-serv-docs/docs/components/Button.mdx b/website/sdds-serv-docs/docs/components/Button.mdx index 7a3574ec1b..9014a6881b 100644 --- a/website/sdds-serv-docs/docs/components/Button.mdx +++ b/website/sdds-serv-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -34,18 +33,18 @@ export function App() {
} />
@@ -56,7 +55,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: +Размер кнопки задается с помощью свойства `size`: ```tsx live import React from 'react'; @@ -64,11 +63,13 @@ import { Button } from '@salutejs/sdds-serv'; export function App() { return ( -
+
); } @@ -100,7 +101,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; @@ -118,13 +119,17 @@ export function App() { ### Вид кнопки Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: -+ `"default"` – основная; ++ `"default"` – по умолчанию; ++ `"accent"` – акцентная; ++ `"primary"` – основная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"checked"` – выбранное состояние; -+ `"clear"` – без цветового сопровождения. ++ `"dark"` – темная; ++ `"black"` – черная; ++ `"white"` – белая. ```tsx live import React from 'react'; @@ -132,15 +137,18 @@ import { Button } from '@salutejs/sdds-serv'; export function App() { return ( -
+
); } @@ -200,7 +208,6 @@ export function App() { ```tsx live import React from 'react'; import { Button } from '@salutejs/sdds-serv'; -import { IconDownload } from '@salutejs/plasma-icons'; export function App() { return ( diff --git a/website/sdds-serv-docs/docs/components/IconButton.mdx b/website/sdds-serv-docs/docs/components/IconButton.mdx index 987a400185..02887b9ce0 100644 --- a/website/sdds-serv-docs/docs/components/IconButton.mdx +++ b/website/sdds-serv-docs/docs/components/IconButton.mdx @@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return (
+ + + @@ -56,6 +59,9 @@ export function App() { + + +
); } @@ -66,11 +72,12 @@ export function App() { Возможные значения свойства `view`: + `"default"` – по умолчанию; ++ `"accent"` – акцентная; + `"secondary"` – вторичная; ++ `"clear"` – без цветового сопровождения. + `"success"` – успешное завершение; + `"warning"` – предупреждение; + `"critical"` – ошибка; -+ `"clear"` – без цветового сопровождения; + `"dark"` – темная; + `"black"` – черная; + `"white"` – белая. @@ -82,13 +89,19 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+
+ + + + + + @@ -98,9 +111,6 @@ export function App() { - - - @@ -128,7 +138,7 @@ import { IconClose } from '@salutejs/plasma-icons'; export function App() { return ( -
+