Add typescript types FluidTimePicker and FluidTimePickerSelect (#17445)

* fix: rename fluidTimepicker files to tsx * fix: add typescript types to fluidTimePicker fluidTimepickerselect * fix: updated snapshots * fix: extended interface * fix: uncommented code
carbon-design-system · Sep 23, 2024 · f6b19e1 · f6b19e1
1 parent a9bddc8
commit f6b19e1
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 34 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10770,6 +10770,7 @@ Map {
     },
   },
   "unstable__FluidTextInput" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -10836,6 +10837,7 @@ Map {
         "type": "node",
       },
     },
+    "render": [Function],
   },
   "unstable__FluidTextInputSkeleton" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.tsx b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx
@@ -87,26 +87,24 @@ export interface FluidTextInputProps {
   warnText?: React.ReactNode;
 }
 
-const FluidTextInput: React.FC<FluidTextInputProps> = ({
-  className,
-  isPassword,
-  ...other
-}) => {
-  const prefix = usePrefix();
-  const classNames = classnames(className, {
-    [`${prefix}--text-input--fluid`]: !isPassword,
-  });
-
-  return (
-    <FormContext.Provider value={{ isFluid: true }}>
-      {isPassword ? (
-        <PasswordInput className={classNames} {...other} />
-      ) : (
-        <TextInput className={classNames} {...other} />
-      )}
-    </FormContext.Provider>
-  );
-};
+const FluidTextInput = React.forwardRef<HTMLInputElement, FluidTextInputProps>(
+  function FluidTextInput({ className, isPassword, ...other }, ref) {
+    const prefix = usePrefix();
+    const classNames = classnames(className, {
+      [`${prefix}--text-input--fluid`]: !isPassword,
+    });
+
+    return (
+      <FormContext.Provider value={{ isFluid: true }}>
+        {isPassword ? (
+          <PasswordInput className={classNames} ref={ref} {...other} />
+        ) : (
+          <TextInput className={classNames} ref={ref} {...other} />
+        )}
+      </FormContext.Provider>
+    );
+  }
+);
 
 FluidTextInput.propTypes = {
   /**

diff --git a/...uidTimePicker/FluidTimePicker.Skeleton.js → ...idTimePicker/FluidTimePicker.Skeleton.tsx b/...uidTimePicker/FluidTimePicker.Skeleton.js → ...idTimePicker/FluidTimePicker.Skeleton.tsx
@@ -12,6 +12,17 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FluidTextInputSkeleton } from '../FluidTextInput';
 import { FluidSelectSkeleton } from '../FluidSelect';
 
+export interface FluidTimePickerSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+  /**
+   * Specify if there are only two TimePicker elements
+   */
+  isOnlyTwo?: boolean;
+}
+
 const FluidTimePickerSkeleton = ({ className, isOnlyTwo, ...rest }) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(

diff --git a/...onents/FluidTimePicker/FluidTimePicker.js → ...nents/FluidTimePicker/FluidTimePicker.tsx b/...onents/FluidTimePicker/FluidTimePicker.js → ...nents/FluidTimePicker/FluidTimePicker.tsx
@@ -4,15 +4,60 @@
  * 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 PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import FluidTextInput from '../FluidTextInput';
+import FluidTextInput, { FluidTextInputProps } from '../FluidTextInput';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-const FluidTimePicker = React.forwardRef(function FluidTimePicker(
+export interface FluidTimePickerProps extends FluidTextInputProps {
+  /**
+   * The child node(s)
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specify an optional className to be applied to the outer FluidTimePicker wrapper
+   */
+  className?: string;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * 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 FluidTimePicker = React.forwardRef<
+  HTMLInputElement,
+  FluidTimePickerProps
+>(function FluidTimePicker(
   {
     className,
     children,
@@ -29,7 +74,8 @@ const FluidTimePicker = React.forwardRef(function FluidTimePicker(
 
   const classNames = classnames(className, {
     [`${prefix}--time-picker--fluid`]: true,
-    [`${prefix}--time-picker--equal-width`]: children?.length !== 2,
+    [`${prefix}--time-picker--equal-width`]:
+      React.Children.toArray(children).length !== 2,
     [`${prefix}--time-picker--fluid--disabled`]: disabled,
     [`${prefix}--time-picker--fluid--invalid`]: invalid,
     [`${prefix}--time-picker--fluid--warning`]: warn,
@@ -50,11 +96,13 @@ const FluidTimePicker = React.forwardRef(function FluidTimePicker(
     <div className={classNames}>
       <div className={`${prefix}--time-picker--fluid__wrapper`}>
         <div className={`${prefix}--time-picker__input`}>
-          <FluidTextInput disabled={disabled} ref={ref} {...other} />
+          <FluidTextInput ref={ref} {...other} />
         </div>
         {disabled
           ? React.Children.toArray(children).map((child) => {
-              return React.cloneElement(child, { disabled });
+              return React.cloneElement(child as React.ReactElement, {
+                disabled,
+              });
             })
           : children}
       </div>

diff --git a/...t/src/components/FluidTimePicker/index.js → .../src/components/FluidTimePicker/index.tsx b/...t/src/components/FluidTimePicker/index.js → .../src/components/FluidTimePicker/index.tsx
@@ -6,8 +6,9 @@
  */
 
 import FluidTimePicker from './FluidTimePicker';
-
+import { FluidTimePickerProps } from './FluidTimePicker';
+import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
 export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
+export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
 export default FluidTimePicker;
-
 export { FluidTimePicker };
diff --git a/...TimePickerSelect/FluidTimePickerSelect.js → ...imePickerSelect/FluidTimePickerSelect.tsx b/...TimePickerSelect/FluidTimePickerSelect.js → ...imePickerSelect/FluidTimePickerSelect.tsx
@@ -9,10 +9,49 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FluidSelect from '../FluidSelect';
 
-const FluidTimePickerSelect = React.forwardRef(function FluidTimePickerSelect(
-  { children, className, ...other },
-  ref
-) {
+export interface FluidTimePickerSelectProps {
+  /**
+   * Provide the contents of your Select
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className?: string;
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue?: any;
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: string;
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText?: React.ReactNode;
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+
+const FluidTimePickerSelect = React.forwardRef<
+  HTMLSelectElement,
+  FluidTimePickerSelectProps
+>(function FluidTimePickerSelect({ children, className, ...other }, ref) {
   return (
     <FluidSelect className={className} ref={ref} {...other}>
       {children}

diff --git a/...components/FluidTimePickerSelect/index.js → ...omponents/FluidTimePickerSelect/index.tsx b/...components/FluidTimePickerSelect/index.js → ...omponents/FluidTimePickerSelect/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import FluidTimePickerSelect from './FluidTimePickerSelect';
-
+import { type FluidTimePickerSelectProps } from './FluidTimePickerSelect';
+export { type FluidTimePickerSelectProps };
 export default FluidTimePickerSelect;
 export { FluidTimePickerSelect };