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

Author: dacerondrej

src/lib/components/Button/Button.jsx

@@ -56,7 +56,8 @@ export const Button = React.forwardRef((props, ref) => {
         ),
         getRootLabelVisibilityClassName(labelVisibility, styles),
         resolveContextOrProp(buttonGroupContext && buttonGroupContext.block, block) && styles.isRootBlock,
-        primaryContext && styles.isRootGrouped,
+        buttonGroupContext && styles.isRootInButtonGroup,
+        inputGroupContext && styles.isRootInInputGroup,
         feedbackIcon && styles.hasRootFeedback,
       )}
       disabled={resolveContextOrProp(buttonGroupContext && buttonGroupContext.disabled, disabled) || !!feedbackIcon}

src/lib/components/Button/_base.scss

@@ -76,7 +76,8 @@
     color: transparent;
 }
 
-.isRootGrouped {
+.isRootInButtonGroup,
+.isRootInInputGroup {
     z-index: map.get(settings.$group-z-indexes, button);
 
     &:not(:first-child) {
@@ -96,8 +97,10 @@
     }
 }
 
-.isRootGrouped .startCorner,
-.isRootGrouped .endCorner {
+.isRootInButtonGroup .startCorner,
+.isRootInInputGroup .startCorner,
+.isRootInButtonGroup .endCorner,
+.isRootInInputGroup .endCorner {
     z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 

src/lib/components/Button/_priorities.scss

@@ -135,8 +135,8 @@
     @include tools.button-color(flat, dark);
 }
 
-.isRootPriorityFilled.isRootGrouped:not(:first-child)::before,
-.isRootPriorityFlat.isRootGrouped:not(:first-child)::before {
+.isRootPriorityFilled.isRootInButtonGroup:not(:first-child)::before,
+.isRootPriorityFlat.isRootInButtonGroup:not(:first-child)::before {
     content: "";
     position: absolute;
     top: calc(-1 * #{theme.$border-width});
@@ -147,18 +147,18 @@
     transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
 
-.isRootPriorityFilled.isRootGrouped:not(:first-child) {
+.isRootPriorityFilled.isRootInButtonGroup:not(:first-child) {
     --rui-local-gap: #{theme.$group-filled-gap};
     --rui-local-separator-width: #{theme.$group-filled-separator-width};
     --rui-local-separator-color: #{theme.$group-filled-separator-color};
 }
 
-.isRootPriorityFlat.isRootGrouped:not(:first-child) {
+.isRootPriorityFlat.isRootInButtonGroup:not(:first-child) {
     --rui-local-gap: #{theme.$group-flat-gap};
     --rui-local-separator-width: #{theme.$group-flat-separator-width};
     --rui-local-separator-color: #{theme.$group-flat-separator-color};
 }
 
-.isRootPriorityOutline.isRootGrouped:not(:first-child) {
+.isRootPriorityOutline.isRootInButtonGroup:not(:first-child) {
     --rui-local-gap: #{theme.$group-outline-gap};
 }

src/lib/components/FormLayout/README.mdx

@@ -27,6 +27,7 @@ import {
   ToolbarItem,
   FormLayout,
   FormLayoutCustomField,
+  InputGroup,
 } from '../..'
 
 ## Basic Usage
@@ -441,6 +442,10 @@ This is a demo of all components supported by FormLayout.
             options={options}
             value={fruit}
           />
+          <InputGroup label="Promo code">
+            <TextField label="Promo code" />
+            <Button label="Submit" />
+          </InputGroup>
         </FormLayout>
       </div>
     )