Fix the appearance of form controls in grouped layouts

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jul 18, 2024 · 71fb46e · 71fb46e
1 parent c3c02d5
commit 71fb46e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/src-docs/src/views/form_controls/prepend_append.js b/src-docs/src/views/form_controls/prepend_append.js
@@ -18,6 +18,7 @@ import {
   OuiIcon,
   OuiIconTip,
   OuiPopover,
+  OuiSelect,
   OuiSpacer,
   OuiSwitch,
   OuiText,
@@ -190,6 +191,58 @@ export default () => {
         readOnly={isReadOnly}
         aria-label="Use aria labels when no actual label is in use"
       />
+      <OuiSpacer />
+      <OuiFieldText
+        placeholder="Text field with select"
+        prepend={
+          <OuiFieldText
+            placeholder="..."
+            compressed={isCompressed}
+            disabled={isDisabled}
+            readOnly={isReadOnly}
+            aria-label="Use aria labels when no actual label is in use"
+          />
+        }
+        append={
+          <OuiSelect
+            compressed={isCompressed}
+            disabled={isDisabled}
+            readOnly={isReadOnly}
+            value="hours"
+            options={[
+              { value: 'hours', text: 'hours' },
+              { value: 'days', text: 'days' },
+              { value: 'weeks', text: 'weeks' },
+            ]}
+          />
+        }
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+      <OuiSpacer />
+      <OuiSelect
+        prepend="String"
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        value="hours"
+        options={[
+          { value: 'hours', text: 'hours' },
+          { value: 'days', text: 'days' },
+          { value: 'weeks', text: 'weeks' },
+        ]}
+        append={
+          <OuiFieldText
+            placeholder="Select with text field"
+            compressed={isCompressed}
+            disabled={isDisabled}
+            readOnly={isReadOnly}
+            aria-label="Use aria labels when no actual label is in use"
+          />
+        }
+      />
     </Fragment>
   );
 };
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -32,6 +32,7 @@
 
   // Force the stretch of any children so they expand the full height of the control
   > *,
+  > .ouiFormControlLayout > *,
   .ouiPopover__anchor,
   .ouiButtonEmpty,
   .ouiText,
@@ -78,6 +79,31 @@
     }
   }
 
+  /* Hide the box-shadow and grouping border combining */
+  .ouiFieldText,
+  .ouiFieldNumber,
+  .ouiFieldSearch,
+  .ouiFieldPassword,
+  .ouiSelect {
+    &.ouiFormControlLayout__prepend,
+    &.ouiFormControlLayout__append {
+      height: calc(100% + 2px);
+      margin: -1px -1px 0 1px;
+
+      &:focus {
+        background-position: 1px -1px;
+      }
+    }
+
+    &.ouiFormControlLayout__prepend {
+      margin: -1px 1px 0 -1px;
+
+      &:focus {
+        background-position: -1px -1px;
+      }
+    }
+  }
+
   .ouiButtonIcon {
     padding: 0 $ouiSizeS;
     width: $ouiSizeXL;