emotion + refactor: DropdownArrow

coder · aslilac · Oct 5, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
commit 20b1b7396a79015facf9cddde56b9ccac79ce8c8
@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
 import * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { BorderedMenu } from "./BorderedMenu";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
 import { BUTTON_SM_HEIGHT } from "theme/theme";
@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
               avatarURL={user.avatar_url}
             />
           </Badge>
-          {anchorEl ? (
-            <CloseDropdown color={colors.gray[6]} />
-          ) : (
-            <OpenDropdown color={colors.gray[6]} />
-          )}
+          <DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
         </div>
       </MenuItem>
 

@@ -0,0 +1,28 @@
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { type FC } from "react";
+import { type Theme } from "@emotion/react";
+
+interface ArrowProps {
+  margin?: boolean;
+  color?: string;
+  close?: boolean;
+}
+
+export const DropdownArrow: FC<ArrowProps> = (props) => {
+  const { margin = true, color, close } = props;
+
+  const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
+
+  return (
+    <Arrow
+      aria-label={close ? "close-dropdown" : "open-dropdown"}
+      css={(theme: Theme) => ({
+        color: color ?? theme.palette.primary.contrastText,
+        marginLeft: margin ? theme.spacing(1) : 0,
+        width: 16,
+        height: 16,
+      })}
+    />
+  );
+};
@@ -1,11 +1,8 @@
+import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
 import makeStyles from "@mui/styles/makeStyles";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
-import { PropsWithChildren, FC } from "react";
-import Collapse from "@mui/material/Collapse";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { type FC, type PropsWithChildren } from "react";
 import { combineClasses } from "utils/combineClasses";
 
 export interface ExpanderProps {
@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         <Link onClick={toggleExpanded} className={styles.expandLink}>
           <span className={styles.text}>
             Click here to learn more
-            <OpenDropdown margin={false} />
+            <DropdownArrow margin={false} />
           </span>
         </Link>
       )}
@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         >
           <span className={styles.text}>
             Click here to hide
-            <CloseDropdown margin={false} />
+            <DropdownArrow margin={false} close />
           </span>
         </Link>
       )}

@@ -2,7 +2,7 @@ import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { OpenDropdown } from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { useRef, FC, useState } from "react";
 import Picker from "@emoji-mart/react";
 import { makeStyles } from "@mui/styles";
@@ -52,7 +52,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        endIcon={<OpenDropdown />}
+        endIcon={<DropdownArrow />}
         onClick={() => {
           setIsEmojiPickerOpen((v) => !v);
         }}

@@ -9,10 +9,7 @@ import {
   WorkspaceAgentLogSource,
   WorkspaceAgentMetadata,
 } from "api/typesGenerated";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { VSCodeDesktopButton } from "components/Resources/VSCodeDesktopButton/VSCodeDesktopButton";
 import {
@@ -443,7 +440,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                   setShowLogs((v) => !v);
                 }}
               >
-                <CloseDropdown />
+                <DropdownArrow close />
                 Hide logs
               </button>
             ) : (
@@ -456,7 +453,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                   setShowLogs((v) => !v);
                 }}
               >
-                <OpenDropdown />
+                <DropdownArrow />
                 Show logs
               </button>
             )}

@@ -4,10 +4,7 @@ import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
-import {
-  OpenDropdown,
-  CloseDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
@@ -95,11 +92,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
               }}
               size="large"
             >
-              {shouldDisplayAllMetadata ? (
-                <CloseDropdown margin={false} />
-              ) : (
-                <OpenDropdown margin={false} />
-              )}
+              <DropdownArrow margin={false} close={shouldDisplayAllMetadata} />
             </IconButton>
           </Tooltip>
         )}

@@ -1,9 +1,6 @@
 import Button from "@mui/material/Button";
 import { makeStyles } from "@mui/styles";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { FC, useState } from "react";
 import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
@@ -49,15 +46,8 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
             size="small"
             onClick={() => setShouldDisplayHideResources((v) => !v)}
           >
-            {shouldDisplayHideResources ? (
-              <>
-                Hide resources <CloseDropdown />
-              </>
-            ) : (
-              <>
-                Show hidden resources <OpenDropdown />
-              </>
-            )}
+            {shouldDisplayHideResources ? "Hide" : "Show hidden"} resources
+            <DropdownArrow close={shouldDisplayHideResources} />
           </Button>
         </div>
       )}

@@ -2,10 +2,7 @@ import Collapse from "@mui/material/Collapse";
 import { makeStyles } from "@mui/styles";
 import TableCell from "@mui/material/TableCell";
 import { AuditLog } from "api/typesGenerated";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Pill, type PillType } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
@@ -154,7 +151,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
           </Stack>
 
           {shouldDisplayDiff ? (
-            <div> {isDiffOpen ? <CloseDropdown /> : <OpenDropdown />}</div>
+            <div> {<DropdownArrow close={isDiffOpen} />}</div>
           ) : (
             <div className={styles.columnWithoutDiff}></div>
           )}