From 168d909c87c2f2aa54ff35f917e0714aa984f454 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 18 Jun 2024 18:34:32 +0000
Subject: [PATCH 1/2] chore(site): add InputGroup component

---
 site/src/components/Filter/filter.tsx         | 25 +-----
 .../InputGroup/InputGroup.stories.tsx         | 79 +++++++++++++++++++
 site/src/components/InputGroup/InputGroup.tsx | 55 +++++++++++++
 3 files changed, 138 insertions(+), 21 deletions(-)
 create mode 100644 site/src/components/InputGroup/InputGroup.stories.tsx
 create mode 100644 site/src/components/InputGroup/InputGroup.tsx

diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
index 91d8d78ee1cf4..29fb34ee4c251 100644
--- 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
new file mode 100644
index 0000000000000..1636e23368abc
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..732479d3bbac4
--- /dev/null
+++ b/site/src/components/InputGroup/InputGroup.tsx
@@ -0,0 +1,55 @@
+import type { FC, HTMLProps } from "react";
+
+export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
+  return (
+    <div
+      {...props}
+      css={{
+        "&": {
+          display: "flex",
+          alignItems: "flex-start",
+        },
+
+        "& > *:hover": {
+          zIndex: 1,
+        },
+
+        "& > *:not(:last-child)": {
+          marginRight: -1,
+        },
+
+        "& > *: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,
+          },
+        },
+
+        "& .Mui-focused, & .Mui-error": {
+          zIndex: 2,
+        },
+      }}
+    />
+  );
+};

From f01f8cf4ef4dccec84abec837146922ad8cc04df Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 21 Jun 2024 13:41:00 +0000
Subject: [PATCH 2/2] Add comments explaing stylings

---
 site/src/components/InputGroup/InputGroup.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/site/src/components/InputGroup/InputGroup.tsx b/site/src/components/InputGroup/InputGroup.tsx
index 732479d3bbac4..d6965442ee96a 100644
--- a/site/src/components/InputGroup/InputGroup.tsx
+++ b/site/src/components/InputGroup/InputGroup.tsx
@@ -5,17 +5,24 @@ export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
     <div
       {...props}
       css={{
-        "&": {
-          display: "flex",
-          alignItems: "flex-start",
+        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,
         },
 
-        "& > *:not(:last-child)": {
-          marginRight: -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": {
@@ -45,10 +52,6 @@ export const InputGroup: FC<HTMLProps<HTMLDivElement>> = (props) => {
             borderRadius: 0,
           },
         },
-
-        "& .Mui-focused, & .Mui-error": {
-          zIndex: 2,
-        },
       }}
     />
   );