From ce72ab5520a24600240e7cde0c8b2628c63dea9e Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Fri, 4 Mar 2022 14:27:34 +0100 Subject: [PATCH 1/5] Export useModalContext --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index 234e59328..bd5b5fb33 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,6 +25,7 @@ export * from "./Layout/createLayoutComponents"; export * from "./Link/createLink"; export * from "./List/createList"; export * from "./Modal/createModal"; +export * from "./Modal/useModalContext"; export * from "./NumberInput/createNumberInput"; export * from "./Placeholder/Placeholder"; export * from "./SearchBar/createSearchBar"; From 0d14886668348435fc75c6c8f6ffdcd8ac7385d1 Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Fri, 4 Mar 2022 14:33:07 +0100 Subject: [PATCH 2/5] Rename size to menuSize and add default --- src/SelectField/components.tsx | 2 +- src/SelectField/createSelectField.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SelectField/components.tsx b/src/SelectField/components.tsx index 0b74e7f03..c7c6813d5 100644 --- a/src/SelectField/components.tsx +++ b/src/SelectField/components.tsx @@ -165,7 +165,7 @@ export function createComponents(inputConfig: InputConfig, dropdownConfig: Dropd props.selectOption(props.data)} trailingIcon={props.isSelected ? IconCheck : undefined} isFocused={props.isFocused} diff --git a/src/SelectField/createSelectField.tsx b/src/SelectField/createSelectField.tsx index 7553281be..c4ed7ec95 100644 --- a/src/SelectField/createSelectField.tsx +++ b/src/SelectField/createSelectField.tsx @@ -39,7 +39,7 @@ export type { Props as SelectFieldProps }; declare module "react-select/dist/declarations/src/Select" { export interface Props> { - size: ListSize; + menuSize?: ListSize; validationState: "valid" | "invalid"; multiValueMessage?: (numberOfSelectedOptions: number) => LocalizedString; } @@ -162,7 +162,7 @@ export function createSelectField( } closeMenuOnSelect={!isMulti} hideSelectedOptions={false} - size={size} + menuSize={size} /> ); From feb22897e24e8b93c7643f3fe7f92b6879bbbe82 Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Fri, 4 Mar 2022 14:34:46 +0100 Subject: [PATCH 3/5] Make ignoreTabIndex optional --- src/List/createListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/List/createListItem.tsx b/src/List/createListItem.tsx index 5f6500eb0..1acebb71d 100644 --- a/src/List/createListItem.tsx +++ b/src/List/createListItem.tsx @@ -47,7 +47,7 @@ export type Props = Kind & disabled?: boolean; size: ListSize; isFocused?: boolean; - ignoreTabIndex: boolean; + ignoreTabIndex?: boolean; } & ( | { onPress?: () => void; From b7bf01e08160394b6ecf81d2c5cc8b13f95430b1 Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Fri, 4 Mar 2022 14:40:23 +0100 Subject: [PATCH 4/5] Export ListItem together with List --- src/List/createInternalList.tsx | 2 +- src/List/{createList.tsx => createListComponents.tsx} | 8 +++++--- src/List/createListItem.tsx | 2 +- src/index.ts | 2 +- stories/index.tsx | 4 ++-- 5 files changed, 10 insertions(+), 8 deletions(-) rename src/List/{createList.tsx => createListComponents.tsx} (90%) diff --git a/src/List/createInternalList.tsx b/src/List/createInternalList.tsx index a83a50532..0e1e3a25c 100644 --- a/src/List/createInternalList.tsx +++ b/src/List/createInternalList.tsx @@ -1,6 +1,6 @@ import { Inset, Stack } from "../internal"; import { Children } from "../"; -import { ListConfig, ListProps } from "./createList"; +import { ListConfig, ListProps } from "./createListComponents"; type Props = Omit & { children: Children; diff --git a/src/List/createList.tsx b/src/List/createListComponents.tsx similarity index 90% rename from src/List/createList.tsx rename to src/List/createListComponents.tsx index 1432dc7c2..0fe2b2f64 100644 --- a/src/List/createList.tsx +++ b/src/List/createListComponents.tsx @@ -16,7 +16,7 @@ export type ListConfig = { item: ListItemConfig; }; -export function createList( +export function createListComponents( config: ListConfig = { paddingY: 8, item: { @@ -41,7 +41,7 @@ export function createList( ) { const InternalList = createInternalList(config); const ListItem = createListItem(config.item); - return function List({ items, ...props }: Props) { + function List({ items, ...props }: Props) { return ( {items.map((liProps) => ( @@ -49,7 +49,9 @@ export function createList( ))} ); - }; + } + + return { List, ListItem }; } export type { Props as ListProps }; diff --git a/src/List/createListItem.tsx b/src/List/createListItem.tsx index 1acebb71d..472152e78 100644 --- a/src/List/createListItem.tsx +++ b/src/List/createListItem.tsx @@ -5,7 +5,7 @@ import { Box, Columns, Column, Inset, Stack, BentoSprinkles } from "../internal" import { IconProps } from "../Icons/IconProps"; import { IllustrationProps } from "../Illustrations/IllustrationProps"; import { listItemRecipe } from "./ListItem.css"; -import { ListSize } from "./createList"; +import { ListSize } from "./createListComponents"; type Kind = | { diff --git a/src/index.ts b/src/index.ts index bd5b5fb33..0bb41f240 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,7 +23,7 @@ export * from "./Illustrations/svgIllustrationProps"; export * from "./InlineLoader/InlineLoader"; export * from "./Layout/createLayoutComponents"; export * from "./Link/createLink"; -export * from "./List/createList"; +export * from "./List/createListComponents"; export * from "./Modal/createModal"; export * from "./Modal/useModalContext"; export * from "./NumberInput/createNumberInput"; diff --git a/stories/index.tsx b/stories/index.tsx index 83f5402dd..f5941a2d7 100644 --- a/stories/index.tsx +++ b/stories/index.tsx @@ -13,7 +13,7 @@ import { createToast, createModal, createChip, - createList, + createListComponents, createDisclosure, createDisclosureGroup, createTooltip, @@ -51,7 +51,7 @@ export const Link = createLink(); export const Breadcrumb = createBreadcrumb(Link); export const Modal = createModal(Actions); export const Chip = createChip(); -export const List = createList(); +export const { List } = createListComponents(); export const Disclosure = createDisclosure(); export const DisclosureGroup = createDisclosureGroup(Disclosure); export const Tooltip = createTooltip(); From 8b54cde10a7f5b2b6112a4962c7464a9c86b64fc Mon Sep 17 00:00:00 2001 From: Gabriele Petronella Date: Fri, 4 Mar 2022 14:43:56 +0100 Subject: [PATCH 5/5] Fix stories --- stories/Components/SelectField.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/Components/SelectField.stories.tsx b/stories/Components/SelectField.stories.tsx index 15c48b07b..7f61706db 100644 --- a/stories/Components/SelectField.stories.tsx +++ b/stories/Components/SelectField.stories.tsx @@ -13,7 +13,7 @@ function Illustration(props: IllustrationProps) { const { defaultExport, createControlledStory } = createComponentStories({ component: SelectField, args: { - size: "large", + menuSize: "large", name: "color", label: formatMessage("What's your favorite color?"), placeholder: formatMessage("Select a color"), @@ -60,7 +60,7 @@ export default defaultExport; export const LargeMenu = createControlledStory(undefined, {}); -export const MediumMenu = createControlledStory(undefined, { size: "medium" }); +export const MediumMenu = createControlledStory(undefined, { menuSize: "medium" }); export const Disabled = createControlledStory(undefined, { disabled: true,