DEV: replaces subtitle by description (#28881)
Description should be above the field and that makes subtitle useless. Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
This commit is contained in:
parent
dd5502f166
commit
e4e2bc7add
|
@ -82,7 +82,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
|
|||
<form.Field
|
||||
@name="communityOwner"
|
||||
@title={{i18n "admin.config_areas.about.community_owner"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.community_owner_help"}}
|
||||
@description={{i18n "admin.config_areas.about.community_owner_help"}}
|
||||
@format="large"
|
||||
as |field|
|
||||
>
|
||||
|
@ -96,7 +96,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
|
|||
<form.Field
|
||||
@name="contactEmail"
|
||||
@title={{i18n "admin.config_areas.about.contact_email"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.contact_email_help"}}
|
||||
@description={{i18n "admin.config_areas.about.contact_email_help"}}
|
||||
@type="email"
|
||||
@format="large"
|
||||
as |field|
|
||||
|
@ -111,7 +111,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
|
|||
<form.Field
|
||||
@name="contactURL"
|
||||
@title={{i18n "admin.config_areas.about.contact_url"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.contact_url_help"}}
|
||||
@description={{i18n "admin.config_areas.about.contact_url_help"}}
|
||||
@type="url"
|
||||
@format="large"
|
||||
as |field|
|
||||
|
@ -126,7 +126,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
|
|||
<form.Field
|
||||
@name="contactUsername"
|
||||
@title={{i18n "admin.config_areas.about.site_contact_name"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.site_contact_name_help"}}
|
||||
@description={{i18n "admin.config_areas.about.site_contact_name_help"}}
|
||||
@onSet={{this.setContactUsername}}
|
||||
@format="large"
|
||||
as |field|
|
||||
|
@ -143,7 +143,7 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
|
|||
<form.Field
|
||||
@name="contactGroupName"
|
||||
@title={{i18n "admin.config_areas.about.site_contact_group"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.site_contact_group_help"}}
|
||||
@description={{i18n "admin.config_areas.about.site_contact_group_help"}}
|
||||
@onSet={{this.setContactGroup}}
|
||||
@format="large"
|
||||
as |field|
|
||||
|
|
|
@ -98,7 +98,7 @@ export default class AdminConfigAreasAboutGeneralSettings extends Component {
|
|||
<form.Field
|
||||
@name="aboutBannerImage"
|
||||
@title={{i18n "admin.config_areas.about.banner_image"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.banner_image_help"}}
|
||||
@description={{i18n "admin.config_areas.about.banner_image_help"}}
|
||||
@onSet={{this.setImage}}
|
||||
as |field|
|
||||
>
|
||||
|
|
|
@ -58,7 +58,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
|
|||
<form.Field
|
||||
@name="companyName"
|
||||
@title={{i18n "admin.config_areas.about.company_name"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.company_name_help"}}
|
||||
@description={{i18n "admin.config_areas.about.company_name_help"}}
|
||||
@format="large"
|
||||
as |field|
|
||||
>
|
||||
|
@ -75,7 +75,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
|
|||
<form.Field
|
||||
@name="governingLaw"
|
||||
@title={{i18n "admin.config_areas.about.governing_law"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.governing_law_help"}}
|
||||
@description={{i18n "admin.config_areas.about.governing_law_help"}}
|
||||
@format="large"
|
||||
as |field|
|
||||
>
|
||||
|
@ -89,7 +89,7 @@ export default class AdminConfigAreasAboutYourOrganization extends Component {
|
|||
<form.Field
|
||||
@name="cityForDisputes"
|
||||
@title={{i18n "admin.config_areas.about.city_for_disputes"}}
|
||||
@subtitle={{i18n "admin.config_areas.about.city_for_disputes_help"}}
|
||||
@description={{i18n "admin.config_areas.about.city_for_disputes_help"}}
|
||||
@format="large"
|
||||
as |field|
|
||||
>
|
||||
|
|
|
@ -3,7 +3,7 @@ import { concat } from "@ember/helper";
|
|||
import { action } from "@ember/object";
|
||||
import FKLabel from "discourse/form-kit/components/fk/label";
|
||||
import FKMeta from "discourse/form-kit/components/fk/meta";
|
||||
import FormText from "discourse/form-kit/components/fk/text";
|
||||
import FKText from "discourse/form-kit/components/fk/text";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import i18n from "discourse-common/helpers/i18n";
|
||||
|
||||
|
@ -60,10 +60,10 @@ export default class FKControlWrapper extends Component {
|
|||
</FKLabel>
|
||||
{{/if}}
|
||||
|
||||
{{#if @field.subtitle}}
|
||||
<FormText
|
||||
class="form-kit__container-subtitle"
|
||||
>{{@field.subtitle}}</FormText>
|
||||
{{#if @field.description}}
|
||||
<FKText
|
||||
class="form-kit__container-description"
|
||||
>{{@field.description}}</FKText>
|
||||
{{/if}}
|
||||
|
||||
<div
|
||||
|
@ -93,12 +93,7 @@ export default class FKControlWrapper extends Component {
|
|||
{{yield components}}
|
||||
</@component>
|
||||
|
||||
<FKMeta
|
||||
@description={{@field.description}}
|
||||
@value={{@value}}
|
||||
@field={{@field}}
|
||||
@error={{this.error}}
|
||||
/>
|
||||
<FKMeta @value={{@value}} @field={{@field}} @error={{this.error}} />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -3,7 +3,6 @@ import { hash } from "@ember/helper";
|
|||
import FKFieldset from "discourse/form-kit/components/fk/fieldset";
|
||||
import FKControlRadioGroupRadio from "./radio-group/radio";
|
||||
|
||||
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
|
||||
export default class FKControlRadioGroup extends Component {
|
||||
static controlType = "radio-group";
|
||||
|
||||
|
|
|
@ -49,7 +49,6 @@ export default class FKField extends Component {
|
|||
this.field = this.args.registerField(this.name, {
|
||||
triggerRevalidationFor: this.args.triggerRevalidationFor,
|
||||
title: this.args.title,
|
||||
subtitle: this.args.subtitle,
|
||||
description: this.args.description,
|
||||
showTitle: this.args.showTitle,
|
||||
collectionIndex: this.args.collectionIndex,
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import Component from "@glimmer/component";
|
||||
import FKCharCounter from "discourse/form-kit/components/fk/char-counter";
|
||||
import FKErrors from "discourse/form-kit/components/fk/errors";
|
||||
import FKText from "discourse/form-kit/components/fk/text";
|
||||
|
||||
export default class FKMeta extends Component {
|
||||
get shouldRenderCharCounter() {
|
||||
|
@ -9,12 +8,7 @@ export default class FKMeta extends Component {
|
|||
}
|
||||
|
||||
get shouldRenderMeta() {
|
||||
return (
|
||||
this.showMeta &&
|
||||
(this.shouldRenderCharCounter ||
|
||||
this.args.error ||
|
||||
this.args.description?.length)
|
||||
);
|
||||
return this.showMeta && (this.shouldRenderCharCounter || this.args.error);
|
||||
}
|
||||
|
||||
get showMeta() {
|
||||
|
@ -26,8 +20,6 @@ export default class FKMeta extends Component {
|
|||
<div class="form-kit__meta">
|
||||
{{#if @error}}
|
||||
<FKErrors @id={{@field.errorId}} @error={{@error}} />
|
||||
{{else if @description}}
|
||||
<FKText class="form-kit__meta-description">{{@description}}</FKText>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.shouldRenderCharCounter}}
|
||||
|
|
|
@ -142,12 +142,6 @@ class FieldHelper {
|
|||
}
|
||||
}
|
||||
|
||||
hasSubtitle(subtitle, message) {
|
||||
this.context
|
||||
.dom(this.element.querySelector(".form-kit__container-subtitle"))
|
||||
.hasText(subtitle, message);
|
||||
}
|
||||
|
||||
hasDescription(description, message) {
|
||||
switch (this.element.dataset.controlType) {
|
||||
case "checkbox": {
|
||||
|
@ -162,7 +156,7 @@ class FieldHelper {
|
|||
}
|
||||
default: {
|
||||
this.context
|
||||
.dom(this.element.querySelector(".form-kit__meta-description"))
|
||||
.dom(this.element.querySelector(".form-kit__container-description"))
|
||||
.hasText(description, message);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ module(
|
|||
test("default", async function (assert) {
|
||||
await render(<template>
|
||||
<Form as |form|>
|
||||
<form.Field @name="foo" @title="Foo" @subtitle="Bar" as |field|>
|
||||
<form.Field @name="foo" @title="Foo" @description="Bar" as |field|>
|
||||
<field.Custom>
|
||||
<input class="custom-test" />
|
||||
</field.Custom>
|
||||
|
@ -20,7 +20,7 @@ module(
|
|||
</template>);
|
||||
|
||||
assert.dom(".form-kit__container-title").hasText("Foo (optional)");
|
||||
assert.dom(".form-kit__container-subtitle").hasText("Bar");
|
||||
assert.dom(".form-kit__container-description").hasText("Bar");
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
|
@ -35,18 +35,6 @@ module("Integration | Component | FormKit | Field", function (hooks) {
|
|||
assert.dom(".form-kit__row .form-kit__col.--col-8").hasText("Test");
|
||||
});
|
||||
|
||||
test("@subtitle", async function (assert) {
|
||||
await render(<template>
|
||||
<Form as |form|>
|
||||
<form.Field @name="foo" @title="Foo" @subtitle="foo foo" as |field|>
|
||||
<field.Input />
|
||||
</form.Field>
|
||||
</Form>
|
||||
</template>);
|
||||
|
||||
assert.form().field("foo").hasSubtitle("foo foo");
|
||||
});
|
||||
|
||||
test("@description", async function (assert) {
|
||||
await render(<template>
|
||||
<Form as |form|>
|
||||
|
|
|
@ -35,6 +35,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-kit__container-description {
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.form-kit__container-content {
|
||||
&.--small {
|
||||
width: var(--form-kit-small-input) !important;
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
</form.Field>
|
||||
<form.Field
|
||||
@title="Secret"
|
||||
@subtitle="Another secret"
|
||||
@name="secret"
|
||||
@description="An important password"
|
||||
as |field|
|
||||
|
|
Loading…
Reference in New Issue