Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html } from "lit";
import "mail/base/content/widgets/search-bar.mjs";
import "mail/themes/shared/mail/colors.css";
import "mail/themes/shared/mail/variables.css";
import "mail/themes/shared/mail/widgets.css";
export default {
title: "Design System/Keyboard Shortcut Indicator",
tags: ["autodocs"],
};
export const KeyboardShortcutIndicator = () => html`
<h1>
CSS variables provided by <code>chrome://messenger/skin/widgets.css</code>:
</h1>
<p>
These indicators should be used to visualize keyboard shortcuts inside a
SearchBar custom element placeholder, or inline labels and actionable
options.
</p>
<p>
The background colors use have variants for light, dark and high contrast
modes, while the text color is inherited from the parent element.
</p>
`;
export const StandaloneIndicator = () => html`
<span class="kbd-container"
>Type something… <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>A</kbd></span
>
`;
export const SearchBarIndicator = () =>
html` <!-- #include mail/base/content/widgets/search-bar.inc.xhtml -->
<template id="searchBarTemplate">
<form>
<input type="search" placeholder="" required="required" />
<div aria-hidden="hidden"><slot name="placeholder"></slot></div>
<button id="search-button" class="button button-flat icon-button">
<slot name="search-button"></slot>
</button>
</form>
</template>
<search-bar label="Search something…">
<span slot="placeholder" class="kbd-container"
>Type something… <kbd>Ctrl</kbd> + <kbd>K</kbd>
</span>
<img
alt="Search"
slot="search-button"
class="search-button"
/>
</search-bar>`;