We've allowed for auto importing moz- custom elements since Bug 1803678. This means that often custom elements will use moz- elements without explicitly importing them. This sometimes causes problems in Storybook, since the auto import logic doesn't apply there, and as of Storybook v7 all stories are lazily compiled. This patch ensures that we load all moz- elements and other reusable components up front to avoid display issues in domain specific component stories.
Differential Revision: https://phabricator.services.mozilla.com/D221702
Co-author/investigator: Tim Giles <tgiles@mozilla.com>
Delay sychronous loading of ESM based custom elements until the
DOMContentLoaded event. With D212190--which this patch depends on--the
components that have already been used on the page will be synchronously
loaded when customElements.setElementCreationCallback is registered.
Differential Revision: https://phabricator.services.mozilla.com/D212191
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
The `<shopping-message-bar>` component is the last place we're using the deprecated `<message-bar>` component. As such, it's the one thing standing preventing us from remvoing the old `<message-bar>` implementation (see Bug 1845151). I took a quick look and the `<message-bar>`s here aren't actually providing any styling/layout and seem to be easily replacable with `<div>`s.
Differential Revision: https://phabricator.services.mozilla.com/D207989
These docs were already present when running `mach storybook` but were
not hooked up to Firefox Source Docs. I also moved the files to a docs/
directory so that the folder structure is more clear.
I also changed the post-it notes layout to images so that the styling
would be consistent between Storybook and Firefox Source Docs. As part
of this, I added alt text to each graphic so that we weren't losing
information.
Differential Revision: https://phabricator.services.mozilla.com/D206070
Changed
* `--color-background-*` are now part of the group of `--background-color` tokens
* `--box-background-color` is now part of the group of `--background-color` tokens as `--background-color-box`
* `--color-canvas` is now part of the group of `--background-color` tokens as `--background-color-canvas`
* `--border-interactive-*` are now part of the group of `--border-color` tokens and consequently now start with `--border-color`
* `--color-error-outline` is now an outline-specific token as `--outline-color-error`
* Comment headings were cleaned up as to follow the existing standard
* Better documentation behind the difference of "Base", "Application", and "Component" tiers in the design tokens documentation
* Tokens files are alphabetized
Removed
* `--outline-color-error` had duplicates in both high contrast mode media queries, so its value under `forced-colors` was removed
* "Base" and "Application" headings in tokens files were removed in order to lean in on the alphabetical order organization of token groups and promote a cleaner file and less confusion
* Documentation was edited down to not incude any guidance that we don't adhere to
* Remove duplicate interactive border color high contrast mode tokens in `tokens-brand.css` in favor of `tokens-shared.css`
* Remove `--button-border-color-primary` duplicate in `tokens-brand.css`
* Remove duplicate `--button-text-color` in `tokens-shared.css`
Differential Revision: https://phabricator.services.mozilla.com/D202767
Changed
* `--color-background-*` are now part of the group of `--background-color` tokens
* `--box-background-color` is now part of the group of `--background-color` tokens as `--background-color-box`
* `--color-canvas` is now part of the group of `--background-color` tokens as `--background-color-canvas`
* `--border-interactive-*` are now part of the group of `--border-color` tokens and consequently now start with `--border-color`
* `--color-error-outline` is now an outline-specific token as `--outline-color-error`
* Comment headings were cleaned up as to follow the existing standard
* Better documentation behind the difference of "Base", "Application", and "Component" tiers in the design tokens documentation
* Tokens files are alphabetized
Removed
* `--outline-color-error` had duplicates in both high contrast mode media queries, so its value under `forced-colors` was removed
* "Base" and "Application" headings in tokens files were removed in order to lean in on the alphabetical order organization of token groups and promote a cleaner file and less confusion
* Documentation was edited down to not incude any guidance that we don't adhere to
* Remove duplicate interactive border color high contrast mode tokens in `tokens-brand.css` in favor of `tokens-shared.css`
* Remove `--button-border-color-primary` duplicate in `tokens-brand.css`
* Remove duplicate `--button-text-color` in `tokens-shared.css`
Differential Revision: https://phabricator.services.mozilla.com/D202767
Changed
* `--color-background-*` are now part of the group of `--background-color` tokens
* `--box-background-color` is now part of the group of `--background-color` tokens as `--background-color-box`
* `--color-canvas` is now part of the group of `--background-color` tokens as `--background-color-canvas`
* `--border-interactive-*` are now part of the group of `--border-color` tokens and consequently now start with `--border-color`
* `--color-error-outline` is now an outline-specific token as `--outline-color-error`
* Comment headings were cleaned up as to follow the existing standard
* Better documentation behind the difference of "Base", "Application", and "Component" tiers in the design tokens documentation
* Tokens files are alphabetized
Removed
* `--outline-color-error` had duplicates in both high contrast mode media queries, so its value under `forced-colors` was removed
* "Base" and "Application" headings in tokens files were removed in order to lean in on the alphabetical order organization of token groups and promote a cleaner file and less confusion
* Documentation was edited down to not incude any guidance that we don't adhere to
* Remove duplicate interactive border color high contrast mode tokens in `tokens-brand.css` in favor of `tokens-shared.css`
* Remove `--button-border-color-primary` duplicate in `tokens-brand.css`
* Remove duplicate `--button-text-color` in `tokens-shared.css`
Differential Revision: https://phabricator.services.mozilla.com/D202767
