@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/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.53.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": "cp \"src/docs/_assets/generated/react-ui.css\" dist & cp \"src/docs/_assets/generated/react-ui.js\" dist",
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
  */
@@ -41,6 +41,10 @@
41
41
  @include foundation.help-text();
42
42
  }
43
43
 
44
+ .isRootRequired .label {
45
+ @include foundation.label-required();
46
+ }
47
+
44
48
  // States
45
49
  .isRootStateInvalid {
46
50
  @include variants.validation(invalid);
@@ -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 label="First and last name">
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
- [div] element.
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
- [div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
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