Merge pull request #992 from buildo/991-expose_formatoptions_of_numberinput

#991: Expose `formatOptions` of `NumberInput`

Author: marcopiii

packages/bento-design-system/src/NumberField/NumberField.tsx

@@ -11,11 +11,12 @@ import { BaseNumberInput } from "./BaseNumberInput";
 type Props = FieldProps<number | undefined, number> &
   BaseNumberProps &
   FormatProps &
-  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
+  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step" | "formatOptions">;
 
 export function NumberField(props: Props) {
   const { locale } = useLocale();
-  const formatOptions = useFormatOptions(props);
+  const defaultFormatOptions = useFormatOptions(props);
+  const formatOptions = props.formatOptions ?? defaultFormatOptions;
   const state = useNumberFieldState({ ...props, locale, formatOptions });
   const inputRef = useRef<HTMLInputElement>(null);
 

packages/bento-design-system/src/NumberField/NumberInput.tsx

@@ -16,11 +16,12 @@ type Props = AtLeast<Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria
   BaseNumberProps & {
     validationState: "valid" | "invalid";
   } & FormatProps &
-  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step">;
+  Pick<NumberFieldStateOptions, "minValue" | "maxValue" | "step" | "formatOptions">;
 
 export function NumberInput(props: Props) {
   const { locale } = useLocale();
-  const formatOptions = useFormatOptions(props);
+  const defaultFormatOptions = useFormatOptions(props);
+  const formatOptions = props.formatOptions ?? defaultFormatOptions;
   const state = useNumberFieldState({ ...props, locale, formatOptions });
   const inputRef = useRef<HTMLInputElement>(null);
 

packages/bento-design-system/stories/Components/Inputs/NumberInput.stories.tsx

@@ -77,3 +77,14 @@ export const KindAndRightAccessory = {
     currency: "EUR",
   },
 } satisfies Story;
+
+export const CustomFormatter = {
+  args: {
+    value: 0.123456,
+    name: "precise-number",
+    formatOptions: {
+      minimumFractionDigits: 6,
+      maximumFractionDigits: 6,
+    },
+  },
+};

packages/bento-design-system/stories/Components/NumberField.stories.tsx

@@ -79,3 +79,17 @@ export const KindAndRightAccessory = {
     currency: "EUR",
   },
 } satisfies Story;
+
+export const CustomFormatter = {
+  args: {
+    value: 0.123456,
+    name: "precise-number",
+    label: "A very precise number",
+    placeholder: "A very precise number",
+    assistiveText: "A very precise number with 6 decimal digits",
+    formatOptions: {
+      minimumFractionDigits: 6,
+      maximumFractionDigits: 6,
+    },
+  },
+};