Add typescript types to fluidTextInput, FluidPasswordInput, FluidText…

…InputSkeleton (#17368) * fix: renamed .js files * fix: fluidTextInput skeleton and fluidPasswordInput to .tsx --------- Co-authored-by: Gururaj J <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Sep 12, 2024 · 2a1cc0f · 2a1cc0f
1 parent c49b590
commit 2a1cc0f
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 10 deletions.
diff --git a/...ents/FluidTextInput/FluidPasswordInput.js → ...nts/FluidTextInput/FluidPasswordInput.tsx b/...ents/FluidTextInput/FluidPasswordInput.js → ...nts/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 `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * "Hide password" tooltip text on password visibility toggle
+   */
+  hidePasswordLabel?: string;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  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 `<input>`
+   * is updated
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick?: React.MouseEventHandler<HTMLInputElement>;
+
+  /**
+   * Callback function that is called whenever the toggle password visibility
+   * button is clicked
+   */
+  onTogglePasswordVisibility?: React.MouseEventHandler<HTMLButtonElement>;
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder?: string;
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  showPasswordLabel?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  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<FluidPasswordInputProps> = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = classnames(className, `${prefix}--text-input--fluid`);
 
@@ -21,7 +115,7 @@ function FluidPasswordInput({ className, ...other }) {
       <PasswordInput className={classNames} {...other} />
     </FormContext.Provider>
   );
-}
+};
 
 FluidPasswordInput.propTypes = {
   /**

diff --git a/...FluidTextInput/FluidTextInput.Skeleton.js → ...luidTextInput/FluidTextInput.Skeleton.tsx b/...FluidTextInput/FluidTextInput.Skeleton.js → ...luidTextInput/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<FluidTextInputSkeletonProps> = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
 
   return (
@@ -27,7 +37,7 @@ function FluidTextInputSkeleton({ className, ...other }) {
       </div>
     </FormContext.Provider>
   );
-}
+};
 
 FluidTextInputSkeleton.propTypes = {
   /**

diff --git a/...mponents/FluidTextInput/FluidTextInput.js → ...ponents/FluidTextInput/FluidTextInput.tsx b/...mponents/FluidTextInput/FluidTextInput.js → ...ponents/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 `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  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 `<input>`
+   * is updated
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  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<FluidTextInputProps> = ({
+  className,
+  isPassword,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = classnames(className, {
     [`${prefix}--text-input--fluid`]: !isPassword,
@@ -28,7 +106,7 @@ function FluidTextInput({ className, isPassword, ...other }) {
       )}
     </FormContext.Provider>
   );
-}
+};
 
 FluidTextInput.propTypes = {
   /**

diff --git a/...ct/src/components/FluidTextInput/index.js → ...t/src/components/FluidTextInput/index.tsx b/...ct/src/components/FluidTextInput/index.js → ...t/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';