{icon && (
{icon}
)}
-
-
+ setIsVisible(v => !v)}
- icon={}
- />
+ className={passwordFieldClassNames.inputVisibility}
+ >
+ {isVisible ? : }
+
(
}
}, [label, ariaLabel, ariaLabelledBy]);
- useEffect(() => {
- const inputType = (props as { type?: string }).type;
- if (inputType === 'search') {
- console.warn(
- 'TextField type="search" is deprecated. Use SearchField instead.',
- );
- }
- if (inputType === 'password') {
- console.warn(
- 'TextField type="password" is deprecated. Use PasswordField instead.',
- );
- }
- }, [props]);
-
const { classNames, dataAttributes } = useStyles('TextField', {
size,
});
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
index 0c34634e2d..b971ef8d26 100644
--- a/packages/ui/src/components/TextField/types.ts
+++ b/packages/ui/src/components/TextField/types.ts
@@ -27,18 +27,10 @@ export interface TextFieldProps
* The HTML input type for the text field
*
* @remarks
- * The values 'search' and 'password' are deprecated. Use `SearchField` for
+ * Use `SearchField` for
* search inputs and `PasswordField` for password inputs.
*/
- type?:
- | 'text'
- | 'email'
- | 'tel'
- | 'url'
- /** @deprecated Use `SearchField` instead */
- | 'search'
- /** @deprecated Use `PasswordField` instead */
- | 'password';
+ type?: 'text' | 'email' | 'tel' | 'url';
/**
* An icon to render before the input
*/
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
index f67ee781dc..ff91831cc4 100644
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ b/packages/ui/src/utils/componentDefinitions.ts
@@ -296,10 +296,7 @@ export const componentDefinitions = {
PasswordField: {
classNames: {
root: 'bui-PasswordField',
- inputWrapper: 'bui-InputWrapper',
- input: 'bui-Input',
- inputIcon: 'bui-InputIcon',
- inputAction: 'bui-InputAction',
+ inputVisibility: 'bui-InputVisibility',
},
dataAttributes: {
invalid: [true, false] as const,