Fix styles for exposed views filters wrapped in fieldsets

@dww as per proposed resolution can you please reply on below things for more clarity,

• Spacing: Only in between spacing(left/right) is required?
• Alignment of fields: At top or bottom?
• What about elements inside fieldset do we have any design for it? OR No need to do anything with it.

Needs design for fields inside fieldset in views exposed filter.

PP-1 is fixed

Fully aware a design does not exist yet -- this patch is intended to help the process, not to impose any design decisions.

FWIW, I first saw this issue when setting up https://www.drupal.org/project/microcontent. Looks like autocomplete filters with a description below them are worth considering as well for testing this, in case they need specific tweaks

@dww ah good, thanks for pointing me to the correct one!

Adding NorthAmerica2021 and Easy Out of the Box tags for visibility.

DrupalCon NA is April 12-16 with a focus on EOOTB on Wednesday, April 14.
Thanks

#9 Patch Failed

#18 Please review the patch

#19 Fixed Custom command failed issue, Recreated patch

Verified and tested patch #19.
Patch applied successfully and looks good to me.

Testing Steps:
# Apply claro theme
# Goto: admin/structure/views/view/content
# Scroll down and check the exposed filters
# Save it.

Expected Results:
# User should see input fields properly under exposed filters and should be aligned properly.

Actual Results:
# User is able to see input fields are broken and not aligned as per style.

Looks good to me.
Can be a move to RTBC.

Verified and tested patch #19.
Patch applied successfully but not working as expected.

Testing Steps:
# Apply claro theme
# Goto: admin/structure/views/view/content
# Scroll down and check the exposed filters
# Save it.

Expected Results:
# User should see input fields properly below the exposed filters and should be aligned properly.

Actual Results:
# User is not able to see "is equal to filter" dropdown field

Not working as expected.
Please check the attached screenshots.
Moving to Needs Work.

This is now a merge request instead of a patch and here's evidence it works:

Applied patch #19 and it fixes the issue with the Claro styling of exposed views filters wrapped in fieldsets.

Before patch:

After patch:

Re-rolled patch #25, fixed cs errors. Please review

Adding tag for DrupalCon Europe2021. Thanks

Applied patch #19 and applied successfully
After patch the exposed views filters in claro theme issue fixed
Thanks for the patch

Not sure if this is scope of this issue, but changing exposed filters from "select" to "radios" will break the layout, so setting "Needs work".

Steps to reproduce:

1. Checkout 9.4.x
2. Apply the patch
3. Install the site with standard profile php core/scripts/drupal quick-start standard
4. Enable Claro and set as admin theme.
5. Visit /admin/content and see the label of "Content type" doesn't align with rest of labels.

#19 patch fails to apply in Drupal 10.1.6 (see new test).
https://www.drupal.org/project/drupal/issues/3133639#comment-14119137

I have attached the patch for 11.x Patch #32, no longer applies so not adding the interdiff

IS seems to contain a number of TBD that should be addressed.

Tried to fix failure in #37

Changes provided in the patches fixing the issue, removed duplicate code from the https://git.drupalcode.org/project/drupal/-/merge_requests/5811.

Keeping the MR in draft as there is still some work mentioned in #38.

Thanks

I have updated logical properties in merge request !5811

Based on MR 1134, I added two improvements:
1. Fix alignment of grouped radio filters mentioned on #31
2. Move multi-select operator to top of flex element.

Before:

After:

As commented on Slack, this is more complex that it looks like. We're giving the option to add things to a place that is not designed to have them. If you want to have a field with 5 radio buttons (more than 2 should be vertical), a top bar that is supposed to have horizontal things aligned is not its place. Basically, if we want to convert this search section in a box where anything can be thrown at, that’s not the place. We would need a classic vertical search section or any other modern pattern we can think of. But the top section if designed for quick and simple filters: takes fewer space and it's quick to access.

So my recommendation would be to totally rethink how we give people options, in a way that we can also recommend where to place them and provide that alternative place for complex search. Obviously it's out of scope here, but it's important to point out that this change is breaking the UX.

That said, here are a few design recommendations to make it look less bad in with fields that can be horizontally aligned:

• Horizontally align items
• Adjust field widths
• Reduce spacing between elements within the same fieldset (4px)
• Remove the visual border of the fielset/details
• Increase space between all elements in this specific area if there are fieldsets/details inisde (easily done with CSS :has) and set a separation of 24px

So from this example:

Would become:

Design can't solve much more beyond this. Things like #45 just shouldn't be done in here.

The Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.