From 2a1cc0f98d518c702f6989072fed1db804f98a30 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:26:11 +0530 Subject: [PATCH] Add typescript types to fluidTextInput, FluidPasswordInput, FluidTextInputSkeleton (#17368) * fix: renamed .js files * fix: fluidTextInput skeleton and fluidPasswordInput to .tsx --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones --- ...asswordInput.js => FluidPasswordInput.tsx} | 98 ++++++++++++++++++- ...keleton.js => FluidTextInput.Skeleton.tsx} | 14 ++- .../{FluidTextInput.js => FluidTextInput.tsx} | 82 +++++++++++++++- .../FluidTextInput/{index.js => index.tsx} | 13 ++- 4 files changed, 197 insertions(+), 10 deletions(-) rename packages/react/src/components/FluidTextInput/{FluidPasswordInput.js => FluidPasswordInput.tsx} (57%) rename packages/react/src/components/FluidTextInput/{FluidTextInput.Skeleton.js => FluidTextInput.Skeleton.tsx} (79%) rename packages/react/src/components/FluidTextInput/{FluidTextInput.js => FluidTextInput.tsx} (60%) rename packages/react/src/components/FluidTextInput/{index.js => index.tsx} (51%) diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.js b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx similarity index 57% rename from packages/react/src/components/FluidTextInput/FluidPasswordInput.js rename to packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx index 8b54460d3687..688cf5bdc8be 100644 --- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.js +++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx @@ -12,7 +12,101 @@ import { PasswordInput } from '../PasswordInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidPasswordInput({ className, ...other }) { +export interface FluidPasswordInputProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + + /** + * Specify whether the `` should be disabled + */ + disabled?: boolean; + + /** + * "Hide password" tooltip text on password visibility toggle + */ + hidePasswordLabel?: string; + + /** + * Specify a custom `id` for the `` + */ + id: string; + + /** + * Specify whether the control is currently invalid + */ + invalid?: boolean; + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText?: React.ReactNode; + + /** + * Specify whether the control is a password input + */ + isPassword?: boolean; + + /** + * Provide the text that will be read by a screen reader when visiting this + * control + */ + labelText: React.ReactNode; + + /** + * Optionally provide an `onChange` handler that is called whenever `` + * is updated + */ + onChange?: React.ChangeEventHandler; + + /** + * Optionally provide an `onClick` handler that is called whenever the + * `` is clicked + */ + onClick?: React.MouseEventHandler; + + /** + * Callback function that is called whenever the toggle password visibility + * button is clicked + */ + onTogglePasswordVisibility?: React.MouseEventHandler; + + /** + * Specify the placeholder attribute for the `` + */ + placeholder?: string; + + /** + * "Show password" tooltip text on password visibility toggle + */ + showPasswordLabel?: string; + + /** + * Specify the value of the `` + */ + value?: string | number; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidPasswordInput: React.FC = ({ + className, + ...other +}) => { const prefix = usePrefix(); const classNames = classnames(className, `${prefix}--text-input--fluid`); @@ -21,7 +115,7 @@ function FluidPasswordInput({ className, ...other }) { ); -} +}; FluidPasswordInput.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js b/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js rename to packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx index 38e7e42c944a..a81c1767fa73 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx @@ -11,7 +11,17 @@ import classnames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidTextInputSkeleton({ className, ...other }) { +export interface FluidTextInputSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; +} + +const FluidTextInputSkeleton: React.FC = ({ + className, + ...other +}) => { const prefix = usePrefix(); return ( @@ -27,7 +37,7 @@ function FluidTextInputSkeleton({ className, ...other }) { ); -} +}; FluidTextInputSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.js b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx similarity index 60% rename from packages/react/src/components/FluidTextInput/FluidTextInput.js rename to packages/react/src/components/FluidTextInput/FluidTextInput.tsx index a94dc34fd1cb..3cc5c7ec30bb 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx @@ -13,7 +13,85 @@ import { PasswordInput } from '../PasswordInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidTextInput({ className, isPassword, ...other }) { +export interface FluidTextInputProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + + /** + * Specify whether the `` should be disabled + */ + disabled?: boolean; + + /** + * Specify a custom `id` for the `` + */ + id: string; + + /** + * Specify whether the control is currently invalid + */ + invalid?: boolean; + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText?: React.ReactNode; + + /** + * Specify whether the control is a password input + */ + isPassword?: boolean; + + /** + * Provide the text that will be read by a screen reader when visiting this + * control + */ + labelText: React.ReactNode; + + /** + * Optionally provide an `onChange` handler that is called whenever `` + * is updated + */ + onChange?: (event: React.ChangeEvent) => void; + /** + * Optionally provide an `onClick` handler that is called whenever the + * `` is clicked + */ + onClick?: (event: React.MouseEvent) => void; + + /** + * Specify the placeholder attribute for the `` + */ + placeholder?: string; + + /** + * Specify the value of the `` + */ + value?: string | number; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidTextInput: React.FC = ({ + className, + isPassword, + ...other +}) => { const prefix = usePrefix(); const classNames = classnames(className, { [`${prefix}--text-input--fluid`]: !isPassword, @@ -28,7 +106,7 @@ function FluidTextInput({ className, isPassword, ...other }) { )} ); -} +}; FluidTextInput.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/index.js b/packages/react/src/components/FluidTextInput/index.tsx similarity index 51% rename from packages/react/src/components/FluidTextInput/index.js rename to packages/react/src/components/FluidTextInput/index.tsx index 6210b0d1d18f..60b5b758c057 100644 --- a/packages/react/src/components/FluidTextInput/index.js +++ b/packages/react/src/components/FluidTextInput/index.tsx @@ -7,9 +7,14 @@ import FluidTextInput from './FluidTextInput'; import FluidPasswordInput from './FluidPasswordInput'; - +import { type FluidTextInputSkeletonProps } from './FluidTextInput.Skeleton'; +import { type FluidPasswordInputProps } from './FluidPasswordInput'; +import { type FluidTextInputProps } from './FluidTextInput'; export default FluidTextInput; -export { FluidTextInput }; -export { FluidPasswordInput }; - +export { + FluidTextInput, + type FluidTextInputProps, + type FluidTextInputSkeletonProps, +}; +export { FluidPasswordInput, type FluidPasswordInputProps }; export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton';