Added typescript types to fluid search and its skeleton state (#17383)

* fix: rename js files to tsx * fix: added typescript types to FluidSearch --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Gururaj J <[email protected]>
carbon-design-system · Sep 11, 2024 · 9070215 · 9070215
1 parent 3e92444
commit 9070215
Show file tree

Hide file tree

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

diff --git a/...src/components/FluidSearch/FluidSearch.js → ...rc/components/FluidSearch/FluidSearch.tsx b/...src/components/FluidSearch/FluidSearch.js → ...rc/components/FluidSearch/FluidSearch.tsx
@@ -12,10 +12,72 @@ import Search from '../Search';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-const FluidSearch = React.forwardRef(function FluidSearch(
-  { className, ...other },
-  ref
-) {
+export interface FluidSearchProps {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: 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;
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?: () => void;
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+const FluidSearch: React.FC<FluidSearchProps> = React.forwardRef<
+  HTMLInputElement,
+  FluidSearchProps
+>(function FluidSearch({ className, ...other }, ref) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--search--fluid`, className);
 

diff --git a/...react/src/components/FluidSearch/index.js → ...eact/src/components/FluidSearch/index.tsx b/...react/src/components/FluidSearch/index.js → ...eact/src/components/FluidSearch/index.tsx
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { FluidSearchProps } from './FluidSearch';
+import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
-
+export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';