@dhis2-ui/button 8.15.1 → 8.16.0-alpha.2
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.
@@ -183,10 +183,8 @@ DropdownButton.propTypes = {
|
|
183
183
|
component: _propTypes2.default.element,
|
184
184
|
dataTest: _propTypes2.default.string,
|
185
185
|
|
186
|
-
/**
|
187
|
-
|
188
|
-
*/
|
189
|
-
destructive: _propTypes2.default.bool,
|
186
|
+
/** Button variant. Mutually exclusive with `primary` and `secondary` props */
|
187
|
+
destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
190
188
|
|
191
189
|
/** Make the button non-interactive */
|
192
190
|
disabled: _propTypes2.default.bool,
|
@@ -202,15 +200,11 @@ DropdownButton.propTypes = {
|
|
202
200
|
/** Controls popper visibility. When implementing this prop the component becomes a controlled component */
|
203
201
|
open: _propTypes2.default.bool,
|
204
202
|
|
205
|
-
/**
|
206
|
-
|
207
|
-
*/
|
208
|
-
primary: _propTypes2.default.bool,
|
203
|
+
/** Button variant. Mutually exclusive with `destructive` and `secondary` props */
|
204
|
+
primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
209
205
|
|
210
|
-
/**
|
211
|
-
|
212
|
-
*/
|
213
|
-
secondary: _propTypes2.default.bool,
|
206
|
+
/** Button variant. Mutually exclusive with `primary` and `destructive` props */
|
207
|
+
secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
214
208
|
|
215
209
|
/** Button size. Mutually exclusive with `large` prop */
|
216
210
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
@@ -146,10 +146,8 @@ SplitButton.propTypes = {
|
|
146
146
|
component: _propTypes.default.element,
|
147
147
|
dataTest: _propTypes.default.string,
|
148
148
|
|
149
|
-
/**
|
150
|
-
|
151
|
-
*/
|
152
|
-
destructive: _propTypes.default.bool,
|
149
|
+
/** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
|
150
|
+
destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
153
151
|
|
154
152
|
/** Disables the button and makes it uninteractive */
|
155
153
|
disabled: _propTypes.default.bool,
|
@@ -164,15 +162,11 @@ SplitButton.propTypes = {
|
|
164
162
|
large: _uiConstants.sharedPropTypes.sizePropType,
|
165
163
|
name: _propTypes.default.string,
|
166
164
|
|
167
|
-
/**
|
168
|
-
|
169
|
-
*/
|
170
|
-
primary: _propTypes.default.bool,
|
165
|
+
/** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
|
166
|
+
primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
171
167
|
|
172
|
-
/**
|
173
|
-
|
174
|
-
*/
|
175
|
-
secondary: _propTypes.default.bool,
|
168
|
+
/** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
|
169
|
+
secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
|
176
170
|
|
177
171
|
/** Changes button size. Mutually exclusive with `large` prop */
|
178
172
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
@@ -163,10 +163,8 @@ DropdownButton.propTypes = {
|
|
163
163
|
component: PropTypes.element,
|
164
164
|
dataTest: PropTypes.string,
|
165
165
|
|
166
|
-
/**
|
167
|
-
|
168
|
-
*/
|
169
|
-
destructive: PropTypes.bool,
|
166
|
+
/** Button variant. Mutually exclusive with `primary` and `secondary` props */
|
167
|
+
destructive: sharedPropTypes.buttonVariantPropType,
|
170
168
|
|
171
169
|
/** Make the button non-interactive */
|
172
170
|
disabled: PropTypes.bool,
|
@@ -182,15 +180,11 @@ DropdownButton.propTypes = {
|
|
182
180
|
/** Controls popper visibility. When implementing this prop the component becomes a controlled component */
|
183
181
|
open: PropTypes.bool,
|
184
182
|
|
185
|
-
/**
|
186
|
-
|
187
|
-
*/
|
188
|
-
primary: PropTypes.bool,
|
183
|
+
/** Button variant. Mutually exclusive with `destructive` and `secondary` props */
|
184
|
+
primary: sharedPropTypes.buttonVariantPropType,
|
189
185
|
|
190
|
-
/**
|
191
|
-
|
192
|
-
*/
|
193
|
-
secondary: PropTypes.bool,
|
186
|
+
/** Button variant. Mutually exclusive with `primary` and `destructive` props */
|
187
|
+
secondary: sharedPropTypes.buttonVariantPropType,
|
194
188
|
|
195
189
|
/** Button size. Mutually exclusive with `large` prop */
|
196
190
|
small: sharedPropTypes.sizePropType,
|
@@ -124,10 +124,8 @@ SplitButton.propTypes = {
|
|
124
124
|
component: PropTypes.element,
|
125
125
|
dataTest: PropTypes.string,
|
126
126
|
|
127
|
-
/**
|
128
|
-
|
129
|
-
*/
|
130
|
-
destructive: PropTypes.bool,
|
127
|
+
/** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
|
128
|
+
destructive: sharedPropTypes.buttonVariantPropType,
|
131
129
|
|
132
130
|
/** Disables the button and makes it uninteractive */
|
133
131
|
disabled: PropTypes.bool,
|
@@ -142,15 +140,11 @@ SplitButton.propTypes = {
|
|
142
140
|
large: sharedPropTypes.sizePropType,
|
143
141
|
name: PropTypes.string,
|
144
142
|
|
145
|
-
/**
|
146
|
-
|
147
|
-
*/
|
148
|
-
primary: PropTypes.bool,
|
143
|
+
/** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
|
144
|
+
primary: sharedPropTypes.buttonVariantPropType,
|
149
145
|
|
150
|
-
/**
|
151
|
-
|
152
|
-
*/
|
153
|
-
secondary: PropTypes.bool,
|
146
|
+
/** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
|
147
|
+
secondary: sharedPropTypes.buttonVariantPropType,
|
154
148
|
|
155
149
|
/** Changes button size. Mutually exclusive with `large` prop */
|
156
150
|
small: sharedPropTypes.sizePropType,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@dhis2-ui/button",
|
3
|
-
"version": "8.
|
3
|
+
"version": "8.16.0-alpha.2",
|
4
4
|
"description": "UI Button",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -13,6 +13,7 @@
|
|
13
13
|
"main": "./build/cjs/index.js",
|
14
14
|
"module": "./build/es/index.js",
|
15
15
|
"exports": {
|
16
|
+
"types": "./types/index.d.ts",
|
16
17
|
"import": "./build/es/index.js",
|
17
18
|
"require": "./build/cjs/index.js"
|
18
19
|
},
|
@@ -32,20 +33,22 @@
|
|
32
33
|
},
|
33
34
|
"dependencies": {
|
34
35
|
"@dhis2/prop-types": "^3.1.2",
|
35
|
-
"@dhis2-ui/layer": "8.
|
36
|
-
"@dhis2-ui/loader": "8.
|
37
|
-
"@dhis2-ui/popper": "8.
|
38
|
-
"@dhis2/ui-constants": "8.
|
39
|
-
"@dhis2/ui-icons": "8.
|
36
|
+
"@dhis2-ui/layer": "8.16.0-alpha.2",
|
37
|
+
"@dhis2-ui/loader": "8.16.0-alpha.2",
|
38
|
+
"@dhis2-ui/popper": "8.16.0-alpha.2",
|
39
|
+
"@dhis2/ui-constants": "8.16.0-alpha.2",
|
40
|
+
"@dhis2/ui-icons": "8.16.0-alpha.2",
|
40
41
|
"classnames": "^2.3.1",
|
41
42
|
"prop-types": "^15.7.2"
|
42
43
|
},
|
43
44
|
"files": [
|
44
|
-
"build"
|
45
|
+
"build",
|
46
|
+
"types"
|
45
47
|
],
|
46
48
|
"devDependencies": {
|
47
49
|
"react": "16.13",
|
48
50
|
"react-dom": "16.13",
|
49
51
|
"styled-jsx": "^4.0.1"
|
50
|
-
}
|
52
|
+
},
|
53
|
+
"types": "types"
|
51
54
|
}
|
package/types/index.d.ts
ADDED
@@ -0,0 +1,234 @@
|
|
1
|
+
import * as React from 'react'
|
2
|
+
|
3
|
+
export type ButtonType = 'submit' | 'reset' | 'button'
|
4
|
+
|
5
|
+
export interface ButtonEventPayload {
|
6
|
+
value?: string
|
7
|
+
name?: string
|
8
|
+
}
|
9
|
+
|
10
|
+
type ButtonEventHandler<Event extends React.SyntheticEvent> = (
|
11
|
+
arg0: ButtonEventPayload,
|
12
|
+
event: Event
|
13
|
+
) => void
|
14
|
+
|
15
|
+
type ButtonOpenEventHandler<
|
16
|
+
Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
|
17
|
+
> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
|
18
|
+
|
19
|
+
export interface ButtonProps {
|
20
|
+
/**
|
21
|
+
* Component to render inside the button
|
22
|
+
*/
|
23
|
+
children?: React.ReactNode
|
24
|
+
/**
|
25
|
+
* A className that will be passed to the `<button>` element
|
26
|
+
*/
|
27
|
+
className?: string
|
28
|
+
/**
|
29
|
+
* A string that will be applied as a `data-test` attribute on the button element
|
30
|
+
* for identification during testing
|
31
|
+
*/
|
32
|
+
dataTest?: string
|
33
|
+
/** Applies 'destructive' button appearance, implying a dangerous action */
|
34
|
+
destructive?: boolean
|
35
|
+
/**
|
36
|
+
* Applies a greyed-out appearance and makes the button non-interactive
|
37
|
+
*/
|
38
|
+
disabled?: boolean
|
39
|
+
/**
|
40
|
+
* An icon element to display inside the button
|
41
|
+
*/
|
42
|
+
icon?: React.ReactElement
|
43
|
+
/**
|
44
|
+
* Use this variant to capture the initial focus on the page.
|
45
|
+
*/
|
46
|
+
initialFocus?: boolean
|
47
|
+
/**
|
48
|
+
* Makes the button large. Mutually exclusive with `small`
|
49
|
+
*/
|
50
|
+
large?: boolean
|
51
|
+
/**
|
52
|
+
* Sets the button into a loading state
|
53
|
+
*/
|
54
|
+
loading?: boolean
|
55
|
+
/**
|
56
|
+
* Sets `name` attribute on button element.
|
57
|
+
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
58
|
+
*/
|
59
|
+
name?: string
|
60
|
+
/** Applies 'primary' button appearance, implying the most important action */
|
61
|
+
primary?: boolean
|
62
|
+
/** Applies 'secondary' button appearance */
|
63
|
+
secondary?: boolean
|
64
|
+
/**
|
65
|
+
* Makes the button small. Mutually exclusive with `large` prop
|
66
|
+
*/
|
67
|
+
small?: boolean
|
68
|
+
/**
|
69
|
+
* Tab index for focusing the button with a keyboard
|
70
|
+
*/
|
71
|
+
tabIndex?: string
|
72
|
+
/**
|
73
|
+
* Changes appearance of button to an on/off state
|
74
|
+
*/
|
75
|
+
toggled?: boolean
|
76
|
+
/**
|
77
|
+
* Sets `type` attribute on `<button>` element
|
78
|
+
*/
|
79
|
+
type?: ButtonType
|
80
|
+
/**
|
81
|
+
* Value associated with the button.
|
82
|
+
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
83
|
+
*/
|
84
|
+
value?: string
|
85
|
+
/**
|
86
|
+
* Callback to trigger on de-focus (blur).
|
87
|
+
* Called with same args as `onClick`
|
88
|
+
*/
|
89
|
+
onBlur?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
90
|
+
/**
|
91
|
+
* Callback to trigger on click.
|
92
|
+
* Called with args `({ value, name }, event)`
|
93
|
+
*/
|
94
|
+
onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
|
95
|
+
/**
|
96
|
+
* Callback to trigger on focus. Called with same args as `onClick`
|
97
|
+
*/
|
98
|
+
onFocus?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
99
|
+
/**
|
100
|
+
* Callback to trigger on key-down. Called with same args as `onClick`
|
101
|
+
*/
|
102
|
+
onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
|
103
|
+
}
|
104
|
+
|
105
|
+
export const Button: React.FC<ButtonProps>
|
106
|
+
|
107
|
+
export interface ButtonStripProps {
|
108
|
+
children?: React.ReactNode
|
109
|
+
className?: string
|
110
|
+
dataTest?: string
|
111
|
+
/**
|
112
|
+
* Horizontal alignment for buttons. Mutually exclusive with `middle` prop
|
113
|
+
*/
|
114
|
+
end?: boolean
|
115
|
+
/**
|
116
|
+
* Horizontal alignment. Mutually exclusive with `end` prop
|
117
|
+
*/
|
118
|
+
middle?: boolean
|
119
|
+
}
|
120
|
+
|
121
|
+
export const ButtonStrip: React.FC<ButtonStripProps>
|
122
|
+
|
123
|
+
export type DropdownButtonType = 'submit' | 'reset' | 'button'
|
124
|
+
|
125
|
+
export interface DropdownButtonProps {
|
126
|
+
/**
|
127
|
+
* Children to render inside the buton
|
128
|
+
*/
|
129
|
+
children?: React.ReactNode
|
130
|
+
className?: string
|
131
|
+
/**
|
132
|
+
* Component to show/hide when button is clicked
|
133
|
+
*/
|
134
|
+
component?: React.ReactElement<any>
|
135
|
+
dataTest?: string
|
136
|
+
/** Applies 'destructive' button appearance, implying a dangerous action. */
|
137
|
+
destructive?: boolean
|
138
|
+
/**
|
139
|
+
* Make the button non-interactive
|
140
|
+
*/
|
141
|
+
disabled?: boolean
|
142
|
+
icon?: React.ReactElement<any>
|
143
|
+
/**
|
144
|
+
* Grants button initial focus on the page
|
145
|
+
*/
|
146
|
+
initialFocus?: boolean
|
147
|
+
/**
|
148
|
+
* Button size. Mutually exclusive with `small` prop
|
149
|
+
*/
|
150
|
+
large?: boolean
|
151
|
+
name?: string
|
152
|
+
/**
|
153
|
+
* Controls popper visibility. When implementing this prop the component becomes a controlled component
|
154
|
+
*/
|
155
|
+
open?: boolean
|
156
|
+
/** Applies 'primary' button appearance, implying the most important action */
|
157
|
+
primary?: boolean
|
158
|
+
/** Applies 'secondary' button appearance */
|
159
|
+
secondary?: boolean
|
160
|
+
/**
|
161
|
+
* Changes button size. Mutually exclusive with `large` prop
|
162
|
+
*/
|
163
|
+
small?: boolean
|
164
|
+
tabIndex?: string
|
165
|
+
/**
|
166
|
+
* Type of button. Can take advantage of different default behavior
|
167
|
+
*/
|
168
|
+
type?: DropdownButtonType
|
169
|
+
value?: string
|
170
|
+
/**
|
171
|
+
* Callback triggered on click.
|
172
|
+
* Called with signature `({ name: string, value: string, open: bool }, event)`
|
173
|
+
* Is required when using the `open` prop to override the internal
|
174
|
+
* state.
|
175
|
+
*/
|
176
|
+
onClick?: ButtonOpenEventHandler
|
177
|
+
}
|
178
|
+
|
179
|
+
export class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
180
|
+
render(): JSX.Element
|
181
|
+
}
|
182
|
+
|
183
|
+
export type SplitButtonType = 'submit' | 'reset' | 'button'
|
184
|
+
|
185
|
+
export interface SplitButtonProps {
|
186
|
+
children?: string
|
187
|
+
className?: string
|
188
|
+
/**
|
189
|
+
* Component to render when the dropdown is opened
|
190
|
+
*/
|
191
|
+
component?: React.ReactElement<any>
|
192
|
+
dataTest?: string
|
193
|
+
/** Applies 'destructive' button appearance, implying a dangerous action. */
|
194
|
+
destructive?: boolean
|
195
|
+
/**
|
196
|
+
* Disables the button and makes it uninteractive
|
197
|
+
*/
|
198
|
+
disabled?: boolean
|
199
|
+
/**
|
200
|
+
* An icon to add inside the button
|
201
|
+
*/
|
202
|
+
icon?: React.ReactElement<any>
|
203
|
+
/**
|
204
|
+
* Grants the button the initial focus
|
205
|
+
*/
|
206
|
+
initialFocus?: boolean
|
207
|
+
/**
|
208
|
+
* Changes button size. Mutually exclusive with `small` prop
|
209
|
+
*/
|
210
|
+
large?: boolean
|
211
|
+
name?: string
|
212
|
+
/** Applies 'primary' button appearance, implying the most important action */
|
213
|
+
primary?: boolean
|
214
|
+
/** Applies 'secondary' button appearance */
|
215
|
+
secondary?: boolean
|
216
|
+
/**
|
217
|
+
* Changes button size. Mutually exclusive with `large` prop
|
218
|
+
*/
|
219
|
+
small?: boolean
|
220
|
+
tabIndex?: string
|
221
|
+
/**
|
222
|
+
* Type of button. Applied to html `button` element
|
223
|
+
*/
|
224
|
+
type?: SplitButtonType
|
225
|
+
/**
|
226
|
+
* Value associated with the button. Passed in object to onClick handler
|
227
|
+
*/
|
228
|
+
value?: string
|
229
|
+
onClick?: ButtonOpenEventHandler
|
230
|
+
}
|
231
|
+
|
232
|
+
export class SplitButton extends React.Component<SplitButtonProps, any> {
|
233
|
+
render(): JSX.Element
|
234
|
+
}
|