paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

Improve docs

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-05-16 18:27:15 +01:00
parent 148b354b93
commit 384a4892ab
6 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/components/menu/page.mdx
+45
View File
@@ -155,3 +155,48 @@ You can additionally configure how quickly the menu opens on hover using the `de
</Menu.Portal>
</Menu.Root>`}
/>
### Nested navigation
You can nest menus to create a more complex navigation structure.
<Snippet
align="center"
py={4}
open
preview={<MenuSnippet story="Submenu" />}
code={`<Menu.Trigger
render={props => (
<Button
{...props}
size="small"
variant="secondary"
iconEnd={<Icon name="chevron-down" />}
>
Menu
</Button>
)}
/>
<Menu.Portal>
<Menu.Positioner sideOffset={8} align="start">
<Menu.Popup>
<Menu.Item>Settings</Menu.Item>
<Menu.Item>Invite new members</Menu.Item>
<Menu.Item>Download app</Menu.Item>
<Menu.Item>Log out</Menu.Item>
<Menu.Root>
<Menu.SubmenuTrigger>Submenu</Menu.SubmenuTrigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup>
<Menu.Item>Submenu Item 1</Menu.Item>
<Menu.Item>Submenu Item 2</Menu.Item>
<Menu.Item>Submenu Item 3</Menu.Item>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>`}
/>
packages/canon/css/components.css
+5 -4
View File
@@ -701,6 +701,7 @@
transform-origin: var(--transform-origin);
max-width: min(var(--available-width), 340px);
max-height: min(var(--available-height), 500px);
padding-bottom: var(--canon-space-1);
border-radius: .375rem;
outline: none;
flex-direction: column;
@@ -735,10 +736,6 @@
margin-top: var(--canon-space-1);
}
&:last-child {
margin-bottom: var(--canon-space-1);
}
&[data-highlighted] {
background-color: var(--canon-gray-3);
}
@@ -765,6 +762,10 @@
color: var(--canon-fg-secondary);
}
&:first-child {
margin-top: var(--canon-space-1);
}
&[data-popup-open], &[data-highlighted] {
background-color: var(--canon-gray-3);
packages/canon/css/menu.css
+5 -4
View File
@@ -9,6 +9,7 @@
transform-origin: var(--transform-origin);
max-width: min(var(--available-width), 340px);
max-height: min(var(--available-height), 500px);
padding-bottom: var(--canon-space-1);
border-radius: .375rem;
outline: none;
flex-direction: column;
@@ -43,10 +44,6 @@
margin-top: var(--canon-space-1);
}
&:last-child {
margin-bottom: var(--canon-space-1);
}
&[data-highlighted] {
background-color: var(--canon-gray-3);
}
@@ -73,6 +70,10 @@
color: var(--canon-fg-secondary);
}
&:first-child {
margin-top: var(--canon-space-1);
}
&[data-popup-open], &[data-highlighted] {
background-color: var(--canon-gray-3);
packages/canon/css/styles.css
+5 -4
View File
@@ -9925,6 +9925,7 @@
transform-origin: var(--transform-origin);
max-width: min(var(--available-width), 340px);
max-height: min(var(--available-height), 500px);
padding-bottom: var(--canon-space-1);
border-radius: .375rem;
outline: none;
flex-direction: column;
@@ -9959,10 +9960,6 @@
margin-top: var(--canon-space-1);
}
&:last-child {
margin-bottom: var(--canon-space-1);
}
&[data-highlighted] {
background-color: var(--canon-gray-3);
}
@@ -9989,6 +9986,10 @@
color: var(--canon-fg-secondary);
}
&:first-child {
margin-top: var(--canon-space-1);
}
&[data-popup-open], &[data-highlighted] {
background-color: var(--canon-gray-3);
packages/canon/src/components/Menu/Menu.stories.tsx
+5 -5
View File
@@ -16,7 +16,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Menu } from './Menu';
import { Text, Icon, Button } from '../../index';
import { Text, Icon, Button, Flex } from '../../index';
import { useState } from 'react';
const meta = {
@@ -131,7 +131,7 @@ export const SubmenuCombobox = () => {
const [selectedValues, setSelectedValues] = useState<string[]>([]);
return (
<>
<Flex direction="column" gap="1" align="start">
<Text style={{ marginBottom: 16 }}>
{selectedValues.length === 0
? 'Which is your favorite fruit?'
@@ -173,7 +173,7 @@ export const SubmenuCombobox = () => {
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</>
</Flex>
);
};
@@ -181,7 +181,7 @@ export const SubmenuComboboxMultiselect = () => {
const [selectedValues, setSelectedValues] = useState<string[]>([]);
return (
<>
<Flex direction="column" gap="1" align="start">
<Text style={{ marginBottom: 16 }}>
{selectedValues.length === 0
? 'Tell us what fruits you like.'
@@ -226,6 +226,6 @@ export const SubmenuComboboxMultiselect = () => {
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</>
</Flex>
);
};
packages/canon/src/components/Menu/Menu.styles.css
+5 -4
View File
@@ -16,6 +16,7 @@
max-height: min(var(--available-height), 500px);
transition: transform 150ms, opacity 150ms;
position: relative;
padding-bottom: var(--canon-space-1);
&[data-starting-style],
&[data-ending-style] {
@@ -44,10 +45,6 @@
margin-top: var(--canon-space-1);
}
&:last-child {
margin-bottom: var(--canon-space-1);
}
&[data-highlighted] {
background-color: var(--canon-gray-3);
}
@@ -74,6 +71,10 @@
color: var(--canon-fg-secondary);
}
&:first-child {
margin-top: var(--canon-space-1);
}
&[data-popup-open],
&[data-highlighted] {
background-color: var(--canon-gray-3);