Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

docs/docs/developer/frontend/best-practices.mdx

@@ -236,6 +236,35 @@ function Form() {
 }
 ```
 
+## Component as props
+
+Try as much as possible to pass uninstanciated components as props, so chilren can decide on their own of what props they need to pass.
+
+The most common example for that is icon components : 
+
+```tsx
+function SomeParentComponent() {
+  return (
+    <MyComponent Icon={MyIcon} />
+  )
+}
+
+// In MyComponent
+function MyComponent({ MyIcon }: { MyIcon: IconComponent }) {
+  const theme = useTheme();
+
+  return (
+    <div>
+      <MyIcon size={theme.icon.size.md}>
+    </div>
+  )
+}
+```
+
+For React to understand that the component is a component, you need to use PascalCase, to later instanciate it with `<MyIcon>`
+
+```tsx
+
 ## Prop Drilling: Keep It Minimal
 
 Prop drilling, in the React context, refers to the practice of passing state variables and their setters through multiple component layers, even if intermediary components don't use them. While sometimes necessary, excessive prop drilling can lead to: