fix: fix ui console warnings (#601)

* fix: fix ui console warnings

* fix: fix formatting in wrapper file

* fix: fix formatting in wrapper file

Author: mateusz-kleszcz

admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/index.tsx

@@ -23,7 +23,7 @@ export const AdditionalFields = () => {
   return (
     <>
       <Grid.Root gap={5} paddingTop={1} paddingBottom={1}>
-        <Grid.Item col={12} lg={12}>
+        <Grid.Item col={12}>
           <Divider width="100%" />
         </Grid.Item>
       </Grid.Root>
@@ -36,7 +36,7 @@ export const AdditionalFields = () => {
       </Grid.Root>
 
       <Grid.Root gap={5} paddingTop={1} paddingBottom={1}>
-        <Grid.Item col={12} lg={12}>
+        <Grid.Item col={12}>
           <Divider width="100%" />
         </Grid.Item>
       </Grid.Root>

admin/src/pages/HomePage/components/NavigationItemForm/components/PathField/index.tsx

@@ -71,7 +71,7 @@ export const PathField: React.FC<PathFieldProps> = ({
           onChange={(eventOrPath: FormChangeEvent, value?: any) =>
             handleChange(eventOrPath, value, onChange)
           }
-          value={values.type === 'EXTERNAL' ? values.externalPath : values.path}
+          value={(values.type === 'EXTERNAL' ? values.externalPath : values.path) || ''}
           width="100%"
         />
       </Field>

admin/src/pages/HomePage/components/NavigationItemForm/components/TitleField/index.tsx

@@ -27,7 +27,7 @@ export const TitleField = () => {
           onChange={(eventOrPath: FormChangeEvent, value?: any) =>
             handleChange(eventOrPath, value, onChange)
           }
-          value={values.title}
+          value={values.title || ''}
         />
       </Field>
     </Grid.Item>

admin/src/pages/HomePage/components/NavigationItemListItem/ItemCardBadge/index.ts

@@ -1,7 +1,9 @@
 import { Badge } from '@strapi/design-system';
 import styled from 'styled-components';
 
-export const ItemCardBadge = styled(Badge)`
+export const ItemCardBadge = styled(Badge).withConfig({
+  shouldForwardProp: (prop) => !['small'].includes(prop),
+})`
   border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
 
   ${({ small, theme }) =>

admin/src/pages/HomePage/components/NavigationItemListItem/Wrapper.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-const Wrapper = styled.div<{
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !['level', 'isLast'].includes(prop),
+})<{
   level?: number;
   isLast?: boolean;
 }>`
@@ -11,34 +13,34 @@ const Wrapper = styled.div<{
   ${({ level, theme, isLast }) =>
     level &&
     `
-		&::before {
-			${!isLast && 'content: "";'}
-			display: block;
-			top: ${theme.spaces[1]};
-			left: -24px;
-			position: absolute;
-			height: calc(100% + ${theme.spaces[2]});
-			width: 19px;
-			border: 0px solid transparent;
-			border-left: 4px solid ${theme.colors.neutral300};
-		}
+      &::before {
+        ${!isLast && 'content: "";'}
+        display: block;
+        top: ${theme.spaces[1]};
+        left: -24px;
+        position: absolute;
+        height: calc(100% + ${theme.spaces[2]});
+        width: 19px;
+        border: 0px solid transparent;
+        border-left: 4px solid ${theme.colors.neutral300};
+      }
 
-		&::after {
-			content: "";
-			display: block;
-			height: 22px;
-			width: 19px;
-			position: absolute;
-			top: ${theme.spaces[1]};
-			left: -${theme.spaces[6]};
-			
-			background: transparent;
-			border: 4px solid ${theme.colors.neutral300};
-			border-top: transparent;
-			border-right: transparent;
-			border-radius: 0 0 0 100%;
-		}
-	`};
+      &::after {
+        content: "";
+        display: block;
+        height: 22px;
+        width: 19px;
+        position: absolute;
+        top: ${theme.spaces[1]};
+        left: -${theme.spaces[6]};
+        
+        background: transparent;
+        border: 4px solid ${theme.colors.neutral300};
+        border-top: transparent;
+        border-right: transparent;
+        border-radius: 0 0 0 100%;
+      }
+    `};
 `;
 
 export default Wrapper;