IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-09-05 04:40:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Rename DSelect to DNativeSelect (#43048)

Browse Source 
Renames the native `<select>` wrapper so the `DSelect` name is free for
an upcoming richer select component. The component now lives at
`discourse/ui-kit/d-native-select` and renders the `.d-native-select`
class. `DSelectOption` becomes `DNativeSelectOption`; the
`NO_VALUE_OPTION` constant keeps its name.

Nothing breaks for existing consumers. Both old module paths,
`discourse/components/d-select` and `discourse/ui-kit/d-select`, resolve
to the new module through loader shims. The test helpers follow the
rename: the system spec page object is now
`PageObjects::Components::DNativeSelect` and the QUnit assertion is
`assert.dnativeselect()`.

Companion PRs update the `ui-kit-imports` autofix mapping in
lint-configs and the one known external consumer.
This commit is contained in:
Sérgio Saquetim
2026-09-01 15:52:57 -03:00
committed by GitHub
parent b26e51de26
commit 087df17102
34 changed files with 126 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.skills/discourse-writing-js-tests/SKILL.md
+1 -1
View File
@@ -204,7 +204,7 @@ Beyond [qunit-dom](https://github.com/mainmatter/qunit-dom/blob/master/API.md)'s
- `assert.present(value, msg)` / `assert.blank(value, msg)` — Ember `isEmpty` checks.
- `assert.containsInstance(collection, klass, msg)`.
- Domain assertions registered at import time: `assert.form()` (FormKit, see
`form-kit-assertions.js`), `assert.dselect()` (`d-select-assertions.js`),
`form-kit-assertions.js`), `assert.dnativeselect()` (`d-native-select-assertions.js`),
`assert.notificationsTracking()` (`notifications-tracking-assertions.js`).
## Running tests
app/assets/stylesheets/admin/color_palettes.scss
+1 -1
View File
@@ -100,7 +100,7 @@
flex: 4 1 auto;
}
.d-select {
.d-native-select {
flex: 1 1 auto;
width: auto;
}
app/assets/stylesheets/common/components/_index.scss
+1 -1
View File
@@ -11,7 +11,7 @@
@import "bulk-topic-actions-manage-tags";
@import "buttons";
@import "d-segmented-control";
@import "d-select";
@import "d-native-select";
@import "d-skeleton";
@import "d-access-control";
@import "color-input";
app/assets/stylesheets/common/components/d-select.scss → app/assets/stylesheets/common/components/d-native-select.scss
+1 -1
View File
@@ -1,4 +1,4 @@
.d-select {
.d-native-select {
width: 100%;
height: 2.25em;
background: var(--secondary);
docs/developer-guides/docs/03-code-internals/02-ui-kit.md
+2 -2
View File
@@ -8,7 +8,7 @@ id: ui-kit
`ui-kit` is the layer of reusable, domain-free building blocks that core, plugins, and themes compose their interfaces from. It lives under `frontend/discourse/app/ui-kit/` and ships three kinds of primitive:
- **Components**: `d-button`, `d-modal`, `d-select`, `d-skeleton`, and so on.
- **Components**: `d-button`, `d-modal`, `d-native-select`, `d-skeleton`, and so on.
- **Helpers** (`ui-kit/helpers/`): `d-icon`, `d-format-date`, `d-concat-class`, `d-user-avatar`, and so on.
- **Modifiers** (`ui-kit/modifiers/`): `d-trap-tab`, `d-on-resize`, `d-close-on-click-outside`, the drag-and-drop family, and so on.
@@ -78,7 +78,7 @@ Form-level composition belongs to [FormKit](22-form-kit.md). These are the under
| Primitive | Use it for | Styleguide |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | -------------------------------------------------------------------------------- |
| `DSelect` | A native `<select>` with Discourse styling. | [Dropdowns](https://meta.discourse.org/styleguide/atoms/dropdowns) |
| `DNativeSelect` | A native `<select>` with Discourse styling. | [Dropdowns](https://meta.discourse.org/styleguide/atoms/dropdowns) |
| `DMultiSelect` | Choose several values with search. | [Multi select](https://meta.discourse.org/styleguide/molecules/multi-select) |
| `DTextField`, `DTextarea`, `DExpandingTextArea`, `DPasswordField`, `DRadioButton` | Single controls. | [Forms](https://meta.discourse.org/styleguide/atoms/forms) |
| `DDateInput`, `DDatePicker`, `DTimeInput`, `DDateTimeInput`, `DDateTimeInputRange`, `DFutureDateInput`, `DRelativeTimePicker`, `DTimeShortcutPicker`, `DCalendarDateTimeInput` | Dates, times, and ranges. | [Date/time inputs](https://meta.discourse.org/styleguide/atoms/date-time-inputs) |
docs/developer-guides/docs/03-code-internals/22-form-kit.md
+1 -1
View File
@@ -1009,7 +1009,7 @@ Allows to render a description.
## Select
Renders a `<DSelect />` component.
Renders a `<DNativeSelect />` component.
### @includeNone
frontend/discourse/admin/components/admin-config-areas/upcoming-change-item.gjs
+3 -3
View File
@@ -24,7 +24,7 @@ import { sanitize } from "discourse/lib/text";
import Group from "discourse/models/group";
import { eq } from "discourse/truth-helpers";
import DButton from "discourse/ui-kit/d-button";
import DSelect from "discourse/ui-kit/d-select";
import DNativeSelect from "discourse/ui-kit/d-native-select";
import dBasePath from "discourse/ui-kit/helpers/d-base-path";
import dIcon from "discourse/ui-kit/helpers/d-icon";
import { i18n } from "discourse-i18n";
@@ -389,7 +389,7 @@ export default class UpcomingChangeItem extends Component {
{{i18n "admin.upcoming_changes.enabled_for"}}
</div>
<DSelect
<DNativeSelect
@value={{this.bufferedEnabledFor}}
@onChange={{this.enabledForChanged}}
@includeNone={{false}}
@@ -402,7 +402,7 @@ export default class UpcomingChangeItem extends Component {
{{option.label}}
</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
{{#if this.showDependentSettingsLink}}
<div class="upcoming-change__dependents">
frontend/discourse/app/components/edit-topic-timer-form.gjs
+3 -3
View File
@@ -22,8 +22,8 @@ import {
} from "discourse/lib/time-shortcut";
import CategoryChooser from "discourse/select-kit/components/category-chooser";
import { FORMAT } from "discourse/select-kit/components/future-date-input-selector";
import DNativeSelect from "discourse/ui-kit/d-native-select";
import DRelativeTimePicker from "discourse/ui-kit/d-relative-time-picker";
import DSelect from "discourse/ui-kit/d-select";
import DTimeShortcutPicker from "discourse/ui-kit/d-time-shortcut-picker";
import dIcon from "discourse/ui-kit/helpers/d-icon";
import { i18n } from "discourse-i18n";
@@ -235,7 +235,7 @@ export default class EditTopicTimerForm extends Component {
<template>
<form>
<div class="control-group">
<DSelect
<DNativeSelect
@value={{this.statusType}}
class="timer-type"
@onChange={{@onChangeStatusType}}
@@ -244,7 +244,7 @@ export default class EditTopicTimerForm extends Component {
{{#each @timerTypes as |timer|}}
<select.Option @value={{timer.id}}>{{timer.name}}</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
</div>
{{#if this.publishToCategory}}
frontend/discourse/app/components/modal/sidebar-section-form.gjs
+5 -5
View File
@@ -24,7 +24,7 @@ import { autoTrackedArray } from "discourse/lib/tracked-tools";
import { eq, has, not } from "discourse/truth-helpers";
import DButton from "discourse/ui-kit/d-button";
import DModal from "discourse/ui-kit/d-modal";
import DSelect from "discourse/ui-kit/d-select";
import DNativeSelect from "discourse/ui-kit/d-native-select";
import dIcon from "discourse/ui-kit/helpers/d-icon";
import { i18n } from "discourse-i18n";
@@ -1237,7 +1237,7 @@ export default class SidebarSectionForm extends Component {
data-locale={{group.locale}}
>
<div class="sidebar-section-translations__language-header">
<DSelect
<DNativeSelect
@value={{group.locale}}
@onChange={{fn this.setGroupLocale group}}
@includeNone={{false}}
@@ -1253,7 +1253,7 @@ export default class SidebarSectionForm extends Component {
disabled={{locale.disabled}}
>{{locale.name}}</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
<DButton
@action={{fn this.removeLanguage group}}
@@ -1306,7 +1306,7 @@ export default class SidebarSectionForm extends Component {
{{i18n "sidebar.sections.custom.localizations.language"}}
</label>
<DSelect
<DNativeSelect
@value={{this.transformedModel.locale}}
@onChange={{this.setSourceLocale}}
@includeNone={{false}}
@@ -1319,7 +1319,7 @@ export default class SidebarSectionForm extends Component {
@value={{locale.value}}
>{{locale.name}}</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
<p class="sidebar-section-form__source-locale-description">
{{i18n
frontend/discourse/app/form-kit/components/fk/control/select.gjs
+7 -5
View File
@@ -1,16 +1,18 @@
import { hash } from "@ember/helper";
import { isBlank } from "@ember/utils";
import FKBaseControl from "discourse/form-kit/components/fk/control/base";
import DSelect, { DSelectOption } from "discourse/ui-kit/d-select";
import DNativeSelect, {
DNativeSelectOption,
} from "discourse/ui-kit/d-native-select";
const SelectOption = <template>
<DSelectOption
<DNativeSelectOption
@value={{@value}}
@selected={{@selected}}
class="form-kit__control-option"
>
{{yield}}
</DSelectOption>
</DNativeSelectOption>
</template>;
export default class FKControlSelect extends FKBaseControl {
@@ -27,7 +29,7 @@ export default class FKControlSelect extends FKBaseControl {
}
<template>
<DSelect
<DNativeSelect
class="form-kit__control-select"
disabled={{@field.disabled}}
@value={{@field.value}}
@@ -41,6 +43,6 @@ export default class FKControlSelect extends FKBaseControl {
...attributes
>
{{yield (hash Option=(component SelectOption selected=@field.value))}}
</DSelect>
</DNativeSelect>
</template>
}
frontend/discourse/app/ui-kit-shims.js
+8 -3
View File
@@ -48,9 +48,6 @@ loaderShim("discourse/components/d-page-header", () =>
loaderShim("discourse/components/d-page-subheader", () =>
importSync("discourse/ui-kit/d-page-subheader")
);
loaderShim("discourse/components/d-select", () =>
importSync("discourse/ui-kit/d-select")
);
loaderShim("discourse/components/d-stat-tiles", () =>
importSync("discourse/ui-kit/d-stat-tiles")
);
@@ -246,6 +243,14 @@ loaderShim("discourse/components/user-status-message", () =>
importSync("discourse/ui-kit/d-user-status-message")
);
// Components - renamed within ui-kit
loaderShim("discourse/components/d-select", () =>
importSync("discourse/ui-kit/d-native-select")
);
loaderShim("discourse/ui-kit/d-select", () =>
importSync("discourse/ui-kit/d-native-select")
);
// Helpers
loaderShim("discourse/helpers/d-icon", () =>
importSync("discourse/ui-kit/helpers/d-icon")
frontend/discourse/app/ui-kit/d-filter-controls.gjs
+5 -5
View File
@@ -17,7 +17,7 @@ import DiscourseURL, {
import { and, eq, not, or } from "discourse/truth-helpers";
import DButton from "discourse/ui-kit/d-button";
import DFilterInput from "discourse/ui-kit/d-filter-input";
import DSelect from "discourse/ui-kit/d-select";
import DNativeSelect from "discourse/ui-kit/d-native-select";
import dConcatClass from "discourse/ui-kit/helpers/d-concat-class";
const ResetButton = <template>
@@ -524,7 +524,7 @@ export default class DFilterControls extends Component {
<div class="d-filter-controls__dropdowns">
{{#if this.hasMultipleDropdowns}}
{{#each-in this.dropdownOptions as |key options|}}
<DSelect
<DNativeSelect
@value={{get this.dropdownFilters key}}
@includeNone={{false}}
@onChange={{fn this.onDropdownFilterChange key}}
@@ -547,10 +547,10 @@ export default class DFilterControls extends Component {
{{option.label}}
</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
{{/each-in}}
{{else}}
<DSelect
<DNativeSelect
@value={{this.dropdownFilter}}
@includeNone={{false}}
@onChange={{this.onDropdownFilterChange}}
@@ -569,7 +569,7 @@ export default class DFilterControls extends Component {
{{option.label}}
</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
{{/if}}
{{yield to="additionalFilters"}}
frontend/discourse/app/ui-kit/d-select.gjs → frontend/discourse/app/ui-kit/d-native-select.gjs
+10 -8
View File
@@ -18,7 +18,7 @@ const claimSelectedAfterRender = modifier((element, [selected]) => {
}
});
export class DSelectOption extends Component {
export class DNativeSelectOption extends Component {
get value() {
return optionValue(this.args.value);
}
@@ -32,8 +32,8 @@ export class DSelectOption extends Component {
<option
class={{if
this.isSelected
"d-select__option --selected"
"d-select__option"
"d-native-select__option --selected"
"d-native-select__option"
}}
value={{this.value}}
selected={{this.isSelected}}
@@ -45,7 +45,7 @@ export class DSelectOption extends Component {
</template>
}
export default class DSelect extends Component {
export default class DNativeSelect extends Component {
get htmlSelectValue() {
const value = this.args.value;
if (value === NO_VALUE_OPTION) {
@@ -78,11 +78,11 @@ export default class DSelect extends Component {
<select
value={{this.htmlSelectValue}}
...attributes
class="d-select"
class="d-native-select"
{{on "input" this.handleInput}}
>
{{#if this.includeNone}}
<DSelectOption
<DNativeSelectOption
@value={{NO_VALUE_OPTION}}
@selected={{this.htmlSelectValue}}
>
@@ -95,11 +95,13 @@ export default class DSelect extends Component {
{{i18n "select_placeholder"}}
{{/if}}
{{/if}}
</DSelectOption>
</DNativeSelectOption>
{{/if}}
{{yield
(hash Option=(component DSelectOption selected=this.htmlSelectValue))
(hash
Option=(component DNativeSelectOption selected=this.htmlSelectValue)
)
}}
</select>
</template>
frontend/discourse/tests/acceptance/category-edit-test.js
+2 -2
View File
@@ -9,7 +9,7 @@ import pretender, {
import formKit from "discourse/tests/helpers/form-kit-helper";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
import selectKit from "discourse/tests/helpers/select-kit-helper";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-select";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-native-select";
import { i18n } from "discourse-i18n";
function latestCategorySavePayload() {
@@ -615,7 +615,7 @@ acceptance(
await visit("/c/bug/edit/images");
assert
.dselect("[data-name='sort_order'] .d-select")
.dnativeselect("[data-name='sort_order'] .d-native-select")
.hasSelectedOption(
{ value: "votes", label: "votes" },
"renders and selects a stored value the core list doesn't provide"
frontend/discourse/tests/acceptance/topic-edit-timer-test.js
+5 -5
View File
@@ -277,7 +277,7 @@ acceptance("Topic - Edit timer", function (needs) {
await click(".admin-topic-timer-update button");
assert
.dselect(".timer-type")
.dnativeselect(".timer-type")
.hasNoOption(
"publish_to_category",
"publish to category is not shown for a public topic"
@@ -291,7 +291,7 @@ acceptance("Topic - Edit timer", function (needs) {
await click(".toggle-admin-menu");
await click(".admin-topic-timer-update button");
assert.dselect(".timer-type").hasNoOption("delete");
assert.dnativeselect(".timer-type").hasNoOption("delete");
});
test("Category Moderator can auto-delete replies", async function (assert) {
@@ -301,7 +301,7 @@ acceptance("Topic - Edit timer", function (needs) {
await click(".toggle-admin-menu");
await click(".admin-topic-timer-update button");
assert.dselect(".timer-type").hasOption({
assert.dnativeselect(".timer-type").hasOption({
value: "delete_replies",
label: i18n("topic.auto_delete_replies.title"),
});
@@ -314,7 +314,7 @@ acceptance("Topic - Edit timer", function (needs) {
await click(".toggle-admin-menu");
await click(".admin-topic-timer-update button");
assert.dselect(".timer-type").hasNoOption("delete_replies");
assert.dnativeselect(".timer-type").hasNoOption("delete_replies");
});
test("Category Moderator can auto-delete", async function (assert) {
@@ -325,7 +325,7 @@ acceptance("Topic - Edit timer", function (needs) {
await click(".admin-topic-timer-update button");
assert
.dselect(".timer-type")
.dnativeselect(".timer-type")
.hasOption({ value: "delete", label: i18n("topic.auto_delete.title") });
});
frontend/discourse/tests/helpers/d-select-assertions.js → frontend/discourse/tests/helpers/d-native-select-assertions.js
+6 -6
View File
@@ -1,7 +1,7 @@
import { find } from "@ember/test-helpers";
import QUnit from "qunit";
class DSelect {
class DNativeSelect {
constructor(selector, context) {
this.context = context;
if (selector instanceof HTMLElement) {
@@ -13,7 +13,7 @@ class DSelect {
hasOption({ value, label }, assertionMessage) {
const option = this.element.querySelector(
`.d-select__option[value="${value}"]`
`.d-native-select__option[value="${value}"]`
);
this.context.dom(option).exists(assertionMessage);
@@ -24,7 +24,7 @@ class DSelect {
hasNoOption(value, assertionMessage) {
const option = this.element.querySelector(
`.d-select__option[value="${value}"]`
`.d-native-select__option[value="${value}"]`
);
this.context.dom(option).doesNotExist(assertionMessage);
@@ -53,8 +53,8 @@ class DSelect {
}
}
export function setupDSelectAssertions() {
QUnit.assert.dselect = function (selector = ".d-select") {
return new DSelect(selector, this);
export function setupDNativeSelectAssertions() {
QUnit.assert.dnativeselect = function (selector = ".d-native-select") {
return new DNativeSelect(selector, this);
};
}
frontend/discourse/tests/helpers/qunit-helpers.js
+2 -2
View File
@@ -121,7 +121,7 @@ import { clearToolbarCallbacks } from "discourse/ui-kit/d-editor";
import { resetDragSourcesForTesting } from "discourse/ui-kit/modifiers/d-drag-and-drop-source";
import { resetPointerDragForTesting } from "discourse/ui-kit/modifiers/d-pointer-drag";
import I18n from "discourse-i18n";
import { setupDSelectAssertions } from "./d-select-assertions";
import { setupDNativeSelectAssertions } from "./d-native-select-assertions";
import { setupFormKitAssertions } from "./form-kit-assertions";
import { setupNotificationsTrackingAssertions } from "./notifications-tracking-assertions";
import { cleanupTemporaryModuleRegistrations } from "./temporary-module-helper";
@@ -508,7 +508,7 @@ QUnit.assert.containsInstance = function (collection, klass, message) {
};
setupFormKitAssertions();
setupDSelectAssertions();
setupDNativeSelectAssertions();
setupNotificationsTrackingAssertions();
export async function selectDate(selector, date) {
frontend/discourse/tests/integration/components/form-kit/controls/select-test.gjs
+1 -1
View File
@@ -4,7 +4,7 @@ import { module, test } from "qunit";
import Form from "discourse/components/form";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import formKit from "discourse/tests/helpers/form-kit-helper";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-select";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-native-select";
module(
"Integration | Component | FormKit | Controls | Select",
frontend/discourse/tests/integration/ui-kit/d-select-test.gjs → frontend/discourse/tests/integration/ui-kit/d-native-select-test.gjs
+36 -34
View File
@@ -2,10 +2,12 @@ import { tracked } from "@glimmer/tracking";
import { render, select, settled } from "@ember/test-helpers";
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import DSelect, { NO_VALUE_OPTION } from "discourse/ui-kit/d-select";
import DNativeSelect, {
NO_VALUE_OPTION,
} from "discourse/ui-kit/d-native-select";
import { i18n } from "discourse-i18n";
module("Integration | ui-kit | DSelect", function (hooks) {
module("Integration | ui-kit | DNativeSelect", function (hooks) {
setupRenderingTest(hooks);
test("@onChange", async function (assert) {
@@ -15,13 +17,13 @@ module("Integration | ui-kit | DSelect", function (hooks) {
await render(
<template>
<DSelect @onChange={{handleChange}} as |s|>
<DNativeSelect @onChange={{handleChange}} as |s|>
<s.Option @value="foo">The real foo</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
await select(".d-select", "foo");
await select(".d-native-select", "foo");
assert.verifySteps(["foo"]);
});
@@ -32,13 +34,13 @@ module("Integration | ui-kit | DSelect", function (hooks) {
await render(
<template>
<DSelect @value="foo" @onChange={{handleChange}} as |s|>
<DNativeSelect @value="foo" @onChange={{handleChange}} as |s|>
<s.Option @value="foo">The real foo</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
await select(".d-select", NO_VALUE_OPTION);
await select(".d-native-select", NO_VALUE_OPTION);
assert.strictEqual(
changedValue,
@@ -48,9 +50,9 @@ module("Integration | ui-kit | DSelect", function (hooks) {
});
test("no value", async function (assert) {
await render(<template><DSelect /></template>);
await render(<template><DNativeSelect /></template>);
assert.dselect().hasSelectedOption({
assert.dnativeselect().hasSelectedOption({
value: NO_VALUE_OPTION,
label: i18n("select_placeholder"),
});
@@ -59,18 +61,18 @@ module("Integration | ui-kit | DSelect", function (hooks) {
test("selected value", async function (assert) {
await render(
<template>
<DSelect @value="foo" as |s|>
<DNativeSelect @value="foo" as |s|>
<s.Option @value="foo">The real foo</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
assert.dselect().hasOption({
assert.dnativeselect().hasOption({
value: NO_VALUE_OPTION,
label: i18n("none_placeholder"),
});
assert.dselect().hasSelectedOption({
assert.dnativeselect().hasSelectedOption({
value: "foo",
label: "The real foo",
});
@@ -79,19 +81,19 @@ module("Integration | ui-kit | DSelect", function (hooks) {
test("selected falsy value", async function (assert) {
await render(
<template>
<DSelect @value={{false}} as |s|>
<DNativeSelect @value={{false}} as |s|>
<s.Option @value={{false}}>The real false</s.Option>
<s.Option @value={{true}}>The real true</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
assert.dselect().hasOption({
assert.dnativeselect().hasOption({
value: NO_VALUE_OPTION,
label: i18n("none_placeholder"),
});
assert.dselect().hasSelectedOption({
assert.dnativeselect().hasSelectedOption({
value: "false",
label: "The real false",
});
@@ -110,15 +112,15 @@ module("Integration | ui-kit | DSelect", function (hooks) {
await render(
<template>
<DSelect @value="bar" as |s|>
<DNativeSelect @value="bar" as |s|>
{{#each state.options as |option|}}
<s.Option @value={{option.value}}>{{option.label}}</s.Option>
{{/each}}
</DSelect>
</DNativeSelect>
</template>
);
assert.dselect().hasSelectedOption({
assert.dnativeselect().hasSelectedOption({
value: "bar",
label: "The real bar",
});
@@ -130,7 +132,7 @@ module("Integration | ui-kit | DSelect", function (hooks) {
];
await settled();
assert.dselect().hasSelectedOption({
assert.dnativeselect().hasSelectedOption({
value: "bar",
label: "The real bar",
});
@@ -146,7 +148,7 @@ module("Integration | ui-kit | DSelect", function (hooks) {
await render(
<template>
<DSelect
<DNativeSelect
@includeNone={{false}}
@value={{state.value}}
@onChange={{handleChange}}
@@ -155,42 +157,42 @@ module("Integration | ui-kit | DSelect", function (hooks) {
<s.Option @value={{1}}>One</s.Option>
<s.Option @value={{30}}>Thirty</s.Option>
<s.Option @value={{90}}>Ninety</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
await select(".d-select", "90");
await select(".d-native-select", "90");
assert.dselect().hasSelectedOption({ value: "90", label: "Ninety" });
assert.dnativeselect().hasSelectedOption({ value: "90", label: "Ninety" });
});
test("required field", async function (assert) {
await render(
<template>
<DSelect @includeNone={{false}} as |s|>
<DNativeSelect @includeNone={{false}} as |s|>
<s.Option @value="foo">The real foo</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
assert.dselect().hasNoOption(NO_VALUE_OPTION);
assert.dnativeselect().hasNoOption(NO_VALUE_OPTION);
});
test("select attributes", async function (assert) {
await render(<template><DSelect class="test" /></template>);
await render(<template><DNativeSelect class="test" /></template>);
assert.dom(".d-select.test").exists();
assert.dom(".d-native-select.test").exists();
});
test("option attributes", async function (assert) {
await render(
<template>
<DSelect as |s|>
<DNativeSelect as |s|>
<s.Option @value="foo" class="test">The real foo</s.Option>
</DSelect>
</DNativeSelect>
</template>
);
assert.dom(".d-select__option.test").exists();
assert.dom(".d-native-select__option.test").exists();
});
});
plugins/discourse-ai/admin/assets/javascripts/discourse/components/ai-features.gjs
+3 -3
View File
@@ -6,8 +6,8 @@ import { service } from "@ember/service";
import DBreadcrumbsItem from "discourse/ui-kit/d-breadcrumbs-item";
import DButton from "discourse/ui-kit/d-button";
import DFilterInput from "discourse/ui-kit/d-filter-input";
import DNativeSelect from "discourse/ui-kit/d-native-select";
import DPageSubheader from "discourse/ui-kit/d-page-subheader";
import DSelect from "discourse/ui-kit/d-select";
import { i18n } from "discourse-i18n";
import AiDefaultLlmSelector from "./ai-default-llm-selector";
import AiFeaturesList from "./ai-features-list";
@@ -193,7 +193,7 @@ export default class AiFeatures extends Component {
/>
<div class="ai-features__controls">
<DSelect
<DNativeSelect
@value={{this.selectedFeatureGroup}}
@includeNone={{false}}
@onChange={{this.onFeatureGroupChange}}
@@ -204,7 +204,7 @@ export default class AiFeatures extends Component {
{{option.label}}
</select.Option>
{{/each}}
</DSelect>
</DNativeSelect>
<DFilterInput
placeholder={{i18n "discourse_ai.features.filters.text"}}
plugins/discourse-ai/assets/stylesheets/common/ai-features.scss
+1 -1
View File
@@ -122,7 +122,7 @@
flex: 6 1 auto;
}
.d-select {
.d-native-select {
flex: 1 1 auto;
max-width: 10em;
}
plugins/discourse-ai/assets/stylesheets/modules/ai-bot/common/ai-agent.scss
+1 -1
View File
@@ -75,7 +75,7 @@
flex: 4 1 auto;
}
.d-select {
.d-native-select {
flex: 1 1 auto;
width: auto;
height: auto;
plugins/discourse-ai/spec/system/page_objects/pages/admin_ai_features.rb
+2 -2
View File
@@ -11,12 +11,12 @@ module PageObjects
end
def toggle_enabled
select = page.find("#{FEATURES_PAGE} .ai-features__controls .d-select")
select = page.find("#{FEATURES_PAGE} .ai-features__controls .d-native-select")
select.find("option[value='enabled']").select_option
end
def toggle_not_enabled
select = page.find("#{FEATURES_PAGE} .ai-features__controls .d-select")
select = page.find("#{FEATURES_PAGE} .ai-features__controls .d-native-select")
select.find("option[value='not enabled']").select_option
end
plugins/discourse-events/assets/stylesheets/common/post-event-builder.scss
+1 -1
View File
@@ -15,7 +15,7 @@
flex: 1 1 auto;
}
.d-select {
.d-native-select {
text-overflow: ellipsis;
}
plugins/discourse-workflows/assets/stylesheets/common/configurator/configurator.scss
+1 -1
View File
@@ -117,7 +117,7 @@
}
> .combo-box,
> .d-select,
> .d-native-select,
> .icon-picker,
> .select-kit.combo-box.category-chooser,
> .user-chooser,
plugins/discourse-workflows/test/javascripts/integration/components/workflows/property-engine-test.gjs
+1 -1
View File
@@ -13,7 +13,7 @@ import Form from "discourse/components/form";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import pretender, { response } from "discourse/tests/helpers/create-pretender";
import selectKit from "discourse/tests/helpers/select-kit-helper";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-select";
import { NO_VALUE_OPTION } from "discourse/ui-kit/d-native-select";
import I18n, { i18n } from "discourse-i18n";
import PropertyEngineConfigurator from "discourse/plugins/discourse-workflows/admin/components/workflows/configurators/property-engine";
import WorkflowEditorSession from "discourse/plugins/discourse-workflows/admin/lib/workflows/editor-session";
spec/system/admin_color_palettes_config_area_spec.rb
+1 -1
View File
@@ -116,7 +116,7 @@ describe "Admin Color Palettes Config Area Page" do
it "can filter by type" do
config_area.visit
select_kit = PageObjects::Components::DSelect.new(".d-select")
select_kit = PageObjects::Components::DNativeSelect.new(".d-native-select")
select_kit.select("user_selectable")
expect(page).to have_css("[data-palette-id='#{user_selectable_palette.id}']")
spec/system/editing_topic_timers_spec.rb
+1 -1
View File
@@ -5,7 +5,7 @@ describe "Editing topic timers" do
fab!(:topic) { post.topic }
let(:topic_page) { PageObjects::Pages::Topic.new }
let(:timer_type_selector) { PageObjects::Components::DSelect.new(".timer-type") }
let(:timer_type_selector) { PageObjects::Components::DNativeSelect.new(".timer-type") }
before { sign_in(admin) }
spec/system/page_objects/components/d_select.rb → spec/system/page_objects/components/d_native_select.rb
+1 -1
View File
@@ -2,7 +2,7 @@
module PageObjects
module Components
class DSelect < PageObjects::Components::Base
class DNativeSelect < PageObjects::Components::Base
NO_VALUE_OPTION = "__NONE__"
attr_reader :select_element
spec/system/page_objects/components/form_kit.rb
+6 -6
View File
@@ -48,7 +48,7 @@ module PageObjects
when "menu"
component.find(".fk-d-menu__trigger")["data-value"]
when "select"
PageObjects::Components::DSelect.new(component.find("select")).value
PageObjects::Components::DNativeSelect.new(component.find("select")).value
when "radio-group"
component.find("input[type='radio']:checked", visible: :all).value
when "composer", "textarea"
@@ -170,9 +170,9 @@ module PageObjects
picker.select_row_by_name(value)
picker.collapse
when "select"
PageObjects::Components::DSelect.new(component.find(".form-kit__control-select")).select(
value,
)
PageObjects::Components::DNativeSelect.new(
component.find(".form-kit__control-select"),
).select(value)
when "menu"
trigger = component.find(".fk-d-menu__trigger.form-kit__control-menu-trigger")
trigger.click
@@ -190,12 +190,12 @@ module PageObjects
end
def select_none
select(PageObjects::Components::DSelect::NO_VALUE_OPTION)
select(PageObjects::Components::DNativeSelect::NO_VALUE_OPTION)
end
def has_no_value?
if control_type == "select"
PageObjects::Components::DSelect.new(
PageObjects::Components::DNativeSelect.new(
component.find(".form-kit__control-select"),
).has_no_value?
else
spec/system/page_objects/modals/edit_topic_timer.rb
+1 -1
View File
@@ -4,7 +4,7 @@ module PageObjects
module Modals
class EditTopicTimer < Base
def select_timer_type(type)
timer_type_selector = PageObjects::Components::DSelect.new(".timer-type")
timer_type_selector = PageObjects::Components::DNativeSelect.new(".timer-type")
timer_type_selector.select(type)
end
spec/system/page_objects/modals/sidebar_section_form.rb
+4 -4
View File
@@ -60,7 +60,7 @@ module PageObjects
def add_language(locale)
find(".sidebar-section-translations__add-language").click
PageObjects::Components::DSelect.new(translation_language_selects.last).select(locale)
PageObjects::Components::DNativeSelect.new(translation_language_selects.last).select(locale)
end
def remove_language(locale)
@@ -216,9 +216,9 @@ module PageObjects
end
def select_source_language(locale)
PageObjects::Components::DSelect.new(".sidebar-section-form__source-locale-select").select(
locale,
)
PageObjects::Components::DNativeSelect.new(
".sidebar-section-form__source-locale-select",
).select(locale)
end
private
spec/system/page_objects/pages/admin_customize_components_config_area.rb
+1 -1
View File
@@ -133,7 +133,7 @@ module PageObjects
end
def status_selector
PageObjects::Components::DSelect.new(find(".d-filter-controls__dropdown"))
PageObjects::Components::DNativeSelect.new(find(".d-filter-controls__dropdown"))
end
def name_filter_input
spec/system/page_objects/pages/admin_upcoming_change_item.rb
+1 -1
View File
@@ -76,7 +76,7 @@ module PageObjects
end
def enabled_for_dropdown
PageObjects::Components::DSelect.new(
PageObjects::Components::DNativeSelect.new(
"#{change_item_selector(@setting_name)} .upcoming-change__enabled-for",
)
end