fix: updated InputSearch sub component types

washingtonpost · Jun 30, 2023 · 18e9bc1 · 18e9bc1 · vercel · Jun 30, 2023
1 parent 361e1d8
commit 18e9bc1
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 54 deletions.
diff --git a/ui/input-search/src/InputSearchInput.tsx b/ui/input-search/src/InputSearchInput.tsx
@@ -11,21 +11,14 @@ import { InputSearchContext } from "./InputSearchRoot";
 type InputSearchLabelVariants = WPDS.VariantProps<typeof InputLabel>;
 
 export type InputSearchInputProps = InputSearchLabelVariants & {
-  /** Any React node may be used as a child to allow for formatting */
-  children?: React.ReactNode;
   /** Override CSS */
   css?: WPDS.CSS;
   /**The input's label text, required for accessibility
    * @default Search
    */
   label?: string;
-  /** The id for the underlying input element. Required for accessibility */
-  id: string;
-  /** The name for the underlying input element */
-  name: string;
-  disabled?: boolean;
-  onChange?: (event) => void;
-};
+} & React.ComponentPropsWithRef<typeof ComboboxInput> &
+  Omit<React.ComponentPropsWithRef<typeof InputText>, "label">;
 
 //TODO: when you press the search button things should search
 

diff --git a/ui/input-search/src/InputSearchList.tsx b/ui/input-search/src/InputSearchList.tsx
@@ -1,16 +1,6 @@
 import * as React from "react";
-
-import { styled } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
-
 import { ComboboxList, useComboboxContext } from "@reach/combobox";
-
-export type InputSearchListProps = {
-  /** Any React node may be used as a child to allow for formatting */
-  children?: React.ReactNode;
-  /** Override CSS */
-  css?: WPDS.CSS;
-};
+import { styled } from "@washingtonpost/wpds-theme";
 
 const StyledList = styled(ComboboxList, {
   marginBlock: 0,
@@ -19,6 +9,10 @@ const StyledList = styled(ComboboxList, {
   listStyleType: "none",
 });
 
+export type InputSearchListProps = React.ComponentPropsWithRef<
+  typeof StyledList
+>;
+
 export const InputSearchList = ({
   children,
   css,

diff --git a/ui/input-search/src/InputSearchListItem.tsx b/ui/input-search/src/InputSearchListItem.tsx
@@ -1,17 +1,6 @@
 import * as React from "react";
-
-import type * as WPDS from "@washingtonpost/wpds-theme";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-
 import { ComboboxOption } from "@reach/combobox";
-
-export type InputSearchListItemProps = {
-  /** Any React node may be used as a child to allow for formatting */
-  children?: React.ReactNode;
-  /** Override CSS */
-  css?: WPDS.CSS;
-  value: string;
-};
+import { styled, theme } from "@washingtonpost/wpds-theme";
 
 const StyledListItem = styled(ComboboxOption, {
   color: theme.colors.primary,
@@ -30,6 +19,10 @@ const StyledListItem = styled(ComboboxOption, {
   },
 });
 
+export type InputSearchListItemProps = React.ComponentPropsWithRef<
+  typeof StyledListItem
+>;
+
 export const InputSearchListItem = ({
   children,
   value,

diff --git a/ui/input-search/src/InputSearchPopover.tsx b/ui/input-search/src/InputSearchPopover.tsx
@@ -3,8 +3,6 @@ import { ComboboxPopover } from "@reach/combobox";
 import { styled, theme } from "@washingtonpost/wpds-theme";
 import { InputSearchContext } from "./InputSearchRoot";
 
-import type * as WPDS from "@washingtonpost/wpds-theme";
-
 const StyledPopover = styled(ComboboxPopover, {
   backgroundColor: theme.colors.secondary,
   maxHeight: "300px",
@@ -20,13 +18,9 @@ const StyledPopover = styled(ComboboxPopover, {
   },
 });
 
-export type InputSearchPopoverProps = {
-  /** Any React node may be used as a child to allow for formatting */
-  children?: React.ReactNode;
-  portal?: boolean;
-  /** Override CSS */
-  css?: WPDS.CSS;
-};
+export type InputSearchPopoverProps = React.ComponentPropsWithRef<
+  typeof StyledPopover
+>;
 
 export const InputSearchPopover = ({
   children,

diff --git a/ui/input-search/src/InputSearchRoot.tsx b/ui/input-search/src/InputSearchRoot.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 import { Combobox } from "@reach/combobox";
 import { styled, theme } from "@washingtonpost/wpds-theme";
 
-import type * as WPDS from "@washingtonpost/wpds-theme";
-
 type InputSearchContextProps = {
   term: string;
   setTerm: (string: string) => void;
@@ -17,17 +15,6 @@ export const InputSearchContext = React.createContext(
   {} as InputSearchContextProps
 );
 
-export type InputSearchRootProps = {
-  /** Any React node may be used as a child to allow for formatting */
-  children?: React.ReactNode;
-  "aria-label": string;
-  /** Override CSS */
-  css?: WPDS.CSS;
-  /** Whether the input field should be disabled or not */
-  disabled?: boolean;
-  openOnFocus?: boolean;
-};
-
 const StyledComboBox = styled(Combobox, {
   width: "100%",
   position: "relative",
@@ -48,6 +35,11 @@ const StyledComboBox = styled(Combobox, {
   },
 });
 
+export type InputSearchRootProps = {
+  /** Whether the input field should be disabled or not */
+  disabled?: boolean;
+} & React.ComponentPropsWithRef<typeof StyledComboBox>;
+
 export const InputSearchRoot = ({
   children,
   css,

diff --git a/ui/input-search/src/play.stories.tsx b/ui/input-search/src/play.stories.tsx
@@ -14,6 +14,7 @@ export default {
     Popover: InputSearch.Popover,
     List: InputSearch.List,
     ListItem: InputSearch.ListItem,
+    ListHeading: InputSearch.ListHeading,
     EmptyState: InputSearch.EmptyState,
     LoadingState: InputSearch.LoadingState,
   },