@react-ui-org/react-ui 0.53.0 → 0.54.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "keywords": [
     "react",
     "ui",
@@ -33,8 +33,10 @@
     "npm": ">=9"
   },
   "scripts": {
-    "build": "webpack --mode=production",
-    "copy": "cp \"src/docs/_assets/generated/react-ui.css\" dist & cp \"src/docs/_assets/generated/react-ui.js\" dist",
+    "build": "webpack --mode=production && webpack --mode=development",
+    "copy": "npm run copy:css && npm run copy:js",
+    "copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
+    "copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
     "eslint": "eslint --ext js,jsx src",
     "jest": "jest src --coverage",
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",

package/src/components/InputGroup/InputGroup.jsx

@@ -22,6 +22,7 @@ export const InputGroup = ({
   isLabelVisible,
   label,
   layout,
+  required,
   size,
   validationTexts,
   ...restProps
@@ -57,6 +58,7 @@ export const InputGroup = ({
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
       )}
@@ -112,6 +114,7 @@ InputGroup.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  required: false,
   size: 'medium',
   validationTexts: null,
 };
@@ -156,6 +159,11 @@ InputGroup.propTypes = {
    * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * If `true`, the `InputGroup`'s label appears as required. Underlying `<fieldset>`
+   * element does not take `required` attribute so there is no functional effect.
+   */
+  required: PropTypes.bool,
   /**
    * Size of the `children` elements.
    */

package/src/components/InputGroup/InputGroup.scss

@@ -41,6 +41,10 @@
     @include foundation.help-text();
 }
 
+.isRootRequired .label {
+    @include foundation.label-required();
+}
+
 // States
 .isRootStateInvalid {
     @include variants.validation(invalid);

package/src/components/InputGroup/README.md

@@ -176,9 +176,14 @@ not show any `validationText`, they only show their respective `validationState`
 Validation messages passed to input elements' `validationText` prop will be
 ignored.
 
+👉 While there is a `required` property to visually denote the whole input group
+is required, there is no functional effect as there is no such HTML attribute
+for the underlying `<fieldset>` element.
+
 ```docoff-react-preview
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "First name must be filled in.",
     "Last name must be filled in.",
@@ -187,17 +192,20 @@ ignored.
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="invalid"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="invalid"
   />
   <Button label="Submit" />
 </InputGroup>
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "Last name should not include any digits.",
   ]}
@@ -205,26 +213,33 @@ ignored.
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="warning"
     value="123Doe"
   />
   <Button label="Submit" />
 </InputGroup>
-<InputGroup label="First and last name">
+<InputGroup
+  label="First and last name"
+  required
+>
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="valid"
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="valid"
     value="Doe"
   />
@@ -241,7 +256,7 @@ element which wraps elements to be grouped. This enables making the component
 interactive and helps to improve its accessibility.
 
 👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+[fieldset][fieldset-attributes] element.
 
 ## API
 
@@ -257,4 +272,4 @@ interactive and helps to improve its accessibility.
 [fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
 [React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes

package/CODEOWNERS

@@ -1,23 +0,0 @@
-# Default owners for code review
-*              @developers
-
-# Default owners for file types
-*.js           @mbohal @bedrich-schindler @developers
-*.jsx          @mbohal @bedrich-schindler @developers
-*.md           @adamkudrna @developers
-*.scss         @adamkudrna @developers
-
-# Default owners for directories
-/docker        @mbohal @bedrich-schindler @developers
-/src/docs      @adamkudrna @developers
-
-# Default owners for specific files
-/.browserslistrc            @adamkudrna @developers
-/.eslintrc                  @mbohal @bedrich-schindler @developers
-/.markdownlint.jsonc        @adamkudrna @developers
-/babel.config.js            @mbohal @bedrich-schindler @developers
-/docker-compose.yml         @mbohal @bedrich-schindler @developers
-/jest.config.js             @mbohal @bedrich-schindler @developers
-/postcss.config.js          @adamkudrna @developers
-/stylelint.config.js        @adamkudrna @developers
-/webpack.config.babel.js    @mbohal @bedrich-schindler @developers