@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
- * Applies 'destructive' button appearance, implying a dangerous action.
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
- * Applies 'primary' button appearance, implying the most important action.
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
- * Applies 'secondary' button appearance.
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
- * Applies 'destructive' button appearance, implying a dangerous action.
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
- * Applies 'primary' button appearance, implying the most important action.
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
- * Applies 'secondary' button appearance.
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
- * Applies 'destructive' button appearance, implying a dangerous action.
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
- * Applies 'primary' button appearance, implying the most important action.
187
- */
188
- primary: PropTypes.bool,
183
+ /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
184
+ primary: sharedPropTypes.buttonVariantPropType,
189
185
 
190
- /**
191
- * Applies 'secondary' button appearance.
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
- * Applies 'destructive' button appearance, implying a dangerous action.
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
- * Applies 'primary' button appearance, implying the most important action.
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
- * Applies 'secondary' button appearance.
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.15.1",
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.15.1",
36
- "@dhis2-ui/loader": "8.15.1",
37
- "@dhis2-ui/popper": "8.15.1",
38
- "@dhis2/ui-constants": "8.15.1",
39
- "@dhis2/ui-icons": "8.15.1",
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
  }
@@ -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
+ }