65408c676d
Prevent support links in moz-fieldset from wrapping. Style the legend element as an inline-block until there is a description present. This case will switch the legend to block so that the description is always on a new line. Refactor and remove redundant code in moz-fieldset stories file. Update main render function so that the support link is rendered correctly if there is no description. Add support link named slot. Fixed styling of links by handling whitespace through whitespace characters in the templates instead of CSS. This is because the way templates need to be formatted to avoid these whitespace characters will not pass our current linter rules. Update tests for using support links in moz-fieldset. Add stories for slotted support link and slotted support link with description. Differential Revision: https://phabricator.services.mozilla.com/D226550
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/* 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";
|
|
|
|
/**
|
|
* Fieldset wrapper to lay out form inputs consistently.
|
|
*
|
|
* @tagname moz-fieldset
|
|
* @property {string} label - The label for the fieldset's legend.
|
|
* @property {string} description - The description for the fieldset.
|
|
* @property {string} supportPage - Name of the SUMO support page to link to.
|
|
*/
|
|
export default class MozFieldset extends MozLitElement {
|
|
static properties = {
|
|
label: { type: String, fluent: true },
|
|
description: { type: String, fluent: true },
|
|
supportPage: { type: String, attribute: "support-page" },
|
|
};
|
|
|
|
descriptionTemplate() {
|
|
if (this.description) {
|
|
return html`<span id="description" class="description text-deemphasized">
|
|
${this.description}
|
|
</span>
|
|
${this.supportPageTemplate()}`;
|
|
}
|
|
return "";
|
|
}
|
|
supportPageTemplate() {
|
|
if (this.supportPage) {
|
|
return html`<a
|
|
is="moz-support-link"
|
|
support-page=${this.supportPage}
|
|
part="support-link"
|
|
></a>`;
|
|
}
|
|
return html`<slot name="support-link"></slot>`;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://global/content/elements/moz-fieldset.css"
|
|
/>
|
|
<fieldset
|
|
aria-describedby=${ifDefined(this.description ? "description" : null)}
|
|
>
|
|
<legend part="label">${this.label}</legend>
|
|
${!this.description ? this.supportPageTemplate() : ""}
|
|
${this.descriptionTemplate()}
|
|
<div id="inputs" part="inputs">
|
|
<slot></slot>
|
|
</div>
|
|
</fieldset>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("moz-fieldset", MozFieldset);
|