From 18e9bc17f93cb050e69b1c15ada1a42eab1e4b30 Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Thu, 29 Jun 2023 16:45:17 -0400 Subject: [PATCH] fix: updated InputSearch sub component types --- ui/input-search/src/InputSearchInput.tsx | 11 ++--------- ui/input-search/src/InputSearchList.tsx | 16 +++++----------- ui/input-search/src/InputSearchListItem.tsx | 17 +++++------------ ui/input-search/src/InputSearchPopover.tsx | 12 +++--------- ui/input-search/src/InputSearchRoot.tsx | 18 +++++------------- ui/input-search/src/play.stories.tsx | 1 + 6 files changed, 21 insertions(+), 54 deletions(-) diff --git a/ui/input-search/src/InputSearchInput.tsx b/ui/input-search/src/InputSearchInput.tsx index bfa9574c5..886a41736 100644 --- 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; 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 & + Omit, "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 index fcfc29695..e7ac2e79f 100644 --- 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 index 4d7b8c160..a632c0269 100644 --- 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 index f06486692..5cc460bbc 100644 --- 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 index 45243f561..14b27a29e 100644 --- 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; + export const InputSearchRoot = ({ children, css, diff --git a/ui/input-search/src/play.stories.tsx b/ui/input-search/src/play.stories.tsx index 2c58a71c0..1ca0b8953 100644 --- 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, },