Merge pull request #845 from strapi/release/1.5.0

Author: joshuaellis

lerna.json

@@ -1,5 +1,5 @@
 {
   "packages": ["packages/*"],
-  "version": "1.4.2",
+  "version": "1.5.0",
   "npmClient": "yarn"
 }

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -31,7 +31,7 @@
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
-    "@strapi/icons": "^1.4.2",
+    "@strapi/icons": "^1.5.0",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",

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

@@ -7,7 +7,6 @@ import { TextInput } from '../TextInput';
 import { DatePickerButton, DatePickerWrapper, IconBox } from './components';
 import { DatePickerCalendar } from './DatePickerCalendar';
 import { formatDate } from './utils/formatDate';
-import { useId } from '../helpers/useId';
 import { getDefaultLocale } from '../helpers/getDefaultLocale';
 
 export const DatePicker = ({
@@ -26,7 +25,6 @@ export const DatePicker = ({
   maxDate,
   ...props
 }) => {
-  const generatedId = useId('datepicker', id);
   const [visible, setVisible] = useState(false);
   const inputRef = useRef(null);
   const datePickerButtonRef = useRef(null);
@@ -84,7 +82,7 @@ export const DatePicker = ({
         label={label}
         aria-label={ariaLabel}
         disabled={disabled}
-        id={generatedId}
+        id={id}
         {...props}
       />
 

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

@@ -118,6 +118,8 @@ export const DateTimePicker = ({
         <Stack horizontal spacing={2}>
           <DatePicker
             data-testid="datetimepicker-date"
+            // DateTimePicker sharing its Field id to DatePicker component
+            id={generatedId}
             name={name}
             ariaLabel={label || ariaLabel}
             error={typeof error === 'string'}

packages/strapi-design-system/src/DateTimePicker/__tests__/__snapshots__/DateTimePicker.spec.js.snap

@@ -339,7 +339,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   aria-required="false"
                   class="c9"
                   data-testid="datetimepicker-date"
-                  id="datepicker-3"
+                  id="datetime-label-1"
                   name="datetimepicker"
                   value="10/13/2021"
                 />
@@ -360,10 +360,10 @@ exports[`DateTimePicker snapshots the component 1`] = `
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-label="Date time picker"
-              aria-labelledby="timepicker-4-label timepicker-4-content"
+              aria-labelledby="timepicker-3 timepicker-3-label timepicker-3-content"
               class="c12"
               data-testid="datetimepicker-time"
-              id="timepicker-4"
+              id="timepicker-3"
               type="button"
             />
             <div
@@ -400,7 +400,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
                 >
                   <span
                     class="c17"
-                    id="timepicker-4-content"
+                    id="timepicker-3-content"
                   >
                     10:00
                   </span>

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

@@ -6,6 +6,8 @@ import { Box } from '../Box';
 const DividerWrapper = styled(Box)`
   height: 1px;
   border: none;
+  /* If contained in a Flex parent we want to prevent the Divider to shink */
+  flex-shrink: 0;
   ${({ unsetMargin }) => (unsetMargin ? 'margin: 0;' : '')}
 `;
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Grid } from '../Grid';
+import { Flex } from '../Flex';
 import { MainNavContext } from './MainNavContext';
 
-const MainNavWrapper = styled(Grid)`
+const MainNavWrapper = styled(Flex)`
   width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
   background: ${({ theme }) => theme.colors.neutral0};
   position: sticky;
@@ -17,7 +17,7 @@ const MainNavWrapper = styled(Grid)`
 export const MainNav = ({ condensed, ...props }) => {
   return (
     <MainNavContext.Provider value={condensed}>
-      <MainNavWrapper as="nav" condensed={condensed} {...props} />
+      <MainNavWrapper alignItems="normal" direction="column" as="nav" condensed={condensed} {...props} />
     </MainNavContext.Provider>
   );
 };

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

@@ -15,6 +15,7 @@ import { NavSection } from './NavSection';
 import { NavSections } from './NavSections';
 import { NavCondense } from './NavCondense';
 import { NavLink } from './NavLink';
+import { NavFooter } from './NavFooter';
 import { NavUser } from './NavUser';
 import { NavBrand } from './NavBrand';
 import { Box } from '../Box';
@@ -70,7 +71,7 @@ important actions.
     {() => {
       const [condensed, setCondensed] = useState(false);
       return (
-        <Box background="neutral100" padding={10} style={{ height: '100vh' }}>
+        <Box background="neutral100" height="100vh" paddingLeft={10}>
           <MainNav condensed={condensed}>
             <NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
             <Divider />
@@ -101,12 +102,14 @@ important actions.
                 </NavLink>
               </NavSection>
             </NavSections>
-            <NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/somewhere-i-belong">
-              John Duff
-            </NavUser>
-            <NavCondense onClick={() => setCondensed((s) => !s)}>
-              {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
-            </NavCondense>
+            <NavFooter>
+              <NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/somewhere-i-belong">
+                John Duff
+              </NavUser>
+              <NavCondense onClick={() => setCondensed((s) => !s)}>
+                {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
+              </NavCondense>
+            </NavFooter>
           </MainNav>
         </Box>
       );
@@ -117,7 +120,7 @@ important actions.
       const [condensed, setCondensed] = useState(false);
       const numberOfNotifications = 2;
       return (
-        <Box background="neutral100" padding={10} style={{ height: '100vh' }}>
+        <Box background="neutral100" paddingLeft={10} height="100vh">
           <MainNav condensed={condensed}>
             <NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
             <Divider />
@@ -140,7 +143,7 @@ important actions.
                 <NavLink to="/builder" icon={<Puzzle />}>
                   Plugins
                 </NavLink>
-                <NavLink to="/content" badgeContent="new" icon={<ShoppingCart />} badgeAriaLabel="new content">
+                <NavLink to="/content" badgeContent="33" icon={<ShoppingCart />} badgeAriaLabel="new content">
                   Marketplace
                 </NavLink>
                 <NavLink
@@ -153,10 +156,12 @@ important actions.
                 </NavLink>
               </NavSection>
             </NavSections>
-            <NavUser initials="MD">Michka des Ronronscelestes</NavUser>
-            <NavCondense onClick={() => setCondensed((s) => !s)}>
-              {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
-            </NavCondense>
+            <NavFooter>
+              <NavUser initials="MD">Michka des Ronronscelestes</NavUser>
+              <NavCondense onClick={() => setCondensed((s) => !s)}>
+                {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
+              </NavCondense>
+            </NavFooter>
           </MainNav>
         </Box>
       );

packages/strapi-design-system/src/MainNav/NavFooter.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '../Box';
+
+const BoxRelative = styled(Box)`
+  position: relative;
+`;
+
+export const NavFooter = ({ children }) => {
+  return <BoxRelative>{children}</BoxRelative>;
+};
+
+NavFooter.displayName = 'NavFooter';
+
+NavFooter.propTypes = {
+  children: PropTypes.node.isRequired,
+};

packages/strapi-design-system/src/MainNav/NavLink.js

@@ -62,13 +62,13 @@ const MainNavRow = styled(Flex)`
 `;
 
 const CustomBadge = styled(Badge)`
-  ${({ condensed }) =>
+  ${({ theme, condensed }) =>
     condensed &&
     `
 	  position: absolute;
-    transform: translate(35%, -50%);
-    top: 0;
-    right: 0;
+    // Values based on visual aspect 
+    top: -${theme.spaces[3]};
+    right:  -${theme.spaces[1]};
   `}
 
   ${Typography} {