Page MenuHomePhabricator

docs: Consolidate top-level nav items
Closed, ResolvedPublic1 Estimated Story Points

Description

There are 2-3 upcoming additions to the top-level nav of the Codex docs site:

  • For T333437, we're adding a new top-level nav item to the Codex docs site for the Style Guide.
  • We also want to start documenting composables (T295186) and the documentation for one is already being completed. We need to provide people a way to easily access the composables section.
  • We might add a section for Patterns

Even just adding Style Guide is making the top-level nav pretty long. We should consider ways to consolidate some of the top-level menu items.

Option 1: Design + Dev - declined

Other design systems have a section for Design and a section for Development. That makes sense in some ways, but the design tokens, components, icons, and patterns all apply to both design and development. I'm not sure this is right for the Codex docs.

Option: 2 Add "Toolkit" - selected

Another option would be to group all of the usable packages/things under a single top-level nav item called "Toolkit" (or another word if there's a better suggestion). This would include:

  • Design tokens
  • Components
  • Patterns
  • Icons
  • Composables

See a demo of this here or view a screenshot:

image.png (470×972 px, 52 KB)


Acceptance criteria

  • Determine the best architecture: we agree on Option 2
  • Implement Option 2
  • Style the new dropdown menu with Codex tokens

Event Timeline

@Volker_E @RHo @egardner @Catrope Any thoughts on this proposed change? It would be great to implement this ASAP since we're in the process of adding the Style Guide and Composables section right now.

@AnneT thank you for preparing this task with both proposals. In my opinion, I would go for the MVP with the fastest and easiest option to implement, I mean, with the Option 2 grouping all demos in "Toolkit". I like the approach of the Option 1 for a final version of Codex (in fact it's the one I proposed for the Codex as Wikimedia Design System Figma prototype) but the problem with this option is that we will need to create other design resources to add in the "Design" group, since displaying just the "Style guide" would be poor.

I propose the following:

  • Let's go with Option 2 now ("Toolkit") for the MVP now.
  • Once we create the rest of the content in the Codex site (e.g. Figma libraries and other design resources) we can simply rename "Toolkit" to "Development" and add a new "Design" option where we will move the Style Guide and the rest of design resources.

I like option 2! I especially like that we're able to use a dropdown in the top navigation, so that we don't have to hide tokens/components/icons in a place where you'll only see them after you click the "toolkit" link.

As Bárbara said, option 1 would require producing a bunch more content, and I'm also not sure that I like separating the site in design vs development sections. Instead, I'd prefer for the tokens/components/icons sections to each have some design-specific pages, some dev-specific pages, a shared overview page, and possibly some other shared pages as well (e.g. the component demo pages and token demo pages should serve both design and dev audiences).

Great, it sounds like we have consensus on option 2, at least for now. I'll update the task description.

I agree with @Catrope that it's hard to imagine splitting the site into design/dev since the component, design tokens, and icon demo pages apply to both.

Restricted Application triaged this task as High priority. · View Herald TranscriptApr 24 2023, 4:16 PM

Change 911925 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Add "Toolkit" nav item and nested "Composables" item

https://gerrit.wikimedia.org/r/911925

AnneT changed the task status from Open to In Progress.Apr 25 2023, 7:47 PM
AnneT claimed this task.

Change 911925 merged by jenkins-bot:

[design/codex@main] docs: Add "Toolkit" nav item and nested "Composables" item

https://gerrit.wikimedia.org/r/911925

@AnneT would it be possible to add different styles for the dropdown menu? We could use more similar styles to our menu component:

  • border-radius-base (since we always use a 2px border radius for all our components, it's a bit weird for this menu to be so rounded)
  • border-color-base
  • box-shadow-drop-medium (same, since the user will be more used to with our shadows, let's use them to unify the Codex site with our system)
Volker_E updated the task description. (Show Details)
Volker_E added a project: Documentation.

@bmartinezcalvo good call, I'll do that in a follow-up patch!

Change 912278 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Style main nav dropdown menu with Codex tokens

https://gerrit.wikimedia.org/r/912278

@bmartinezcalvo you can check out the preview here, please let me know if you have any other feedback!

Change 912278 merged by jenkins-bot:

[design/codex@main] docs: Style main nav dropdown menu with Codex tokens

https://gerrit.wikimedia.org/r/912278

@bmartinezcalvo you can check out the preview here, please let me know if you have any other feedback!

@AnneT thanks for applying these changes. Now the menu seems to be more similar to our Codex menu. Just 2 more details:

  1. Could the menu item be not rounded? Or use the same border token of the menu if possible (just to unify both)
  2. Would it be possible to reduce the menu's inner padding?

hey @bmartinezcalvo, both of those things are possible! Just let me know what border radius and padding you'd like to use

hey @bmartinezcalvo, both of those things are possible! Just let me know what border radius and padding you'd like to use

@AnneT I would use the same paddings and styles as in menu item component, so these are the specs:

Captura de pantalla 2023-04-28 a las 13.59.41.png (652×1 px, 83 KB)

Change 913924 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Style dropdown nav to look like Codex Menu

https://gerrit.wikimedia.org/r/913924

@bmartinezcalvo thanks for the info! You can see the updates here. One note: when menu items are hovered, they have black text, but I decided to keep the blue text on hover in the menu since that's how regular menu items (not in the dropdown menu) act.

@bmartinezcalvo thanks for the info! You can see the updates here. One note: when menu items are hovered, they have black text, but I decided to keep the blue text on hover in the menu since that's how regular menu items (not in the dropdown menu) act.

@AnneT this is great! I agree with the menu item in blue in this case since the rest of items in the menu behaves the same. Thank you!

Change 913924 merged by jenkins-bot:

[design/codex@main] docs: Style dropdown nav to look like Codex Menu

https://gerrit.wikimedia.org/r/913924

Change 918598 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.9.1 to v0.10.0

https://gerrit.wikimedia.org/r/918598

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8333e57f25/w

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8333e57f25/w/

Change 918598 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.9.1 to v0.10.0

https://gerrit.wikimedia.org/r/918598

Volker_E assigned this task to AnneT.