chore(site): add InputGroup component (#13597)

BrunoQuaresma · web-flow · commit 73a25c3bc592 · 2024-06-21T10:54:55.000-03:00
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -22,6 +22,7 @@ import {
   hasError,
   isApiValidationError,
 } from "api/errors";
+import { InputGroup } from "components/InputGroup/InputGroup";
 import { Loader } from "components/Loader/Loader";
 import {
   Search,
@@ -212,7 +213,7 @@ export const Filter: FC<FilterProps> = ({
         skeleton
       ) : (
         <>
-          <div css={{ display: "flex", width: "100%" }}>
+          <InputGroup css={{ width: "100%" }}>
             <PresetMenu
               onSelect={(query) => filter.update(query)}
               presets={presets}
@@ -221,7 +222,7 @@ export const Filter: FC<FilterProps> = ({
               learnMoreLink2={learnMoreLink2}
             />
             <SearchField
-              fullWidth
+              css={{ flex: 1 }}
               error={shouldDisplayError}
               helperText={
                 shouldDisplayError
@@ -242,21 +243,9 @@ export const Filter: FC<FilterProps> = ({
                     setQueryCopy(filter.query);
                   }
                 },
-                sx: {
-                  borderRadius: "6px",
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0,
-                  marginLeft: "-1px",
-                  "&:hover": {
-                    zIndex: 2,
-                  },
-                  "&.Mui-error": {
-                    zIndex: 3,
-                  },
-                },
               }}
             />
-          </div>
+          </InputGroup>
           {options}
         </>
       )}
@@ -288,12 +277,6 @@ const PresetMenu: FC<PresetMenuProps> = ({
       <Button
         onClick={() => setIsOpen(true)}
         ref={anchorRef}
-        css={{
-          borderTopRightRadius: 0,
-          borderBottomRightRadius: 0,
-          flexShrink: 0,
-          zIndex: 1,
-        }}
         endIcon={<KeyboardArrowDown />}
       >
         Filters
diff --git a/site/src/components/InputGroup/InputGroup.stories.tsx b/site/src/components/InputGroup/InputGroup.stories.tsx
@@ -0,0 +1,79 @@
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputGroup } from "./InputGroup";
+
+const meta: Meta<typeof InputGroup> = {
+  title: "components/InputGroup",
+  component: InputGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Menu</Button>
+        <TextField size="small" placeholder="Search..." />
+      </>
+    ),
+  },
+};
+
+export const FocusedTextField: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Menu</Button>
+        <TextField autoFocus size="small" placeholder="Search..." />
+      </>
+    ),
+  },
+};
+
+export const ErroredTextField: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Menu</Button>
+        <TextField
+          error
+          size="small"
+          placeholder="Search..."
+          helperText="Some error message..."
+        />
+      </>
+    ),
+  },
+};
+
+export const FocusedErroredTextField: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Menu</Button>
+        <TextField
+          autoFocus
+          error
+          size="small"
+          placeholder="Search..."
+          helperText="Some error message..."
+        />
+      </>
+    ),
+  },
+};
+
+export const WithThreeElements: Story = {
+  args: {
+    children: (
+      <>
+        <Button>Menu</Button>
+        <TextField size="small" placeholder="Search..." />
+        <Button>Submit</Button>
+      </>
+    ),
+  },
+};
diff --git a/site/src/components/InputGroup/InputGroup.tsx b/site/src/components/InputGroup/InputGroup.tsx
@@ -0,0 +1,58 @@
+import type { FC, HTMLProps } from "react";
+
+export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
+  return (
+    <div
+      {...props}
+      css={{
+        display: "flex",
+        alignItems: "flex-start",
+
+        // Overlap borders to avoid displaying double borders between elements.
+        "& > *:not(:last-child)": {
+          marginRight: -1,
+        },
+
+        // Ensure the border of the hovered element is visible when borders
+        // overlap.
+        "& > *:hover": {
+          zIndex: 1,
+        },
+
+        // Display border elements when focused or in an error state, both of
+        // which take priority over hover.
+        "& .Mui-focused, & .Mui-error": {
+          zIndex: 2,
+        },
+
+        "& > *:first-child": {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+
+          "&.MuiFormControl-root .MuiInputBase-root": {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        },
+
+        "& > *:last-child": {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+
+          "&.MuiFormControl-root .MuiInputBase-root": {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          },
+        },
+
+        "& > *:not(:first-child):not(:last-child)": {
+          borderRadius: 0,
+
+          "&.MuiFormControl-root .MuiInputBase-root": {
+            borderRadius: 0,
+          },
+        },
+      }}
+    />
+  );
+};
