diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
commit | 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch) | |
tree | a4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /toolkit/content/widgets/moz-button/moz-button.mjs | |
parent | Adding debian version 124.0.1-1. (diff) | |
download | firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip |
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/widgets/moz-button/moz-button.mjs')
-rw-r--r-- | toolkit/content/widgets/moz-button/moz-button.mjs | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-button/moz-button.mjs b/toolkit/content/widgets/moz-button/moz-button.mjs new file mode 100644 index 0000000000..3e7c151e61 --- /dev/null +++ b/toolkit/content/widgets/moz-button/moz-button.mjs @@ -0,0 +1,90 @@ +/* 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, ifDefined } from "../vendor/lit.all.mjs"; +import { MozLitElement } from "../lit-utils.mjs"; + +/** + * A button with multiple types and two sizes. + * + * @tagname moz-button + * @property {string} label - The button's label, will be overridden by slotted content. + * @property {string} type - The button type. + * Options: default, primary, destructive, icon, icon ghost, ghost. + * @property {string} size - The button size. + * Options: default, small. + * @property {boolean} disabled - The disabled state. + * @property {string} title - The button's title attribute, used in shadow DOM and therefore not as an attribute on moz-button. + * @property {string} titleAttribute - Internal, map title attribute to the title JS property. + * @property {string} tooltipText - Set the title property, the title attribute will be used first. + * @property {string} ariaLabel - The button's arial-label attribute, used in shadow DOM and therefore not as an attribute on moz-button. + * @property {string} ariaLabelAttribute - Internal, map aria-label attribute to the ariaLabel JS property. + * @property {HTMLButtonElement} buttonEl - The internal button element in the shadow DOM. + * @slot default - The button's content, overrides label property. + * @fires click - The click event. + */ +export default class MozButton extends MozLitElement { + static shadowRootOptions = { + ...MozLitElement.shadowRootOptions, + delegatesFocus: true, + }; + + static properties = { + label: { type: String, reflect: true }, + type: { type: String, reflect: true }, + size: { type: String, reflect: true }, + disabled: { type: Boolean, reflect: true }, + title: { type: String, state: true }, + titleAttribute: { type: String, attribute: "title", reflect: true }, + tooltipText: { type: String }, + ariaLabelAttribute: { + type: String, + attribute: "aria-label", + reflect: true, + }, + ariaLabel: { type: String, state: true }, + }; + + static queries = { + buttonEl: "button", + }; + + constructor() { + super(); + this.type = "default"; + this.size = "default"; + this.disabled = false; + } + + willUpdate(changes) { + if (changes.has("titleAttribute")) { + this.title = this.titleAttribute; + this.titleAttribute = null; + } + if (changes.has("ariaLabelAttribute")) { + this.ariaLabel = this.ariaLabelAttribute; + this.ariaLabelAttribute = null; + } + } + + render() { + return html` + <link + rel="stylesheet" + href="chrome://global/content/elements/moz-button.css" + /> + <button + type=${this.type} + size=${this.size} + ?disabled=${this.disabled} + title=${ifDefined(this.title || this.tooltipText)} + aria-label=${ifDefined(this.ariaLabel)} + part="button" + > + <slot>${this.label}</slot> + </button> + `; + } +} +customElements.define("moz-button", MozButton); |