@react-ui-org/react-ui 0.53.0 → 0.54.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/dist/react-ui.css +1 -1
- package/dist/react-ui.development.css +11302 -0
- package/dist/react-ui.development.js +1588 -0
- package/dist/react-ui.js +1 -1
- package/package.json +5 -3
- package/src/components/InputGroup/InputGroup.jsx +8 -0
- package/src/components/InputGroup/InputGroup.scss +4 -0
- package/src/components/InputGroup/README.md +18 -3
- package/CODEOWNERS +0 -23
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@react-ui-org/react-ui",
|
3
3
|
"description": "React UI is a themeable UI library for React apps.",
|
4
|
-
"version": "0.
|
4
|
+
"version": "0.54.0",
|
5
5
|
"keywords": [
|
6
6
|
"react",
|
7
7
|
"ui",
|
@@ -33,8 +33,10 @@
|
|
33
33
|
"npm": ">=9"
|
34
34
|
},
|
35
35
|
"scripts": {
|
36
|
-
"build": "webpack --mode=production",
|
37
|
-
"copy": "
|
36
|
+
"build": "webpack --mode=production && webpack --mode=development",
|
37
|
+
"copy": "npm run copy:css && npm run copy:js",
|
38
|
+
"copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
|
39
|
+
"copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
|
38
40
|
"eslint": "eslint --ext js,jsx src",
|
39
41
|
"jest": "jest src --coverage",
|
40
42
|
"lint": "npm run eslint && npm run markdownlint && npm run stylelint",
|
@@ -22,6 +22,7 @@ export const InputGroup = ({
|
|
22
22
|
isLabelVisible,
|
23
23
|
label,
|
24
24
|
layout,
|
25
|
+
required,
|
25
26
|
size,
|
26
27
|
validationTexts,
|
27
28
|
...restProps
|
@@ -57,6 +58,7 @@ export const InputGroup = ({
|
|
57
58
|
? styles.isRootLayoutHorizontal
|
58
59
|
: styles.isRootLayoutVertical,
|
59
60
|
disabled && styles.isRootDisabled,
|
61
|
+
required && styles.isRootRequired,
|
60
62
|
getRootSizeClassName(size, styles),
|
61
63
|
getRootValidationStateClassName(validationState, styles),
|
62
64
|
)}
|
@@ -112,6 +114,7 @@ InputGroup.defaultProps = {
|
|
112
114
|
id: undefined,
|
113
115
|
isLabelVisible: true,
|
114
116
|
layout: 'vertical',
|
117
|
+
required: false,
|
115
118
|
size: 'medium',
|
116
119
|
validationTexts: null,
|
117
120
|
};
|
@@ -156,6 +159,11 @@ InputGroup.propTypes = {
|
|
156
159
|
* as the value is inherited in such case.
|
157
160
|
*/
|
158
161
|
layout: PropTypes.oneOf(['horizontal', 'vertical']),
|
162
|
+
/**
|
163
|
+
* If `true`, the `InputGroup`'s label appears as required. Underlying `<fieldset>`
|
164
|
+
* element does not take `required` attribute so there is no functional effect.
|
165
|
+
*/
|
166
|
+
required: PropTypes.bool,
|
159
167
|
/**
|
160
168
|
* Size of the `children` elements.
|
161
169
|
*/
|
@@ -176,9 +176,14 @@ not show any `validationText`, they only show their respective `validationState`
|
|
176
176
|
Validation messages passed to input elements' `validationText` prop will be
|
177
177
|
ignored.
|
178
178
|
|
179
|
+
👉 While there is a `required` property to visually denote the whole input group
|
180
|
+
is required, there is no functional effect as there is no such HTML attribute
|
181
|
+
for the underlying `<fieldset>` element.
|
182
|
+
|
179
183
|
```docoff-react-preview
|
180
184
|
<InputGroup
|
181
185
|
label="First and last name"
|
186
|
+
required
|
182
187
|
validationTexts={[
|
183
188
|
"First name must be filled in.",
|
184
189
|
"Last name must be filled in.",
|
@@ -187,17 +192,20 @@ ignored.
|
|
187
192
|
<TextField
|
188
193
|
label="First name"
|
189
194
|
placeholder="Eg. John"
|
195
|
+
required
|
190
196
|
validationState="invalid"
|
191
197
|
/>
|
192
198
|
<TextField
|
193
199
|
label="Last name"
|
194
200
|
placeholder="Eg. Doe"
|
201
|
+
required
|
195
202
|
validationState="invalid"
|
196
203
|
/>
|
197
204
|
<Button label="Submit" />
|
198
205
|
</InputGroup>
|
199
206
|
<InputGroup
|
200
207
|
label="First and last name"
|
208
|
+
required
|
201
209
|
validationTexts={[
|
202
210
|
"Last name should not include any digits.",
|
203
211
|
]}
|
@@ -205,26 +213,33 @@ ignored.
|
|
205
213
|
<TextField
|
206
214
|
label="First name"
|
207
215
|
placeholder="Eg. John"
|
216
|
+
required
|
208
217
|
value="John"
|
209
218
|
/>
|
210
219
|
<TextField
|
211
220
|
label="Last name"
|
212
221
|
placeholder="Eg. Doe"
|
222
|
+
required
|
213
223
|
validationState="warning"
|
214
224
|
value="123Doe"
|
215
225
|
/>
|
216
226
|
<Button label="Submit" />
|
217
227
|
</InputGroup>
|
218
|
-
<InputGroup
|
228
|
+
<InputGroup
|
229
|
+
label="First and last name"
|
230
|
+
required
|
231
|
+
>
|
219
232
|
<TextField
|
220
233
|
label="First name"
|
221
234
|
placeholder="Eg. John"
|
235
|
+
required
|
222
236
|
validationState="valid"
|
223
237
|
value="John"
|
224
238
|
/>
|
225
239
|
<TextField
|
226
240
|
label="Last name"
|
227
241
|
placeholder="Eg. Doe"
|
242
|
+
required
|
228
243
|
validationState="valid"
|
229
244
|
value="Doe"
|
230
245
|
/>
|
@@ -241,7 +256,7 @@ element which wraps elements to be grouped. This enables making the component
|
|
241
256
|
interactive and helps to improve its accessibility.
|
242
257
|
|
243
258
|
👉 Refer to the MDN reference for the full list of supported attributes of the
|
244
|
-
[
|
259
|
+
[fieldset][fieldset-attributes] element.
|
245
260
|
|
246
261
|
## API
|
247
262
|
|
@@ -257,4 +272,4 @@ interactive and helps to improve its accessibility.
|
|
257
272
|
[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
|
258
273
|
[accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
|
259
274
|
[React synthetic events]: https://reactjs.org/docs/events.html
|
260
|
-
[
|
275
|
+
[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes
|
package/CODEOWNERS
DELETED
@@ -1,23 +0,0 @@
|
|
1
|
-
# Default owners for code review
|
2
|
-
* @developers
|
3
|
-
|
4
|
-
# Default owners for file types
|
5
|
-
*.js @mbohal @bedrich-schindler @developers
|
6
|
-
*.jsx @mbohal @bedrich-schindler @developers
|
7
|
-
*.md @adamkudrna @developers
|
8
|
-
*.scss @adamkudrna @developers
|
9
|
-
|
10
|
-
# Default owners for directories
|
11
|
-
/docker @mbohal @bedrich-schindler @developers
|
12
|
-
/src/docs @adamkudrna @developers
|
13
|
-
|
14
|
-
# Default owners for specific files
|
15
|
-
/.browserslistrc @adamkudrna @developers
|
16
|
-
/.eslintrc @mbohal @bedrich-schindler @developers
|
17
|
-
/.markdownlint.jsonc @adamkudrna @developers
|
18
|
-
/babel.config.js @mbohal @bedrich-schindler @developers
|
19
|
-
/docker-compose.yml @mbohal @bedrich-schindler @developers
|
20
|
-
/jest.config.js @mbohal @bedrich-schindler @developers
|
21
|
-
/postcss.config.js @adamkudrna @developers
|
22
|
-
/stylelint.config.js @adamkudrna @developers
|
23
|
-
/webpack.config.babel.js @mbohal @bedrich-schindler @developers
|