Refactor Claro's form--select stylesheet

This issue is being reviewed by the kind folks in Slack, #need-reveiw-queue. We are working to keep the size of Needs Review queue [2700+ issues] to around 200, following Review a patch or merge require as a guide.

Was discussed in slack #frontend channel slightly with @ckrina and @quietone
Moving to postponed as there are still some decisions to be made about how to go about these changes and what's needed in the follow up.

Some weird indent in the .css file

Also as this seems to be different from #3 will need screenshots.

Please include interdiffs between patches as well.

Thanks!

working on it

Updated the logical properties and selectors, please review

Hi,

After applying the patch 3303551-11.patch, the following points were observed:

1. CSS Logical Properties and nesting are utilized appropriately.
2. The UI and hover/focus states remain unchanged, showing no difference in behavior compared to the previous version.

Screenshot attached

looks good to RTBC

@media (forced-colors: active) {
  .form-element--type-select{
    &,
    &:focus,
    &[disabled] {
      padding-inline-end: var(--input-padding-horizontal);
      background-image: none;
      appearance: revert; /* Revert <select> appearance value for modern browsers. */
    }
  }

Believe this could go under .form-element--type-select also.

Also there are some missing spacing before the brackets. Super nitpicky but if the above is being fixed those should be too.

Addressed #13, attached interdiff for same

For the sceenshots please

hi,

As per #15 request attached the image in issue summary.
The UI should remain visually consistent before/after the patch applied, with no need to compare the screens before and after screen.

Verified the nesting seems seems good.

Found a random issue, not caused by this change, maybe will be fixed by the tooltip ticket though

1. +++ b/core/themes/claro/css/components/form--select.pcss.css
   @@ -4,49 +4,35 @@
   -    background-image: none;
   -    appearance: revert; /* Revert <select> appearance value for modern browsers. */
   

   I don't think we should be removing these properties because they have been added intentionally to make select elements work consistently in high contrast mode.

2. +++ b/core/themes/claro/css/components/form--select.pcss.css
   @@ -4,49 +4,35 @@
   +.no-touchevents .form-element--type-select{
   

   Nit: missing space before {

Hi,

As pr last comment #18, looking the two point.
1. After applying the #18 patch, tested the UI on High contrast mode but not found any inconsistently. so removing the properties, not put any impact on the UI. attached the reference images.

2. Missing space is resolved in 3303551-19.patch patch.

After patch in select box in high contrast mode.

Updated some logical properties, also restored the code from comment #18. Attached interdiff for same please review.

All tests are passed,
LGTM ! :-)

There was a small regression to some weight select fields because of extra space had sneaked into a selector. Addressed that, and moved the no-touchevents related styles inside the .form-element--type-select block.

Committed 29107b5 and pushed to 11.x. Thanks!