docs: update FNavigationMenu documentation (refs SFKUI-6609) by NicklasWei · Pull Request #111 · Forsakringskassan/designsystem

NicklasWei · 2024-11-11T19:04:44Z

EDIT: skrivit om dokumentationen lite mer så kallar till re-review.

Lägger till live exempel för navigeringsmenyn och försöker förbättra dokumentation lite grann.

github-actions · 2024-11-11T19:08:28Z

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-12-19 12:16 UTC

docs/components/page-layout/FNavigationMenu.md

ext · 2024-11-12T07:58:28Z

docs/components/page-layout/FNavigationMenu.md

+
+Om du anger `href` för objektet så kommer menyalternativet fungera som en vanlig länk med aktuellt `href` värde.
+
+Utan `href` så skickas ett `selectedRoute` event med `route` för det valda alternativet.


Nu läser jag det som att selectedRoute eventet bara kommer om href saknas, dvs om jag sätter href så kommer inte eventet.

Är det korrekt? Oavsett borde det kanske förtydligas.

Eventet skickas oavsett om href används eller inte, både före och efter mina ändringar i den andra PR.

Jag tar och skriver om texten lite mer.

docs/components/page-layout/FNavigationMenu.md

ext · 2024-11-12T08:02:21Z

docs/components/page-layout/FNavigationMenu.md

    { label: "label2", route: "ROUTE_2" },
-    { label: "label3", route: "ROUTE_3" },
-    { label: "label4", route: "ROUTE_4", href: "/", target: "" },
+    { label: "label3", route: "ROUTE_3", href: "/", target: "_blank" },


Vad innebär det att sätta både route och href? Det förvirrar mig.

docs/components/page-layout/FNavigationMenu.md

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuOverflow.vue

ext · 2024-11-12T08:23:09Z

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuOverflow.vue

@@ -15,15 +9,12 @@ import { FNavigationMenu } from "@fkui/vue";
 import { routes } from "./router";


Hur ser den här ut? Vi visar aldrig för konsumenten var routes kommer från. För ghs-app-template fungerar det men inte för hundbidraget.

Sneglar jag på dokumentationen för vue-router samt vad npm create vue ger mig så fungerar det inte heller.

ext · 2024-11-12T08:30:30Z

