fixup! fixup! fixup! fixup! fixup! Create InputGroup component (#430)

src/lib/components/Button/Button.jsx

@@ -179,8 +179,8 @@ Button.propTypes = {
   /**
    * Size of the button.
    *
-   * Ignored if the component is rendered within `ButtonGroup` component
-   * as the value is inherited in such case.
+   * Ignored if the component is rendered within `ButtonGroup` or `InputGroup` component as the value is inherited in
+   * such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**

src/lib/components/InputGroup/InputGroup.jsx

@@ -41,6 +41,7 @@ export const InputGroup = ({
     <div
       className={classNames(
         styles.root,
+        formLayoutContext && styles.isRootInFormLayout,
         resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,

src/lib/components/InputGroup/InputGroup.scss

@@ -57,6 +57,10 @@
     width: max-content;
 }
 
+.isRootInFormLayout {
+    @include box-field-layout.in-form-layout();
+}
+
 // Sizes
 .isRootSizeSmall {
     @include box-field-sizes.size(small);

src/lib/components/InputGroup/README.mdx

@@ -73,14 +73,6 @@ Use input group to group **related fields and actions** that a user can
 take. Input fields and buttons should not be grouped just to save space on the
 screen.
 
-### Shared Property
-
-You can set size property directly on InputGroup to be shared for all fields
-and buttons inside the group. This property is then passed over to individual
-elements. At the same time, it **cannot be overridden** on the fields' or
-buttons' level. While technically possible, from the design point of view it's
-undesirable to group elements of totally different types or sizes.
-
 ## Sizes
 
 All existing field and button sizes are also available on the input group level:
@@ -107,10 +99,19 @@ small, medium, and large.
   </InputGroup>
 </Playground>
 
+### Shared Property
+
+You can set the `size` property directly on InputGroup to be shared for all
+fields and buttons inside the group. This property is then passed over to
+individual elements. At the same time, it **cannot be overridden** on the
+fields' or buttons' level. While technically possible, from the design point of
+view it's undesirable to group elements of totally different types or sizes.
+
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the group label. The label
-remains accessible to assistive technologies.
+remains accessible to assistive technologies. Labels of individual inputs are
+always visually hidden.
 
 While it may be acceptable for login screens with just a few fields or for other
 simple forms, it's dangerous to hide labels from users in most cases. Keep in

src/lib/components/SelectField/SelectField.jsx

@@ -175,6 +175,8 @@ SelectField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -230,6 +232,8 @@ SelectField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -238,6 +242,9 @@ SelectField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

src/lib/components/TextField/TextField.jsx

@@ -149,6 +149,8 @@ TextField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -168,6 +170,8 @@ TextField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -180,6 +184,9 @@ TextField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

webpack.config.js

@@ -3,7 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 const VisualizerPlugin = require('webpack-visualizer-plugin');
 
 const MAX_DEVELOPMENT_OUTPUT_SIZE = 3000000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 335000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 340000;
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'production'