Problem/Motivation

Styling follow-up to #1038316: Allow for deletion of a single value of a multiple value field. That issue is about adding remove-item buttons to multi-value field widgets.

Once this is in core, it will need styling in Claro. Figma mockups already exist which explore this.

Proposed resolution

Style the remove-item function in the new multi-value field widgets to provide a better user experience for site authors.

Specification

Quick overview

This image is just a quick overview of the multi-value field widget specs. Please use this Figma link to the full specification as the main resource for specs.
Mult-value field widget with delete functionality in Claro

CommentFileSizeAuthor
#24 Screenshot 2024-06-07 at 5.59.47 PM.png34.99 KBgauravvvv
#7 3053449-7-seven-whitespace-between-inputs-in-multivalue-widget-row.png23.32 KBandrewmacpherson
#3 cardinality_w_delete_function.png41.09 KBevankay

Issue fork drupal-3053449

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

evankay created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs work » Postponed
evankay’s picture

evankay commented
Issue summary: View changes
StatusFileSize
new cardinality_w_delete_function.png41.09 KB
evankay’s picture

evankay commented
Issue summary: View changes
evankay’s picture

evankay commented
Issue summary: View changes
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Postponed » Active
andrewmacpherson’s picture

andrewmacpherson commented
Title: Add removal functionality to Field Cardinality » Add removal functionality to multi-value field widget items
Project: Claro » Drupal core
Version: 8.x-1.x-dev » 9.x-dev
Component: Needs design » ajax system
Issue summary: View changes
StatusFileSize
new 3053449-7-seven-whitespace-between-inputs-in-multivalue-widget-row.png23.32 KB

A few points:

  1. Drupal core doesn't have this functionality. I don't think this functionality should live in Claro - if we add the feature it should be available to all themes. I suggest we move the feature request to the core issue queue, then open a follow-up for Claro to style it.
  2. What does pressing the delete button do - clear the value from the input, or remove the input itself?
  3. I recommend more horizontal separation between the delete button and the text/weight field it is next to. The delete button is a danger operation, and may be accidentally hit by a user who is aiming for the text field (especially with a course pointer like a finger). A generous non-clickable gap between these will reduce the liklihood of accidental data loss. The image in the issue summary has a greater vertical distance between the delete buttons on separate rows than between the delete button and the text field. For comparison, Seven has more horizontal spacing between inputs in the row:
    Screenshot of multi-value text field widget in the Seven theme. The numeric row weights are shown.
  4. Updated the issue summary with core field API terms. Cardinality refers to the underlying data storage model, rather than the UI widget. (Nitpick.)
andrewmacpherson’s picture

andrewmacpherson commented
Version: 9.x-dev » 8.8.x-dev
Component: ajax system » field system
Issue tags: +Admin UI Modernisation initiative

Didn't expect it to set the version to D9

idebr’s picture

idebr commented
Related issues: +#1038316: Allow for deletion of a single value of a multiple value field

This is being implemented in #1038316: Allow for deletion of a single value of a multiple value field. I suggest we close this issue as a duplicate.

andrewmacpherson’s picture

andrewmacpherson commented
Title: Add removal functionality to multi-value field widget items » Style removal button for multi-value field widget items
Project: Drupal core » Claro
Version: 8.8.x-dev » 8.x-1.x-dev
Component: field system » Needs design
Issue summary: View changes

Thanks @idebr. That implementation issue is further along than this issue, and clarifies what the button is for. It't the functionality provided by the multiple fields remove button contrib module. It removes the input itself, instead of just clearing the value inside it.

Rather than close this as a duplicate, let's return it to the Claro queue as the styling follow-up. Updating the issue summary to clarify this.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Active » Postponed

Postponing this until the design is done.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Project: Claro » Drupal core
Version: 8.x-1.x-dev » 8.9.x-dev
Component: Needs design » Claro theme

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Postponed » Active

#1038316: Allow for deletion of a single value of a multiple value field has been committed.

bgustafson’s picture

bgustafson commented

Just wondering if there is a plan for how to target the element to style it? I am needing to style the new button, and I'm not seeing anything very targetable; I also tried a theme preprocess but it's pretty messy because of the template preprocessing that's done on the form that puts it into a table and the buttons are in individual rows in cells that do not have an identifier either. Is a separate issue needed to add some targetable CSS to the markup (I searched but wasn't able to find one)?

Gauravvvv made their first commit to this issue’s fork.

Gauravvvv opened merge request !8329

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
StatusFileSize
new Screenshot 2024-06-07 at 5.59.47 PM.png34.99 KB

Here's After merge request !8329 screenshot:

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update, +Needs screenshots

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.