Use the Action link button style for Views setting modal buttons

The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Restoring status, seems unrelated failure.

+1, retest is green

thanks @gauravvv. i've successfully applied the patch provided in #17 ✨ Use the Action link button style for Views setting modal buttons Needs work to a drupal 10.1.x-dev installation. i can confirm that the point brought up in #16 ✨ Use the Action link button style for Views setting modal buttons Needs work got fixed. but i've just noticed one detail, an consistency in regards of the background color on focus i haven't noticed before. the remove button for the views modal has a grey background:

while on a content type the button has no grey background on focus:

i havent found a states section in the drupal design system: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=553%3A0&t=2Zn0WS4heBBIxoTI-0 but i suppose the styling on the delete action link on a content type could be taken as the source of truth so the styling is consistent?

1. I have removed the grey background on focus state.

2. Also, I have updated the color of button on focus from #000 to #c11f1f, same as action-link--danger.

I have added a patch and interdiff with #17. Please review

Verified the patch #24 and tested it on Drupal version 10.1.x. The patch works fine and the issue mentioned in #23 ✨ Use the Action link button style for Views setting modal buttons Needs work is also fixed now. Have added the before and after screenshots for reference. RTBC+1

thanks @gauravvv. i've applied the latest patch in #24 ✨ Use the Action link button style for Views setting modal buttons Needs work and compared it with the action link on a content type another time.

on focus the button text on the view turns black and turns back to red on hover again (see views.mp4). plus on hover (also if the button is in focus on hover) the background color remains the same. on the content type edit page the background color changes to a light red background. so basically there is currently no visually feedback for hover and or click events for the button. style changes for the active state aren't applied the changes for the hover state are not applied or use a different styling in part.

i am not a developer and not familiar in depth with the code conventions but i wonder if it would make sense to use and apply the color variables for the active and hover states used on action links on the button as well?

active:
color: var(--color-maximumred-active) color
background-color: var(--color-bgred-active)

hover:
color: var(--color-maximumred-hover)
background-color: var(--color-bgred-hover)

I have updated the patch per #26.
1. Updated the trash icon on, normal, hover & active state.
2. Updated the color and background color on hover and active state.
3. Improved nesting of button selectors.

Please review.

The last submitted patch, 27: 3272614-27.patch, failed testing. View results →

Restoring status, unrelated failure.

thanks for updating the patch @gauravvv! i can confirm when hovered and clicked the button the styling for the hover and active state are applied correctly now. only for the combination of focus and hover there are two details left to note:

1. when the button gets into focus the remove text gets black instead of remaining at var(--color-maximumred)
2. on hover and still in focus the text gets red but doesnt have var(--color-bgred-hover) as background color but the background color gets overridden with var(--color-white)

Addressed feedbacks from #30. please review

Verified using MR-7840! - 3272614-use-the-action
The changes are implemented in both D10.2 , D11

Steps :
1. Navigate to /admin/structure/views/view/content
2. Click on any field

RTBC ++

Keeping for further reviews

Hi
I've tested MR !7840 on Drupal 11
The MR is applied cleanly and changes are implemented and look good to me
Adding Screenshots

Steps :
1. Navigate to /admin/structure/views/view/content
2. Click on any field

RTBC ++

Keeping for further reviews

thanks @Gauravvvv that looks real good. i went in a last time and compared it against the action link on the edit page of a content type. the only minor nitpick i've just noticed cuz it is barely noticeable. per default the button has background: transparent; on focus the background gets changed to white background-color: var(--color-white);. the content type page has a white background but in the context of a dialog modal we have a greyish background here and focus should technically only adding an outline. so i wonder if it would make sense to change it to background-color: transparent;? cuz just striking background-color: var(--color-white); leads to a the regular grey button background color.

Yes make sense @rkoller. I have made the necessary changes in the MR.

Thanks @gauravvvv! Looks good. I've updated the issue summary. Moved most of the parts from the problems section into the newly create proposed resolution section which was missing and reworded that part a bit and added examples for the different states for easier review. and i've also removed the needs design tag. aside that i dont see any other concern raised in the comments. looks good to go overall. i am just not sure if someone has to take another look at the code and if i am eligible setting it to rtbc since i've opened the issue?

accidently used the hover.jpg also for he stlying on hover and active example, replaced it with the correct hover_active.jpg

I've checked all the "danger" buttons and they conform to the guidance in the issue summary and appear consistent and not broken.

• FieldConfigEditForm (Field config edit form)
• ProfileForm.php (Cancel account)
• WorkflowTransitionEditForm.php
• WorkflowStateEditForm.php

I'm RTBC'ing this as it appears to be consensus in #2,#3 etc that this is a sound UX change, there are multiple people saying RTBC++, and the scope of the css chanage is only "danger" buttons which appear to be easily identified and checked.

we can see in the screenshot from #23 that the padding is different in the dialog. Is there no way to avoid adding specificity to the .button--danger selector? BEM is supposed to prevent having to do that.

Addressed #41, I have removed the button danger specificity. UI is looking same as before. Please review

@Gauravvv you tagged for screenshots so moving to NW for those.

May need a rebase also.

Mithun S → made their first commit to this issue’s fork.

Added a rebase for the PR which was raised.