@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +9 -6
- package/cjs/components/Button/Button.js +16 -2
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +31 -10
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_nedem1.css +8 -0
- package/cjs/components/Button/Button.tokens.js +5 -0
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/cjs/components/Drawer/Drawer.css +9 -6
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/cjs/components/IconButton/IconButton.css +10 -7
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/{es/components/IconButton/IconButton.styles_1hknr37.css → cjs/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
- package/cjs/components/Notification/Notification.css +9 -6
- package/cjs/components/Notification/NotificationsProvider.css +9 -6
- package/cjs/components/Pagination/Pagination.css +9 -6
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/cjs/components/Select/Select.css +9 -6
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/cjs/components/Toast/Toast.css +9 -6
- package/cjs/components/Toast/ToastController.css +9 -6
- package/cjs/index.css +12 -9
- package/es/components/Button/Button.css +9 -6
- package/es/components/Button/Button.js +17 -3
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +29 -11
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_nedem1.css +8 -0
- package/es/components/Button/Button.tokens.js +5 -0
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/es/components/Drawer/Drawer.css +9 -6
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/es/components/IconButton/IconButton.css +10 -7
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/{cjs/components/IconButton/IconButton.styles_1hknr37.css → es/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
- package/es/components/Notification/Notification.css +9 -6
- package/es/components/Notification/NotificationsProvider.css +9 -6
- package/es/components/Pagination/Pagination.css +9 -6
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/es/components/Select/Select.css +9 -6
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/es/components/Toast/Toast.css +9 -6
- package/es/components/Toast/ToastController.css +9 -6
- package/es/index.css +12 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +1 -3
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/cjs/components/Button/Button.js +16 -2
- package/styled-components/cjs/components/Button/Button.styles.js +20 -12
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +51 -8
- package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/es/components/Button/Button.js +17 -3
- package/styled-components/es/components/Button/Button.styles.js +19 -11
- package/styled-components/es/components/Button/Button.template-doc.mdx +51 -8
- package/styled-components/es/components/Button/Button.tokens.js +5 -0
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +5 -1
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +5 -0
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +10 -0
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
- package/es/components/Button/Button.styles_uqvh6u.css +0 -5
- package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
- package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -1,7 +1,8 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
export declare const base: import("@linaria/core").LinariaClassName;
|
3
2
|
export declare const ButtonText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
|
3
|
+
export declare const ButtonValue: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
|
4
4
|
export declare const LoadWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
5
|
+
contentPlacing: string;
|
5
6
|
isLoading?: boolean | undefined;
|
6
7
|
}>;
|
7
8
|
export declare const Loader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
@@ -21,5 +22,8 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
|
|
21
22
|
size?: undefined;
|
22
23
|
view?: string | undefined;
|
23
24
|
} & import("react").RefAttributes<HTMLDivElement>))>;
|
25
|
+
export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
26
|
+
export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
27
|
+
export declare const base: import("@linaria/core").LinariaClassName;
|
24
28
|
export declare const baseContent: string;
|
25
29
|
//# sourceMappingURL=Button.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAE9B,CAAC;AAEF,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
|
@@ -3,11 +3,13 @@ export declare const classes: {
|
|
3
3
|
autoStretching: string;
|
4
4
|
filledStretching: string;
|
5
5
|
fixedStretching: string;
|
6
|
+
contentRelaxed: string;
|
6
7
|
buttonSquare: string;
|
7
8
|
buttonItem: string;
|
8
9
|
};
|
9
10
|
export declare const tokens: {
|
10
11
|
buttonColor: string;
|
12
|
+
buttonValueColor: string;
|
11
13
|
buttonBackgroundColor: string;
|
12
14
|
buttonColorHover: string;
|
13
15
|
buttonBackgroundColorHover: string;
|
@@ -26,6 +28,9 @@ export declare const tokens: {
|
|
26
28
|
buttonFontWeight: string;
|
27
29
|
buttonLetterSpacing: string;
|
28
30
|
buttonLineHeight: string;
|
31
|
+
buttonLeftContentMargin: string;
|
32
|
+
buttonRightContentMargin: string;
|
33
|
+
buttonValueMargin: string;
|
29
34
|
buttonDisabledOpacity: string;
|
30
35
|
buttonFocusColor: string;
|
31
36
|
buttonSpinnerColor: string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO
|
1
|
+
{"version":3,"file":"Button.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiClB,CAAC"}
|
@@ -3,6 +3,11 @@ import type { Pin } from '../../utils/roundness';
|
|
3
3
|
import { Blur } from '../../mixins';
|
4
4
|
import type { AsProps } from '../../types';
|
5
5
|
declare type Stretching = 'fixed' | 'filled' | 'auto';
|
6
|
+
declare type ContentPlacing = 'default' | 'relaxed';
|
7
|
+
declare type ContentPlacingValue = 'center' | 'space-between';
|
8
|
+
export declare type ContentPlacementMapper = {
|
9
|
+
[K in ContentPlacing]: ContentPlacingValue;
|
10
|
+
};
|
6
11
|
declare type CustomButtonProps = {
|
7
12
|
/**
|
8
13
|
* Текстовая надпись
|
@@ -16,6 +21,11 @@ declare type CustomButtonProps = {
|
|
16
21
|
* Слот для контента справа, например `Icon`
|
17
22
|
*/
|
18
23
|
contentRight?: ReactNode;
|
24
|
+
/**
|
25
|
+
* Положение контента по ширине кнопки.
|
26
|
+
* @default 'default'
|
27
|
+
*/
|
28
|
+
contentPlacing?: ContentPlacing;
|
19
29
|
/**
|
20
30
|
* У кнопки состояние загрузки
|
21
31
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,WAAW,CACxC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC3B,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EACrC,OAAO,EACP,iBAAiB;CAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
.bzw1898{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.bzw1898{-webkit-text-decoration:none;text-decoration:none;}.bzw1898.bzw1898.button-square{width:var(--plasma-button-height);padding:0;}
|
2
|
-
.bdfuqwe{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bdfuqwe:not(:last-child){margin-right:0.375rem;}.bdfuqwe:not(:first-child){margin-left:0.375rem;}
|
3
|
-
.l9ypozh{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
|
4
|
-
.l4dfhbg{position:absolute;}
|
5
|
-
.srdlazt{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
.bzw1898{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.bzw1898{-webkit-text-decoration:none;text-decoration:none;}.bzw1898.bzw1898.button-square{width:var(--plasma-button-height);padding:0;}
|
2
|
-
.bdfuqwe{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bdfuqwe:not(:last-child){margin-right:0.375rem;}.bdfuqwe:not(:first-child){margin-left:0.375rem;}
|
3
|
-
.l9ypozh{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
|
4
|
-
.l4dfhbg{position:absolute;}
|
5
|
-
.srdlazt{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}
|
@@ -1,68 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: cell
|
3
|
-
title: Cell
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
# Cell
|
9
|
-
<PropsTable name="Cell" />
|
10
|
-
<Description name="Cell" />
|
11
|
-
|
12
|
-
Компонент ячейки представляет собой стилизованные слоты для контента.
|
13
|
-
|
14
|
-
Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
|
15
|
-
|
16
|
-
Они представляют собой стилизованный текст и слот для них.
|
17
|
-
|
18
|
-
## Примеры
|
19
|
-
|
20
|
-
### Базовое использование
|
21
|
-
|
22
|
-
```tsx live
|
23
|
-
import React from 'react';
|
24
|
-
import { Avatar, Cell } from '@salutejs/{{ package }}';
|
25
|
-
import { IconChevronRight } from '@salutejs/plasma-icons';
|
26
|
-
|
27
|
-
export function App() {
|
28
|
-
return (
|
29
|
-
<>
|
30
|
-
<Cell
|
31
|
-
contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
|
32
|
-
size="m"
|
33
|
-
contentRight={<IconChevronRight color="inheart" size="xs" />}
|
34
|
-
title="Title"
|
35
|
-
subtitle="Subtitle"
|
36
|
-
label="Label"
|
37
|
-
/>
|
38
|
-
</>
|
39
|
-
);
|
40
|
-
}
|
41
|
-
```
|
42
|
-
|
43
|
-
### С использованием своих стилей или встроенных компонентов
|
44
|
-
|
45
|
-
```tsx live
|
46
|
-
import React from 'react';
|
47
|
-
import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
|
48
|
-
import { IconChevronRight } from '@salutejs/plasma-icons';
|
49
|
-
|
50
|
-
export function App() {
|
51
|
-
return (
|
52
|
-
<>
|
53
|
-
<Cell
|
54
|
-
contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
|
55
|
-
size="m"
|
56
|
-
contentRight={<IconChevronRight color="inheart" size="xs" />}
|
57
|
-
>
|
58
|
-
<CellTextbox>
|
59
|
-
<CellTextboxLabel>Label</CellTextboxLabel>
|
60
|
-
<CellTextboxTitle>Title</CellTextboxTitle>
|
61
|
-
<CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
|
62
|
-
<div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
|
63
|
-
</CellTextbox>
|
64
|
-
</Cell>
|
65
|
-
</>
|
66
|
-
);
|
67
|
-
}
|
68
|
-
```
|
@@ -1,57 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: divider
|
3
|
-
title: Divider
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
## Divider
|
9
|
-
<Description name="Divider" />
|
10
|
-
<PropsTable name="Divider" exclude={['css']} />
|
11
|
-
|
12
|
-
## Использование
|
13
|
-
Компонент `Divider` используется для визуального разделения компонент.
|
14
|
-
|
15
|
-
### Ориентация разделителя
|
16
|
-
Ориентация разделителя задается с помощью свойства orientation.
|
17
|
-
|
18
|
-
Возможные значения свойства orientation:
|
19
|
-
+ "horizontal" – горизонтальная (по умолчанию);
|
20
|
-
+ "vertical" – вертикальная;
|
21
|
-
|
22
|
-
```tsx live
|
23
|
-
import React from 'react';
|
24
|
-
import { BodyS, Divider } from '@salutejs/{{ package }}';
|
25
|
-
|
26
|
-
export function App() {
|
27
|
-
const Demo = ({
|
28
|
-
orientation = 'horizontal',
|
29
|
-
length = '100%',
|
30
|
-
beforeText = 'Before',
|
31
|
-
afterText = 'After',
|
32
|
-
}) => {
|
33
|
-
const wrapperStyle = {
|
34
|
-
display: "inline-flex",
|
35
|
-
gap: "0.5rem",
|
36
|
-
alignItems: "center",
|
37
|
-
justifyContent: "center",
|
38
|
-
flexDirection: orientation === "horizontal" ? "column" : "row"
|
39
|
-
}
|
40
|
-
|
41
|
-
return (
|
42
|
-
<div style={wrapperStyle}>
|
43
|
-
<BodyS>{beforeText}</BodyS>
|
44
|
-
<Divider orientation={orientation} length={length} />
|
45
|
-
<BodyS>{afterText}</BodyS>
|
46
|
-
</div>
|
47
|
-
);
|
48
|
-
};
|
49
|
-
|
50
|
-
return (
|
51
|
-
<div style=\{{ display: "flex", gap: "2rem" }}>
|
52
|
-
<Demo />
|
53
|
-
<Demo orientation="vertical" />
|
54
|
-
</div>
|
55
|
-
);
|
56
|
-
}
|
57
|
-
```
|
@@ -1,156 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: IconButton
|
3
|
-
title: IconButton
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
# IconButton
|
9
|
-
Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку.
|
10
|
-
|
11
|
-
## IconButton
|
12
|
-
<Description name="IconButton" />
|
13
|
-
<PropsTable name="IconButton" exclude={['css']} />
|
14
|
-
|
15
|
-
## Использование
|
16
|
-
Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`.
|
17
|
-
|
18
|
-
```tsx live
|
19
|
-
import React from 'react';
|
20
|
-
import { IconButton } from '@salutejs/{{ package }}';
|
21
|
-
import { IconClose } from '@salutejs/plasma-icons';
|
22
|
-
|
23
|
-
export function App() {
|
24
|
-
return (
|
25
|
-
<div>
|
26
|
-
<IconButton>
|
27
|
-
<IconClose color="inherit" />
|
28
|
-
</IconButton>
|
29
|
-
</div>
|
30
|
-
);
|
31
|
-
}
|
32
|
-
```
|
33
|
-
|
34
|
-
## Примеры
|
35
|
-
|
36
|
-
### Размер кнопки
|
37
|
-
Размер кнопки задается с помощью свойства `size`.
|
38
|
-
|
39
|
-
```tsx live
|
40
|
-
import React from 'react';
|
41
|
-
import { IconButton } from '@salutejs/{{ package }}';
|
42
|
-
import { IconClose } from '@salutejs/plasma-icons';
|
43
|
-
|
44
|
-
export function App() {
|
45
|
-
return (
|
46
|
-
<div>
|
47
|
-
<IconButton size="l">
|
48
|
-
<IconClose color="inherit" />
|
49
|
-
</IconButton>
|
50
|
-
<IconButton size="m">
|
51
|
-
<IconClose color="inherit" />
|
52
|
-
</IconButton>
|
53
|
-
<IconButton size="s">
|
54
|
-
<IconClose color="inherit" />
|
55
|
-
</IconButton>
|
56
|
-
<IconButton size="xs">
|
57
|
-
<IconClose color="inherit" size="xs" />
|
58
|
-
</IconButton>
|
59
|
-
</div>
|
60
|
-
);
|
61
|
-
}
|
62
|
-
```
|
63
|
-
|
64
|
-
### Вид кнопки
|
65
|
-
Вид кнопки задается с помощью свойства `view`.
|
66
|
-
|
67
|
-
Возможные значения свойства `view`:
|
68
|
-
+ `"default"` – по умолчанию;
|
69
|
-
+ `"secondary"` – вторичная;
|
70
|
-
+ `"success"` – успешное завершение;
|
71
|
-
+ `"warning"` – предупреждение;
|
72
|
-
+ `"critical"` – ошибка;
|
73
|
-
+ `"clear"` – без цветового сопровождения;
|
74
|
-
+ `"dark"` – темная;
|
75
|
-
+ `"black"` – черная;
|
76
|
-
+ `"white"` – белая.
|
77
|
-
|
78
|
-
```tsx live
|
79
|
-
import React from 'react';
|
80
|
-
import { IconButton } from '@salutejs/{{ package }}';
|
81
|
-
import { IconClose } from '@salutejs/plasma-icons';
|
82
|
-
|
83
|
-
export function App() {
|
84
|
-
return (
|
85
|
-
<div>
|
86
|
-
<IconButton size="s" view="default">
|
87
|
-
<IconClose color="inherit" />
|
88
|
-
</IconButton>
|
89
|
-
<IconButton size="s" view="secondary">
|
90
|
-
<IconClose color="inherit" />
|
91
|
-
</IconButton>
|
92
|
-
<IconButton size="s" view="success">
|
93
|
-
<IconClose color="inherit" />
|
94
|
-
</IconButton>
|
95
|
-
<IconButton size="s" view="warning">
|
96
|
-
<IconClose color="inherit" />
|
97
|
-
</IconButton>
|
98
|
-
<IconButton size="s" view="critical">
|
99
|
-
<IconClose color="inherit" />
|
100
|
-
</IconButton>
|
101
|
-
<IconButton size="s" view="clear">
|
102
|
-
<IconClose color="inherit" />
|
103
|
-
</IconButton>
|
104
|
-
<IconButton size="s" view="dark">
|
105
|
-
<IconClose color="inherit" />
|
106
|
-
</IconButton>
|
107
|
-
<IconButton size="s" view="black">
|
108
|
-
<IconClose color="inherit" />
|
109
|
-
</IconButton>
|
110
|
-
<IconButton size="s" view="white">
|
111
|
-
<IconClose color="inherit" />
|
112
|
-
</IconButton>
|
113
|
-
</div>
|
114
|
-
);
|
115
|
-
}
|
116
|
-
```
|
117
|
-
|
118
|
-
### Границы кнопки
|
119
|
-
Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
|
120
|
-
+ `square` – обычное скругление;
|
121
|
-
+ `circle` – сильное скругление;
|
122
|
-
+ `clear` – нет скругления.
|
123
|
-
|
124
|
-
```tsx live
|
125
|
-
import React from 'react';
|
126
|
-
import { IconButton } from '@salutejs/{{ package }}';
|
127
|
-
import { IconClose } from '@salutejs/plasma-icons';
|
128
|
-
|
129
|
-
export function App() {
|
130
|
-
return (
|
131
|
-
<div>
|
132
|
-
<IconButton pin="square-square">
|
133
|
-
<IconClose color="inherit" />
|
134
|
-
</IconButton>
|
135
|
-
<IconButton pin="square-clear">
|
136
|
-
<IconClose color="inherit" />
|
137
|
-
</IconButton>
|
138
|
-
<IconButton pin="clear-square">
|
139
|
-
<IconClose color="inherit" />
|
140
|
-
</IconButton>
|
141
|
-
<IconButton pin="clear-clear">
|
142
|
-
<IconClose color="inherit" />
|
143
|
-
</IconButton>
|
144
|
-
<IconButton pin="clear-circle">
|
145
|
-
<IconClose color="inherit" />
|
146
|
-
</IconButton>
|
147
|
-
<IconButton pin="circle-clear">
|
148
|
-
<IconClose color="inherit" />
|
149
|
-
</IconButton>
|
150
|
-
<IconButton pin="circle-circle">
|
151
|
-
<IconClose color="inherit" />
|
152
|
-
</IconButton>
|
153
|
-
</div>
|
154
|
-
);
|
155
|
-
}
|
156
|
-
```
|
@@ -1,130 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: pagination
|
3
|
-
title: Pagination
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
# Pagination
|
9
|
-
|
10
|
-
Pagination может отображаться в разных размерах и может содержать select с выбором количества элементов на странице
|
11
|
-
и быстрый выбор страницы.
|
12
|
-
|
13
|
-
## Pagination
|
14
|
-
<Description name="Pagination" />
|
15
|
-
<PropsTable name="Pagination" exclude={['css', 'focused']} />
|
16
|
-
|
17
|
-
## Использование
|
18
|
-
Компонент `Pagination` должен содержать параметр slots. Он обозначает количество кнопок в Pagination.
|
19
|
-
|
20
|
-
Также компонент имеет параметр hasPerPage, логика работы такова:
|
21
|
-
|
22
|
-
- если указан только параметр count, то он равен кол-ву страниц
|
23
|
-
- если указан параметр hasPerPage или perPage, то count делится на perPage
|
24
|
-
|
25
|
-
```tsx live
|
26
|
-
import React from 'react';
|
27
|
-
import { Pagination } from '@salutejs/{{ package }}';
|
28
|
-
|
29
|
-
export function App() {
|
30
|
-
return (
|
31
|
-
<div style=\{{display: "flex", "flex-direction": "column"}}>
|
32
|
-
<div>
|
33
|
-
<Pagination slots={7} count={200} />
|
34
|
-
</div>
|
35
|
-
<div>
|
36
|
-
<Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
|
37
|
-
</div>
|
38
|
-
<div>
|
39
|
-
<Pagination slots={9} count={200} hasPerPage={true} />
|
40
|
-
</div>
|
41
|
-
<div>
|
42
|
-
<Pagination slots={9} count={200} hasPerPage={false} />
|
43
|
-
</div>
|
44
|
-
</div>
|
45
|
-
);
|
46
|
-
}
|
47
|
-
```
|
48
|
-
|
49
|
-
## Примеры
|
50
|
-
|
51
|
-
### Размер Pagination
|
52
|
-
Размер Pagination задается с помощью свойства `size`.
|
53
|
-
Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
|
54
|
-
|
55
|
-
```tsx live
|
56
|
-
import React from 'react';
|
57
|
-
import { Pagination } from '@salutejs/{{ package }}';
|
58
|
-
|
59
|
-
export function App() {
|
60
|
-
return (
|
61
|
-
<div style=\{{display: "flex", "flex-direction": "column"}}>
|
62
|
-
<Pagination size="l" slots={9} count={200} hasPerPage={true} />
|
63
|
-
<Pagination size="m" slots={9} count={200} hasPerPage={true} />
|
64
|
-
<Pagination size="s" slots={9} count={200} hasPerPage={true} />
|
65
|
-
<Pagination size="xs" slots={9} count={200} hasPerPage={true} />
|
66
|
-
</div>
|
67
|
-
);
|
68
|
-
}
|
69
|
-
```
|
70
|
-
|
71
|
-
### Вид Pagination
|
72
|
-
Вид Pagination задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
|
-
+ `"default"` – основная;
|
74
|
-
+ `"secondary"` – вторичная;
|
75
|
-
+ `"clear"` – чистая;
|
76
|
-
|
77
|
-
```tsx live
|
78
|
-
import React from 'react';
|
79
|
-
import { Pagination } from '@salutejs/{{ package }}';
|
80
|
-
|
81
|
-
export function App() {
|
82
|
-
return (
|
83
|
-
<div style=\{{display: "flex", "flex-direction": "column"}}>
|
84
|
-
<Pagination size="xs" view="default" slots={9} count={200} hasPerPage={true} />
|
85
|
-
<Pagination size="xs" view="secondary" slots={9} count={200} hasPerPage={true} />
|
86
|
-
<Pagination size="xs" view="clear" slots={9} count={200} hasPerPage={true} />
|
87
|
-
</div>
|
88
|
-
);
|
89
|
-
}
|
90
|
-
```
|
91
|
-
|
92
|
-
### Вид активной кнопки Pagination
|
93
|
-
Вид Pagination задается с помощью свойства `viewCurrentPage`. Возможные значения свойства `viewCurrentPage`:
|
94
|
-
+ `"default"` – основная;
|
95
|
-
+ `"secondary"` – вторичная;
|
96
|
-
+ `"clear"` – чистая;
|
97
|
-
|
98
|
-
```tsx live
|
99
|
-
import React from 'react';
|
100
|
-
import { Pagination } from '@salutejs/{{ package }}';
|
101
|
-
|
102
|
-
export function App() {
|
103
|
-
return (
|
104
|
-
<div style=\{{display: "flex", "flex-direction": "column"}}>
|
105
|
-
<Pagination size="xs" viewCurrentPage="default" slots={9} count={200} hasPerPage={true} />
|
106
|
-
<Pagination size="xs" viewCurrentPage="secondary" slots={9} count={200} hasPerPage={true} />
|
107
|
-
<Pagination size="xs" viewCurrentPage="clear" slots={9} count={200} hasPerPage={true} />
|
108
|
-
</div>
|
109
|
-
);
|
110
|
-
}
|
111
|
-
```
|
112
|
-
|
113
|
-
### Типы Pagination
|
114
|
-
Тип Pagination задается с помощью свойства `type`. Возможные значения свойства `type`:
|
115
|
-
+ `"default"` – обычная;
|
116
|
-
+ `"compact"` – компактная;
|
117
|
-
|
118
|
-
```tsx live
|
119
|
-
import React from 'react';
|
120
|
-
import { Pagination } from '@salutejs/{{ package }}';
|
121
|
-
|
122
|
-
export function App() {
|
123
|
-
return (
|
124
|
-
<div style=\{{display: "flex", "flex-direction": "column"}}>
|
125
|
-
<Pagination size="xs" type="default" slots={9} count={200} hasPerPage={true} />
|
126
|
-
<Pagination size="xs" type="compact" slots={9} count={200} hasPerPage={true} />
|
127
|
-
</div>
|
128
|
-
);
|
129
|
-
}
|
130
|
-
```
|
@@ -1,33 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: progress
|
3
|
-
title: Progress
|
4
|
-
---
|
5
|
-
|
6
|
-
import { PropsTable, Description } from '@site/src/components';
|
7
|
-
|
8
|
-
# Progress
|
9
|
-
<Description name="Progress" />
|
10
|
-
<PropsTable name="Progress" exclude={['css']} />
|
11
|
-
|
12
|
-
##Примеры
|
13
|
-
|
14
|
-
### Вид прогресса
|
15
|
-
Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
|
16
|
-
+ `"default"` – по умолчанию;
|
17
|
-
+ `"primary"` – основная;
|
18
|
-
+ `"secondary"` – вторичная;
|
19
|
-
+ `"accent"` – акцентная;
|
20
|
-
+ `"success"` – успешное завершение;
|
21
|
-
+ `"warning"` – предупреждение;
|
22
|
-
+ `"error"` – ошибка;
|
23
|
-
|
24
|
-
```tsx live
|
25
|
-
import React from 'react';
|
26
|
-
import { Progress } from '@salutejs/{{ package }}';
|
27
|
-
|
28
|
-
export function App() {
|
29
|
-
return (
|
30
|
-
<Progress value={25} view="success" displayValue />
|
31
|
-
);
|
32
|
-
}
|
33
|
-
```
|