fix: left menu

strapi · May 7, 2024 · 42cd99f · 42cd99f
1 parent 33dab7a
commit 42cd99f
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 94 deletions.
diff --git a/examples/getstarted/src/plugins/local-plugin/admin/src/components/PluginIcon/index.jsx b/examples/getstarted/src/plugins/local-plugin/admin/src/components/PluginIcon/index.jsx
diff --git a/examples/getstarted/src/plugins/local-plugin/admin/src/index.js b/examples/getstarted/src/plugins/local-plugin/admin/src/index.js
@@ -1,5 +1,6 @@
+import { PuzzlePiece } from '@strapi/icons';
+
 import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
-import PluginIcon from './components/PluginIcon';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
@@ -9,7 +10,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: PuzzlePiece,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',
@@ -57,7 +58,7 @@ export default {
           defaultMessage: `custom${upcasedType}`,
         },
         components: {
-          Input: async () => import('./components/PluginIcon'),
+          Input: PuzzlePiece,
         },
       };
 

diff --git a/examples/plugins/workspace-plugin/admin/src/components/PluginIcon/index.jsx b/examples/plugins/workspace-plugin/admin/src/components/PluginIcon/index.jsx
diff --git a/examples/plugins/workspace-plugin/admin/src/index.js b/examples/plugins/workspace-plugin/admin/src/index.js
@@ -1,4 +1,5 @@
-import PluginIcon from './components/PluginIcon';
+import { PuzzlePiece } from '@strapi/icons';
+
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
@@ -8,7 +9,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: PuzzlePiece,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'My plugin',

diff --git a/packages/core/admin/admin/src/components/Layouts/GridLayout.tsx b/packages/core/admin/admin/src/components/Layouts/GridLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Box } from '@strapi/design-system';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 interface GridColSize {
   S: number;

diff --git a/packages/core/admin/admin/src/components/Layouts/Layout.tsx b/packages/core/admin/admin/src/components/Layouts/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Box } from '@strapi/design-system';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { ActionLayout } from './ActionLayout';
 import { ContentLayout } from './ContentLayout';
@@ -13,9 +13,9 @@ interface LayoutProps {
   sideNav?: React.ReactNode;
 }
 
-const GridContainer = styled(Box)<{ hasSideNav: boolean }>`
+const GridContainer = styled(Box)<{ $hasSideNav: boolean }>`
   display: grid;
-  grid-template-columns: ${({ hasSideNav }) => (hasSideNav ? `auto 1fr` : '1fr')};
+  grid-template-columns: ${({ $hasSideNav }) => ($hasSideNav ? `auto 1fr` : '1fr')};
 `;
 
 const OverflowingItem = styled(Box)`
@@ -24,7 +24,7 @@ const OverflowingItem = styled(Box)`
 
 const RootLayout = ({ sideNav, children }: LayoutProps) => {
   return (
-    <GridContainer hasSideNav={Boolean(sideNav)}>
+    <GridContainer $hasSideNav={Boolean(sideNav)}>
       {sideNav}
       <OverflowingItem paddingBottom={10}>{children}</OverflowingItem>
     </GridContainer>

diff --git a/packages/core/admin/admin/src/components/LeftMenu.tsx b/packages/core/admin/admin/src/components/LeftMenu.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import { Divider, Flex } from '@strapi/design-system';
+import { Divider, Flex, FlexComponent } from '@strapi/design-system';
 import { Feather, Lock, House } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { useAuth } from '../features/Auth';
 import { useTracking } from '../features/Tracking';
@@ -22,7 +22,7 @@ const NewNavLinkBadge = styled(NavLink.Badge)`
   }
 `;
 
-const NavListWrapper = styled(Flex)`
+const NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`
   overflow-y: auto;
 `;
 
@@ -51,16 +51,16 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
 
       <Divider />
 
-      <NavListWrapper as="ul" gap={3} direction="column" flex={1} paddingTop={3} paddingBottom={3}>
+      <NavListWrapper tag="ul" gap={3} direction="column" flex={1} paddingTop={3} paddingBottom={3}>
         <Flex tag="li">
           <NavLink.Link
             to="/"
             onClick={() => handleClickOnLink('/')}
             aria-label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}
           >
             <NavLink.Tooltip label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}>
-              <NavLink.Icon>
-                <House fill="neutral500" />
+              <NavLink.Icon label={formatMessage({ id: 'global.home', defaultMessage: 'Home' })}>
+                <House width="2rem" height="2rem" fill="neutral500" />
               </NavLink.Icon>
             </NavLink.Tooltip>
           </NavLink.Link>
@@ -80,8 +80,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
                 defaultMessage: 'Content Manager',
               })}
             >
-              <NavLink.Icon>
-                <Feather fill="neutral500" />
+              <NavLink.Icon
+                label={formatMessage({
+                  id: 'global.content-manager',
+                  defaultMessage: 'Content Manager',
+                })}
+              >
+                <Feather width="2rem" height="2rem" fill="neutral500" />
               </NavLink.Icon>
             </NavLink.Tooltip>
           </NavLink.Link>
@@ -104,8 +109,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
                     aria-label={labelValue}
                   >
                     <NavLink.Tooltip label={labelValue}>
