From 3503633d52c94353101bf169f233a92a00ba0c64 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Mon, 2 Feb 2026 17:31:59 +0100 Subject: [PATCH 1/6] Added icons for components --- apps/website/pages/_app.tsx | 2 + .../screens/common/componentsList.json | 281 ++++++++++++++---- apps/website/screens/common/pagesList.tsx | 3 + 3 files changed, 234 insertions(+), 52 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 7fa01ce30..279bc72ae 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -43,6 +43,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo href: link.path, selected: matchPaths(link.path), badge: link.status && link.status !== "stable" ? : undefined, + icon: link.icon, renderItem: ({ children }: { children: ReactNode }) => ( {children} @@ -55,6 +56,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo if ("links" in link) { return { label: link.label, + icon: link.icon, items: normalizeNavTabs(link.links), } as GroupItem; } diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 2d33c15f3..0e9bf10be 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -1,143 +1,320 @@ [ - { "label": "Accordion", "path": "/components/accordion", "status": "stable" }, - { "label": "Alert", "path": "/components/alert", "status": "stable" }, + { + "label": "Accordion", + "path": "/components/accordion", + "status": "stable", + "icon": "menu_open" + }, + { + "label": "Alert", + "path": "/components/alert", + "status": "stable", + "icon": "filled_error" + }, { "label": "Application layout", + "icon": "view_quilt", "links": [ { "label": "Application layout", "path": "/components/application-layout", - "status": "stable" + "status": "stable", + "icon": "dashboard" + }, + { + "label": "Footer", + "path": "/components/footer", + "status": "stable", + "icon": "view_agenda" + }, + { + "label": "Header", + "path": "/components/header", + "status": "stable", + "icon": "view_day" }, - { "label": "Footer", "path": "/components/footer", "status": "stable" }, - { "label": "Header", "path": "/components/header", "status": "stable" }, - { "label": "Sidenav", "path": "/components/sidenav", "status": "stable" } + { + "label": "Sidenav", + "path": "/components/sidenav", + "status": "stable", + "icon": "view_sidebar" + } ] }, { "label": "Avatar", "path": "/components/avatar", - "status": "experimental" + "status": "experimental", + "icon": "filled_account_circle" }, { "label": "Badge", "path": "/components/badge", - "status": "stable" + "status": "stable", + "icon": "filled_label" + }, + { + "label": "Bleed", + "path": "/components/bleed", + "status": "stable", + "icon": "vertical_align_center" }, - { "label": "Bleed", "path": "/components/bleed", "status": "stable" }, { "label": "Breadcrumbs", "path": "/components/breadcrumbs", - "status": "stable" + "status": "stable", + "icon": "arrow_back" }, { "label": "Bulleted list", "path": "/components/bulleted-list", - "status": "stable" + "status": "stable", + "icon": "format_list_bulleted" + }, + { + "label": "Button", + "path": "/components/button", + "status": "stable", + "icon": "smart_button" + }, + { + "label": "Card", + "path": "/components/card", + "status": "stable", + "icon": "credit_card" + }, + { + "label": "Checkbox", + "path": "/components/checkbox", + "status": "stable", + "icon": "filled_check_box" + }, + { + "label": "Chip", + "path": "/components/chip", + "status": "stable", + "icon": "toggle_off" }, - { "label": "Button", "path": "/components/button", "status": "stable" }, - { "label": "Card", "path": "/components/card", "status": "stable" }, - { "label": "Checkbox", "path": "/components/checkbox", "status": "stable" }, - { "label": "Chip", "path": "/components/chip", "status": "stable" }, { "label": "Container", "path": "/components/container", - "status": "stable" + "status": "stable", + "icon": "crop_square" }, { "label": "Contextual menu", "path": "/components/contextual-menu", - "status": "stable" + "status": "stable", + "icon": "notes" }, { "label": "Data grid", "path": "/components/data-grid", - "status": "new" + "status": "new", + "icon": "table_rows" }, { "label": "Date input", "path": "/components/date-input", - "status": "stable" + "status": "stable", + "icon": "date_range" + }, + { + "label": "Dialog", + "path": "/components/dialog", + "status": "stable", + "icon": "open_in_new" }, - { "label": "Dialog", "path": "/components/dialog", "status": "stable" }, { "label": "Divider", "path": "/components/divider", - "status": "stable" + "status": "stable", + "icon": "border_left" + }, + { + "label": "Dropdown", + "path": "/components/dropdown", + "status": "stable", + "icon": "south" }, - { "label": "Dropdown", "path": "/components/dropdown", "status": "stable" }, { "label": "File input", "path": "/components/file-input", - "status": "stable" + "status": "stable", + "icon": "filled_file_upload" + }, + { + "label": "Flex", + "path": "/components/flex", + "status": "stable", + "icon": "view_stream" + }, + { + "label": "Grid", + "path": "/components/grid", + "status": "stable", + "icon": "grid_on" + }, + { + "label": "Heading", + "path": "/components/heading", + "status": "stable", + "icon": "title" + }, + { + "label": "Image", + "path": "/components/image", + "status": "stable", + "icon": "image" + }, + { + "label": "Inset", + "path": "/components/inset", + "status": "stable", + "icon": "padding" + }, + { + "label": "Link", + "path": "/components/link", + "status": "stable", + "icon": "link" + }, + { + "label": "Nav tabs", + "path": "/components/nav-tabs", + "status": "stable", + "icon": "tab" }, - { "label": "Flex", "path": "/components/flex", "status": "stable" }, - { "label": "Grid", "path": "/components/grid", "status": "stable" }, - { "label": "Heading", "path": "/components/heading", "status": "stable" }, - { "label": "Image", "path": "/components/image", "status": "stable" }, - { "label": "Inset", "path": "/components/inset", "status": "stable" }, - { "label": "Link", "path": "/components/link", "status": "stable" }, - { "label": "Nav tabs", "path": "/components/nav-tabs", "status": "stable" }, { "label": "Number input", "path": "/components/number-input", - "status": "stable" + "status": "stable", + "icon": "pin" + }, + { + "label": "Paginator", + "path": "/components/paginator", + "status": "stable", + "icon": "last_page" + }, + { + "label": "Paragraph", + "path": "/components/paragraph", + "status": "stable", + "icon": "notes" }, - { "label": "Paginator", "path": "/components/paginator", "status": "stable" }, - { "label": "Paragraph", "path": "/components/paragraph", "status": "stable" }, { "label": "Password input", "path": "/components/password-input", - "status": "stable" + "status": "stable", + "icon": "password" }, { "label": "Progress bar", "path": "/components/progress-bar", - "status": "stable" + "status": "stable", + "icon": "linear_scale" + }, + { + "label": "Quick nav", + "path": "/components/quick-nav", + "status": "stable", + "icon": "menu" }, - { "label": "Quick nav", "path": "/components/quick-nav", "status": "stable" }, { "label": "Radio group", "path": "/components/radio-group", - "status": "stable" + "status": "stable", + "icon": "radio_button_checked" }, { "label": "Resultset table", "path": "/components/resultset-table", - "status": "stable" + "status": "stable", + "icon": "table_chart" + }, + { + "label": "Select", + "path": "/components/select", + "status": "stable", + "icon": "expand_circle_down" + }, + { + "label": "Slider", + "path": "/components/slider", + "status": "stable", + "icon": "sliders" + }, + { + "label": "Spinner", + "path": "/components/spinner", + "status": "stable", + "icon": "autorenew" }, - { "label": "Select", "path": "/components/select", "status": "stable" }, - { "label": "Slider", "path": "/components/slider", "status": "stable" }, - { "label": "Spinner", "path": "/components/spinner", "status": "stable" }, { "label": "Status light", "path": "/components/status-light", - "status": "stable" + "status": "stable", + "icon": "filled_circle" + }, + { + "label": "Switch", + "path": "/components/switch", + "status": "stable", + "icon": "toggle_on" + }, + { + "label": "Table", + "path": "/components/table", + "status": "stable", + "icon": "table_chart" + }, + { + "label": "Tabs", + "path": "/components/tabs", + "status": "stable", + "icon": "tabs" }, - { "label": "Switch", "path": "/components/switch", "status": "stable" }, - { "label": "Table", "path": "/components/table", "status": "stable" }, - { "label": "Tabs", "path": "/components/tabs", "status": "stable" }, { "label": "Text input", "path": "/components/text-input", - "status": "stable" + "status": "stable", + "icon": "input" + }, + { + "label": "Textarea", + "path": "/components/textarea", + "status": "stable", + "icon": "subject" + }, + { + "label": "Toast", + "path": "/components/toast", + "status": "stable", + "icon": "chat_bubble" }, - { "label": "Textarea", "path": "/components/textarea", "status": "stable" }, - { "label": "Toast", "path": "/components/toast", "status": "stable" }, { "label": "Toggle group", "path": "/components/toggle-group", - "status": "stable" + "status": "stable", + "icon": "toggle_off" }, { "label": "Tooltip", "path": "/components/tooltip", - "status": "stable" + "status": "stable", + "icon": "info" }, { "label": "Typography", "path": "/components/typography", - "status": "stable" + "status": "stable", + "icon": "text_fields" }, - { "label": "Wizard", "path": "/components/wizard", "status": "stable" } + { + "label": "Wizard", + "path": "/components/wizard", + "status": "stable", + "icon": "auto_fix_high" + } ] diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index ce2f32205..9036ccada 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -1,3 +1,4 @@ +import { SVG } from "../../../../packages/lib/src/common/utils"; import componentsList from "./componentsList.json"; export type ComponentStatus = "experimental" | "new" | "stable" | "legacy" | "deprecated"; @@ -6,11 +7,13 @@ export type LinkDetails = { label: string; path: string; status?: ComponentStatus; + icon?: string | SVG; }; export type LinksSectionDetails = { label: string; links: (LinkDetails | LinksSectionDetails)[]; + icon?: string | SVG; }; type NavigationLinks = { From 937f2615b069e1d0a998221620e7a5b53be07b63 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 3 Feb 2026 14:33:31 +0100 Subject: [PATCH 2/6] Grouped doc components and added extra functionality to groupItems to allow being opened by default --- apps/website/pages/_app.tsx | 2 +- .../screens/common/componentsList.json | 624 ++++++++++-------- .../sidenav/code/SidenavCodePage.tsx | 1 + packages/lib/src/base-menu/GroupItem.tsx | 6 +- packages/lib/src/base-menu/types.ts | 1 + packages/lib/src/base-menu/useGroupItem.ts | 4 +- packages/lib/src/sidenav/types.ts | 1 + 7 files changed, 347 insertions(+), 292 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 279bc72ae..f81803a4b 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -92,7 +92,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems; return { title: section.label, - items, + items: section.label === "Components" ? items.map((item) => ({ ...item, defaultOpen: true })) : items, }; }).filter((section) => section.items.length > 0); }, [currentPath, filter]); diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 0e9bf10be..2bc37d9a4 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -1,320 +1,368 @@ [ { - "label": "Accordion", - "path": "/components/accordion", - "status": "stable", - "icon": "menu_open" - }, - { - "label": "Alert", - "path": "/components/alert", - "status": "stable", - "icon": "filled_error" - }, - { - "label": "Application layout", - "icon": "view_quilt", + "label": "Content", + "icon": "folder_open", "links": [ { - "label": "Application layout", - "path": "/components/application-layout", + "label": "Accordion", + "path": "/components/accordion", "status": "stable", - "icon": "dashboard" + "icon": "menu_open" }, { - "label": "Footer", - "path": "/components/footer", + "label": "Avatar", + "path": "/components/avatar", + "status": "experimental", + "icon": "filled_account_circle" + }, + { + "label": "Card", + "path": "/components/card", "status": "stable", - "icon": "view_agenda" + "icon": "credit_card" }, { - "label": "Header", - "path": "/components/header", + "label": "Dialog", + "path": "/components/dialog", "status": "stable", - "icon": "view_day" + "icon": "open_in_new" }, { - "label": "Sidenav", - "path": "/components/sidenav", + "label": "Divider", + "path": "/components/divider", "status": "stable", - "icon": "view_sidebar" + "icon": "border_left" + }, + { + "label": "Image", + "path": "/components/image", + "status": "stable", + "icon": "image" + }, + { + "label": "Wizard", + "path": "/components/wizard", + "status": "stable", + "icon": "auto_fix_high" } ] }, { - "label": "Avatar", - "path": "/components/avatar", - "status": "experimental", - "icon": "filled_account_circle" - }, - { - "label": "Badge", - "path": "/components/badge", - "status": "stable", - "icon": "filled_label" - }, - { - "label": "Bleed", - "path": "/components/bleed", - "status": "stable", - "icon": "vertical_align_center" - }, - { - "label": "Breadcrumbs", - "path": "/components/breadcrumbs", - "status": "stable", - "icon": "arrow_back" - }, - { - "label": "Bulleted list", - "path": "/components/bulleted-list", - "status": "stable", - "icon": "format_list_bulleted" - }, - { - "label": "Button", - "path": "/components/button", - "status": "stable", - "icon": "smart_button" - }, - { - "label": "Card", - "path": "/components/card", - "status": "stable", - "icon": "credit_card" - }, - { - "label": "Checkbox", - "path": "/components/checkbox", - "status": "stable", - "icon": "filled_check_box" - }, - { - "label": "Chip", - "path": "/components/chip", - "status": "stable", - "icon": "toggle_off" - }, - { - "label": "Container", - "path": "/components/container", - "status": "stable", - "icon": "crop_square" - }, - { - "label": "Contextual menu", - "path": "/components/contextual-menu", - "status": "stable", - "icon": "notes" - }, - { - "label": "Data grid", - "path": "/components/data-grid", - "status": "new", - "icon": "table_rows" - }, - { - "label": "Date input", - "path": "/components/date-input", - "status": "stable", - "icon": "date_range" - }, - { - "label": "Dialog", - "path": "/components/dialog", - "status": "stable", - "icon": "open_in_new" - }, - { - "label": "Divider", - "path": "/components/divider", - "status": "stable", - "icon": "border_left" - }, - { - "label": "Dropdown", - "path": "/components/dropdown", - "status": "stable", - "icon": "south" - }, - { - "label": "File input", - "path": "/components/file-input", - "status": "stable", - "icon": "filled_file_upload" - }, - { - "label": "Flex", - "path": "/components/flex", - "status": "stable", - "icon": "view_stream" - }, - { - "label": "Grid", - "path": "/components/grid", - "status": "stable", - "icon": "grid_on" - }, - { - "label": "Heading", - "path": "/components/heading", - "status": "stable", - "icon": "title" - }, - { - "label": "Image", - "path": "/components/image", - "status": "stable", - "icon": "image" - }, - { - "label": "Inset", - "path": "/components/inset", - "status": "stable", - "icon": "padding" - }, - { - "label": "Link", - "path": "/components/link", - "status": "stable", - "icon": "link" - }, - { - "label": "Nav tabs", - "path": "/components/nav-tabs", - "status": "stable", - "icon": "tab" - }, - { - "label": "Number input", - "path": "/components/number-input", - "status": "stable", - "icon": "pin" - }, - { - "label": "Paginator", - "path": "/components/paginator", - "status": "stable", - "icon": "last_page" - }, - { - "label": "Paragraph", - "path": "/components/paragraph", - "status": "stable", - "icon": "notes" - }, - { - "label": "Password input", - "path": "/components/password-input", - "status": "stable", - "icon": "password" - }, - { - "label": "Progress bar", - "path": "/components/progress-bar", - "status": "stable", - "icon": "linear_scale" - }, - { - "label": "Quick nav", - "path": "/components/quick-nav", - "status": "stable", - "icon": "menu" - }, - { - "label": "Radio group", - "path": "/components/radio-group", - "status": "stable", - "icon": "radio_button_checked" - }, - { - "label": "Resultset table", - "path": "/components/resultset-table", - "status": "stable", - "icon": "table_chart" - }, - { - "label": "Select", - "path": "/components/select", - "status": "stable", - "icon": "expand_circle_down" - }, - { - "label": "Slider", - "path": "/components/slider", - "status": "stable", - "icon": "sliders" - }, - { - "label": "Spinner", - "path": "/components/spinner", - "status": "stable", - "icon": "autorenew" - }, - { - "label": "Status light", - "path": "/components/status-light", - "status": "stable", - "icon": "filled_circle" - }, - { - "label": "Switch", - "path": "/components/switch", - "status": "stable", - "icon": "toggle_on" - }, - { - "label": "Table", - "path": "/components/table", - "status": "stable", - "icon": "table_chart" - }, - { - "label": "Tabs", - "path": "/components/tabs", - "status": "stable", - "icon": "tabs" - }, - { - "label": "Text input", - "path": "/components/text-input", - "status": "stable", - "icon": "input" + "label": "Data visualization", + "icon": "insert_chart", + "links": [ + { + "label": "Data grid", + "path": "/components/data-grid", + "status": "new", + "icon": "table_rows" + }, + { + "label": "Paginator", + "path": "/components/paginator", + "status": "stable", + "icon": "last_page" + }, + { + "label": "Resultset table", + "path": "/components/resultset-table", + "status": "stable", + "icon": "table_chart" + }, + { + "label": "Table", + "path": "/components/table", + "status": "stable", + "icon": "table_chart" + } + ] }, { - "label": "Textarea", - "path": "/components/textarea", - "status": "stable", - "icon": "subject" + "label": "Feedback", + "icon": "feedback", + "links": [ + { + "label": "Alert", + "path": "/components/alert", + "status": "stable", + "icon": "filled_error" + }, + { + "label": "Progress bar", + "path": "/components/progress-bar", + "status": "stable", + "icon": "linear_scale" + }, + { + "label": "Spinner", + "path": "/components/spinner", + "status": "stable", + "icon": "autorenew" + }, + { + "label": "Toast", + "path": "/components/toast", + "status": "stable", + "icon": "chat_bubble" + }, + { + "label": "Tooltip", + "path": "/components/tooltip", + "status": "stable", + "icon": "info" + } + ] }, { - "label": "Toast", - "path": "/components/toast", - "status": "stable", - "icon": "chat_bubble" + "label": "Forms", + "icon": "assignment", + "links": [ + { + "label": "Button", + "path": "/components/button", + "status": "stable", + "icon": "smart_button" + }, + { + "label": "Checkbox", + "path": "/components/checkbox", + "status": "stable", + "icon": "filled_check_box" + }, + { + "label": "Date input", + "path": "/components/date-input", + "status": "stable", + "icon": "date_range" + }, + { + "label": "File input", + "path": "/components/file-input", + "status": "stable", + "icon": "filled_file_upload" + }, + { + "label": "Number input", + "path": "/components/number-input", + "status": "stable", + "icon": "pin" + }, + { + "label": "Password input", + "path": "/components/password-input", + "status": "stable", + "icon": "password" + }, + { + "label": "Radio group", + "path": "/components/radio-group", + "status": "stable", + "icon": "radio_button_checked" + }, + { + "label": "Select", + "path": "/components/select", + "status": "stable", + "icon": "expand_circle_down" + }, + { + "label": "Slider", + "path": "/components/slider", + "status": "stable", + "icon": "sliders" + }, + { + "label": "Switch", + "path": "/components/switch", + "status": "stable", + "icon": "toggle_on" + }, + { + "label": "Text input", + "path": "/components/text-input", + "status": "stable", + "icon": "input" + }, + { + "label": "Textarea", + "path": "/components/textarea", + "status": "stable", + "icon": "subject" + }, + { + "label": "Toggle group", + "path": "/components/toggle-group", + "status": "stable", + "icon": "toggle_off" + } + ] }, { - "label": "Toggle group", - "path": "/components/toggle-group", - "status": "stable", - "icon": "toggle_off" + "label": "Layout", + "icon": "dashboard_customize", + "links": [ + { + "label": "Application level", + "icon": "view_quilt", + "links": [ + { + "label": "Application layout", + "path": "/components/application-layout", + "status": "stable", + "icon": "dashboard" + }, + { + "label": "Footer", + "path": "/components/footer", + "status": "stable", + "icon": "view_agenda" + }, + { + "label": "Header", + "path": "/components/header", + "status": "stable", + "icon": "view_day" + }, + { + "label": "Sidenav", + "path": "/components/sidenav", + "status": "stable", + "icon": "view_sidebar" + } + ] + }, + { + "label": "Bleed", + "path": "/components/bleed", + "status": "stable", + "icon": "vertical_align_center" + }, + { + "label": "Container", + "path": "/components/container", + "status": "stable", + "icon": "crop_square" + }, + { + "label": "Flex", + "path": "/components/flex", + "status": "stable", + "icon": "view_stream" + }, + { + "label": "Grid", + "path": "/components/grid", + "status": "stable", + "icon": "grid_on" + }, + { + "label": "Inset", + "path": "/components/inset", + "status": "stable", + "icon": "padding" + } + ] }, { - "label": "Tooltip", - "path": "/components/tooltip", - "status": "stable", - "icon": "info" + "label": "Navigation", + "icon": "navigation", + "links": [ + { + "label": "Breadcrumbs", + "path": "/components/breadcrumbs", + "status": "stable", + "icon": "arrow_back" + }, + { + "label": "Contextual menu", + "path": "/components/contextual-menu", + "status": "stable", + "icon": "notes" + }, + { + "label": "Dropdown", + "path": "/components/dropdown", + "status": "stable", + "icon": "south" + }, + { + "label": "Link", + "path": "/components/link", + "status": "stable", + "icon": "link" + }, + { + "label": "Nav tabs", + "path": "/components/nav-tabs", + "status": "stable", + "icon": "tab" + }, + { + "label": "Quick nav", + "path": "/components/quick-nav", + "status": "stable", + "icon": "menu" + }, + { + "label": "Tabs", + "path": "/components/tabs", + "status": "stable", + "icon": "tabs" + } + ] }, { - "label": "Typography", - "path": "/components/typography", - "status": "stable", - "icon": "text_fields" + "label": "Status", + "icon": "flag", + "links": [ + { + "label": "Badge", + "path": "/components/badge", + "status": "stable", + "icon": "filled_label" + }, + { + "label": "Chip", + "path": "/components/chip", + "status": "stable", + "icon": "toggle_off" + }, + { + "label": "Status light", + "path": "/components/status-light", + "status": "stable", + "icon": "filled_circle" + } + ] }, { - "label": "Wizard", - "path": "/components/wizard", - "status": "stable", - "icon": "auto_fix_high" + "label": "Text", + "icon": "text_snippet", + "links": [ + { + "label": "Bulleted list", + "path": "/components/bulleted-list", + "status": "stable", + "icon": "format_list_bulleted" + }, + { + "label": "Heading", + "path": "/components/heading", + "status": "stable", + "icon": "title" + }, + { + "label": "Paragraph", + "path": "/components/paragraph", + "status": "stable", + "icon": "notes" + }, + { + "label": "Typography", + "path": "/components/typography", + "status": "stable", + "icon": "text_fields" + } + ] } ] diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx index 551981c7e..ceace78bd 100644 --- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx +++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx @@ -16,6 +16,7 @@ const itemTypeString = `{ const groupItemTypeString = `{ ${commonItemTypeString} + defaultOpen?: boolean; items: (Item | GroupItem)[]; }`; diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx index 44af31428..17158c26c 100644 --- a/packages/lib/src/base-menu/GroupItem.tsx +++ b/packages/lib/src/base-menu/GroupItem.tsx @@ -13,7 +13,11 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => { const NavigationTreeId = `sidenav-${useId()}`; const contextValue = useContext(BaseMenuContext) ?? {}; - const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem(items, contextValue); + const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem( + items, + contextValue, + props.defaultOpen + ); return hasPopOver ? ( <> diff --git a/packages/lib/src/base-menu/types.ts b/packages/lib/src/base-menu/types.ts index 86d70c0f9..33fa836b1 100644 --- a/packages/lib/src/base-menu/types.ts +++ b/packages/lib/src/base-menu/types.ts @@ -49,6 +49,7 @@ type Props = { type ItemWithId = Item & { id: number }; type GroupItemWithId = { badge?: ReactElement; + defaultOpen?: boolean; icon: string | SVG; items: (ItemWithId | GroupItemWithId)[]; label: string; diff --git a/packages/lib/src/base-menu/useGroupItem.ts b/packages/lib/src/base-menu/useGroupItem.ts index 1bb2096f3..2147dd406 100644 --- a/packages/lib/src/base-menu/useGroupItem.ts +++ b/packages/lib/src/base-menu/useGroupItem.ts @@ -8,11 +8,11 @@ const isGroupSelected = (items: GroupItemProps["items"], selectedItemId?: number else return !!item.selected; }); -export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuContextProps) => { +export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuContextProps, defaultOpen: boolean) => { const groupMenuId = `group-menu-${useId()}`; const { selectedItemId, hasPopOver } = context ?? {}; const groupSelected = useMemo(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]); - const [isOpen, setIsOpen] = useState(hasPopOver ? false : groupSelected && selectedItemId === -1); + const [isOpen, setIsOpen] = useState(hasPopOver ? false : (defaultOpen ?? (groupSelected && selectedItemId === -1))); const toggleOpen = () => setIsOpen((prev) => !prev); diff --git a/packages/lib/src/sidenav/types.ts b/packages/lib/src/sidenav/types.ts index 34e511b4e..f1a9fc5e0 100644 --- a/packages/lib/src/sidenav/types.ts +++ b/packages/lib/src/sidenav/types.ts @@ -57,6 +57,7 @@ type Item = CommonItemProps & { selected?: boolean; }; type GroupItem = CommonItemProps & { + defaultOpen?: boolean; items: (Item | GroupItem)[]; }; From 36811c7c7c2cde4f4bdc6faa5f3e39ac701f8f5d Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 3 Feb 2026 14:54:50 +0100 Subject: [PATCH 3/6] Fixed behavior for filtering sidenav --- apps/website/pages/_app.tsx | 5 +++-- packages/lib/src/base-menu/types.ts | 9 ++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index f81803a4b..d97586ebd 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -70,11 +70,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo for (const item of items) { if (isGroupItem(item)) { - const filteredChildren = filterNavTree(item.items, q); const matches = item.label.toLowerCase().includes(q); + const filteredChildren = matches ? item.items : filterNavTree(item.items, q); if (matches || filteredChildren.length > 0) { - result.push({ ...item, items: filteredChildren }); + result.push({ ...item, items: filteredChildren, defaultOpen: true }); } } else { if (item.label.toLowerCase().includes(q)) { @@ -89,6 +89,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo const navItems: Section[] = useMemo(() => { return LinksSections.map((section) => { const baseItems = normalizeNavTabs(section.links); + console.log("BASEITEMS", baseItems); const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems; return { title: section.label, diff --git a/packages/lib/src/base-menu/types.ts b/packages/lib/src/base-menu/types.ts index 33fa836b1..adf2ea4fe 100644 --- a/packages/lib/src/base-menu/types.ts +++ b/packages/lib/src/base-menu/types.ts @@ -16,6 +16,7 @@ type Item = CommonItemProps & { type GroupItem = CommonItemProps & { items: (Item | GroupItem)[]; + defaultOpen?: boolean; }; type Section = { items: (Item | GroupItem)[]; title?: string }; type Props = { @@ -47,13 +48,11 @@ type Props = { }; type ItemWithId = Item & { id: number }; -type GroupItemWithId = { - badge?: ReactElement; - defaultOpen?: boolean; - icon: string | SVG; + +type GroupItemWithId = Omit & { items: (ItemWithId | GroupItemWithId)[]; - label: string; }; + type SectionWithId = { items: (ItemWithId | GroupItemWithId)[]; title?: string }; type SingleItemProps = ItemWithId & { From 7047501f8ab4c961cb7589b3dffdf6e4dc592475 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 3 Feb 2026 15:31:39 +0100 Subject: [PATCH 4/6] Fixed icons --- apps/website/pages/_app.tsx | 1 - .../screens/common/componentsList.json | 2 +- apps/website/screens/common/pagesList.tsx | 31 ++++++++++--------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index d97586ebd..b9e72d24b 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -89,7 +89,6 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo const navItems: Section[] = useMemo(() => { return LinksSections.map((section) => { const baseItems = normalizeNavTabs(section.links); - console.log("BASEITEMS", baseItems); const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems; return { title: section.label, diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 2bc37d9a4..7a736d581 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -109,7 +109,7 @@ "label": "Tooltip", "path": "/components/tooltip", "status": "stable", - "icon": "info" + "icon": "question_answer" } ] }, diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 9036ccada..32f1f9f99 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -22,22 +22,23 @@ type NavigationLinks = { }; const overviewLinks: LinkDetails[] = [ - { label: "Introduction", path: "/overview/introduction" }, - { label: "Installation", path: "/overview/installation" }, - { label: "Component lifecycle", path: "/overview/component-lifecycle" }, - { label: "Releases", path: "/overview/releases" }, + { label: "Introduction", path: "/overview/introduction", icon: "info" }, + { label: "Installation", path: "/overview/installation", icon: "download" }, + { label: "Component lifecycle", path: "/overview/component-lifecycle", icon: "cycle" }, + { label: "Releases", path: "/overview/releases", icon: "deployed_code" }, ]; const utilitiesLinks: LinkDetails[] = [ { label: "Halstack provider", path: "/utilities/halstack-provider", + icon: "integration_instructions", }, ]; const principlesLinks: LinkDetails[] = [ - { label: "Data visualization", path: "/principles/data-visualization" }, - { label: "Localization", path: "/principles/localization" }, + { label: "Data visualization", path: "/principles/data-visualization", icon: "insert_chart" }, + { label: "Localization", path: "/principles/localization", icon: "language" }, ]; const tokensLinks: LinkDetails[] = [ @@ -47,14 +48,14 @@ const tokensLinks: LinkDetails[] = [ ]; const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [ - { label: "Color", path: "/foundations/color" }, - { label: "Elevation", path: "/foundations/elevation" }, - { label: "Height", path: "/foundations/height" }, - { label: "Iconography", path: "/foundations/iconography" }, - { label: "Layout", path: "/foundations/layout" }, - { label: "Spacing", path: "/foundations/spacing" }, - { label: "Tokens", links: tokensLinks }, - { label: "Typography", path: "/foundations/typography" }, + { label: "Color", path: "/foundations/color", icon: "palette" }, + { label: "Elevation", path: "/foundations/elevation", icon: "layers" }, + { label: "Height", path: "/foundations/height", icon: "height" }, + { label: "Iconography", path: "/foundations/iconography", icon: "emoji_symbols" }, + { label: "Layout", path: "/foundations/layout", icon: "grid_on" }, + { label: "Spacing", path: "/foundations/spacing", icon: "space_bar" }, + { label: "Tokens", links: tokensLinks, icon: "token" }, + { label: "Typography", path: "/foundations/typography", icon: "font_download" }, ]; const v16Links: LinkDetails[] = [ @@ -63,7 +64,7 @@ const v16Links: LinkDetails[] = [ { label: "Migrating tokens", path: "/migration/16/migrating-tokens" }, ]; -const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links }]; +const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links, icon: "deployed_code_update" }]; const componentsLinks = componentsList as (LinkDetails | LinksSectionDetails)[]; From f223601a58ebbfeec5d2f081c3e9482f4662c98b Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Tue, 3 Feb 2026 15:53:10 +0100 Subject: [PATCH 5/6] Turned defaultOpen into optional --- packages/lib/src/base-menu/useGroupItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/base-menu/useGroupItem.ts b/packages/lib/src/base-menu/useGroupItem.ts index 2147dd406..c24123ee1 100644 --- a/packages/lib/src/base-menu/useGroupItem.ts +++ b/packages/lib/src/base-menu/useGroupItem.ts @@ -8,7 +8,7 @@ const isGroupSelected = (items: GroupItemProps["items"], selectedItemId?: number else return !!item.selected; }); -export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuContextProps, defaultOpen: boolean) => { +export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuContextProps, defaultOpen?: boolean) => { const groupMenuId = `group-menu-${useId()}`; const { selectedItemId, hasPopOver } = context ?? {}; const groupSelected = useMemo(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]); From 68d638fd20bea41c2308c15e7fe9bd08718a895d Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 4 Feb 2026 10:53:45 +0100 Subject: [PATCH 6/6] Improved filtering logic to index sections --- apps/website/pages/_app.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index b9e72d24b..fdffe9c9a 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -87,9 +87,14 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo }; const navItems: Section[] = useMemo(() => { + const q = filter.trim().toLowerCase(); + return LinksSections.map((section) => { const baseItems = normalizeNavTabs(section.links); - const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems; + const sectionMatches = section.label.toLowerCase().includes(q); + + const items = filter ? (sectionMatches ? baseItems : filterNavTree(baseItems, q)) : baseItems; + return { title: section.label, items: section.label === "Components" ? items.map((item) => ({ ...item, defaultOpen: true })) : items,