mirror of
https://github.com/discourse/discourse.git
synced 2026-03-03 23:54:20 +08:00
986f91418e
Forms that need color input have been using custom implementations with ColorInput and ColorPicker components. This introduces a native FormKit control that provides a consistent, accessible color picker experience with three input methods: hex text input, native browser color picker, and optional color swatches. The control supports: - Standard hex color input with # prefix - Native color picker for visual selection - Predefined color swatches via @colors - Marking already-used colors via @usedColors - Named CSS colors (e.g., "red", "purple") via @allowNamedColors When @allowNamedColors is enabled, the # prefix is hidden and the input accepts any valid CSS color name. The native picker correctly displays named colors by resolving them to hex using a canvas context. This also centralizes color utility functions that were duplicated across several files: - normalizeHex: expands 3-digit hex to 6-digit (e.g., "F00" → "FF0000") - isValidHex: validates hex color format - resolveColor: converts any CSS color to hex (for named color support) The category color editor and welcome banner form have been migrated to use the new control, significantly reducing their complexity. Here are a few screenshots of the component as it's showcased in the /styleguide <img width="766" height="381" alt="2026-01-21 @ 13 12 44" src="https://github.com/user-attachments/assets/76e60bb0-dfbd-4d37-8e9e-e52446ab1142" /> <img width="765" height="556" alt="2026-01-21 @ 13 12 52" src="https://github.com/user-attachments/assets/69af5712-d340-434b-942c-7947b2be6936" /> <img width="761" height="377" alt="2026-01-21 @ 13 13 06" src="https://github.com/user-attachments/assets/6551646c-2026-43ed-9a93-b8628c9f9ab3" />
73 lines
2.2 KiB
Ruby
73 lines
2.2 KiB
Ruby
# frozen_string_literal: true
|
|
|
|
describe "Edit Category General", type: :system do
|
|
fab!(:admin)
|
|
fab!(:category)
|
|
let(:category_page) { PageObjects::Pages::Category.new }
|
|
let(:form) { PageObjects::Components::FormKit.new(".form-kit") }
|
|
before { sign_in(admin) }
|
|
|
|
context "when changing background color" do
|
|
it "displays an error when the hex code is invalid" do
|
|
category_page.visit_general(category)
|
|
|
|
form.field("color").fill_in("ABZ")
|
|
category_page.save_settings
|
|
expect(form.field("color")).to have_errors(
|
|
I18n.t("js.category.color_validations.non_hexdecimal"),
|
|
)
|
|
|
|
form.field("color").fill_in("")
|
|
category_page.save_settings
|
|
expect(form.field("color")).to have_errors(
|
|
I18n.t("js.category.color_validations.cant_be_empty"),
|
|
)
|
|
|
|
form.field("color").fill_in("A")
|
|
category_page.save_settings
|
|
expect(form.field("color")).to have_errors(
|
|
I18n.t("js.category.color_validations.incorrect_length"),
|
|
)
|
|
end
|
|
|
|
it "saves successfully when the hex code is valid" do
|
|
category_page.visit_general(category)
|
|
|
|
form.field("color").fill_in("AB1")
|
|
category_page.save_settings
|
|
expect(form.field("color")).to have_no_errors
|
|
end
|
|
end
|
|
|
|
context "when changing text color" do
|
|
it "displays an error when the hex code is invalid" do
|
|
category_page.visit_general(category)
|
|
|
|
form.field("text_color").fill_in("ABZ")
|
|
category_page.save_settings
|
|
expect(form.field("text_color")).to have_errors(
|
|
I18n.t("js.category.color_validations.non_hexdecimal"),
|
|
)
|
|
|
|
form.field("text_color").fill_in("")
|
|
category_page.save_settings
|
|
expect(form.field("text_color")).to have_errors(
|
|
I18n.t("js.category.color_validations.cant_be_empty"),
|
|
)
|
|
|
|
form.field("text_color").fill_in("A")
|
|
category_page.save_settings
|
|
expect(form.field("text_color")).to have_errors(
|
|
I18n.t("js.category.color_validations.incorrect_length"),
|
|
)
|
|
end
|
|
|
|
it "saves successfully when the hex code is valid" do
|
|
category_page.visit_general(category)
|
|
|
|
form.field("text_color").fill_in("AB1")
|
|
category_page.save_settings
|
|
expect(form.field("text_color")).to have_no_errors
|
|
end
|
|
end
|
|
end
|
