Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[6.0] Field simple color as web component #45004

Open
wants to merge 13 commits into
base: 6.0-dev
Choose a base branch
from
Open

[6.0] Field simple color as web component #45004

wants to merge 13 commits into from
+220 −478

Conversation

dgrammatiko
Copy link
Contributor

@dgrammatiko dgrammatiko commented Feb 24, 2025 •
edited
Loading

Summary of Changes

Refactor the code so:

  • php: layout spits buttons as slotted elements
  • use of :part to style the component internals.
  • component becomes light/dark
  • JS: component now uses the elementInternals so it is an actual form field
  • The client side supports all the colors that a browser could support (hex, rgb, lch, oklab, color(colorspace val1 val2 val3 / alpha)). This requires setting the format to "". All color values are validated client side

B/C considerations:

  • The field layout has changes (the old one WILL NOT WORK)
  • The old field dispatched 2 change events, one on the custom element and another on the select element. There's only one event on the custom element now

Testing Instructions

Paste this:

<field
  name="blabla"
  type="color"
  control="simple"
  format=""
  colors="#000000,rgb(59% 4.79% 75.2% / 0.8),oklch(87% 0.293 207),oklab(79% -0.261 0.088),color(display-p3 0.83 0.19 0.73 / 0.96),#FF0000,lch(56 90.2 154 / 0.88),none"
  default=""
  label="color"
/>

in the templateDetails.xml of the Atum template (after line 51: <fieldset name="colors" label="TPL_ATUM_COLORS_SETTINGS_LABEL">)

Check that the field:

  • saves and respects the value from the PHP side
  • works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Screen.Recording.2024-03-19.at.6.11.53.PM.mov

Link to documentations

Please select:

  • Documentation link for docs.joomla.org:

  • No documentation changes for docs.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

Unused strings

JFIELD_COLOR_SELECT="Select a colour"
JFIELD_COLOR_TRANSPARENT="No colour, transparent"
JFIELD_COLOR_VALUE="Colour with hexadecimal value of"

Sorry, something went wrong.

dgrammatiko and others added 11 commits February 24, 2025 20:36
@dgrammatiko
Redo

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
7cc3dbe
@dgrammatiko @QuyTon
Update layouts/joomla/form/field/color/simple.php

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
c25bc71 
Co-authored-by: Quy <quy@nomonkeybiz.com>
@dgrammatiko @QuyTon
Update layouts/joomla/form/field/color/simple.php

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
b7d6f0b 
Co-authored-by: Quy <quy@nomonkeybiz.com>
@dgrammatiko
Fix layout shift

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
64d6eea
@dgrammatiko
deprecate lang strings

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
c44895f
@dgrammatiko
Update simple.php

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
4daa91d
@dgrammatiko
use scss

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
547e000
@dgrammatiko
Add a color validation

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
5d92491
@dgrammatiko
Remove the named colors

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
8dd27dd
@dgrammatiko
fix a11y, use Object.assign for the template

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
d823ae5
@dgrammatiko
(partly) decouple the i18n

Verified

This commit was signed with the committer’s verified signature.
dgrammatiko Dimitris Grammatikogiannis
GPG key ID: 2F95D3DBC890DF63
Verified
Learn about vigilant mode
Loading
Loading status checks…
52612c6
@joomla-cms-bot joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-6.0-dev labels Feb 24, 2025
@dgrammatiko dgrammatiko mentioned this pull request Feb 24, 2025
Closed
4 tasks
richard67
richard67 reviewed Feb 25, 2025
View reviewed changes
@dgrammatiko @richard67
Update build/.eslintrc

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
Loading
Loading status checks…
ecf3d3e 
Co-authored-by: Richard Fath <richard67@users.noreply.github.com>
@softforge
Merge branch '6.0-dev' into 6.0-dev-field-simple-color

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
Loading
Loading status checks…
9ae1612
@exlemor
Copy link

exlemor commented Feb 28, 2025

When I try to test this PR from the Joomla_6.0.0-alpha1-dev+pr.45004-Development-Full_Package.zip file, I get this error when trying to go to Administrator Templates in the backend:

An error has occurred.
0 Call to undefined method stdClass::get()
Call Stack

Function Location

1 () JROOT/administrator/components/com_templates/tmpl/templates/default.php:101
2 include() JROOT/libraries/src/MVC/View/HtmlView.php:416
3 Joomla\CMS\MVC\View\HtmlView->loadTemplate() JROOT/libraries/src/MVC/View/HtmlView.php:204
4 Joomla\CMS\MVC\View\HtmlView->display() JROOT/administrator/components/com_templates/src/View/Templates/HtmlView.php:128
5 Joomla\Component\Templates\Administrator\View\Templates\HtmlView->display() JROOT/libraries/src/MVC/Controller/BaseController.php:697
6 Joomla\CMS\MVC\Controller\BaseController->display() JROOT/administrator/components/com_templates/src/Controller/DisplayController.php:68
7 Joomla\Component\Templates\Administrator\Controller\DisplayController->display() JROOT/libraries/src/MVC/Controller/BaseController.php:730
8 Joomla\CMS\MVC\Controller\BaseController->execute() JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:143
9 Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch() JROOT/libraries/src/Component/ComponentHelper.php:361
10 Joomla\CMS\Component\ComponentHelper::renderComponent()

Checked with Philip who verified I was doing it correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@richard67 richard67

Assignees
No one assigned
Labels
Enhancement Feature Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-6.0-dev
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@dgrammatiko @exlemor @richard67 @Fedik @joomla-cms-bot @softforge