cozy-ui 82.13.0 → 82.14.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 +7 -0
- package/package.json +1 -1
- package/react/Badge/Readme.md +2 -1
- package/react/CozyDialogs/Readme.md +1 -1
- package/react/Menu/Readme.md +1 -1
- package/react/MuiCozyTheme/TextField/Readme.md +209 -35
- package/react/MuiCozyTheme/makeOverrides.js +28 -2
- package/transpiled/react/MuiCozyTheme/makeOverrides.js +28 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [82.14.0](https://github.com/cozy/cozy-ui/compare/v82.13.0...v82.14.0) (2023-04-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **TextField:** Update style and documentation ([8ff4ae0](https://github.com/cozy/cozy-ui/commit/8ff4ae0))
|
|
7
|
+
|
|
1
8
|
# [82.13.0](https://github.com/cozy/cozy-ui/compare/v82.12.0...v82.13.0) (2023-04-12)
|
|
2
9
|
|
|
3
10
|
|
package/package.json
CHANGED
package/react/Badge/Readme.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
`<Badge />` component wraps the element you want to apply a badge to. It is based on the [Badge component from Material-UI](https://
|
|
1
|
+
`<Badge />` component wraps the element you want to apply a badge to. It is based on the [Badge component from Material-UI](https://v4.mui.com/api/badge/).
|
|
2
|
+
|
|
2
3
|
|
|
3
4
|
### Basic Badges
|
|
4
5
|
|
|
@@ -49,7 +49,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
|
|
|
49
49
|
* if defined and in mobile mode then the back button will trigger onBack() instead of onClose()
|
|
50
50
|
* if not defined and in mobile mode then the back button will trigger onClose()
|
|
51
51
|
|
|
52
|
-
Additionally, all the CozyDialogs support [MUI Dialog's props](https://
|
|
52
|
+
Additionally, all the CozyDialogs support [MUI Dialog's props](https://v4.mui.com/api/dialog/).
|
|
53
53
|
|
|
54
54
|
### Exemples
|
|
55
55
|
|
package/react/Menu/Readme.md
CHANGED
|
@@ -96,7 +96,7 @@ const showItem = item => {
|
|
|
96
96
|
|
|
97
97
|
#### `position` and `popover`
|
|
98
98
|
|
|
99
|
-
`ActionMenu` relies on the Material-UI [Popover](https://
|
|
99
|
+
`ActionMenu` relies on the Material-UI [Popover](https://v4.mui.com/components/popper/) component to handle both `position` and `popover`.
|
|
100
100
|
|
|
101
101
|
* `position='left'` is now `placement='bottom-start'`, and is still the default behavior.
|
|
102
102
|
* `position='right'` is now `placement='bottom-end'`.
|
|
@@ -1,38 +1,212 @@
|
|
|
1
|
-
Cozy themed MUI TextField. See
|
|
2
|
-
[MUI V3 documentation](https://v3.material-ui.com/api/text-field/) to find the
|
|
3
|
-
props.
|
|
1
|
+
Cozy themed MUI TextField. See [the official API](https://v4.mui.com/api/text-field/) to find the props.
|
|
4
2
|
|
|
5
3
|
```jsx
|
|
6
|
-
import TextField from 'cozy-ui/transpiled/react/MuiCozyTheme/TextField'
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
4
|
+
import TextField, {StyledTextField} from 'cozy-ui/transpiled/react/MuiCozyTheme/TextField'
|
|
5
|
+
import Variants from 'cozy-ui/docs/components/Variants'
|
|
6
|
+
import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
|
|
7
|
+
import Icon from 'cozy-ui/transpiled/react/Icon'
|
|
8
|
+
import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
|
|
9
|
+
import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
|
|
10
|
+
|
|
11
|
+
initialState = { option: 'value2' }
|
|
12
|
+
|
|
13
|
+
const initialVariants = [{
|
|
14
|
+
required: false,
|
|
15
|
+
error: false,
|
|
16
|
+
small: false,
|
|
17
|
+
helperText: false,
|
|
18
|
+
withIcons: false
|
|
19
|
+
}]
|
|
20
|
+
|
|
21
|
+
const inputProps = {
|
|
22
|
+
startAdornment: (
|
|
23
|
+
<InputAdornment position="start">
|
|
24
|
+
<Icon className="u-mr-half" icon={FileIcon} />Ko
|
|
25
|
+
</InputAdornment>
|
|
26
|
+
),
|
|
27
|
+
endAdornment: (
|
|
28
|
+
<InputAdornment position="end">Ko</InputAdornment>
|
|
29
|
+
),
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const options = [
|
|
33
|
+
{
|
|
34
|
+
value: 'value1',
|
|
35
|
+
label: 'Item 1',
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
value: 'value2',
|
|
39
|
+
label: 'Item 2',
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
value: 'value3',
|
|
43
|
+
label: 'Item 3',
|
|
44
|
+
},
|
|
45
|
+
]
|
|
46
|
+
const handleChange = (event) => {
|
|
47
|
+
setState({ option: event.target.value })
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
;
|
|
51
|
+
|
|
52
|
+
<Variants initialVariants={initialVariants} screenshotAllVariants>
|
|
53
|
+
{variant => (
|
|
54
|
+
<>
|
|
55
|
+
<div className="u-mb-1">No label</div>
|
|
56
|
+
<TextField
|
|
57
|
+
error={variant.error}
|
|
58
|
+
size={variant.small ? 'small' : 'medium'}
|
|
59
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
60
|
+
required={variant.required}
|
|
61
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
62
|
+
variant="outlined"
|
|
63
|
+
/>
|
|
64
|
+
<TextField
|
|
65
|
+
className="u-ml-0-s u-ml-1"
|
|
66
|
+
disabled
|
|
67
|
+
error={variant.error}
|
|
68
|
+
size={variant.small ? 'small' : 'medium'}
|
|
69
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
70
|
+
required={variant.required}
|
|
71
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
72
|
+
variant="outlined"
|
|
73
|
+
/>
|
|
74
|
+
|
|
75
|
+
<div className="u-mb-1 u-mt-2">Empty</div>
|
|
76
|
+
<TextField
|
|
77
|
+
error={variant.error}
|
|
78
|
+
size={variant.small ? 'small' : 'medium'}
|
|
79
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
80
|
+
required={variant.required}
|
|
81
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
82
|
+
label="Label"
|
|
83
|
+
variant="outlined"
|
|
84
|
+
/>
|
|
85
|
+
<TextField
|
|
86
|
+
className="u-ml-0-s u-ml-1"
|
|
87
|
+
disabled
|
|
88
|
+
error={variant.error}
|
|
89
|
+
size={variant.small ? 'small' : 'medium'}
|
|
90
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
91
|
+
required={variant.required}
|
|
92
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
93
|
+
label="Label"
|
|
94
|
+
variant="outlined"
|
|
95
|
+
/>
|
|
96
|
+
|
|
97
|
+
<div className="u-mb-1 u-mt-2">Placeholder</div>
|
|
98
|
+
<TextField
|
|
99
|
+
placeholder="placeholder"
|
|
100
|
+
InputLabelProps={{ shrink: true }}
|
|
101
|
+
error={variant.error}
|
|
102
|
+
size={variant.small ? 'small' : 'medium'}
|
|
103
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
104
|
+
required={variant.required}
|
|
105
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
106
|
+
label="Label"
|
|
107
|
+
variant="outlined"
|
|
108
|
+
/>
|
|
109
|
+
<TextField
|
|
110
|
+
className="u-ml-1"
|
|
111
|
+
placeholder="placeholder"
|
|
112
|
+
disabled
|
|
113
|
+
error={variant.error}
|
|
114
|
+
size={variant.small ? 'small' : 'medium'}
|
|
115
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
116
|
+
required={variant.required}
|
|
117
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
118
|
+
label="Label"
|
|
119
|
+
variant="outlined"
|
|
120
|
+
/>
|
|
121
|
+
|
|
122
|
+
<div className="u-mb-1 u-mt-2">Default value</div>
|
|
123
|
+
<TextField
|
|
124
|
+
defaultValue="Default value"
|
|
125
|
+
error={variant.error}
|
|
126
|
+
size={variant.small ? 'small' : 'medium'}
|
|
127
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
128
|
+
required={variant.required}
|
|
129
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
130
|
+
label="Label"
|
|
131
|
+
variant="outlined"
|
|
132
|
+
/>
|
|
133
|
+
<TextField
|
|
134
|
+
className="u-ml-1"
|
|
135
|
+
defaultValue="Default value"
|
|
136
|
+
disabled
|
|
137
|
+
error={variant.error}
|
|
138
|
+
size={variant.small ? 'small' : 'medium'}
|
|
139
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
140
|
+
required={variant.required}
|
|
141
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
142
|
+
label="Label"
|
|
143
|
+
variant="outlined"
|
|
144
|
+
/>
|
|
145
|
+
|
|
146
|
+
<div className="u-mb-1 u-mt-2">Multiline</div>
|
|
147
|
+
<TextField
|
|
148
|
+
multiline
|
|
149
|
+
rows={4}
|
|
150
|
+
error={variant.error}
|
|
151
|
+
size={variant.small ? 'small' : 'medium'}
|
|
152
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
153
|
+
required={variant.required}
|
|
154
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
155
|
+
label="Label"
|
|
156
|
+
variant="outlined"
|
|
157
|
+
/>
|
|
158
|
+
<TextField
|
|
159
|
+
className="u-ml-1"
|
|
160
|
+
multiline
|
|
161
|
+
rows={4}
|
|
162
|
+
disabled
|
|
163
|
+
error={variant.error}
|
|
164
|
+
size={variant.small ? 'small' : 'medium'}
|
|
165
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
166
|
+
required={variant.required}
|
|
167
|
+
InputProps={variant.withIcons ? inputProps : undefined}
|
|
168
|
+
label="Label"
|
|
169
|
+
variant="outlined"
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
<div className="u-mb-1 u-mt-2">Select</div>
|
|
173
|
+
<TextField
|
|
174
|
+
select
|
|
175
|
+
value={state.option}
|
|
176
|
+
error={variant.error}
|
|
177
|
+
size={variant.small ? 'small' : 'medium'}
|
|
178
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
179
|
+
required={variant.required}
|
|
180
|
+
label="Label"
|
|
181
|
+
variant="outlined"
|
|
182
|
+
onChange={handleChange}
|
|
183
|
+
>
|
|
184
|
+
{options.map((option) => (
|
|
185
|
+
<MenuItem key={option.value} value={option.value}>
|
|
186
|
+
{option.label}
|
|
187
|
+
</MenuItem>
|
|
188
|
+
))}
|
|
189
|
+
</TextField>
|
|
190
|
+
<TextField
|
|
191
|
+
className="u-ml-1"
|
|
192
|
+
select
|
|
193
|
+
value={state.option}
|
|
194
|
+
disabled
|
|
195
|
+
error={variant.error}
|
|
196
|
+
size={variant.small ? 'small' : 'medium'}
|
|
197
|
+
helperText={variant.helperText ? 'This is an helper text' : undefined}
|
|
198
|
+
required={variant.required}
|
|
199
|
+
label="Label"
|
|
200
|
+
variant="outlined"
|
|
201
|
+
onChange={handleChange}
|
|
202
|
+
>
|
|
203
|
+
{options.map((option) => (
|
|
204
|
+
<MenuItem key={option.value} value={option.value}>
|
|
205
|
+
{option.label}
|
|
206
|
+
</MenuItem>
|
|
207
|
+
))}
|
|
208
|
+
</TextField>
|
|
209
|
+
</>
|
|
210
|
+
)}
|
|
211
|
+
</Variants>
|
|
38
212
|
```
|
|
@@ -225,6 +225,7 @@ const makeContainedButtonStyle = (theme, color) => ({
|
|
|
225
225
|
const makeOverrides = theme => ({
|
|
226
226
|
MuiOutlinedInput: {
|
|
227
227
|
root: {
|
|
228
|
+
borderRadius: 4,
|
|
228
229
|
'&$disabled': {
|
|
229
230
|
background: theme.palette.grey[100]
|
|
230
231
|
},
|
|
@@ -237,6 +238,25 @@ const makeOverrides = theme => ({
|
|
|
237
238
|
},
|
|
238
239
|
notchedOutline: {
|
|
239
240
|
borderColor: theme.palette.grey[200]
|
|
241
|
+
},
|
|
242
|
+
input: {
|
|
243
|
+
padding: '18.5px 16px'
|
|
244
|
+
},
|
|
245
|
+
inputMarginDense: {
|
|
246
|
+
paddingTop: 14,
|
|
247
|
+
paddingBottom: 15
|
|
248
|
+
}
|
|
249
|
+
},
|
|
250
|
+
MuiInputLabel: {
|
|
251
|
+
outlined: {
|
|
252
|
+
'&$marginDense': {
|
|
253
|
+
transform: 'translate(14px, 14px) scale(1)'
|
|
254
|
+
},
|
|
255
|
+
'&:not($shrink)': {
|
|
256
|
+
'&$error': {
|
|
257
|
+
color: theme.palette.text.secondary
|
|
258
|
+
}
|
|
259
|
+
}
|
|
240
260
|
}
|
|
241
261
|
},
|
|
242
262
|
MuiButton: {
|
|
@@ -581,14 +601,20 @@ const makeOverrides = theme => ({
|
|
|
581
601
|
},
|
|
582
602
|
MuiFormLabel: {
|
|
583
603
|
root: {
|
|
584
|
-
color: theme.palette.text.secondary
|
|
604
|
+
color: theme.palette.text.secondary,
|
|
605
|
+
'&$disabled&$error': {
|
|
606
|
+
color: theme.palette.text.disabled
|
|
607
|
+
}
|
|
585
608
|
}
|
|
586
609
|
},
|
|
587
610
|
MuiFormHelperText: {
|
|
588
611
|
root: {
|
|
589
612
|
fontStyle: 'italic',
|
|
590
613
|
fontSize: '0.875rem',
|
|
591
|
-
marginTop: 4
|
|
614
|
+
marginTop: 4,
|
|
615
|
+
'&$disabled&$error': {
|
|
616
|
+
color: theme.palette.text.disabled
|
|
617
|
+
}
|
|
592
618
|
}
|
|
593
619
|
},
|
|
594
620
|
MuiDialog: {
|
|
@@ -186,6 +186,7 @@ var makeOverrides = function makeOverrides(theme) {
|
|
|
186
186
|
return {
|
|
187
187
|
MuiOutlinedInput: {
|
|
188
188
|
root: {
|
|
189
|
+
borderRadius: 4,
|
|
189
190
|
'&$disabled': {
|
|
190
191
|
background: theme.palette.grey[100]
|
|
191
192
|
},
|
|
@@ -198,6 +199,25 @@ var makeOverrides = function makeOverrides(theme) {
|
|
|
198
199
|
},
|
|
199
200
|
notchedOutline: {
|
|
200
201
|
borderColor: theme.palette.grey[200]
|
|
202
|
+
},
|
|
203
|
+
input: {
|
|
204
|
+
padding: '18.5px 16px'
|
|
205
|
+
},
|
|
206
|
+
inputMarginDense: {
|
|
207
|
+
paddingTop: 14,
|
|
208
|
+
paddingBottom: 15
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
MuiInputLabel: {
|
|
212
|
+
outlined: {
|
|
213
|
+
'&$marginDense': {
|
|
214
|
+
transform: 'translate(14px, 14px) scale(1)'
|
|
215
|
+
},
|
|
216
|
+
'&:not($shrink)': {
|
|
217
|
+
'&$error': {
|
|
218
|
+
color: theme.palette.text.secondary
|
|
219
|
+
}
|
|
220
|
+
}
|
|
201
221
|
}
|
|
202
222
|
},
|
|
203
223
|
MuiButton: {
|
|
@@ -522,14 +542,20 @@ var makeOverrides = function makeOverrides(theme) {
|
|
|
522
542
|
},
|
|
523
543
|
MuiFormLabel: {
|
|
524
544
|
root: {
|
|
525
|
-
color: theme.palette.text.secondary
|
|
545
|
+
color: theme.palette.text.secondary,
|
|
546
|
+
'&$disabled&$error': {
|
|
547
|
+
color: theme.palette.text.disabled
|
|
548
|
+
}
|
|
526
549
|
}
|
|
527
550
|
},
|
|
528
551
|
MuiFormHelperText: {
|
|
529
552
|
root: {
|
|
530
553
|
fontStyle: 'italic',
|
|
531
554
|
fontSize: '0.875rem',
|
|
532
|
-
marginTop: 4
|
|
555
|
+
marginTop: 4,
|
|
556
|
+
'&$disabled&$error': {
|
|
557
|
+
color: theme.palette.text.disabled
|
|
558
|
+
}
|
|
533
559
|
}
|
|
534
560
|
},
|
|
535
561
|
MuiDialog: {
|