packages/vue/src/components/FNavigationMenu/navigation-menu-item.ts

    label: string;
    /**
-     * Menu item route used upon for example item selection
+     * Unique route/path for the menu item. Used for item selection and reference.


Som läsare är jag nog lite förvirrad över denna. Exemplen har varit lite tvetydiga, jag vet inte vad jag ska skicka in här.

Om jag använder vue-router:

Är det path parametern från rutten? #/foobar? /foobar? foobar? Ska det matcha path i rutten?

Är det namned på rutten? Dvs ska det matcha name i rutten?

Om jag inte använder vue-router:

Då måste jag väl sätta href eller? Vad har jag denna till? Är det bara en unik identifierare?

ext

Tycker nog det behöver göras en översyn över dokumentationen

docs/components/page-layout/FNavigationMenu.md

ext · 2024-12-18T11:43:38Z

docs/components/page-layout/FNavigationMenu.md

+`route` används för att identifiera olika menyalternativ samt för att {@link FNavigationMenu#navigera_programmatiskt navigera programmatiskt} när ett alternativ väljs.

-Du aktiverar vertikalt läge genom att använda `vertical` prop:
+Om du inte vill navigera programmatiskt så ska du ange `href`.


Tycker snabbt det blir svårbegripligt här. Vad innebär programmatisk navigering? Svaret är väl "du måste alltid sätta route och href förrutom om du kör med vue-router, då räcker det med route. Eller missuppfattar jag hur komponenten fungerar?

Varje gång jag försökt använt komponenten har jag bara velat ha en enkel meny, inget programmatiskt, v-model eller något men nu känns beskrivningen här svårtolkad, innan man ens vet att man måste sätta både route och href så pratas det om programmatiskt beteende.

ext · 2024-12-18T11:45:04Z

docs/components/page-layout/FNavigationMenu.md

+Om du inte vill navigera programmatiskt så ska du ange `href`.
+Då kommer den att fungera som en vanlig länk med aktuellt `href` värde.
+
+## Navigera programmatiskt


Det är knappt att jag är med på vad "Navigera programmatiskt" är, när/varför behöver jag det?

Rubriken kanske kan nämna event?

ext · 2024-12-18T11:50:01Z

docs/components/page-layout/FNavigationMenu.md


-```import
-FNavigationMenuVertical.vue
+### Navigera med Vue Router


Det här blev bra, tyvärr hade jag missuppfattat hur det fungerar så det är väl bra att det beskrivs här.

Jag trodde man skickade in samma routes array som till createRouter men så var visst inte fallet.

Marie-Jakobsson

Lite svårläst och jag förstår inte hela sidan, men det här får nog en utvecklare bedöma vad som fungerar eller inte.

docs/components/page-layout/FNavigationMenu.md

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuOverflow.vue

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuLiveExample.vue

docs/components/page-layout/FNavigationMenu.md

github-actions · 2025-01-13T08:58:30Z

🎉 This PR is included in version 5.45.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

NicklasWei requested review from MCFK, Marie-Jakobsson, OlofFredriksson, TMFKse, dvitamin, ext, kristinalindstrom, kristofernilsson and mitra-Re as code owners November 11, 2024 19:04

MCFK previously approved these changes Nov 12, 2024

View reviewed changes

dvitamin previously approved these changes Nov 12, 2024

View reviewed changes

ext reviewed Nov 12, 2024

View reviewed changes

ext requested changes Nov 12, 2024

View reviewed changes

NicklasWei force-pushed the menu-example branch 4 times, most recently from ec3232d to 0c55785 Compare November 12, 2024 14:40

NicklasWei dismissed stale reviews from dvitamin and MCFK via 0c55785 November 25, 2024 12:24

NicklasWei force-pushed the menu-example branch 2 times, most recently from 8d2b28c to 8bd9e33 Compare December 15, 2024 21:05

NicklasWei changed the title ~~docs: add live example to FNavigationMenu (refs SFKUI-6609)~~ docs: update FNavigationMenu documentation (refs SFKUI-6609) Dec 15, 2024

NicklasWei force-pushed the menu-example branch from 8bd9e33 to 47c3653 Compare December 17, 2024 07:45

NicklasWei requested review from MCFK, dvitamin and ext December 17, 2024 07:47

MCFK approved these changes Dec 17, 2024

View reviewed changes

ext reviewed Dec 18, 2024

View reviewed changes

Marie-Jakobsson reviewed Dec 18, 2024

View reviewed changes

dvitamin approved these changes Dec 19, 2024

View reviewed changes

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuOverflow.vue Outdated Show resolved Hide resolved

packages/vue/src/components/FNavigationMenu/examples/FNavigationMenuLiveExample.vue Outdated Show resolved Hide resolved

NicklasWei force-pushed the menu-example branch 3 times, most recently from 7a80fc2 to bbe4ad2 Compare December 19, 2024 11:27

NicklasWei requested a review from ext December 19, 2024 11:37

Marie-Jakobsson approved these changes Dec 19, 2024

View reviewed changes

docs/components/page-layout/FNavigationMenu.md Outdated Show resolved Hide resolved

docs: update FNavigationMenu documentation (refs SFKUI-6609)

95aee32

NicklasWei force-pushed the menu-example branch from bbe4ad2 to 95aee32 Compare December 19, 2024 11:53

ext approved these changes Dec 19, 2024

View reviewed changes

NicklasWei merged commit 43c06ad into main Dec 19, 2024

NicklasWei deleted the menu-example branch December 19, 2024 12:15

github-actions bot added the released on @latest label Jan 13, 2025


		Om du anger `href` för objektet så kommer menyalternativet fungera som en vanlig länk med aktuellt `href` värde.

		Utan `href` så skickas ett `selectedRoute` event med `route` för det valda alternativet.

		@@ -15,15 +9,12 @@ import { FNavigationMenu } from "@fkui/vue";
		import { routes } from "./router";

Conversation

NicklasWei commented Nov 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ext left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Marie-Jakobsson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

NicklasWei commented Nov 11, 2024 •

edited

Loading

github-actions bot commented Nov 11, 2024 •

edited

Loading