@semcore/button 4.0.17 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -52
- package/LICENSE +21 -0
- package/lib/cjs/Button.js +58 -52
- package/lib/cjs/Button.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/es6/Button.js +58 -52
- package/lib/es6/Button.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/package.json +10 -8
- package/src/Button.jsx +30 -23
- package/lib/cjs/index.d.ts +0 -52
- package/lib/es6/index.d.ts +0 -52
package/CHANGELOG.md
CHANGED
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [4.0
|
|
5
|
+
## [4.1.0] - 2022-10-07
|
|
6
6
|
|
|
7
7
|
### Changed
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Updated major dependency `@semcore/neighbor-location` [2.3.15 ~> 3.0.0]
|
|
10
10
|
|
|
11
|
-
## [4.0.
|
|
11
|
+
## [4.0.18] - 2022-10-04
|
|
12
12
|
|
|
13
13
|
### Changed
|
|
14
14
|
|
|
15
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.37.
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.37.1 ~> 3.37.2]).
|
|
16
16
|
|
|
17
17
|
## [4.0.15] - 2022-08-29
|
|
18
18
|
|
|
@@ -38,48 +38,6 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
38
38
|
|
|
39
39
|
- Version patch update due to children dependencies update (`@semcore/utils` [3.36.0 ~> 3.37.0]).
|
|
40
40
|
|
|
41
|
-
## [4.0.11] - 2022-08-11
|
|
42
|
-
|
|
43
|
-
### Changed
|
|
44
|
-
|
|
45
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.35.1 ~> 3.36.0]).
|
|
46
|
-
|
|
47
|
-
## [4.0.10] - 2022-08-01
|
|
48
|
-
|
|
49
|
-
### Changed
|
|
50
|
-
|
|
51
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.35.0 ~> 3.35.1]).
|
|
52
|
-
|
|
53
|
-
## [4.0.9] - 2022-07-22
|
|
54
|
-
|
|
55
|
-
### Changed
|
|
56
|
-
|
|
57
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
58
|
-
|
|
59
|
-
## [4.0.8] - 2022-07-14
|
|
60
|
-
|
|
61
|
-
### Changed
|
|
62
|
-
|
|
63
|
-
- Version patch update due to children dependencies update (`@semcore/neighbor-location` [2.3.9 ~> 2.3.10]).
|
|
64
|
-
|
|
65
|
-
## [4.0.7] - 2022-07-07
|
|
66
|
-
|
|
67
|
-
### Changed
|
|
68
|
-
|
|
69
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0]).
|
|
70
|
-
|
|
71
|
-
## [4.0.6] - 2022-06-02
|
|
72
|
-
|
|
73
|
-
### Changed
|
|
74
|
-
|
|
75
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0]).
|
|
76
|
-
|
|
77
|
-
## [4.0.5] - 2022-05-31
|
|
78
|
-
|
|
79
|
-
### Changed
|
|
80
|
-
|
|
81
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.1 ~> 3.32.2]).
|
|
82
|
-
|
|
83
41
|
## [4.0.4] - 2022-05-27
|
|
84
42
|
|
|
85
43
|
### Fixed
|
|
@@ -118,12 +76,6 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
118
76
|
|
|
119
77
|
- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2]).
|
|
120
78
|
|
|
121
|
-
## [3.3.6] - 2022-03-04
|
|
122
|
-
|
|
123
|
-
### Changed
|
|
124
|
-
|
|
125
|
-
- Version patch update due to children dependencies update (`@semcore/spin` [3.3.0 ~> 3.4.0]).
|
|
126
|
-
|
|
127
79
|
## [3.3.5] - 2022-02-24
|
|
128
80
|
|
|
129
81
|
### Added
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright ©, 2022, Semrush Inc. (written by Roman Lysov, Sergey Kobets, Mikhail Karachev, Julia Mnizhek, Elena Krasnopolskaia, Mikhail Sereniti).
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/lib/cjs/Button.js
CHANGED
|
@@ -27,7 +27,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
27
27
|
|
|
28
28
|
var _flexBox = require("@semcore/flex-box");
|
|
29
29
|
|
|
30
|
-
var _neighborLocation = require("@semcore/neighbor-location");
|
|
30
|
+
var _neighborLocation = _interopRequireDefault(require("@semcore/neighbor-location"));
|
|
31
31
|
|
|
32
32
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
33
33
|
|
|
@@ -58,36 +58,36 @@ var style = (
|
|
|
58
58
|
/*__reshadow_css_start__*/
|
|
59
59
|
_core.sstyled.insert(
|
|
60
60
|
/*__inner_css_start__*/
|
|
61
|
-
".
|
|
61
|
+
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SButton_vfu4l_gg_ {\n position: relative;\n display: inline-block;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n font-family: Inter, sans-serif;\n line-height: normal;\n text-decoration: none;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n outline: 0;\n box-shadow: none;\n cursor: pointer;\n box-sizing: border-box;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n font-weight: 500;\n color: #6c6e79\n}\n\n.___SButton_vfu4l_gg_::-moz-focus-inner {\n padding: 0;\n border: none;\n }\n\n.___SButton_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_:hover,\n .___SButton_vfu4l_gg_:focus {\n outline: 0;\n text-decoration: none;\n }\n\n.___SButton_vfu4l_gg_.__disabled_vfu4l_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_vfu4l_gg_.__keyboardFocused_vfu4l_gg_ {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n z-index: 1;\n}\n\n.___SButton_vfu4l_gg_._size_m_vfu4l_gg_ {\n height: 28px;\n min-width: 28px;\n border-radius: 6px;\n font-size: 14px;\n}\n\n.___SButton_vfu4l_gg_._size_l_vfu4l_gg_ {\n height: 40px;\n min-width: 40px;\n border-radius: 6px;\n font-size: 16px;\n}\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_ {\n color: #ffffff;\n background-color: #008ff8\n}\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_:hover {\n background-color: #006dca;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #044792;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_ {\n color: #ffffff;\n background-color: #009f81\n}\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_:hover {\n background-color: #007c65;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #055345;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_ {\n background-color: #ff642d;\n color: #ffffff\n}\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_:hover {\n background-color: #c33909;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #8b1500;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n background-color: #ff4953;\n color: #ffffff\n}\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_:hover {\n background-color: #d1002f;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #8e0016;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n background-color: #fff;\n color: #191b23\n}\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #e0e1e9;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_ {\n color: #6c6e79;\n border-color: #c4c7cf;\n background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_ {\n background-color: rgba(0, 143, 248, 0.05);\n color: #008ff8;\n border-color: #008ff8\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_:hover {\n background-color: rgba(0, 109, 202, 0.2);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(0, 109, 202, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.05);\n color: #fff;\n border-color: #fff\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_ {\n color: #006dca;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_:hover {\n background-color: rgba(0, 143, 248, 0.2);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(0, 143, 248, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_ {\n color: #6c6e79;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_ {\n color: #fff;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_right_vfu4l_gg_ {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_ {\n border-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-info_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-success_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-warning_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_ {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-info_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-success_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-warning_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SSpin_vfu4l_gg_ {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.___SInner_vfu4l_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.___SInner_vfu4l_gg_.__loading_vfu4l_gg_ {\n visibility: hidden;\n}\n\n.___SText_vfu4l_gg_ {\n display: inline-flex;\n}\n\n.___SText_vfu4l_gg_._size_m_vfu4l_gg_ {\n margin-left: 8px;\n margin-right: 8px;\n line-height: 1.42;\n}\n\n.___SText_vfu4l_gg_._size_l_vfu4l_gg_ {\n margin-left: 12px;\n margin-right: 12px;\n line-height: 1.5;\n}\n\n.___SAddon_vfu4l_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n"
|
|
62
62
|
/*__inner_css_end__*/
|
|
63
|
-
, "
|
|
63
|
+
, "vfu4l_gg_")
|
|
64
64
|
/*__reshadow_css_end__*/
|
|
65
65
|
, {
|
|
66
|
-
"__SButton": "
|
|
67
|
-
"_disabled": "
|
|
68
|
-
"_keyboardFocused": "
|
|
69
|
-
"_size_m": "
|
|
70
|
-
"_size_l": "
|
|
71
|
-
"_theme_primary-info": "_theme_primary-
|
|
72
|
-
"_active": "
|
|
73
|
-
"_theme_primary-success": "_theme_primary-
|
|
74
|
-
"_theme_primary-warning": "_theme_primary-
|
|
75
|
-
"_theme_primary-danger": "_theme_primary-
|
|
76
|
-
"_theme_primary-invert": "_theme_primary-
|
|
77
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
78
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
79
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
80
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
81
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
82
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
83
|
-
"_neighborLocation_right": "
|
|
84
|
-
"_neighborLocation_both": "
|
|
85
|
-
"_neighborLocation_left": "
|
|
86
|
-
"__SSpin": "
|
|
87
|
-
"__SInner": "
|
|
88
|
-
"_loading": "
|
|
89
|
-
"__SText": "
|
|
90
|
-
"__SAddon": "
|
|
66
|
+
"__SButton": "___SButton_vfu4l_gg_",
|
|
67
|
+
"_disabled": "__disabled_vfu4l_gg_",
|
|
68
|
+
"_keyboardFocused": "__keyboardFocused_vfu4l_gg_",
|
|
69
|
+
"_size_m": "_size_m_vfu4l_gg_",
|
|
70
|
+
"_size_l": "_size_l_vfu4l_gg_",
|
|
71
|
+
"_theme_primary-info": "_theme_primary-info_vfu4l_gg_",
|
|
72
|
+
"_active": "__active_vfu4l_gg_",
|
|
73
|
+
"_theme_primary-success": "_theme_primary-success_vfu4l_gg_",
|
|
74
|
+
"_theme_primary-warning": "_theme_primary-warning_vfu4l_gg_",
|
|
75
|
+
"_theme_primary-danger": "_theme_primary-danger_vfu4l_gg_",
|
|
76
|
+
"_theme_primary-invert": "_theme_primary-invert_vfu4l_gg_",
|
|
77
|
+
"_theme_secondary-muted": "_theme_secondary-muted_vfu4l_gg_",
|
|
78
|
+
"_theme_secondary-info": "_theme_secondary-info_vfu4l_gg_",
|
|
79
|
+
"_theme_secondary-invert": "_theme_secondary-invert_vfu4l_gg_",
|
|
80
|
+
"_theme_tertiary-info": "_theme_tertiary-info_vfu4l_gg_",
|
|
81
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_vfu4l_gg_",
|
|
82
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_vfu4l_gg_",
|
|
83
|
+
"_neighborLocation_right": "_neighborLocation_right_vfu4l_gg_",
|
|
84
|
+
"_neighborLocation_both": "_neighborLocation_both_vfu4l_gg_",
|
|
85
|
+
"_neighborLocation_left": "_neighborLocation_left_vfu4l_gg_",
|
|
86
|
+
"__SSpin": "___SSpin_vfu4l_gg_",
|
|
87
|
+
"__SInner": "___SInner_vfu4l_gg_",
|
|
88
|
+
"_loading": "__loading_vfu4l_gg_",
|
|
89
|
+
"__SText": "___SText_vfu4l_gg_",
|
|
90
|
+
"__SAddon": "___SAddon_vfu4l_gg_"
|
|
91
91
|
});
|
|
92
92
|
var MAP_USE_DEFAULT_THEME = {
|
|
93
93
|
primary: 'info',
|
|
@@ -125,9 +125,7 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
125
125
|
}, {
|
|
126
126
|
key: "render",
|
|
127
127
|
value: function render() {
|
|
128
|
-
var _ref = this.asProps
|
|
129
|
-
_ref4;
|
|
130
|
-
|
|
128
|
+
var _ref = this.asProps;
|
|
131
129
|
var SButton = _flexBox.Box;
|
|
132
130
|
var SInner = _flexBox.Box;
|
|
133
131
|
var SSpin = _flexBox.Box;
|
|
@@ -141,6 +139,7 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
141
139
|
_this$asProps$disable = _this$asProps.disabled,
|
|
142
140
|
disabled = _this$asProps$disable === void 0 ? loading : _this$asProps$disable,
|
|
143
141
|
size = _this$asProps.size,
|
|
142
|
+
neighborLocation = _this$asProps.neighborLocation,
|
|
144
143
|
addonLeft = _this$asProps.addonLeft,
|
|
145
144
|
addonRight = _this$asProps.addonRight,
|
|
146
145
|
ariaLabel = _this$asProps['aria-label'];
|
|
@@ -149,33 +148,40 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
149
148
|
|
|
150
149
|
_logger["default"].warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
|
|
151
150
|
|
|
152
|
-
return
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
"
|
|
170
|
-
|
|
171
|
-
|
|
151
|
+
return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
|
|
152
|
+
neighborLocation: neighborLocation
|
|
153
|
+
}, function (neighborLocation) {
|
|
154
|
+
var _ref4;
|
|
155
|
+
|
|
156
|
+
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SButton, _ref4.cn("SButton", _objectSpread({}, (0, _core.assignProps)({
|
|
157
|
+
"type": "button",
|
|
158
|
+
"tag": "button",
|
|
159
|
+
"disabled": disabled,
|
|
160
|
+
"neighborLocation": neighborLocation,
|
|
161
|
+
"use:theme": useTheme,
|
|
162
|
+
"role": "button"
|
|
163
|
+
}, _ref))), /*#__PURE__*/_react["default"].createElement(SInner, _ref4.cn("SInner", {
|
|
164
|
+
"tag": "span",
|
|
165
|
+
"loading": loading
|
|
166
|
+
}), addonLeft ? /*#__PURE__*/_react["default"].createElement(Button.Addon, {
|
|
167
|
+
tag: addonLeft
|
|
168
|
+
}) : null, (0, _addonTextChildren["default"])(Children, Button.Text, Button.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Button.Addon, {
|
|
169
|
+
tag: addonRight
|
|
170
|
+
}) : null), loading && /*#__PURE__*/_react["default"].createElement(SSpin, _ref4.cn("SSpin", {
|
|
171
|
+
"tag": "span"
|
|
172
|
+
}), /*#__PURE__*/_react["default"].createElement(_SpinButton["default"], _ref4.cn("SpinButton", {
|
|
173
|
+
"centered": true,
|
|
174
|
+
"size": size,
|
|
175
|
+
"theme": useTheme
|
|
176
|
+
}))));
|
|
177
|
+
});
|
|
172
178
|
}
|
|
173
179
|
}]);
|
|
174
180
|
return RootButton;
|
|
175
181
|
}(_core.Component);
|
|
176
182
|
|
|
177
183
|
(0, _defineProperty2["default"])(RootButton, "displayName", 'Button');
|
|
178
|
-
(0, _defineProperty2["default"])(RootButton, "enhance", [(0, _keyboardFocusEnhance["default"])()
|
|
184
|
+
(0, _defineProperty2["default"])(RootButton, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
|
|
179
185
|
(0, _defineProperty2["default"])(RootButton, "style", style);
|
|
180
186
|
(0, _defineProperty2["default"])(RootButton, "defaultProps", {
|
|
181
187
|
use: 'secondary',
|
package/lib/cjs/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","SButton","Box","SInner","SSpin","Children","styles","use","theme","loading","disabled","addonLeft","addonRight","ariaLabel","useTheme","isTextInside","reactToText","getOriginChildren","logger","warn","Button","displayName","sstyled","addonTextChildren","Text","Addon","Component","keyboardFocusEnhance","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","SButton","Box","SInner","SSpin","Children","styles","use","theme","loading","disabled","neighborLocation","addonLeft","addonRight","ariaLabel","useTheme","isTextInside","reactToText","getOriginChildren","logger","warn","Button","displayName","sstyled","addonTextChildren","Text","Addon","Component","keyboardFocusEnhance","style","props","SText","SAddon","createComponent"],"sources":["../../src/Button.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\n\nexport const MAP_USE_DEFAULT_THEME = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\nclass RootButton extends Component {\n static displayName = 'Button';\n static enhance = [keyboardFocusEnhance()];\n static style = style;\n static defaultProps = {\n use: 'secondary',\n size: 'm',\n };\n\n getTextProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n render() {\n const SButton = Root;\n const SInner = Box;\n const SSpin = Box;\n const {\n Children,\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n addonLeft,\n addonRight,\n 'aria-label': ariaLabel,\n } = this.asProps;\n const useTheme = use && theme ? `${use}-${theme}` : false;\n const isTextInside = reactToText(getOriginChildren(Children));\n\n logger.warn(\n !isTextInside && !ariaLabel,\n 'aria-label is required',\n this.asProps['data-ui-name'] || Button.displayName,\n );\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SButton\n render={Box}\n type=\"button\"\n tag=\"button\"\n disabled={disabled}\n neighborLocation={neighborLocation}\n use:theme={useTheme}\n role=\"button\"\n >\n <SInner tag=\"span\" loading={loading}>\n {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {addonRight ? <Button.Addon tag={addonRight} /> : null}\n </SInner>\n {loading && (\n <SSpin tag=\"span\">\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Button = createComponent(RootButton, {\n Text,\n Addon,\n});\n\nexport default Button;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps } from '@semcore/neighbor-location';\n\nexport type ButtonSize = 'l' | 'm';\n\nexport interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {\n /**\n * Button type\n * @default secondary\n */\n use?: 'primary' | 'secondary' | 'tertiary';\n /** Button theme */\n theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';\n /** Button activity state */\n active?: boolean;\n /**\n * Button size\n * @default m\n */\n size?: ButtonSize;\n /** Disabled button state */\n disabled?: boolean;\n /** Loading button state */\n loading?: boolean;\n /** Tag for the left Addon */\n addonLeft?: React.ElementType;\n /** Tag for the right Addon */\n addonRight?: React.ElementType;\n}\n\nexport interface IButtonTextProps extends IBoxProps {\n size?: ButtonSize;\n}\n\nexport interface IButtonAddonProps extends IBoxProps {\n size?: ButtonSize;\n}\n\nexport interface IButtonContext {\n getTextProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Button: (<T>(props: CProps<IButtonProps & T, IButtonContext>) => ReturnEl) & {\n Text: <T>(props: IButtonTextProps & T) => ReturnEl;\n Addon: <T>(props: IButtonAddonProps & T) => ReturnEl;\n};\n\nexport default Button;\n"],"mappings":""}
|
package/lib/es6/Button.js
CHANGED
|
@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
20
20
|
import React from 'react';
|
|
21
21
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
22
22
|
import { Box } from '@semcore/flex-box';
|
|
23
|
-
import
|
|
23
|
+
import NeighborLocation from '@semcore/neighbor-location';
|
|
24
24
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
25
25
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
26
26
|
import logger from '@semcore/utils/lib/logger';
|
|
@@ -33,36 +33,36 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SButton_vfu4l_gg_ {\n position: relative;\n display: inline-block;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n font-family: Inter, sans-serif;\n line-height: normal;\n text-decoration: none;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n outline: 0;\n box-shadow: none;\n cursor: pointer;\n box-sizing: border-box;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n font-weight: 500;\n color: #6c6e79\n}\n\n.___SButton_vfu4l_gg_::-moz-focus-inner {\n padding: 0;\n border: none;\n }\n\n.___SButton_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_:hover,\n .___SButton_vfu4l_gg_:focus {\n outline: 0;\n text-decoration: none;\n }\n\n.___SButton_vfu4l_gg_.__disabled_vfu4l_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_vfu4l_gg_.__keyboardFocused_vfu4l_gg_ {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n z-index: 1;\n}\n\n.___SButton_vfu4l_gg_._size_m_vfu4l_gg_ {\n height: 28px;\n min-width: 28px;\n border-radius: 6px;\n font-size: 14px;\n}\n\n.___SButton_vfu4l_gg_._size_l_vfu4l_gg_ {\n height: 40px;\n min-width: 40px;\n border-radius: 6px;\n font-size: 16px;\n}\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_ {\n color: #ffffff;\n background-color: #008ff8\n}\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_:hover {\n background-color: #006dca;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #044792;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_ {\n color: #ffffff;\n background-color: #009f81\n}\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_:hover {\n background-color: #007c65;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-success_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #055345;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_ {\n background-color: #ff642d;\n color: #ffffff\n}\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_:hover {\n background-color: #c33909;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-warning_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #8b1500;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n background-color: #ff4953;\n color: #ffffff\n}\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_:hover {\n background-color: #d1002f;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-danger_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #8e0016;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n background-color: #fff;\n color: #191b23\n}\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_primary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: #e0e1e9;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_ {\n color: #6c6e79;\n border-color: #c4c7cf;\n background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-muted_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_ {\n background-color: rgba(0, 143, 248, 0.05);\n color: #008ff8;\n border-color: #008ff8\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_:hover {\n background-color: rgba(0, 109, 202, 0.2);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(0, 109, 202, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.05);\n color: #fff;\n border-color: #fff\n}\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_secondary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_ {\n color: #006dca;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_:hover {\n background-color: rgba(0, 143, 248, 0.2);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-info_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(0, 143, 248, 0.3);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_ {\n color: #6c6e79;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-muted_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_ {\n color: #fff;\n background-color: transparent\n}\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_:active,\n .___SButton_vfu4l_gg_._theme_tertiary-invert_vfu4l_gg_.__active_vfu4l_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_right_vfu4l_gg_ {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_ {\n border-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-info_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-success_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-warning_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_both_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_ {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-info_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-success_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-warning_vfu4l_gg_,\n .___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-danger_vfu4l_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_vfu4l_gg_._neighborLocation_left_vfu4l_gg_._theme_primary-invert_vfu4l_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SSpin_vfu4l_gg_ {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.___SInner_vfu4l_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.___SInner_vfu4l_gg_.__loading_vfu4l_gg_ {\n visibility: hidden;\n}\n\n.___SText_vfu4l_gg_ {\n display: inline-flex;\n}\n\n.___SText_vfu4l_gg_._size_m_vfu4l_gg_ {\n margin-left: 8px;\n margin-right: 8px;\n line-height: 1.42;\n}\n\n.___SText_vfu4l_gg_._size_l_vfu4l_gg_ {\n margin-left: 12px;\n margin-right: 12px;\n line-height: 1.5;\n}\n\n.___SAddon_vfu4l_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_m_vfu4l_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_vfu4l_gg_._size_l_vfu4l_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "vfu4l_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__SButton": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"_size_m": "
|
|
45
|
-
"_size_l": "
|
|
46
|
-
"_theme_primary-info": "_theme_primary-
|
|
47
|
-
"_active": "
|
|
48
|
-
"_theme_primary-success": "_theme_primary-
|
|
49
|
-
"_theme_primary-warning": "_theme_primary-
|
|
50
|
-
"_theme_primary-danger": "_theme_primary-
|
|
51
|
-
"_theme_primary-invert": "_theme_primary-
|
|
52
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
53
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
54
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
55
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
56
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
57
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
58
|
-
"_neighborLocation_right": "
|
|
59
|
-
"_neighborLocation_both": "
|
|
60
|
-
"_neighborLocation_left": "
|
|
61
|
-
"__SSpin": "
|
|
62
|
-
"__SInner": "
|
|
63
|
-
"_loading": "
|
|
64
|
-
"__SText": "
|
|
65
|
-
"__SAddon": "
|
|
41
|
+
"__SButton": "___SButton_vfu4l_gg_",
|
|
42
|
+
"_disabled": "__disabled_vfu4l_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_vfu4l_gg_",
|
|
44
|
+
"_size_m": "_size_m_vfu4l_gg_",
|
|
45
|
+
"_size_l": "_size_l_vfu4l_gg_",
|
|
46
|
+
"_theme_primary-info": "_theme_primary-info_vfu4l_gg_",
|
|
47
|
+
"_active": "__active_vfu4l_gg_",
|
|
48
|
+
"_theme_primary-success": "_theme_primary-success_vfu4l_gg_",
|
|
49
|
+
"_theme_primary-warning": "_theme_primary-warning_vfu4l_gg_",
|
|
50
|
+
"_theme_primary-danger": "_theme_primary-danger_vfu4l_gg_",
|
|
51
|
+
"_theme_primary-invert": "_theme_primary-invert_vfu4l_gg_",
|
|
52
|
+
"_theme_secondary-muted": "_theme_secondary-muted_vfu4l_gg_",
|
|
53
|
+
"_theme_secondary-info": "_theme_secondary-info_vfu4l_gg_",
|
|
54
|
+
"_theme_secondary-invert": "_theme_secondary-invert_vfu4l_gg_",
|
|
55
|
+
"_theme_tertiary-info": "_theme_tertiary-info_vfu4l_gg_",
|
|
56
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_vfu4l_gg_",
|
|
57
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_vfu4l_gg_",
|
|
58
|
+
"_neighborLocation_right": "_neighborLocation_right_vfu4l_gg_",
|
|
59
|
+
"_neighborLocation_both": "_neighborLocation_both_vfu4l_gg_",
|
|
60
|
+
"_neighborLocation_left": "_neighborLocation_left_vfu4l_gg_",
|
|
61
|
+
"__SSpin": "___SSpin_vfu4l_gg_",
|
|
62
|
+
"__SInner": "___SInner_vfu4l_gg_",
|
|
63
|
+
"_loading": "__loading_vfu4l_gg_",
|
|
64
|
+
"__SText": "___SText_vfu4l_gg_",
|
|
65
|
+
"__SAddon": "___SAddon_vfu4l_gg_"
|
|
66
66
|
});
|
|
67
67
|
export var MAP_USE_DEFAULT_THEME = {
|
|
68
68
|
primary: 'info',
|
|
@@ -100,9 +100,7 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
100
100
|
}, {
|
|
101
101
|
key: "render",
|
|
102
102
|
value: function render() {
|
|
103
|
-
var _ref = this.asProps
|
|
104
|
-
_ref4;
|
|
105
|
-
|
|
103
|
+
var _ref = this.asProps;
|
|
106
104
|
var SButton = Box;
|
|
107
105
|
var SInner = Box;
|
|
108
106
|
var SSpin = Box;
|
|
@@ -116,32 +114,40 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
116
114
|
_this$asProps$disable = _this$asProps.disabled,
|
|
117
115
|
disabled = _this$asProps$disable === void 0 ? loading : _this$asProps$disable,
|
|
118
116
|
size = _this$asProps.size,
|
|
117
|
+
neighborLocation = _this$asProps.neighborLocation,
|
|
119
118
|
addonLeft = _this$asProps.addonLeft,
|
|
120
119
|
addonRight = _this$asProps.addonRight,
|
|
121
120
|
ariaLabel = _this$asProps['aria-label'];
|
|
122
121
|
var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
|
|
123
122
|
var isTextInside = reactToText(getOriginChildren(Children));
|
|
124
123
|
logger.warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
|
|
125
|
-
return
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
124
|
+
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
125
|
+
neighborLocation: neighborLocation
|
|
126
|
+
}, function (neighborLocation) {
|
|
127
|
+
var _ref4;
|
|
128
|
+
|
|
129
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SButton, _ref4.cn("SButton", _objectSpread({}, _assignProps({
|
|
130
|
+
"type": "button",
|
|
131
|
+
"tag": "button",
|
|
132
|
+
"disabled": disabled,
|
|
133
|
+
"neighborLocation": neighborLocation,
|
|
134
|
+
"use:theme": useTheme,
|
|
135
|
+
"role": "button"
|
|
136
|
+
}, _ref))), /*#__PURE__*/React.createElement(SInner, _ref4.cn("SInner", {
|
|
137
|
+
"tag": "span",
|
|
138
|
+
"loading": loading
|
|
139
|
+
}), addonLeft ? /*#__PURE__*/React.createElement(Button.Addon, {
|
|
140
|
+
tag: addonLeft
|
|
141
|
+
}) : null, addonTextChildren(Children, Button.Text, Button.Addon), addonRight ? /*#__PURE__*/React.createElement(Button.Addon, {
|
|
142
|
+
tag: addonRight
|
|
143
|
+
}) : null), loading && /*#__PURE__*/React.createElement(SSpin, _ref4.cn("SSpin", {
|
|
144
|
+
"tag": "span"
|
|
145
|
+
}), /*#__PURE__*/React.createElement(SpinButton, _ref4.cn("SpinButton", {
|
|
146
|
+
"centered": true,
|
|
147
|
+
"size": size,
|
|
148
|
+
"theme": useTheme
|
|
149
|
+
}))));
|
|
150
|
+
});
|
|
145
151
|
}
|
|
146
152
|
}]);
|
|
147
153
|
|
|
@@ -150,7 +156,7 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
150
156
|
|
|
151
157
|
_defineProperty(RootButton, "displayName", 'Button');
|
|
152
158
|
|
|
153
|
-
_defineProperty(RootButton, "enhance", [keyboardFocusEnhance()
|
|
159
|
+
_defineProperty(RootButton, "enhance", [keyboardFocusEnhance()]);
|
|
154
160
|
|
|
155
161
|
_defineProperty(RootButton, "style", style);
|
|
156
162
|
|
package/lib/es6/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","createComponent","Component","sstyled","Root","Box","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","keyboardFocusEnhance","addonTextChildren","logger","reactToText","getOriginChildren","SpinButton","MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","SButton","SInner","SSpin","Children","styles","use","theme","loading","disabled","neighborLocation","addonLeft","addonRight","ariaLabel","useTheme","isTextInside","warn","Button","displayName","Text","Addon","style","props","SText","SAddon"],"sources":["../../src/Button.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\n\nexport const MAP_USE_DEFAULT_THEME = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\nclass RootButton extends Component {\n static displayName = 'Button';\n static enhance = [keyboardFocusEnhance()];\n static style = style;\n static defaultProps = {\n use: 'secondary',\n size: 'm',\n };\n\n getTextProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n render() {\n const SButton = Root;\n const SInner = Box;\n const SSpin = Box;\n const {\n Children,\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n addonLeft,\n addonRight,\n 'aria-label': ariaLabel,\n } = this.asProps;\n const useTheme = use && theme ? `${use}-${theme}` : false;\n const isTextInside = reactToText(getOriginChildren(Children));\n\n logger.warn(\n !isTextInside && !ariaLabel,\n 'aria-label is required',\n this.asProps['data-ui-name'] || Button.displayName,\n );\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SButton\n render={Box}\n type=\"button\"\n tag=\"button\"\n disabled={disabled}\n neighborLocation={neighborLocation}\n use:theme={useTheme}\n role=\"button\"\n >\n <SInner tag=\"span\" loading={loading}>\n {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {addonRight ? <Button.Addon tag={addonRight} /> : null}\n </SInner>\n {loading && (\n <SSpin tag=\"span\">\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Button = createComponent(RootButton, {\n Text,\n Addon,\n});\n\nexport default Button;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps } from '@semcore/neighbor-location';\n\nexport type ButtonSize = 'l' | 'm';\n\nexport interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {\n /**\n * Button type\n * @default secondary\n */\n use?: 'primary' | 'secondary' | 'tertiary';\n /** Button theme */\n theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';\n /** Button activity state */\n active?: boolean;\n /**\n * Button size\n * @default m\n */\n size?: ButtonSize;\n /** Disabled button state */\n disabled?: boolean;\n /** Loading button state */\n loading?: boolean;\n /** Tag for the left Addon */\n addonLeft?: React.ElementType;\n /** Tag for the right Addon */\n addonRight?: React.ElementType;\n}\n\nexport interface IButtonTextProps extends IBoxProps {\n size?: ButtonSize;\n}\n\nexport interface IButtonAddonProps extends IBoxProps {\n size?: ButtonSize;\n}\n\nexport interface IButtonContext {\n getTextProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Button: (<T>(props: CProps<IButtonProps & T, IButtonContext>) => ReturnEl) & {\n Text: <T>(props: IButtonTextProps & T) => ReturnEl;\n Addon: <T>(props: IButtonAddonProps & T) => ReturnEl;\n};\n\nexport default Button;\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/button",
|
|
3
3
|
"description": "Semrush Button Component",
|
|
4
|
-
"version": "4.0
|
|
4
|
+
"version": "4.1.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"scripts": {
|
|
12
|
-
"build": "build --source=js",
|
|
13
|
-
"test": "jest"
|
|
14
|
-
},
|
|
15
11
|
"dependencies": {
|
|
16
12
|
"@semcore/utils": "^3.37",
|
|
17
13
|
"@semcore/spin": "^4",
|
|
18
|
-
"@semcore/neighbor-location": "^
|
|
14
|
+
"@semcore/neighbor-location": "^3",
|
|
19
15
|
"@semcore/flex-box": "^4"
|
|
20
16
|
},
|
|
21
17
|
"peerDependencies": {
|
|
@@ -31,6 +27,12 @@
|
|
|
31
27
|
"directory": "semcore/button"
|
|
32
28
|
},
|
|
33
29
|
"devDependencies": {
|
|
34
|
-
"@
|
|
30
|
+
"@types/react": "16.8 - 17",
|
|
31
|
+
"@semcore/jest-preset-ui": "1.0.0",
|
|
32
|
+
"@semcore/icon": "^2.16"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "pnpm semcore-builder --source=js",
|
|
36
|
+
"test": "jest"
|
|
35
37
|
}
|
|
36
|
-
}
|
|
38
|
+
}
|
package/src/Button.jsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import
|
|
4
|
+
import NeighborLocation from '@semcore/neighbor-location';
|
|
5
5
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
6
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
7
7
|
import logger from '@semcore/utils/lib/logger';
|
|
@@ -19,7 +19,7 @@ export const MAP_USE_DEFAULT_THEME = {
|
|
|
19
19
|
|
|
20
20
|
class RootButton extends Component {
|
|
21
21
|
static displayName = 'Button';
|
|
22
|
-
static enhance = [keyboardFocusEnhance()
|
|
22
|
+
static enhance = [keyboardFocusEnhance()];
|
|
23
23
|
static style = style;
|
|
24
24
|
static defaultProps = {
|
|
25
25
|
use: 'secondary',
|
|
@@ -52,6 +52,7 @@ class RootButton extends Component {
|
|
|
52
52
|
loading,
|
|
53
53
|
disabled = loading,
|
|
54
54
|
size,
|
|
55
|
+
neighborLocation,
|
|
55
56
|
addonLeft,
|
|
56
57
|
addonRight,
|
|
57
58
|
'aria-label': ariaLabel,
|
|
@@ -64,27 +65,33 @@ class RootButton extends Component {
|
|
|
64
65
|
'aria-label is required',
|
|
65
66
|
this.asProps['data-ui-name'] || Button.displayName,
|
|
66
67
|
);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
68
|
+
return (
|
|
69
|
+
<NeighborLocation.Detect neighborLocation={neighborLocation}>
|
|
70
|
+
{(neighborLocation) =>
|
|
71
|
+
sstyled(styles)(
|
|
72
|
+
<SButton
|
|
73
|
+
render={Box}
|
|
74
|
+
type="button"
|
|
75
|
+
tag="button"
|
|
76
|
+
disabled={disabled}
|
|
77
|
+
neighborLocation={neighborLocation}
|
|
78
|
+
use:theme={useTheme}
|
|
79
|
+
role="button"
|
|
80
|
+
>
|
|
81
|
+
<SInner tag="span" loading={loading}>
|
|
82
|
+
{addonLeft ? <Button.Addon tag={addonLeft} /> : null}
|
|
83
|
+
{addonTextChildren(Children, Button.Text, Button.Addon)}
|
|
84
|
+
{addonRight ? <Button.Addon tag={addonRight} /> : null}
|
|
85
|
+
</SInner>
|
|
86
|
+
{loading && (
|
|
87
|
+
<SSpin tag="span">
|
|
88
|
+
<SpinButton centered size={size} theme={useTheme} />
|
|
89
|
+
</SSpin>
|
|
90
|
+
)}
|
|
91
|
+
</SButton>,
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
</NeighborLocation.Detect>
|
|
88
95
|
);
|
|
89
96
|
}
|
|
90
97
|
}
|
package/lib/cjs/index.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
5
|
-
import { INeighborItemProps } from '@semcore/neighbor-location';
|
|
6
|
-
|
|
7
|
-
export type ButtonSize = 'l' | 'm';
|
|
8
|
-
|
|
9
|
-
export interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
10
|
-
/**
|
|
11
|
-
* Button type
|
|
12
|
-
* @default secondary
|
|
13
|
-
*/
|
|
14
|
-
use?: 'primary' | 'secondary' | 'tertiary';
|
|
15
|
-
/** Button theme */
|
|
16
|
-
theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
|
|
17
|
-
/** Button activity state */
|
|
18
|
-
active?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Button size
|
|
21
|
-
* @default m
|
|
22
|
-
*/
|
|
23
|
-
size?: ButtonSize;
|
|
24
|
-
/** Disabled button state */
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
/** Loading button state */
|
|
27
|
-
loading?: boolean;
|
|
28
|
-
/** Tag for the left Addon */
|
|
29
|
-
addonLeft?: React.ElementType;
|
|
30
|
-
/** Tag for the right Addon */
|
|
31
|
-
addonRight?: React.ElementType;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export interface IButtonTextProps extends IBoxProps {
|
|
35
|
-
size?: ButtonSize;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export interface IButtonAddonProps extends IBoxProps {
|
|
39
|
-
size?: ButtonSize;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface IButtonContext {
|
|
43
|
-
getTextProps: PropGetterFn;
|
|
44
|
-
getAddonProps: PropGetterFn;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
declare const Button: (<T>(props: CProps<IButtonProps & T, IButtonContext>) => ReturnEl) & {
|
|
48
|
-
Text: <T>(props: IButtonTextProps & T) => ReturnEl;
|
|
49
|
-
Addon: <T>(props: IButtonAddonProps & T) => ReturnEl;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export default Button;
|
package/lib/es6/index.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
5
|
-
import { INeighborItemProps } from '@semcore/neighbor-location';
|
|
6
|
-
|
|
7
|
-
export type ButtonSize = 'l' | 'm';
|
|
8
|
-
|
|
9
|
-
export interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
10
|
-
/**
|
|
11
|
-
* Button type
|
|
12
|
-
* @default secondary
|
|
13
|
-
*/
|
|
14
|
-
use?: 'primary' | 'secondary' | 'tertiary';
|
|
15
|
-
/** Button theme */
|
|
16
|
-
theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
|
|
17
|
-
/** Button activity state */
|
|
18
|
-
active?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* Button size
|
|
21
|
-
* @default m
|
|
22
|
-
*/
|
|
23
|
-
size?: ButtonSize;
|
|
24
|
-
/** Disabled button state */
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
/** Loading button state */
|
|
27
|
-
loading?: boolean;
|
|
28
|
-
/** Tag for the left Addon */
|
|
29
|
-
addonLeft?: React.ElementType;
|
|
30
|
-
/** Tag for the right Addon */
|
|
31
|
-
addonRight?: React.ElementType;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export interface IButtonTextProps extends IBoxProps {
|
|
35
|
-
size?: ButtonSize;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export interface IButtonAddonProps extends IBoxProps {
|
|
39
|
-
size?: ButtonSize;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface IButtonContext {
|
|
43
|
-
getTextProps: PropGetterFn;
|
|
44
|
-
getAddonProps: PropGetterFn;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
declare const Button: (<T>(props: CProps<IButtonProps & T, IButtonContext>) => ReturnEl) & {
|
|
48
|
-
Text: <T>(props: IButtonTextProps & T) => ReturnEl;
|
|
49
|
-
Addon: <T>(props: IButtonAddonProps & T) => ReturnEl;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export default Button;
|