Problem/Motivation

The arrow aesthetic signature is mispositioned in Drupal 10, compared to Drupal 9.

Drupal 10:
Drupal 10 broken state

Drupal 9:
Drupal 9 intended state

Steps to reproduce

  1. Install a Drupal 10 site with Claro as the administration theme.
  2. Install Views UI module.
  3. Edit any view that has a filter requiring value configuration.
  4. Edit any filter that requires value configuration.
  5. See something similar to the above.

Proposed resolution

Rework the left and right property value of the .views-config-group-region .views-group-box--value > .form-item::after rule in core/themes/claro/css/components/views-ui.css such that the calculation in calc() does not subtract from unitless 0.

Remaining tasks

Fix!

User interface changes

The arrow aesthetic signature is repositioned.

API changes

Not applicable.

Data model changes

Not applicable.

Release notes snippet

None.

Before patch:

After patch:

CommentFileSizeAuthor
#4 Screenshot 2023-01-24 at 11.06.07 AM.png78.71 KBgauravvvv
#4 Screenshot 2023-01-24 at 11.05.40 AM.png114.65 KBgauravvvv
d9.png2.97 KBwongjn
d10.png2.44 KBwongjn

Issue fork drupal-3334525

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Wongjn created an issue. See original summary.

Wongjn opened merge request !3265

wongjn’s picture

wongjn commented
Assigned: wongjn » Unassigned
Status: Active » Needs review
gauravvvv’s picture

gauravvvv commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot 2023-01-24 at 11.05.40 AM.png114.65 KB
new Screenshot 2023-01-24 at 11.06.07 AM.png78.71 KB

This has been fixed by the above patch. Adding before and after patch screenshot. Can be moved to RTBC

Before patch:

After patch:

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes

Updated issue summary.

sonam.chaturvedi’s picture

sonam.chaturvedi commented

Verified and tested MR!3265 on 10.1.x-dev . Patch applied successfully.

Test Results:
1. The arrow aesthetic signature is now positioned correctly in Drupal 10.
2. Arrow position is fixed for radio button and dropdown filter type in Views UI
Screenshots already added in the previous comment.

RTBC+1

  • lauriii committed e505dc7d on 10.1.x 
    Issue #3334525 by Wongjn, Gauravvv: Views UI filter form arrow...

  • lauriii committed 7ee76d98 on 10.0.x 
    Issue #3334525 by Wongjn, Gauravvv: Views UI filter form arrow...

lauriii closed merge request !3265

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 10.1.x-dev » 10.0.x-dev
Status: Reviewed & tested by the community » Fixed

Committed e505dc7 and pushed to 10.1.x. Also cherry-picked to 10.0.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.