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.

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

Add opt-in for controlling what form elements are rendered via civictheme system #1306

Open
wants to merge 24 commits into
base: develop
Choose a base branch
from

Conversation

richardgaunt
Copy link
Collaborator

Checklist before requesting a review

  • I have formatted the subject to include ticket number as Issue #123456 by drupal_org_username: Issue title
  • I have added a link to the issue tracker
  • I have provided information in Changed section about WHY something was done if this was not a normal implementation
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have added tests that prove my fix is effective or that my feature works
  • I have run new and existing relevant tests locally with my changes, and they passed
  • I have provided screenshots, where applicable

Changed

Screenshots

@richardgaunt richardgaunt added State: DO NOT MERGE Do not merge this pull request State: Do not review Do not review this pull request labels Sep 25, 2024
@@ -100,7 +100,7 @@ function _civictheme_form_alter__non_form_elements__link(array &$element): void
*
* @SuppressWarnings(PHPMD.StaticAccess)
*/
function _civictheme_form_preprocess_hidden_form_elements(array $variables): void {
function _civictheme_form_preprocess_hidden_form_elements(array &$variables): void {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed, non exposed filters were not being added.
form_hidden_fields
these be used when passed as query parameters.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok great thanks for checking

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we should be deleting this function then.

@AlexSkrypnyk
Copy link
Contributor

this is undoing the work that was done to make Drupal look 100% as per design system and be a true design system 😢

we had similar approach in 1.0.0 and the form elements were all over the place without any systematic control.

instead of creating an opt-in system, CivicTheme should implement support for those modules and forms where the form elements look strange.

@richardgaunt
Copy link
Collaborator Author

this is undoing the work that was done to make Drupal look 100% as per design system and be a true design system 😢

we had similar approach in 1.0.0 and the form elements were all over the place without any systematic control.

instead of creating an opt-in system, CivicTheme should implement support for those modules and forms where the form elements look strange.

@AlexSkrypnyk you make an excellent comment thank you for looking into this.

This is my current viewpoint:

By stating directly what elements CivicTheme can render correctly we are ensuring it renders those supported elements as per the Drupal design system.

For form elements that we do not know whether they work with CivicTheme we allow Drupal to takeover the render system. To me this seems like the most sensible approach.

Supporting every form element we want to in CivicTheme is a Sisyphean task, it's not desirable for CivicTheme to have civictheme implementations for 10s of form element types, the maintenance workload of keeping these form elements working is well beyond the ability of this project.

There are custom attributes, custom JS libraries, contrib module updates and fixes, core changes that would need monitoring, adapting and maintaining.

On top of that there are CivicTheme releases that every developer out there would need to keep on top of to ensure all those fixes are carried forward to their themes as those module's update. So we are asking for a lot of developer resources not just from within CivicTheme but from every project relying on CivicTheme.

By being explicit by what is directly supported and then defaulting back to Drupal core's rendering pipeline, we get to keep the great changes you have made to uikit form elements and use them when we know they are going to work and throwback up to Drupal to handle when we dont know.

By doing this I've seen that it does it quite nicely for example, the password_confirm field doesn't work with CivicTheme 1.8 and renders as a plain textfield without a password type.

Doing it the way suggested, I would need to directly support password_confirm, create a form element, create a form preprocess to map the password_confirm attributes to the custom form element, test and ensure the JS works correctly.

Then every release and drupal update we need to test this custom implementation to ensure it still works as expected.

But with this approach, we do not support password_confirm, Drupal renders the core password_confirm template, attaches the JS library correctly, it then renders two password fields which CivicTheme does support and so it then renders these two form elements as per design system.

I get a working password confirm form element out of the box through this system.

Many of the advanced form elements utilise more base form elements and so if we throw to the contrib module to provide the advanced form element template, it then utilises civictheme for the inner form elements.

This PR is still a work in progress and need to examine the effects of this change on webform.

@AlexSkrypnyk
Copy link
Contributor

@richardgaunt
I appreciate the response.

And I understand where you’re coming from.

But this is not about just making it work with Drupal. This is about breaking the concept of design system. We could, as well, just render some other elements using basic styles “because CivicTheme doesn’t support it”.

The whole idea is to create a design system with as many elements as possible to cover many cases. Other ui kits do it, but not CT?!

This also sets the precedent of adding work arounds instead of addressing the problem - CT needs more components if it wants to be a world-class design system.

@richardgaunt
Copy link
Collaborator Author

@richardgaunt I appreciate the response.

And I understand where you’re coming from.

But this is not about just making it work with Drupal. This is about breaking the concept of design system. We could, as well, just render some other elements using basic styles “because CivicTheme doesn’t support it”.

The whole idea is to create a design system with as many elements as possible to cover many cases. Other ui kits do it, but not CT?!

This also sets the precedent of adding work arounds instead of addressing the problem - CT needs more components if it wants to be a world-class design system.

Thanks @AlexSkrypnyk I also appreciate where you are coming from and I appreciate you taking the time to write this feedback.

And I agree "this is not just about making it work with Drupal" which is why I would argue we are not attempting to support every form element in Drupal at some point there are elements we do not want to support as they are not in line with CivicTheme so even if we attempt to support all the form elements we do not want to which is why we opt-in, so 3rd party modules can provide the missing support.

This PR is not being rushed in without community feedback once complete I will be raising in DO to attempt to get feedback.

The feedback I have received however from a series of community members is they want CT to integrate smoothly with Drupal.

@AlexSkrypnyk
Copy link
Contributor

@richardgaunt maybe you could please add some information about the purpose of this pr to a description so that others in the community would know the context

@@ -70,9 +70,12 @@ function _civictheme_form_alter__non_form_elements(array &$elements): void {
case 'link':
_civictheme_form_alter__non_form_elements__link($elements[$element_key]);
break;

case 'html_tag':
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding markup handling in this function

* @ingroup themeable
*/
#}
{% include '@molecules/basic-content/basic-content.twig' %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@richardgaunt This breaks the admin menu when logged in
Screenshot 2024-10-25 at 8 57 52 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
State: DO NOT MERGE Do not merge this pull request State: Do not review Do not review this pull request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants