diff options
Diffstat (limited to 'toolkit/content/widgets/moz-page-nav')
3 files changed, 118 insertions, 18 deletions
diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md new file mode 100644 index 0000000000..800d446478 --- /dev/null +++ b/toolkit/content/widgets/moz-page-nav/README.stories.md @@ -0,0 +1,98 @@ +# MozPageNav + +`moz-page-nav` is a grouping of navigation buttons that is displayed at the page level, +intended to change the selected view, provide a heading, and have links to external resources. + +```html story +<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '200px' }}> + <moz-page-nav-button + view="view-one" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 1</p> + </moz-page-nav-button> + <moz-page-nav-button + view="view-two" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 2</p> + </moz-page-nav-button> + <moz-page-nav-button + view="view-three" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + <p style={{ margin: 0 }}>Test 3</p> + </moz-page-nav-button> +</moz-page-nav> +``` + +## When to use + +* Use moz-page-nav for single-page navigation to switch between different views. +* moz-page-nav will also support footer buttons for external support links in the future (See [bug 1877826](https://bugzilla.mozilla.org/show_bug.cgi?id=1877826)) +* This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc. + +## When not to use + +* If you need a navigation menu that does not switch between views within a single page + +## Code + +The source for `moz-page-nav` and `moz-page-nav-button` can be found under +[toolkit/content/widgets/moz-page-nav](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-page-nav). +You can find an examples of `moz-page-nav` in use in the Firefox codebase in +[about:firefoxview](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/firefoxview.html#52-87). + +`moz-page-nav` can be imported into `.html`/`.xhtml` files: + +```html +<script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script> +``` + +And used as follows: + +```html +<moz-page-nav> + <moz-page-nav-button + view="A name for the first view" + iconSrc="A url for the icon for the first navigation button"> + </moz-page-nav-button> + <moz-page-nav-button + view="A name for the second view" + iconSrc="A url for the icon for the second navigation button"> + </moz-page-nav-button> + <moz-page-nav-button + view="A name for the third view" + iconSrc="A url for the icon for the third navigation button"> + </moz-page-nav-button> +</moz-page-nav> +``` + +### Fluent usage + +Generally the `heading` property of +`moz-page-nav` will be provided via [Fluent attributes](https://mozilla-l10n.github.io/localizer-documentation/tools/fluent/basic_syntax.html#attributes). +To get this working you will need to specify a `data-l10n-id` as well as +`data-l10n-attrs` if you're providing a heading: + +```html +<moz-page-nav data-l10n-id="with-heading" + data-l10n-attrs="heading"></moz-page-nav> +``` + +In which case your Fluent messages will look something like this: + +``` +with-heading = + .heading = Heading text goes here +``` + +You also need to specify a `data-l10n-id` for each `moz-page-nav-button`: + +```html +<moz-page-nav-button data-l10n-id="with-button-text"></moz-page-nav-button> +``` + +``` +with-button-text = button text goes here +``` diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css index 2975bb1a7c..5d00198d65 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -13,7 +13,7 @@ button { background-color: var(--page-nav-button-background-color); border: 1px solid var(--page-nav-border-color); -moz-context-properties: fill, fill-opacity; - fill: currentColor; + fill: var(--icon-color); display: grid; grid-template-columns: min-content 1fr; gap: 12px; @@ -34,34 +34,35 @@ button:hover { @media not (prefers-contrast) { button { - border-inline-start: 2px solid transparent; - border-inline-end: none; - border-block: none; + position: relative; } - button:hover, - button[selected]:hover { - background-color: var(--page-nav-button-background-color-hover); + button::before { + content: ""; + display: block; + position: absolute; + inset-block: 0; + inset-inline-start: 0; + width: 2px; + background-color: transparent; } - button[selected]:hover { - border-inline-start-color: inherit; + button[selected]::before { + background-color: var(--color-accent-primary); } - button[selected], - button[selected]:hover { - border-inline-start: 2px solid; + button[selected]:hover::before { + background-color: var(--icon-color); } - button[selected]:not(:focus-visible) { - border-start-start-radius: 0; - border-end-start-radius: 0; + button:hover, + button[selected]:hover { + background-color: var(--page-nav-button-background-color-hover); } button[selected]:not(:hover) { color: var(--color-accent-primary); background-color: color-mix(in srgb, var(--page-nav-button-background-color-selected) 5%, transparent); - border-inline-start-color: var(--color-accent-primary); } } @@ -74,7 +75,7 @@ button:hover { button:focus-visible, button[selected]:focus-visible { outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); + outline-offset: 0; border-radius: var(--border-radius-small); } diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css index 49000f622d..8e6724b2f5 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css @@ -20,6 +20,7 @@ position: sticky; top: 0; height: 100vh; + display: block; width: var(--page-nav-width); @media (prefers-reduced-motion) { @@ -38,7 +39,7 @@ nav { grid-template-rows: min-content 1fr auto; gap: var(--page-nav-gap); margin-block: var(--page-nav-margin-top) var(--page-nav-margin-bottom); - height: calc(100vh - var(--page-nav-margin-top) - var(--page-nav-margin-bottom)); + height: calc(100% - var(--page-nav-margin-top) - var(--page-nav-margin-bottom)); @media (max-width: 52rem) { grid-template-rows: 1fr auto; } |