Add rightAccessory to TextField. Also fixes #424

Author: gabro

packages/bento-design-system/src/TextField/TextField.tsx

@@ -1,20 +1,22 @@
 import { useTextField } from "@react-aria/textfield";
 import { useRef, useState } from "react";
-import { Box, IconButton, Field } from "..";
+import { Box, IconButton, Field, Children, Columns } from "..";
 import { LocalizedString } from "../util/LocalizedString";
 import { inputRecipe } from "../Field/Field.css";
 import { FieldProps } from "../Field/FieldProps";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import useDimensions from "react-cool-dimensions";
 import { defaultMessages } from "../../test/util/defaultMessages";
 import { useBentoConfig } from "../BentoConfigContext";
+import { match } from "ts-pattern";
 
 type Props = FieldProps<string> & {
   placeholder: LocalizedString;
-  type?: "text" | "email" | "url" | "password";
   isReadOnly?: boolean;
-  showPasswordLabel?: LocalizedString;
-  hidePasswordLabel?: LocalizedString;
+  type?: "text" | "email" | "url" | "password";
+  rightAccessory?: Children;
+  showPasswordLabel?: never;
+  hidePasswordLabel?: never;
 };
 
 export function TextField(props: Props) {
@@ -47,6 +49,24 @@ export function TextField(props: Props) {
 
   const type = props.type === "password" && !showPassword ? "password" : "text";
 
+  const rightAccessory = match(props.type ?? "text")
+    .with("password", () => (
+      // if we have both a rightAccessory and type='password', display the accessory on the left of the password toggle field
+      <Columns space={config.paddingX} alignY="center">
+        <IconButton
+          size={config.passwordIconSize}
+          icon={passwordIcon}
+          onPress={() => setShowPassword((prevValue) => !prevValue)}
+          kind="transparent"
+          hierarchy="secondary"
+          label={passwordIconLabel}
+        />
+        {props.rightAccessory}
+      </Columns>
+    ))
+    .with("email", "text", "url", () => props.rightAccessory)
+    .exhaustive();
+
   return (
     <Field
       {...props}
@@ -75,28 +95,21 @@ export function TextField(props: Props) {
               size: config.fontSize,
             }),
           ]}
-          style={{ paddingRight: rightAccessoryWidth, flexGrow: 1 }}
+          style={{ paddingRight: rightAccessory ? rightAccessoryWidth : undefined, flexGrow: 1 }}
         />
-        {props.type === "password" && (
+        {rightAccessory && (
           <Box
             ref={rightAccessoryRef}
             position="absolute"
             display="flex"
             justifyContent="center"
             alignItems="center"
-            paddingX={16}
+            paddingX={config.paddingX}
             top={0}
             bottom={0}
             right={0}
           >
-            <IconButton
-              size={config.passwordIconSize}
-              icon={passwordIcon}
-              onPress={() => setShowPassword((prevValue) => !prevValue)}
-              kind="transparent"
-              hierarchy="secondary"
-              label={passwordIconLabel}
-            />
+            {rightAccessory}
           </Box>
         )}
       </Box>

packages/storybook/stories/Components/ReadonlyField.stories.tsx

@@ -19,3 +19,5 @@ export default defaultExport;
 export const Default = createStory({});
 
 export const Password = createStory({ type: "password" });
+
+export const RightAccessory = createStory({ rightAccessory: "👍" });

packages/storybook/stories/Components/TextField.stories.tsx

@@ -31,3 +31,8 @@ export const ReadOnly = createStory({
   value: "MyNickname",
   isReadOnly: true,
 });
+
+export const CustomAccessory = createStory({
+  value: "With a custom accessory",
+  rightAccessory: "👍",
+});