diff --git a/packages/strapi-design-system/src/Link/Link.stories.mdx b/packages/strapi-design-system/src/Link/Link.stories.mdx index fa8355edf..3a80ab99b 100644 --- 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. diff --git a/packages/strapi-design-system/src/NumberInput/NumberInput.js b/packages/strapi-design-system/src/NumberInput/NumberInput.js index 5413aea1e..1f5dfc43e 100644 --- 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 index 80c5fd050..7eff09092 100644 --- 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. {() => { - const [content, setContent] = useState(); + const [content, setContent] = useState(0); return ( +## With locale + + + + {() => { + const [content, setContent] = useState(); + return ( + + setContent(value)} + value={content} + /> + + {`The value is ${content}`} + + + ); + }} + + + ## Props diff --git a/packages/strapi-design-system/src/SubNav/SubNav.stories.mdx b/packages/strapi-design-system/src/SubNav/SubNav.stories.mdx index 13b96e6e8..73d93a359 100644 --- 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 { {links.map((link) => ( - + {link.label} ))} diff --git a/packages/strapi-design-system/src/themes/Theme.stories.mdx b/packages/strapi-design-system/src/themes/Theme.stories.mdx index 93227e2cf..9cd886811 100644 --- 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 diff --git a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap index a94d84018..9f0611c7a 100644 --- a/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap +++ b/packages/strapi-design-system/tests/__snapshots__/storyshots.spec.js.snap @@ -29003,6 +29003,337 @@ exports[`Storyshots Design System/Components/NumberInput disabled 1`] = ` `; +exports[`Storyshots Design System/Components/NumberInput locale 1`] = ` +.c1 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c0 { + background: #ffffff; + padding: 8px; +} + +.c2 { + padding: 8px; + height: 100%; +} + +.c3 { + padding: 56px; +} + +.c11 { + padding-right: 12px; + padding-left: 8px; +} + +.c13 { + color: #8e8ea9; +} + +.c16 { + background: #f6f6f9; + padding: 16px; +} + +.c6 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; +} + +.c17 { + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c4 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c8 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c5 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c5 > * + * { + margin-top: 4px; +} + +.c14 path { + fill: #8e8ea9; +} + +.c10 { + border: none; + border-radius: 4px; + padding-bottom: 0.65625rem; + padding-left: 16px; + padding-right: 0; + padding-top: 0.65625rem; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + background: inherit; +} + +.c10::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c10::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c10:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c10::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c10[aria-disabled='true'] { + color: inherit; +} + +.c10:focus { + outline: none; + box-shadow: none; +} + +.c9 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c9:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 1rem; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-transform: translateY(-2px); + -ms-transform: translateY(-2px); + transform: translateY(-2px); +} + +.c12 svg { + display: block; + height: 0.25rem; + -webkit-transform: rotateX(180deg); + -ms-transform: rotateX(180deg); + transform: rotateX(180deg); +} + +.c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 1rem; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-transform: translateY(2px); + -ms-transform: translateY(2px); + transform: translateY(2px); +} + +.c15 svg { + display: block; + height: 0.25rem; +} + +
+
+
+

+ Storybook story +

+
+
+
+
+
+ +
+ +
+ + +
+
+
+
+

+ + The value is undefined + +

+
+
+
+
+`; + exports[`Storyshots Design System/Components/NumberInput required 1`] = ` .c1 { border: 0; @@ -29250,7 +29581,7 @@ exports[`Storyshots Design System/Components/NumberInput required 1`] = ` >