Add endSlot support to PasswordField

Doist · Oct 4, 2024 · ba787c8 · ba787c8
1 parent c86dc97
commit ba787c8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/password-field/password-field.stories.mdx b/src/password-field/password-field.stories.mdx
@@ -22,7 +22,20 @@ export function preventDefault(event) {
     event.preventDefault()
 }
 
-export function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
+export function AlertIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Zm1-5.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027Z"
+                fill="#DC4C3E"
+            />
+        </svg>
+    )
+}
+
+export function InteractivePropsStory({ label, auxiliaryLabel, endSlot = false, ...props }) {
     return (
         <PasswordField
             {...props}
@@ -34,6 +47,7 @@ export function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
                     </a>
                 ) : undefined
             }
+            endSlot={endSlot ? <AlertIcon /> : undefined}
         />
     )
 }
@@ -76,6 +90,10 @@ export function InteractivePropsStory({ label, auxiliaryLabel, ...props }) {
                 control: { type: 'text' },
                 defaultValue: '',
             },
+            endSlot: {
+                control: { type: 'boolean' },
+                defaultValue: false,
+            },
             placeholder: {
                 control: { type: 'text' },
                 defaultValue: 'Type your password',

diff --git a/src/password-field/password-field.tsx b/src/password-field/password-field.tsx
@@ -12,10 +12,11 @@ interface PasswordFieldProps
     extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,
         BaseFieldVariantProps {
     togglePasswordLabel?: string
+    endSlot?: React.ReactElement | string | number
 }
 
 const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(
-    { togglePasswordLabel = 'Toggle password visibility', ...props },
+    { togglePasswordLabel = 'Toggle password visibility', endSlot, ...props },
     ref,
 ) {
     const [isPasswordVisible, setPasswordVisible] = React.useState(false)
@@ -27,12 +28,15 @@ const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(fun
             // @ts-expect-error TextField does not support type="password", so we override the type check here
             type={isPasswordVisible ? 'text' : 'password'}
             endSlot={
-                <IconButton
-                    variant="quaternary"
-                    icon={<Icon aria-hidden />}
-                    aria-label={togglePasswordLabel}
-                    onClick={() => setPasswordVisible((v) => !v)}
-                />
+                <>
+                    {endSlot}
+                    <IconButton
+                        variant="quaternary"
+                        icon={<Icon aria-hidden />}
+                        aria-label={togglePasswordLabel}
+                        onClick={() => setPasswordVisible((v) => !v)}
+                    />
+                </>
             }
         />
     )