@progress/kendo-themes-html 4.43.1-dev.6 → 4.43.1-dev.7
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/lib/jsx-runtime.js +1 -0
- package/package.json +2 -2
- package/src/button/button.jsx +19 -4
- package/src/index.js +2 -0
- package/src/menubutton/README.md +60 -0
- package/src/menubutton/index.js +1 -0
- package/src/menubutton/menubutton.jsx +161 -0
- package/src/splitbutton/README.md +76 -0
- package/src/splitbutton/index.js +1 -0
- package/src/splitbutton/splitbutton.jsx +176 -0
package/lib/jsx-runtime.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-themes-html",
|
|
3
3
|
"description": "A collection of HTML helpers used for developing Kendo UI themes",
|
|
4
|
-
"version": "4.43.1-dev.
|
|
4
|
+
"version": "4.43.1-dev.7",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@rollup/plugin-node-resolve": "^13.1.2",
|
|
43
43
|
"rollup": "^2.62.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "634466e18a3f771f8e1da5dc5efdefca1f4fd344"
|
|
46
46
|
}
|
package/src/button/button.jsx
CHANGED
|
@@ -6,6 +6,7 @@ class Button extends Component {
|
|
|
6
6
|
|
|
7
7
|
init() {
|
|
8
8
|
this._props.text = this.element.innerHTML;
|
|
9
|
+
this._props.children = [];
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
render() {
|
|
@@ -16,6 +17,7 @@ class Button extends Component {
|
|
|
16
17
|
function ButtonStatic(props) {
|
|
17
18
|
const {
|
|
18
19
|
className: ownClassName,
|
|
20
|
+
children,
|
|
19
21
|
|
|
20
22
|
text,
|
|
21
23
|
type,
|
|
@@ -90,16 +92,26 @@ function ButtonStatic(props) {
|
|
|
90
92
|
|
|
91
93
|
return (
|
|
92
94
|
<button type={type} className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
+
{ children.length === 0
|
|
96
|
+
? <>
|
|
97
|
+
<IconStatic className="k-button-icon" name={icon} />
|
|
98
|
+
{text && <span className="k-button-text">{text}</span>}
|
|
99
|
+
</>
|
|
100
|
+
: children
|
|
101
|
+
}
|
|
95
102
|
</button>
|
|
96
103
|
);
|
|
97
104
|
}
|
|
98
105
|
|
|
99
106
|
return (
|
|
100
107
|
<button type={type} className={buttonClasses} {...ariaAttr} {...htmlAttributes}>
|
|
101
|
-
|
|
102
|
-
|
|
108
|
+
{ children.length === 0
|
|
109
|
+
? <>
|
|
110
|
+
<IconStatic className="k-button-icon" name={icon} />
|
|
111
|
+
{text && <span className="k-button-text">{text}</span>}
|
|
112
|
+
</>
|
|
113
|
+
: children
|
|
114
|
+
}
|
|
103
115
|
</button>
|
|
104
116
|
);
|
|
105
117
|
}
|
|
@@ -107,6 +119,8 @@ function ButtonStatic(props) {
|
|
|
107
119
|
ButtonStatic.defaultProps = {
|
|
108
120
|
...globalDefaultProps,
|
|
109
121
|
|
|
122
|
+
children: [],
|
|
123
|
+
|
|
110
124
|
text: '',
|
|
111
125
|
icon: '',
|
|
112
126
|
|
|
@@ -122,6 +136,7 @@ ButtonStatic.defaultProps = {
|
|
|
122
136
|
};
|
|
123
137
|
|
|
124
138
|
ButtonStatic.propTypes = {
|
|
139
|
+
children: typeof [],
|
|
125
140
|
text: typeof '',
|
|
126
141
|
icon: typeof '',
|
|
127
142
|
|
package/src/index.js
CHANGED
|
@@ -38,6 +38,8 @@ export * from './chip/index';
|
|
|
38
38
|
|
|
39
39
|
// Native forms
|
|
40
40
|
export * from './button/index';
|
|
41
|
+
export * from './menubutton/index';
|
|
42
|
+
export * from './splitbutton/index';
|
|
41
43
|
export * from './textbox/index';
|
|
42
44
|
export * from './textarea/index';
|
|
43
45
|
export * from './checkbox/index';
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
```html
|
|
2
|
+
<!-- default rendering -->
|
|
3
|
+
<div class="k-dropdown-button">
|
|
4
|
+
<button type="button" class="k-menu-button k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
|
|
5
|
+
<span class="k-button-text">Text</span>
|
|
6
|
+
<span class="k-button-arrow"><span class="k-icon k-i-arrow-s"></span></span>
|
|
7
|
+
</button>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<!-- canonical rendering -->
|
|
11
|
+
<div class="k-dropdown-button">
|
|
12
|
+
<button class="
|
|
13
|
+
k-button
|
|
14
|
+
{text === '' && icon !== '' && 'k-icon-button'}
|
|
15
|
+
k-button-{size}
|
|
16
|
+
k-button-{shape}
|
|
17
|
+
k-rounded-{rounded}
|
|
18
|
+
k-button-{fillMode}
|
|
19
|
+
k-button-{fillMode}-{themeColor}
|
|
20
|
+
k-{state}
|
|
21
|
+
{disabled && 'k-disabled'}
|
|
22
|
+
" type={type} disabled={disabled}>
|
|
23
|
+
{icon !== '' && <span class="k-button-icon k-icon k-i-{icon}"></span>}
|
|
24
|
+
{text !== '' && <span class="k-button-text">Button</span>}
|
|
25
|
+
{showArrow && <span class="k-button-arrow"><span class="k-icon k-i-{arrowIconName}"></span></span>}
|
|
26
|
+
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<!-- popup menu items default rendering -->
|
|
31
|
+
<div class="k-animation-container k-animation-container-fixed k-animation-container-shown">
|
|
32
|
+
<div class="k-popup k-menu-popup">
|
|
33
|
+
<ul class="k-group k-menu-group k-reset k-menu-group-md">
|
|
34
|
+
<li class="k-item k-menu-item">
|
|
35
|
+
<span class="k-link k-menu-link">
|
|
36
|
+
<span class="k-menu-link-text">Text</span>
|
|
37
|
+
</span>
|
|
38
|
+
</li>
|
|
39
|
+
</ul>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- popup menu items canonical rendering -->
|
|
44
|
+
<div class="k-animation-container k-animation-container-fixed k-animation-container-shown">
|
|
45
|
+
<div class="k-popup k-menu-popup">
|
|
46
|
+
<ul class="k-group k-menu-group k-reset k-menu-group-{size}">
|
|
47
|
+
<li class="k-item k-menu-item">
|
|
48
|
+
<span class="k-link k-menu-link k-{state}">
|
|
49
|
+
{icon !== '' && <span class="k-icon k-i-{icon}"></span>}
|
|
50
|
+
{text !== '' && <span class="k-menu-link-text">Text</span>}
|
|
51
|
+
{hasChildren
|
|
52
|
+
? <span class="k-menu-expand-arrow k-icon k-i-{arrowIconName}"></span>
|
|
53
|
+
: <span class="k-menu-expand-arrow k-icon k-i-none"></span>
|
|
54
|
+
}
|
|
55
|
+
</span>
|
|
56
|
+
</li>
|
|
57
|
+
</ul>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './menubutton.jsx';
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { Component, globalDefaultProps } from '../component/index';
|
|
2
|
+
import { ButtonStatic } from '../button/index';
|
|
3
|
+
import { IconStatic } from '../icon/index';
|
|
4
|
+
|
|
5
|
+
class MenuButton extends Component {
|
|
6
|
+
|
|
7
|
+
init() {
|
|
8
|
+
this._props.text = this.element.innerHTML;
|
|
9
|
+
this._props.children = [];
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
render() {
|
|
13
|
+
return <MenuButtonStatic {...this.props} />;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function MenuButtonStatic(props) {
|
|
18
|
+
const {
|
|
19
|
+
className: ownClassName,
|
|
20
|
+
|
|
21
|
+
text,
|
|
22
|
+
|
|
23
|
+
size,
|
|
24
|
+
rounded,
|
|
25
|
+
|
|
26
|
+
fillMode,
|
|
27
|
+
themeColor,
|
|
28
|
+
|
|
29
|
+
icon,
|
|
30
|
+
|
|
31
|
+
showArrow,
|
|
32
|
+
arrowIconName,
|
|
33
|
+
|
|
34
|
+
hover,
|
|
35
|
+
focus,
|
|
36
|
+
active,
|
|
37
|
+
selected,
|
|
38
|
+
disabled,
|
|
39
|
+
|
|
40
|
+
aria,
|
|
41
|
+
legacy,
|
|
42
|
+
|
|
43
|
+
...htmlAttributes
|
|
44
|
+
} = props;
|
|
45
|
+
|
|
46
|
+
let menuButtonClasses = [
|
|
47
|
+
ownClassName,
|
|
48
|
+
'k-menu-button'
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
// Augment attributes
|
|
52
|
+
htmlAttributes.disabled = disabled;
|
|
53
|
+
|
|
54
|
+
let ariaAttr = aria
|
|
55
|
+
? {}
|
|
56
|
+
: {};
|
|
57
|
+
|
|
58
|
+
if (legacy) {
|
|
59
|
+
|
|
60
|
+
let legacyMenuButtonClasses = [
|
|
61
|
+
ownClassName,
|
|
62
|
+
'k-menu-button'
|
|
63
|
+
];
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ButtonStatic className={legacyMenuButtonClasses}
|
|
67
|
+
text={text}
|
|
68
|
+
icon={icon}
|
|
69
|
+
|
|
70
|
+
size={size}
|
|
71
|
+
rounded={rounded}
|
|
72
|
+
fillMode={fillMode}
|
|
73
|
+
themeColor={themeColor}
|
|
74
|
+
|
|
75
|
+
hover={hover}
|
|
76
|
+
focus={focus}
|
|
77
|
+
active={active}
|
|
78
|
+
selected={selected}
|
|
79
|
+
disabled={disabled}
|
|
80
|
+
|
|
81
|
+
{...ariaAttr}
|
|
82
|
+
{...htmlAttributes}
|
|
83
|
+
>
|
|
84
|
+
<IconStatic className="k-button-icon" name={icon} />
|
|
85
|
+
{text && <span className="k-button-text">{text}</span>}
|
|
86
|
+
{showArrow && <span className="k-menu-button-arrow k-button-arrow"><IconStatic name={arrowIconName} /></span>}
|
|
87
|
+
</ButtonStatic>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<ButtonStatic className={menuButtonClasses}
|
|
93
|
+
text={text}
|
|
94
|
+
icon={icon}
|
|
95
|
+
|
|
96
|
+
size={size}
|
|
97
|
+
rounded={rounded}
|
|
98
|
+
fillMode={fillMode}
|
|
99
|
+
themeColor={themeColor}
|
|
100
|
+
|
|
101
|
+
hover={hover}
|
|
102
|
+
focus={focus}
|
|
103
|
+
active={active}
|
|
104
|
+
selected={selected}
|
|
105
|
+
disabled={disabled}
|
|
106
|
+
|
|
107
|
+
{...ariaAttr}
|
|
108
|
+
{...htmlAttributes}
|
|
109
|
+
>
|
|
110
|
+
<IconStatic className="k-button-icon" name={icon} />
|
|
111
|
+
{text && <span className="k-button-text">{text}</span>}
|
|
112
|
+
{showArrow && <span className="k-menu-button-arrow k-button-arrow"><IconStatic name={arrowIconName} /></span>}
|
|
113
|
+
</ButtonStatic>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
MenuButtonStatic.defaultProps = {
|
|
118
|
+
...globalDefaultProps,
|
|
119
|
+
|
|
120
|
+
text: '',
|
|
121
|
+
icon: '',
|
|
122
|
+
|
|
123
|
+
className: '',
|
|
124
|
+
|
|
125
|
+
size: 'medium',
|
|
126
|
+
rounded: 'medium',
|
|
127
|
+
|
|
128
|
+
showArrow: 'true',
|
|
129
|
+
arrowIconName: 'arrow-s',
|
|
130
|
+
|
|
131
|
+
fillMode: 'solid',
|
|
132
|
+
themeColor: 'base'
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
MenuButtonStatic.propTypes = {
|
|
136
|
+
text: typeof '',
|
|
137
|
+
icon: typeof '',
|
|
138
|
+
|
|
139
|
+
showArrow: typeof false,
|
|
140
|
+
arrowIconName: typeof '',
|
|
141
|
+
|
|
142
|
+
size: typeof [ null, 'small', 'medium', 'large' ],
|
|
143
|
+
rounded: typeof [ null, '0', 'small', 'medium', 'large', 'full' ],
|
|
144
|
+
|
|
145
|
+
fillMode: typeof [ null, 'solid', 'flat', 'outline', 'link' ],
|
|
146
|
+
themeColor: typeof [ null, 'surface', 'base', 'primary' ],
|
|
147
|
+
|
|
148
|
+
hover: typeof false,
|
|
149
|
+
focus: typeof false,
|
|
150
|
+
active: typeof false,
|
|
151
|
+
selected: typeof false,
|
|
152
|
+
disabled: typeof false,
|
|
153
|
+
|
|
154
|
+
aria: typeof false,
|
|
155
|
+
legacy: typeof false,
|
|
156
|
+
|
|
157
|
+
className: typeof '',
|
|
158
|
+
htmlAttributes: typeof []
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
export { MenuButton, MenuButtonStatic };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
```html
|
|
2
|
+
<!-- default rendering -->
|
|
3
|
+
<div class="k-split-button k-button-group k-rounded-md">
|
|
4
|
+
<button
|
|
5
|
+
class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
|
|
6
|
+
type="button"
|
|
7
|
+
>
|
|
8
|
+
<span className="k-button-text">Text</span>
|
|
9
|
+
</button>
|
|
10
|
+
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button">
|
|
11
|
+
<span class="k-icon k-i-arrow-s"></span>
|
|
12
|
+
</button>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<!-- canonical rendering -->
|
|
16
|
+
<div class="k-split-button k-button-group k-rounded-${rounded}">
|
|
17
|
+
<button class="
|
|
18
|
+
k-button
|
|
19
|
+
${text === '' && icon !== '' && 'k-icon-button'}
|
|
20
|
+
k-button-${size}
|
|
21
|
+
k-button-${shape}
|
|
22
|
+
k-rounded-${rounded}
|
|
23
|
+
k-button-${fillMode}
|
|
24
|
+
k-button-${fillMode}-${themeColor}
|
|
25
|
+
k-${state}
|
|
26
|
+
${disabled && 'k-disabled'}
|
|
27
|
+
" type={type} disabled={disabled}>
|
|
28
|
+
{icon !== '' && <span class="k-button-icon k-icon k-i-${icon}"></span>}
|
|
29
|
+
{text !== '' && <span class="k-button-text">Text</span>}
|
|
30
|
+
</button>
|
|
31
|
+
<button class="
|
|
32
|
+
k-button
|
|
33
|
+
k-icon-button
|
|
34
|
+
k-button-${size}
|
|
35
|
+
k-button-${shape}
|
|
36
|
+
k-rounded-${rounded}
|
|
37
|
+
k-button-${fillMode}
|
|
38
|
+
k-button-${fillMode}-${themeColor}
|
|
39
|
+
k-${state}
|
|
40
|
+
${disabled && 'k-disabled'}
|
|
41
|
+
" type={type} disabled={disabled}>
|
|
42
|
+
<span class="k-icon k-i-${arrowIconName}"></span>
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<!-- popup menu items default rendering -->
|
|
47
|
+
<div class="k-animation-container k-animation-container-fixed k-animation-container-shown">
|
|
48
|
+
<div class="k-popup k-menu-popup">
|
|
49
|
+
<ul class="k-group k-menu-group k-reset k-menu-group-md">
|
|
50
|
+
<li class="k-item k-menu-item">
|
|
51
|
+
<span class="k-link k-menu-link">
|
|
52
|
+
<span class="k-menu-link-text">Text</span>
|
|
53
|
+
</span>
|
|
54
|
+
</li>
|
|
55
|
+
</ul>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- popup menu items canonical rendering -->
|
|
60
|
+
<div class="k-animation-container k-animation-container-fixed k-animation-container-shown">
|
|
61
|
+
<div class="k-popup k-menu-popup">
|
|
62
|
+
<ul class="k-group k-menu-group k-reset k-menu-group-${size}">
|
|
63
|
+
<li class="k-item k-menu-item">
|
|
64
|
+
<span class="k-link k-menu-link k-${state}">
|
|
65
|
+
{icon !== '' && <span class="k-icon k-i-${icon}"></span>}
|
|
66
|
+
{text !== '' && <span class="k-menu-link-text">Text</span>}
|
|
67
|
+
{hasChildren ?
|
|
68
|
+
<span class="k-menu-expand-arrow k-icon k-i-${arrowIconName || 'arrow-60-right'}"></span> :
|
|
69
|
+
<span class="k-menu-expand-arrow k-icon k-i-none"></span>
|
|
70
|
+
}
|
|
71
|
+
</span>
|
|
72
|
+
</li>
|
|
73
|
+
</ul>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './splitbutton.jsx';
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import * as styles from '../../utils/styles';
|
|
2
|
+
import { Component, globalDefaultProps } from '../component/index';
|
|
3
|
+
import { ButtonStatic } from '../button/index';
|
|
4
|
+
|
|
5
|
+
class SplitButton extends Component {
|
|
6
|
+
|
|
7
|
+
init() {
|
|
8
|
+
this._props.text = this.element.innerHTML;
|
|
9
|
+
this._props.children = [];
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
render() {
|
|
13
|
+
return <SplitButtonStatic {...this.props} />;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function SplitButtonStatic(props) {
|
|
18
|
+
const {
|
|
19
|
+
className: ownClassName,
|
|
20
|
+
|
|
21
|
+
text,
|
|
22
|
+
|
|
23
|
+
size,
|
|
24
|
+
rounded,
|
|
25
|
+
|
|
26
|
+
fillMode,
|
|
27
|
+
themeColor,
|
|
28
|
+
|
|
29
|
+
icon,
|
|
30
|
+
|
|
31
|
+
arrowIconName,
|
|
32
|
+
|
|
33
|
+
hover,
|
|
34
|
+
focus,
|
|
35
|
+
active,
|
|
36
|
+
selected,
|
|
37
|
+
disabled,
|
|
38
|
+
|
|
39
|
+
aria,
|
|
40
|
+
legacy,
|
|
41
|
+
|
|
42
|
+
...htmlAttributes
|
|
43
|
+
} = props;
|
|
44
|
+
|
|
45
|
+
let splitButtonClasses = [
|
|
46
|
+
ownClassName,
|
|
47
|
+
'k-split-button',
|
|
48
|
+
'k-button-group',
|
|
49
|
+
styles.roundedClass( rounded )
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
// Augment attributes
|
|
53
|
+
htmlAttributes.disabled = disabled;
|
|
54
|
+
|
|
55
|
+
let ariaAttr = aria
|
|
56
|
+
? {}
|
|
57
|
+
: {};
|
|
58
|
+
|
|
59
|
+
if (legacy) {
|
|
60
|
+
|
|
61
|
+
let legacySplitButtonClasses = [
|
|
62
|
+
ownClassName,
|
|
63
|
+
'k-split-button',
|
|
64
|
+
'k-button-group'
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<div className={legacySplitButtonClasses} {...ariaAttr} {...htmlAttributes}>
|
|
69
|
+
<ButtonStatic
|
|
70
|
+
text={text}
|
|
71
|
+
icon={icon}
|
|
72
|
+
|
|
73
|
+
size={size}
|
|
74
|
+
rounded={rounded}
|
|
75
|
+
fillMode={fillMode}
|
|
76
|
+
themeColor={themeColor}
|
|
77
|
+
|
|
78
|
+
hover={hover}
|
|
79
|
+
focus={focus}
|
|
80
|
+
active={active}
|
|
81
|
+
selected={selected}
|
|
82
|
+
disabled={disabled}
|
|
83
|
+
></ButtonStatic>
|
|
84
|
+
<ButtonStatic
|
|
85
|
+
className="k-split-button-arrow"
|
|
86
|
+
|
|
87
|
+
icon={arrowIconName}
|
|
88
|
+
|
|
89
|
+
size={size}
|
|
90
|
+
rounded={rounded}
|
|
91
|
+
fillMode={fillMode}
|
|
92
|
+
themeColor={themeColor}
|
|
93
|
+
|
|
94
|
+
disabled={disabled}
|
|
95
|
+
></ButtonStatic>
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<div className={splitButtonClasses} {...ariaAttr} {...htmlAttributes}>
|
|
102
|
+
<ButtonStatic
|
|
103
|
+
text={text}
|
|
104
|
+
icon={icon}
|
|
105
|
+
|
|
106
|
+
size={size}
|
|
107
|
+
rounded={rounded}
|
|
108
|
+
fillMode={fillMode}
|
|
109
|
+
themeColor={themeColor}
|
|
110
|
+
|
|
111
|
+
hover={hover}
|
|
112
|
+
focus={focus}
|
|
113
|
+
active={active}
|
|
114
|
+
selected={selected}
|
|
115
|
+
disabled={disabled}
|
|
116
|
+
></ButtonStatic>
|
|
117
|
+
<ButtonStatic
|
|
118
|
+
className="k-split-button-arrow"
|
|
119
|
+
|
|
120
|
+
icon={arrowIconName}
|
|
121
|
+
|
|
122
|
+
size={size}
|
|
123
|
+
rounded={rounded}
|
|
124
|
+
fillMode={fillMode}
|
|
125
|
+
themeColor={themeColor}
|
|
126
|
+
|
|
127
|
+
disabled={disabled}
|
|
128
|
+
></ButtonStatic>
|
|
129
|
+
</div>
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
SplitButtonStatic.defaultProps = {
|
|
134
|
+
...globalDefaultProps,
|
|
135
|
+
|
|
136
|
+
text: '',
|
|
137
|
+
icon: '',
|
|
138
|
+
|
|
139
|
+
arrowIconName: 'arrow-s',
|
|
140
|
+
|
|
141
|
+
className: '',
|
|
142
|
+
type: 'button',
|
|
143
|
+
|
|
144
|
+
size: 'medium',
|
|
145
|
+
rounded: 'medium',
|
|
146
|
+
|
|
147
|
+
fillMode: 'solid',
|
|
148
|
+
themeColor: 'base'
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
SplitButtonStatic.propTypes = {
|
|
152
|
+
text: typeof '',
|
|
153
|
+
icon: typeof '',
|
|
154
|
+
|
|
155
|
+
arrowIconName: typeof '',
|
|
156
|
+
|
|
157
|
+
size: typeof [ null, 'small', 'medium', 'large' ],
|
|
158
|
+
rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
|
|
159
|
+
|
|
160
|
+
fillMode: typeof [ null, 'solid', 'flat', 'outline', 'link' ],
|
|
161
|
+
themeColor: typeof [ null, 'surface', 'base', 'primary' ],
|
|
162
|
+
|
|
163
|
+
hover: typeof false,
|
|
164
|
+
focus: typeof false,
|
|
165
|
+
active: typeof false,
|
|
166
|
+
selected: typeof false,
|
|
167
|
+
disabled: typeof false,
|
|
168
|
+
|
|
169
|
+
aria: typeof false,
|
|
170
|
+
legacy: typeof false,
|
|
171
|
+
|
|
172
|
+
className: typeof '',
|
|
173
|
+
htmlAttributes: typeof []
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
export { SplitButton, SplitButtonStatic };
|