Merge pull request #52 from buildo/fixes-4

More fixes
buildo · Mar 4, 2022 · e551954 · e551954
2 parents 66e2cff + d6cdf92
commit e551954
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 21 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,11 +1,15 @@
 import "../src/reset.css.ts";
 import { OverlayProvider } from "@react-aria/overlays";
+import { DefaultMessagesContext } from "../src/DefaultMessagesContext";
+import { defaultMessages } from "../stories/defaultMessages";
 
 export const decorators = [
   (Story) => (
-    <OverlayProvider>
-      <Story />
-    </OverlayProvider>
+    <DefaultMessagesContext.Provider value={{ defaultMessages }}>
+      <OverlayProvider>
+        <Story />
+      </OverlayProvider>
+    </DefaultMessagesContext.Provider>
   ),
 ];
 

diff --git a/src/Banner/createBanner.tsx b/src/Banner/createBanner.tsx
@@ -15,10 +15,11 @@ import { Columns, Column, Box, Stack, BentoSprinkles } from "../internal";
 import { bannerRecipe } from "./Banner.css";
 import { ComponentProps, FunctionComponent } from "react";
 import { IconProps } from "../Icons/IconProps";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 type DismissProps =
   | {
-      dismissButtonLabel: LocalizedString;
+      dismissButtonLabel?: LocalizedString;
       onDismiss: () => void;
     }
   | {
@@ -74,6 +75,8 @@ export function createBanner({
     const iconProps = { size: iconSize, color: kind === "tip" ? "secondary" : kind } as const;
     const Icon = kindIcons[kind];
 
+    const { defaultMessages } = useDefaultMessages();
+
     return (
       <Box padding={padding} borderRadius={radius} className={bannerRecipe({ kind })}>
         <Columns space={16} align="left" alignY={title && description ? "top" : "center"}>
@@ -93,7 +96,7 @@ export function createBanner({
           {dismissProps.onDismiss && (
             <Column width="content">
               <IconButton
-                label={dismissProps.dismissButtonLabel}
+                label={dismissProps.dismissButtonLabel ?? defaultMessages.Banner.dismissButtonLabel}
                 onPress={dismissProps.onDismiss}
                 size={12}
                 icon={closeIcon}

diff --git a/src/Chip/createChip.tsx b/src/Chip/createChip.tsx
@@ -3,10 +3,11 @@ import { IconProps } from "../Icons/IconProps";
 import { Label, LocalizedString, IconButton, IconClose } from "..";
 import { Box, Columns, Column, BentoSprinkles } from "../internal";
 import { chipRecipe } from "./Chip.css";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 type DismissProps =
   | {
-      dismissButtonLabel: LocalizedString;
+      dismissButtonLabel?: LocalizedString;
       onDismiss: () => void;
     }
   | {
@@ -49,6 +50,8 @@ export function createChip(
   }
 ) {
   return function Chip({ color, label, ...dismissProps }: ChipProps) {
+    const { defaultMessages } = useDefaultMessages();
+
     return (
       <Box display="flex">
         <Box
@@ -64,7 +67,7 @@ export function createChip(
               <Column width="content">
                 <IconButton
                   icon={config.closeIcon}
-                  label={dismissProps.dismissButtonLabel}
+                  label={dismissProps.dismissButtonLabel ?? defaultMessages.Chip.dismissButtonLabel}
                   onPress={dismissProps.onDismiss}
                   size={config.closeIconSize}
                 />

diff --git a/src/DefaultMessagesContext.tsx b/src/DefaultMessagesContext.tsx
@@ -0,0 +1,25 @@
+import { createContext } from "react";
+import { LocalizedString } from ".";
+
+export type DefaultMessages = {
+  defaultMessages: {
+    Chip: {
+      dismissButtonLabel: LocalizedString;
+    };
+    Banner: {
+      dismissButtonLabel: LocalizedString;
+    };
+    Modal: {
+      closeButtonLabel: LocalizedString;
+    };
+    SelectField: {
+      noOptionsMessage: LocalizedString;
+      multiOptionsSelected: (count: number) => LocalizedString;
+    };
+    SearchBar: {
+      clearButtonLabel: LocalizedString;
+    };
+  };
+};
+
+export const DefaultMessagesContext = createContext<DefaultMessages | null>(null);
diff --git a/src/List/createListItem.tsx b/src/List/createListItem.tsx
@@ -45,7 +45,7 @@ export type Props = Kind &
   LeftItem &
   RightItem & {
     disabled?: boolean;
-    size: ListSize;
+    size?: ListSize;
     isFocused?: boolean;
     ignoreTabIndex?: boolean;
   } & (
@@ -115,7 +115,7 @@ export function createListItem(config: ListItemConfig) {
           display="block"
           tabIndex={interactive && !props.ignoreTabIndex ? linkProps.tabIndex : undefined}
         >
-          <Inset spaceX={config.paddingX} spaceY={config.paddingY[props.size]}>
+          <Inset spaceX={config.paddingX} spaceY={config.paddingY[props.size ?? "medium"]}>
             <Columns space={config.internalSpacing} alignY="center">
               {renderLeft(props)}
               {renderContent(props)}

diff --git a/src/Modal/createModal.tsx b/src/Modal/createModal.tsx
@@ -16,14 +16,15 @@ import { modal, underlay } from "./Modal.css";
 import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
 import { ModalContext } from "./ModalContext";
 import { IconProps } from "../Icons/IconProps";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 export type ModalProps = {
   title: LocalizedString;
   children: Children;
   primaryAction?: Omit<ButtonProps, "kind" | "hierarchy" | "size">;
   secondaryAction?: Omit<ButtonProps, "kind" | "hierarchy" | "size">;
   onClose: () => void;
-  closeButtonLabel: LocalizedString;
+  closeButtonLabel?: LocalizedString;
   isDestructive?: boolean;
 };
 
@@ -67,6 +68,8 @@ export function createModal(
       () => props.primaryAction?.onPress()
     );
 
+    const { defaultMessages } = useDefaultMessages();
+
     return (
       <Box className={underlay} {...underlayProps} color={undefined}>
         <ModalContext.Provider value={true}>
@@ -85,7 +88,7 @@ export function createModal(
                   <Column width="content">
                     <IconButton
                       icon={config.closeIcon}
-                      label={props.closeButtonLabel}
+                      label={props.closeButtonLabel ?? defaultMessages.Modal.closeButtonLabel}
                       onPress={props.onClose}
                       size={config.closeIconSize}
                       tabIndex={-1}

diff --git a/src/SearchBar/createSearchBar.tsx b/src/SearchBar/createSearchBar.tsx
@@ -9,14 +9,15 @@ import { input } from "./SearchBar.css";
 import { FieldType } from "../Field/createField";
 import { defaultInputConfig, InputConfig } from "../Field/InputConfig";
 import { IconProps } from "../Icons/IconProps";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 type Props = {
   value: string;
   onChange: (value: string) => unknown;
   onBlur?: () => unknown;
   placeholder: LocalizedString;
   disabled?: boolean;
-  clearButtonLabel: LocalizedString;
+  clearButtonLabel?: LocalizedString;
 };
 
 export type SearchBarConfig = {
@@ -53,10 +54,12 @@ export function createSearchBar(
       inputRef
     );
 
+    const { defaultMessages } = useDefaultMessages();
+
     const rightAccessoryContent =
       props.value.length > 0 ? (
         <IconButton
-          label={props.clearButtonLabel}
+          label={props.clearButtonLabel ?? defaultMessages.SearchBar.clearButtonLabel}
           onPress={() => props.onChange("")}
           size={16}
           icon={config.clearIcon}

diff --git a/src/SelectField/createSelectField.tsx b/src/SelectField/createSelectField.tsx
@@ -14,6 +14,7 @@ import { InputConfig } from "../Field/InputConfig";
 import { BentoSprinkles } from "../internal";
 import { ListItemProps } from "../List/createListItem";
 import { Omit } from "../util/Omit";
+import { useDefaultMessages } from "../util/useDefaultMessages";
 
 export type SelectOption<A> = Omit<
   ListItemProps,
@@ -25,14 +26,14 @@ export type SelectOption<A> = Omit<
 type Props<A, IsMulti extends boolean> = (IsMulti extends false
   ? FieldProps<A | undefined>
   : FieldProps<A[]>) & {
-  size: ListSize;
+  menuSize?: ListSize;
   placeholder: LocalizedString;
   options: Array<SelectOption<A>>;
   isMulti?: IsMulti;
   noOptionsMessage?: LocalizedString;
   autoFocus?: boolean;
 } & (IsMulti extends true
-    ? { multiValueMessage: (numberOfSelectedOptions: number) => LocalizedString }
+    ? { multiValueMessage?: (numberOfSelectedOptions: number) => LocalizedString }
     : {});
 
 export type { Props as SelectFieldProps };
@@ -73,7 +74,7 @@ export function createSelectField(
       isMulti,
       noOptionsMessage,
       autoFocus,
-      size,
+      menuSize = "medium",
     } = props;
 
     const validationState = issues ? "invalid" : "valid";
@@ -95,6 +96,8 @@ export function createSelectField(
       };
     }, [menuPortalTarget]);
 
+    const { defaultMessages } = useDefaultMessages();
+
     return (
       <Field
         label={label}
@@ -156,13 +159,16 @@ export function createSelectField(
           validationState={validationState}
           isMulti={isMulti}
           isClearable={false}
-          noOptionsMessage={() => noOptionsMessage}
+          noOptionsMessage={() => noOptionsMessage ?? defaultMessages.SelectField.noOptionsMessage}
           multiValueMessage={
-            isMulti ? (props as unknown as Props<A, true>).multiValueMessage : undefined
+            isMulti
+              ? (props as unknown as Props<A, true>).multiValueMessage ??
+                defaultMessages.SelectField.multiOptionsSelected
+              : undefined
           }
           closeMenuOnSelect={!isMulti}
           hideSelectedOptions={false}
-          menuSize={size}
+          menuSize={menuSize}
         />
       </Field>
     );

diff --git a/src/Typography/Body/Body.css.ts b/src/Typography/Body/Body.css.ts
@@ -22,6 +22,7 @@ export const bodyRecipe = strictRecipe({
       warning: bentoSprinkles({ color: "textWarning" }),
       informative: bentoSprinkles({ color: "textInformative" }),
       link: bentoSprinkles({ color: "textLink" }),
+      primaryInverse: bentoSprinkles({ color: "textPrimaryInverse" }),
     },
   },
 });
diff --git a/src/Typography/Body/Body.tsx b/src/Typography/Body/Body.tsx
@@ -13,7 +13,8 @@ type Color =
   | "positive"
   | "informative"
   | "warning"
-  | "link";
+  | "link"
+  | "primaryInverse";
 
 type Props = {
   id?: string;

diff --git a/src/util/useDefaultMessages.ts b/src/util/useDefaultMessages.ts
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { DefaultMessagesContext } from "../DefaultMessagesContext";
+
+export function useDefaultMessages() {
+  const context = useContext(DefaultMessagesContext);
+  if (!context) {
+    throw new Error("useDefaultMessages must be used within a DefaultMessagesProvider");
+  }
+  return context;
+}
diff --git a/stories/Components/Form.stories.tsx b/stories/Components/Form.stories.tsx
@@ -142,7 +142,6 @@ export const multipleSections = createStory({
       </FormRow>
       <FormRow>
         <ExampleSelectField
-          size="medium"
           label={formatMessage("Select your gender")}
           options={[
             { label: formatMessage("Male"), value: "M", kind: "single-line" },

diff --git a/stories/defaultMessages.ts b/stories/defaultMessages.ts
@@ -0,0 +1,24 @@
+import { DefaultMessages } from "../src/DefaultMessagesContext";
+import { formatMessage } from "./util";
+
+export const defaultMessages: DefaultMessages["defaultMessages"] = {
+  Chip: {
+    dismissButtonLabel: formatMessage("Remove"),
+  },
+  Banner: {
+    dismissButtonLabel: formatMessage("Close"),
+  },
+  Modal: {
+    closeButtonLabel: formatMessage("Close"),
+  },
+  SelectField: {
+    noOptionsMessage: formatMessage("No options"),
+    multiOptionsSelected: (n) => {
+      const options = n > 1 ? "options" : "option";
+      return formatMessage(`${n} ${options} selected`);
+    },
+  },
+  SearchBar: {
+    clearButtonLabel: formatMessage("Clear"),
+  },
+};