-                      <NavLink.Icon>
-                        <LinkIcon fill="neutral500" />
+                      <NavLink.Icon label={labelValue}>
+                        <LinkIcon width="2rem" height="2rem" fill="neutral500" />
                       </NavLink.Icon>
                       {badgeContent && (
                         <NavLink.Badge
@@ -141,8 +146,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
                     onClick={() => handleClickOnLink(link.to)}
                   >
                     <NavLink.Tooltip label={labelValue}>
-                      <NavLink.Icon>
-                        <LinkIcon fill="neutral500" />
+                      <NavLink.Icon label={labelValue}>
+                        <LinkIcon width="2rem" height="2rem" fill="neutral500" />
                       </NavLink.Icon>
                       {badgeContent && (
                         <NewNavLinkBadge label={badgeContent} backgroundColor="primary600">

diff --git a/packages/core/admin/admin/src/components/MainNav/MainNav.tsx b/packages/core/admin/admin/src/components/MainNav/MainNav.tsx
@@ -1,14 +1,14 @@
-import { Flex, FlexProps } from '@strapi/design-system';
-import styled from 'styled-components';
+import { Flex, FlexComponent, FlexProps } from '@strapi/design-system';
+import { styled } from 'styled-components';
 
-const MainNavWrapper = styled(Flex)`
+const MainNavWrapper = styled<FlexComponent<'nav'>>(Flex)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
 
 const MainNav = (props: FlexProps<'nav'>) => (
   <MainNavWrapper
     alignItems="normal"
-    as="nav"
+    tag="nav"
     background="neutral0"
     direction="column"
     height="100vh"

diff --git a/packages/core/admin/admin/src/components/MainNav/NavLink.tsx b/packages/core/admin/admin/src/components/MainNav/NavLink.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Tooltip, Flex, Badge, BadgeProps } from '@strapi/design-system';
+import { Tooltip, Flex, Badge, BadgeProps, AccessibleIcon } from '@strapi/design-system';
 import { NavLink as RouterLink, LinkProps } from 'react-router-dom';
 import { styled } from 'styled-components';
 
@@ -15,6 +15,8 @@ const MainNavLinkWrapper = styled(RouterLink)`
   color: ${({ theme }) => theme.colors.neutral500};
   position: relative;
   width: fit-content;
+  padding-block: 0.6rem;
+  padding-inline: 0.6rem;
 
   &:hover,
   &.active {
@@ -48,25 +50,19 @@ const LinkImpl = ({ children, ...props }: LinkProps) => {
 const TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {
   return (
     <Tooltip position={position} label={label}>
-      <Flex justifyContent="center" width={7} height={7}>
-        {children}
-      </Flex>
+      <span>{children}</span>
     </Tooltip>
   );
 };
 
 /* -------------------------------------------------------------------------------------------------
  * Icon
  * -----------------------------------------------------------------------------------------------*/
-const IconImpl = ({ children }: { children: React.ReactNode }) => {
+const IconImpl = ({ label, children }: { label: string; children: React.ReactNode }) => {
   if (!children) {
     return null;
   }
-  return (
-    <Flex justifyContent="center" aria-hidden tag="span" width={5} height={5}>
-      {children}
-    </Flex>
-  );
+  return <AccessibleIcon label={label}>{children}</AccessibleIcon>;
 };
 
 /* -------------------------------------------------------------------------------------------------

diff --git a/packages/core/content-type-builder/admin/src/components/PluginIcon.tsx b/packages/core/content-type-builder/admin/src/components/PluginIcon.tsx
diff --git a/packages/core/content-type-builder/admin/src/index.ts b/packages/core/content-type-builder/admin/src/index.ts
@@ -1,6 +1,7 @@
+import { Layout } from '@strapi/icons';
+
 import pluginPkg from '../../package.json';
 
-import { PluginIcon } from './components/PluginIcon';
 import { PERMISSIONS } from './constants';
 import { pluginId } from './pluginId';
 import { reducers } from './reducers';
@@ -15,7 +16,7 @@ export default {
     app.addReducers(reducers);
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: Layout,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Content Types Builder',

diff --git a/packages/core/strapi/src/cli/commands/plugin/init/files/admin.ts b/packages/core/strapi/src/cli/commands/plugin/init/files/admin.ts
@@ -4,7 +4,7 @@ import { outdent } from 'outdent';
 const PLUGIN_ICON_CODE = outdent`
 import { Puzzle } from '@strapi/icons';
 
-const PluginIcon = () => <Puzzle />;
+const PluginIcon = Puzzle;
 
 export { PluginIcon };
 `;

diff --git a/packages/core/upload/admin/src/components/PluginIcon/index.jsx b/packages/core/upload/admin/src/components/PluginIcon/index.jsx
diff --git a/packages/core/upload/admin/src/index.js b/packages/core/upload/admin/src/index.js
@@ -1,8 +1,9 @@
+import { Images } from '@strapi/icons';
+
 import pluginPkg from '../../package.json';
 
 import { MediaLibraryDialog } from './components/MediaLibraryDialog';
 import { MediaLibraryInput } from './components/MediaLibraryInput';
-import PluginIcon from './components/PluginIcon';
 import { PERMISSIONS } from './constants';
 import pluginId from './pluginId';
 import getTrad from './utils/getTrad';
@@ -14,7 +15,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: Images,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Media Library',

diff --git a/packages/plugins/cloud/admin/src/components/PluginIcon.tsx b/packages/plugins/cloud/admin/src/components/PluginIcon.tsx
diff --git a/packages/plugins/cloud/admin/src/index.ts b/packages/plugins/cloud/admin/src/index.ts
@@ -1,7 +1,8 @@
 /* eslint-disable check-file/filename-naming-convention */
 
+import { Cloud } from '@strapi/icons';
+
 import { Initializer } from './components/Initializer';
-import { PluginIcon } from './components/PluginIcon';
 import { pluginId } from './pluginId';
 import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
@@ -16,7 +17,7 @@ export default {
     if (backendURL?.includes('localhost')) {
       app.addMenuLink({
         to: `plugins/${pluginId}`,
-        icon: PluginIcon,
+        icon: Cloud,
         intlLabel: {
           id: `${pluginId}.plugin.name`,
           defaultMessage: name,