Add typescript types to fluid number input (#17373)

* fix: rename js files to tsx files * fix: added typescript types to fluid numberinput and skeleton --------- Co-authored-by: Gururaj J <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Sep 12, 2024 · c49b590 · c49b590
1 parent 9ee209b
commit c49b590
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 8 deletions.
diff --git a/...dNumberInput/FluidNumberInput.Skeleton.js → ...NumberInput/FluidNumberInput.Skeleton.tsx b/...dNumberInput/FluidNumberInput.Skeleton.js → ...NumberInput/FluidNumberInput.Skeleton.tsx
@@ -11,9 +11,18 @@ import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-function FluidNumberInputSkeleton({ className, ...other }) {
-  const prefix = usePrefix();
+export interface FluidNumberInputSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+}
 
+const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps> = ({
+  className,
+  ...other
+}) => {
+  const prefix = usePrefix();
   return (
     <FormContext.Provider value={{ isFluid: true }}>
       <div
@@ -27,7 +36,7 @@ function FluidNumberInputSkeleton({ className, ...other }) {
       </div>
     </FormContext.Provider>
   );
-}
+};
 
 FluidNumberInputSkeleton.propTypes = {
   /**

diff --git a/...ents/FluidNumberInput/FluidNumberInput.js → ...nts/FluidNumberInput/FluidNumberInput.tsx b/...ents/FluidNumberInput/FluidNumberInput.js → ...nts/FluidNumberInput/FluidNumberInput.tsx
@@ -12,10 +12,115 @@ import { NumberInput } from '../NumberInput';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-const FluidNumberInput = React.forwardRef(function FluidNumberInput(
-  { className, ...other },
-  ref
-) {
+export interface FluidNumberInputProps {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty?: boolean;
+
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className?: string;
+
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue?: number | string;
+
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel?: boolean;
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: string;
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label?: React.ReactNode;
+
+  /**
+   * The maximum value.
+   */
+  max?: number;
+
+  /**
+   * The minimum value.
+   */
+  min?: number;
+
+  onChange?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    state: { value: number | string; direction: string }
+  ) => void;
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick?: (
+    event: React.MouseEvent<HTMLElement>,
+    state?: { value: number | string; direction: string }
+  ) => void;
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step?: number;
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId?: (id: string) => string;
+
+  /**
+   * Specify the value of the input
+   */
+  value?: number | string;
+
+  /**
+   * 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 FluidNumberInput: React.FC<FluidNumberInputProps> = React.forwardRef<
+  HTMLInputElement,
+  FluidNumberInputProps
+>(function FluidNumberInput({ className, ...other }, ref) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--number-input--fluid`, className);
 

diff --git a/.../src/components/FluidNumberInput/index.js → ...src/components/FluidNumberInput/index.tsx b/.../src/components/FluidNumberInput/index.js → ...src/components/FluidNumberInput/index.tsx
@@ -4,7 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+import { FluidNumberInputProps } from './FluidNumberInput';
+import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';