InputControl: added password visibility story (#60898)

* Added story * Misc. UX and a11y improvements * Add changelog * Address review comments. * Reposition changelog --------- Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Apr 23, 2024 · c627fac · c627fac
1 parent 425c5c0
commit c627fac
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   `InputControl`: Add a password visibility toggle story ([#60898](https://github.com/WordPress/gutenberg/pull/60898)).
 -   `BoxControl`: Allow negative values for margin controls ([#60347](https://github.com/WordPress/gutenberg/pull/60347)).
 
 ### Bug Fix

diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx
@@ -2,13 +2,18 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
-
+/**
+ * WordPress dependencies
+ */
+import { seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
+import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
@@ -82,3 +87,28 @@ WithEdgeLabel.args = {
 	__unstableInputWidth: '20em',
 	labelPosition: 'edge',
 };
+
+export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
+	const [ visible, setVisible ] = useState( false );
+	return (
+		<InputControl
+			type={ visible ? 'text' : 'password' }
+			label="Password"
+			suffix={
+				<InputControlSuffixWrapper>
+					<div style={ { display: 'flex' } }>
+						<Button
+							size="small"
+							icon={ visible ? unseen : seen }
+							onClick={ () => setVisible( ( value ) => ! value ) }
+							label={
+								visible ? 'Hide password' : 'Show password'
+							}
+						/>
+					</div>
+				</InputControlSuffixWrapper>
+			}
+			{ ...args }
+		/>
+	);
+};