Merge pull request #687 from strapi/fix/numberinput-locale

NumberInput: Allow to pass in a locale for improved number formatting
strapi · Sep 26, 2022 · 5517ca1 · 5517ca1
2 parents 3a7dad3 + 89ad61e
commit 5517ca1
Show file tree

Hide file tree

Showing 6 changed files with 530 additions and 177 deletions.
diff --git a/packages/strapi-design-system/src/Link/Link.stories.mdx b/packages/strapi-design-system/src/Link/Link.stories.mdx
@@ -15,7 +15,7 @@ Best practices
 
 - A link should have a relevant and clear label.
 - Be positioned in consistent locations in the interface.
-- Add an icon next to the link to emphasize the required action. 
+- Add an icon next to the link to emphasize the required action.
 
 <Meta title="Design System/Components/Link" component={Link} />
 

diff --git a/packages/strapi-design-system/src/NumberInput/NumberInput.js b/packages/strapi-design-system/src/NumberInput/NumberInput.js
@@ -36,6 +36,7 @@ export const NumberInput = React.forwardRef(
       error,
       label,
       labelAction,
+      locale: defaultLocale,
       id,
       onValueChange,
       value,
@@ -49,7 +50,8 @@ export const NumberInput = React.forwardRef(
     // inputValue should ALWAYS be a string. value should ALWAYS stay a number
     const [inputValue, setInputValue] = useState(value === undefined || value === null ? INITIAL_VALUE : String(value));
     const generatedId = useId('numberinput', id);
-    const numberParserRef = useRef(new NumberParser(getDefaultLocale()));
+    const locale = defaultLocale || getDefaultLocale();
+    const numberParserRef = useRef(new NumberParser(locale));
     const numberFormaterRef = useRef(new NumberFormatter(getDefaultLocale(), { maximumFractionDigits: 20 }));
 
     const handleChange = (e) => {
@@ -240,6 +242,7 @@ NumberInput.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.element,
+  locale: PropTypes.string,
   name: PropTypes.string.isRequired,
   onValueChange: PropTypes.func.isRequired,
   required: PropTypes.bool,

diff --git a/packages/strapi-design-system/src/NumberInput/NumberInput.stories.mdx b/packages/strapi-design-system/src/NumberInput/NumberInput.stories.mdx
@@ -81,7 +81,7 @@ NumberInputs can be used without a label.
 <Canvas>
   <Story name="withoutLabel">
     {() => {
-      const [content, setContent] = useState();
+      const [content, setContent] = useState(0);
       return (
         <Box padding={10}>
           <NumberInput
@@ -289,6 +289,31 @@ NumberInputs are always found in forms. They give users the possibility to add o
   </Story>
 </Canvas>
 
+## With locale
+
+<Canvas>
+  <Story name="locale">
+    {() => {
+      const [content, setContent] = useState();
+      return (
+        <Box padding={10}>
+          <NumberInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            locale="de"
+            onValueChange={(value) => setContent(value)}
+            value={content}
+          />
+          <Box as="p" padding={4} background="neutral100">
+            <Typography>{`The value is ${content}`}</Typography>
+          </Box>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={NumberInput} />
diff --git a/packages/strapi-design-system/src/SubNav/SubNav.stories.mdx b/packages/strapi-design-system/src/SubNav/SubNav.stories.mdx
@@ -164,13 +164,7 @@ import {
                 <SubNavSection label="Global Settings">
                   <SubNavLinkSection label="Sub section">
                     {links.map((link) => (
-                      <SubNavLink
-                        to={link.to}
-                        active={link.active}
-                        icon={link.icon}
-                        isSubSectionChild
-                        key={link.id}
-                      >
+                      <SubNavLink to={link.to} active={link.active} icon={link.icon} isSubSectionChild key={link.id}>
                         {link.label}
                       </SubNavLink>
                     ))}

diff --git a/packages/strapi-design-system/src/themes/Theme.stories.mdx b/packages/strapi-design-system/src/themes/Theme.stories.mdx
@@ -113,10 +113,10 @@ This is the dark colors used for the dark mode
 ## Shadows
 
 We have 3 types of shadows: Table, Popup, Filter. We use the drop shadows on different cases:
-- On Containers
-- On Filters 
-- On Modals & PopOvers 
 
+- On Containers
+- On Filters
+- On Modals & PopOvers
 
 <Canvas>
   <Story name="shadows">