Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve display of navbar dropdowns #676

Merged
merged 3 commits into from
Apr 11, 2024
Merged

Improve display of navbar dropdowns #676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
29264a3
Improve accessibility of smaller text sizes
reefdog Apr 10, 2024
6649c52
Add DropdownMenuLinkDescription for dropdowns
reefdog Apr 10, 2024
13d555c
Improve keyboard-navigability of dropdown menu
reefdog Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
align-items: flex-start;
gap: calc(var(--fixed-spacing--1x) / 2);

font-size: 0.875rem;
font-size: var(--font-size--sm);
color: var(--navbar-item--color);
background-color: var(--navbar-item--background-color);
text-transform: uppercase;
Expand Down
43 changes: 23 additions & 20 deletions src/components/AppNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
DropdownTrigger,
DropdownMenu,
DropdownMenuLink,
DropdownMenuLinkDescription,
} from './Dropdown';

const AppNavbar = () => {
Expand Down Expand Up @@ -62,30 +63,32 @@ const AppNavbar = () => {
</DropdownTrigger>
<DropdownMenu align="right">
<DropdownMenuLink to="https://www.philanthropydatacommons.org">
<div className="title">About the PDC project</div>
<div className="description">
About the PDC project
<DropdownMenuLinkDescription>
Read about the history, vision, and governance body of the
PDC.
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
{!isAuthenticated && (
<DropdownMenuLink to="mailto:jimmcgowan@opentechstrategies.com?subject=PDC%20account">
<div className="title">Need an account?</div>
<div className="description">
Need an account?
<DropdownMenuLinkDescription>
Full access is restricted. Email Jim McGowan to request an
account.
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
)}
<DropdownMenuLink to="mailto:info@philanthropydatacommons.org?subject=PDC">
<div className="title">Questions or feedback</div>
<div className="description">Send an email to the team.</div>
Questions or feedback
<DropdownMenuLinkDescription>
Send an email to the team.
</DropdownMenuLinkDescription>
</DropdownMenuLink>
<DropdownMenuLink to="https://github.com/PhilanthropyDataCommons/front-end/blob/main/RECENT_CHANGES.md">
<div className="title">Recent improvements</div>
<div className="description">
Recent improvements
<DropdownMenuLinkDescription>
Keep up with recent changes and improvements to the PDC.
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
</DropdownMenu>
</Dropdown>
Expand All @@ -99,25 +102,25 @@ const AppNavbar = () => {
</DropdownTrigger>
<DropdownMenu align="right">
<DropdownMenuLink to="https://api.philanthropydatacommons.org">
<div className="title">API Documentation</div>
<div className="description">
API Documentation
<DropdownMenuLinkDescription>
Read the Swagger spec to interact with the PDC via our API.
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
<DropdownMenuLink to="https://www.npmjs.com/package/@pdc/sdk">
<div className="title">TypeScript SDK</div>
<div className="description">
TypeScript SDK
<DropdownMenuLinkDescription>
Develop with our TypeScript SDK using <code>@pdc/sdk</code>{' '}
from NPM.
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
{process.env.REACT_APP_SHOW_STORYBOOK === 'true' && (
<DropdownMenuLink to="/storybook" reloadDocument>
<div className="title">Storybook</div>
<div className="description">
Storybook
<DropdownMenuLinkDescription>
View our UI component library. (Only relevant to PDC front
end developers.)
</div>
</DropdownMenuLinkDescription>
</DropdownMenuLink>
)}
</DropdownMenu>
Expand Down
2 changes: 1 addition & 1 deletion src/components/BulkUploadList.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
border-bottom: 1px solid var(--color--gray);
background-color: var(--color--gray--lighter);

font-size: 0.9rem;
font-size: var(--font-size--sm);
font-weight: var(--font-weight--medium);
text-transform: uppercase;
}
Expand Down
23 changes: 14 additions & 9 deletions src/components/Dropdown/Dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@
width: var(--dropdown--menu--width);

background-color: white;
border-radius: 8px;
border-radius: var(--dropdown--menu--border-radius);
border: 1px solid var(--color--gray--medium);
overflow: hidden;
overflow: visible;

display: flex;
flex-direction: column;
Expand All @@ -67,8 +67,15 @@
border-bottom: 1px solid var(--color--gray--light);
}

.dropdown-menu > *:first-child {
border-top-left-radius: var(--dropdown--menu--border-radius);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know that this was a thing you could set with css, very cool!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean CSS variables, or setting the border radius?

border-top-right-radius: var(--dropdown--menu--border-radius);
}

.dropdown-menu > *:last-child {
border-bottom: none;
border-bottom-left-radius: var(--dropdown--menu--border-radius);
border-bottom-right-radius: var(--dropdown--menu--border-radius);
}

/* CSS `transition` doesn't work when disclosing `<details>` element contents,
Expand All @@ -88,7 +95,7 @@
}

.dropdown-menu-text {
font-size: 0.85rem;
font-size: var(--font-size--sm);
padding: var(--dropdown--menu--spacing);
}

Expand All @@ -101,7 +108,7 @@

.dropdown-menu-link.has-icon {
display: flex;
align-items: center;
align-items: flex-start;
gap: var(--fixed-spacing--1x);
}

Expand All @@ -110,20 +117,18 @@
gap: var(--fixed-spacing--2x);
}

.dropdown-menu-link .title {
text-transform: uppercase;
font-size: 0.9rem;
}

.dropdown-menu-link .description {
display: block;
font-weight: normal;
font-size: var(--font-size--sm);
}

.dropdown-menu-link:hover {
background-color: var(--color--gray--lighter);
}

.dropdown-menu-link > svg {
flex-shrink: 0;
height: var(--dropdown--menu-item--icon-size);
width: var(--dropdown--menu-item--icon-size);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dropdown/DropdownMenuLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const DropdownMenuLink = ({
reloadDocument={reloadDocument}
>
{icon && alignIcon === 'left' && icon}
{children}
<div>{children}</div>
{icon && alignIcon === 'right' && icon}
</Link>
);
Expand Down
14 changes: 14 additions & 0 deletions src/components/Dropdown/DropdownMenuLinkDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

interface DropdownMenuLinkDescriptionProps {
children: React.ReactNode;
}

/**
* A `<Link>` element inside a dropdown menu.
*/
export const DropdownMenuLinkDescription = ({
children,
}: DropdownMenuLinkDescriptionProps) => (
<small className="description">{children}</small>
);
2 changes: 2 additions & 0 deletions src/components/Dropdown/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import { DropdownTrigger } from './DropdownTrigger';
import { DropdownMenu } from './DropdownMenu';
import { DropdownMenuText } from './DropdownMenuText';
import { DropdownMenuLink } from './DropdownMenuLink';
import { DropdownMenuLinkDescription } from './DropdownMenuLinkDescription';

export {
Dropdown,
DropdownTrigger,
DropdownMenu,
DropdownMenuText,
DropdownMenuLink,
DropdownMenuLinkDescription,
};
2 changes: 1 addition & 1 deletion src/components/ListGrid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

.list-grid-item--details {
color: var(--list-grid-item--details--color);
font-size: 0.9em;
font-size: var(--font-size--sm);

display: flex;
flex-direction: row;
Expand Down
7 changes: 4 additions & 3 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
--color--red: #892929;

--font-size: 16px;
--font-size--sm: 0.95rem;
--line-height: 1.4;
--font-family--sans-serif: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
Expand Down Expand Up @@ -129,7 +130,7 @@ dl > .dli > dd {
}

code {
font-size: 0.8em;
font-size: 0.85em; /* em, not rem, so it is relative to its context. */
font-family: var(--font-family--monospace);
background-color: var(--color--gray--light);
border-radius: 0.5ch;
Expand All @@ -152,7 +153,7 @@ code.short-code {
.badge {
background-color: var(--badge--background-color);
color: var(--badge--color);
font-size: 0.8em;
font-size: var(--font-size--sm);
padding: 0 0.25em;
border-radius: 2px;
}
Expand All @@ -171,7 +172,7 @@ code.short-code {
}

.label {
font-size: 0.9rem;
font-size: var(--font-size--sm);
font-weight: var(--font-weight--medium);
text-transform: uppercase;
}
Expand Down
Loading