chore: merge main

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.2.1",
+  "version": "1.2.3",
   "npmClient": "yarn"
 }

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -42,7 +42,7 @@
     "webpack-cli": "^4.5.0"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.2.1",
+    "@strapi/icons": "^1.2.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",

packages/strapi-design-system/src/Button/Button.js

@@ -20,6 +20,7 @@ const rotation = keyframes`
 
 const LoadingWrapper = styled.div`
   animation: ${rotation} 2s infinite linear;
+  will-change: transform;
 `;
 
 const BoxFullHeight = styled(Box)`

packages/strapi-design-system/src/CarouselInput/Carousel.js

@@ -126,7 +126,7 @@ Carousel.propTypes = {
   actions: PropTypes.node,
   children: PropTypes.node.isRequired,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   label: PropTypes.string.isRequired,
   nextLabel: PropTypes.string.isRequired,
   onNext: PropTypes.func.isRequired,

packages/strapi-design-system/src/CarouselInput/CarouselInput.js

@@ -66,7 +66,7 @@ CarouselInput.propTypes = {
   actions: PropTypes.node,
   children: PropTypes.node.isRequired,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
   labelAction: PropTypes.element,

packages/strapi-design-system/src/Checkbox/Checkbox.js

@@ -58,6 +58,6 @@ Checkbox.propTypes = {
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };

packages/strapi-design-system/src/Combobox/Combobox.js

@@ -20,25 +20,27 @@ import { KeyboardKeys } from '../helpers/keyboardKeys';
 import { VisuallyHidden } from '../VisuallyHidden';
 
 export const Combobox = ({
+  children: nodes,
   clearLabel,
+  creatable,
   createMessage,
   disabled,
-  hint,
   error,
+  hasMoreItems,
+  hint,
   label,
-  value,
-  onChange,
-  placeholder,
-  creatable,
+  labelAction,
   loading,
   loadingMessage,
+  noOptionsMessage,
+  onChange,
+  onClear,
   onCreateOption,
   onInputChange,
   onLoadMore,
-  noOptionsMessage,
-  hasMoreItems,
-  children: nodes,
-  onClear,
+  placeholder,
+  required,
+  value,
   ...props
 }) => {
   const getInputValueFromNodes = () =>
@@ -250,7 +252,11 @@ export const Combobox = ({
         {value}
       </VisuallyHidden>
       <Stack spacing={label || hint || error ? 1 : 0}>
-        {label && <FieldLabel id={labelId}>{label}</FieldLabel>}
+        {label && (
+          <FieldLabel action={labelAction} required={required} id={labelId}>
+            {label}
+          </FieldLabel>
+        )}
         <MainRow ref={containerRef} $disabled={disabled} hasError={error}>
           <InputContainer wrap="wrap">
             {!inputValue && value && (
@@ -394,8 +400,9 @@ Combobox.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.string,
   hasMoreItems: PropTypes.bool,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   label: PropTypes.string,
+  labelAction: PropTypes.element,
   loading: PropTypes.bool,
   loadingMessage: PropTypes.string,
   noOptionsMessage: PropTypes.func,

packages/strapi-design-system/src/Field/Field.js

@@ -23,7 +23,7 @@ Field.defaultProps = {
 Field.propTypes = {
   children: PropTypes.node.isRequired,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
 };

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} />
 

packages/strapi-design-system/src/Loader/Loader.js

@@ -15,6 +15,7 @@ const rotation = keyframes`
 
 const LoaderImg = styled.img`
   animation: ${rotation} 1s infinite linear;
+  will-change: transform;
   ${({ small, theme }) => small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
 `;
 

packages/strapi-design-system/src/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import CarretDown from '@strapi/icons/CarretDown';
 import styled from 'styled-components';
@@ -50,9 +50,9 @@ 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 locale = useMemo(() => defaultLocale || getDefaultLocale(), [defaultLocale]);
+    const locale = defaultLocale || getDefaultLocale();
     const numberParserRef = useRef(new NumberParser(locale));
-    const numberFormaterRef = useRef(new NumberFormatter(locale, { maximumSignificantDigits: 21 }));
+    const numberFormaterRef = useRef(new NumberFormatter(getDefaultLocale(), { maximumFractionDigits: 20 }));
 
     const handleChange = (e) => {
       const nextValue = e.target.value;
@@ -145,9 +145,7 @@ export const NumberInput = React.forwardRef(
     };
 
     const handleFocus = () => {
-      if (value !== undefined) {
-        setInputValue(String(numberParserRef.current.format(inputValue) ?? INITIAL_VALUE));
-      }
+      setInputValue(inputValue ?? INITIAL_VALUE);
     };
 
     const handleBlur = () => {
@@ -240,7 +238,7 @@ NumberInput.propTypes = {
   'aria-label': PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.element,

packages/strapi-design-system/src/Select/Select.js

@@ -288,7 +288,7 @@ Select.propTypes = {
   customizeContent: PropTypes.func,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   label: PropTypes.string,
   labelAction: PropTypes.element,

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>
                     ))}

packages/strapi-design-system/src/TextButton/TextButton.js

@@ -1,11 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+import Loader from '@strapi/icons/Loader';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
 import { Flex } from '../Flex';
 import { buttonFocusStyle } from '../themes/utils';
 
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+
+const LoadingWrapper = styled.div`
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+
 const TextButtonWrapper = styled(Flex)`
   background: transparent;
   border: none;
@@ -29,41 +44,59 @@ const TextButtonWrapper = styled(Flex)`
   ${buttonFocusStyle}
 `;
 
-export const TextButton = React.forwardRef(({ children, startIcon, endIcon, onClick, disabled, ...props }, ref) => {
-  const handleClick = onClick && !disabled ? onClick : undefined;
+export const TextButton = React.forwardRef(
+  ({ children, startIcon, endIcon, onClick, disabled, loading, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : undefined;
+    const isDisabled = disabled || loading;
 
-  return (
-    <TextButtonWrapper ref={ref} aria-disabled={disabled} onClick={handleClick} as="button" type="button" {...props}>
-      {startIcon && (
-        <Box as="span" paddingRight={2} aria-hidden={true}>
-          {startIcon}
-        </Box>
-      )}
-      <Typography variant="pi" textColor={disabled ? 'neutral600' : 'primary600'}>
-        {children}
-      </Typography>
-      {endIcon && (
-        <Box as="span" paddingLeft={2} aria-hidden={true}>
-          {endIcon}
-        </Box>
-      )}
-    </TextButtonWrapper>
-  );
-});
+    return (
+      <TextButtonWrapper
+        ref={ref}
+        aria-disabled={isDisabled}
+        onClick={handleClick}
+        as="button"
+        type="button"
+        {...props}
+      >
+        {(startIcon || loading) && (
+          <Box as="span" paddingRight={2} aria-hidden={true}>
+            {loading ? (
+              <LoadingWrapper>
+                <Loader />
+              </LoadingWrapper>
+            ) : (
+              startIcon
+            )}
+          </Box>
+        )}
+        <Typography variant="pi" textColor={isDisabled ? 'neutral600' : 'primary600'}>
+          {children}
+        </Typography>
+        {endIcon && (
+          <Box as="span" paddingLeft={2} aria-hidden={true}>
+            {endIcon}
+          </Box>
+        )}
+      </TextButtonWrapper>
+    );
+  },
+);
 
 TextButton.displayName = 'TextButton';
 
 TextButton.defaultProps = {
   disabled: false,
   startIcon: undefined,
   endIcon: undefined,
+  loading: false,
   onClick: undefined,
 };
 
 TextButton.propTypes = {
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
   endIcon: PropTypes.element,
+  loading: PropTypes.bool,
   onClick: PropTypes.func,
   startIcon: PropTypes.element,
 };

packages/strapi-design-system/src/TextButton/TextButton.stories.mdx

@@ -39,6 +39,13 @@ Depending on the permissions a user have or the status of an action, a TextButto
         Click on me
       </TextButton>
     </div>
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="disabled">
     <div>
       <TextButton disabled startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
         Disabled TextButton
@@ -47,6 +54,18 @@ Depending on the permissions a user have or the status of an action, a TextButto
   </Story>
 </Canvas>
 
+## Loading
+
+<Canvas>
+  <Story name="loading">
+    <div>
+      <TextButton loading startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
+        Loading
+      </TextButton>
+    </div>
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={TextButton} />

packages/strapi-design-system/src/TextInput/TextInput.js

@@ -56,7 +56,7 @@ TextInput.propTypes = {
   'aria-label': PropTypes.string,
   endAction: PropTypes.element,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.element,

packages/strapi-design-system/src/Textarea/Textarea.js

@@ -65,7 +65,7 @@ Textarea.propTypes = {
   'aria-label': PropTypes.string,
   children: PropTypes.string,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.element,

packages/strapi-design-system/src/TimePicker/TimePicker.js

@@ -110,7 +110,7 @@ TimePicker.propTypes = {
   clearLabel: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   label: PropTypes.string,
   onChange: PropTypes.func.isRequired,

packages/strapi-design-system/src/ToggleInput/ToggleInput.js

@@ -78,7 +78,7 @@ ToggleInput.propTypes = {
   clearLabel: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  hint: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   id: PropTypes.string,
   label: PropTypes.string,
   labelAction: PropTypes.node,