Change formatting of navbar dropdowns #667
Assignees
Comments
|
Does this mean I'm a designer?!!?!?!? |
|
@slifty That depends how many Gary Hustwit films you've seen. |
|
Gary whosiwhustwit? |
reefdog
added a commit
that referenced
this issue
Apr 10, 2024
This commit reduces our use of decorative small type, which can be inaccessible to low-sight users. Except for very specific contexts (such as inline code, which renders in monotype text, which appears larger than surrounding sans-serif type anyway), we limit our “small text” to only 5% smaller than root, e.g., `0.95rem`. Some elements will now appear a little larger (navbar items, decorative headers, badges, sidebar metadata). Some will look the same but now use a global CSS variable. No issue, but a prerequisite task for work on #667.
reefdog
added a commit
that referenced
this issue
Apr 10, 2024
Prior to this commit, we had a bit of an ad hoc / HTML-native way of adding descriptions to dropdown menu items, customized just for our two current navbar dropdowns. This felt unidiomatic both for React and for our Dropdown component ergonomics. Now, we have a `DropdownMenuLinkDescription` component that you can optionally add to a `DropdownMenuLink`, alongside the existing text, which renders some smaller explanatory text below the title. Along the way, we also: - Change the styling of these navbar items with descriptions so that they match items without descriptions. (h/t @slifty) - Make sure menu link icons stay aligned with the “title” of the link, not centered by the description — and don’t let them shrink - Update stories to match (and with more representative examples) Issue #667 Change formatting of navbar dropdowns
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tinkering with a user menu for #618 and #619, I realized that… sigh… @slifty was right when he said that our navbar dropdowns don't need the "small all caps title" styling that I gave them, and once we have the user menu (where I definitely prefer not to have that styling), it looks weird going back and forth.
So let's turn these:
Into something more like these:
The text was updated successfully, but these errors were encountered: