Create a gap or control the space between the Label and input field in the quick-edit toolbar for image field. [#3214125]

Problem/Motivation

Claro: Label and input field in the quick-edit toolbar does not have a space between them which makes them odd and the focus of the input field overlaps with the label.

Steps to reproduce

1. Go to any node.
2. Quick edit the node, the content type of the specific node page must contain an image field or media field.
3. Hover the mouse on the image.
4. You will see the quick-edit toolbar with the label name alternative text and input field.
5. There is no space between the label and the input field, the focus of the input field overlaps the label.

Comment	File	Size	Author
#17	After--patch--pic--3214125.png	49.78 KB	vikashsoni
#17	Before--patch--pic--3214125.png	50.23 KB	vikashsoni
#13	After Patch 3214125.png	985.4 KB	chetanbharambe
#13	Before Patch 3214125.png	937.31 KB	chetanbharambe
#11	interdiff_2-10.txt	718 bytes	IndrajithKB
#7	After-patch.png	202.62 KB	radheymkumar
#7	Before-patch.png	207.78 KB	radheymkumar
#5	After patch sc.png	202.62 KB	manojithape
#5	Before patch sc.png	207.78 KB	manojithape
#4	After-patch.png	950.18 KB	Madhu kumar
#4	Before-patch.png	1.12 MB	Madhu kumar
#3	After patch.png	68.74 KB	mitthukumawat
#3	Before patch.png	66.64 KB	mitthukumawat
#2	3214125.2.patch	1002 bytes	Sakthivel M
#2	9.3.x: PHP 8.0 & MySQL 5.7 28,857 pass, 1 fail
	Screenshot 2021-05-15 at 9.48.49 AM.png	518.88 KB	tushar_sachdeva

Issue fork drupal-3214125

Show commands

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

Add & fetch this issue fork’s repository

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

Add & fetch this issue fork’s repository

3214125-create-a-gap changes, plain diff MR !1176
Check out this branch

About issue forks

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

15 May 2021 at 04:23

tushar_sachdeva created an issue. See original summary.

Comment #2

Sakthivel M CreditAttribution: Sakthivel M at QED42 for Drupal India Association commented 17 May 2021 at 05:59

Status:

Active

» Needs review

File	Size
3214125.2.patch	1002 bytes
9.3.x: PHP 8.0 & MySQL 5.7 28,857 pass, 1 fail

#2 Please review the patch

Comment #3

mitthukumawat CreditAttribution: mitthukumawat as a volunteer and at Zyxware Technologies for Drupal Association commented 17 May 2021 at 06:32

File	Size
Before patch.png	66.64 KB
After patch.png	68.74 KB

I have tested the patch #2 manually and it fixed the issue of focus in quickedit images in Claro theme.
Adding screenshots for reference. RTBC+1

Comment #4

Madhu kumar CreditAttribution: Madhu kumar as a volunteer and at Zyxware Technologies commented 17 May 2021 at 11:38

File	Size
Before-patch.png	1.12 MB
After-patch.png	950.18 KB

Applied patch #2 Successfully and working as expected .Screenshot for the reference.

Comment #5

manojithape CreditAttribution: manojithape at QED42 for Drupal India Association commented 18 May 2021 at 06:30

File	Size
Before patch sc.png	207.78 KB
After patch sc.png	202.62 KB

Verified and tested patch#2 on the drupal 9.3.x-dev version and Claro 9.3.0-dev version. Patch applied successfully and looks good to me.

Testing Steps:

Install drupal 9.3.x-dev version.
Go to Appearance -> Set Claro theme as admin and default theme
Go to any node.
Quick edit the node, the content type of the specific node page must contain an image field or media field.
Hover the mouse on the image.
Observe the quick-edit toolbar with the label name alternative text and input field. There is no space between the label and the input field, the focus of the input field overlaps the label.
Now apply the patch and clear the cache.
Verify after applying patch space displayed between the label and the input field.
And also verify the issue of focus in quick-edit images in Claro theme fixed.

Testing Results:

After applying patch space displayed between the label and the input field and issue of focus in quick-edit images in Claro theme fixed.
Please refer attached Before patch sc and After patch sc images for reference.

Moving this ticket to RTBC.

Comment #6

manojithape CreditAttribution: manojithape at QED42 for Drupal India Association commented 18 May 2021 at 06:48

Status:

Needs review

» Reviewed & tested by the community

Comment #7

radheymkumar CreditAttribution: radheymkumar commented 2 June 2021 at 11:16

File	Size
Before-patch.png	207.78 KB
After-patch.png	202.62 KB

Successfully applied patch and attach screenshot
Thanks

Comment #8

5 September 2021 at 15:52

Status:

Reviewed & tested by the community

» Needs work

The last submitted patch, 2: 3214125.2.patch, failed testing. View results

Comment #9

9 September 2021 at 04:31

Indrajith KB made their first commit to this issue’s fork.

Comment #10

9 September 2021 at 04:33

Indrajith KB opened merge request !1176

Comment #11

IndrajithKB CreditAttribution: IndrajithKB at Srijan | A Material+ Company for Drupal India Association commented 9 September 2021 at 04:38

File	Size
interdiff_2-10.txt	718 bytes

Here i have updated the MR according with the design, please review.
Design link: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

Comment #12

IndrajithKB CreditAttribution: IndrajithKB at Srijan | A Material+ Company for Drupal India Association commented 9 September 2021 at 04:38

Status:

Needs work

» Needs review

Moving back to NR.

Comment #13

chetanbharambe CreditAttribution: chetanbharambe at QED42 for Drupal India Association commented 9 September 2021 at 10:04

Status:

Needs review

» Reviewed & tested by the community

File	Size
Before Patch 3214125.png	937.31 KB
After Patch 3214125.png	985.4 KB

Verified and tested merge request !1176 (https://git.drupalcode.org/project/drupal/-/merge_requests/1176.patch)
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance -> Apply Claro theme
# Goto Extend: Install Quick edit module
# Create the node which has an image field mentioning alternative text
# Quick edit the node, the content type of the specific node page must contain an image field or media field.
# Hover the mouse on the image.
# You will see the quick-edit toolbar with the label name alternative text and input field.

Expected Results:
# There should be some space between the label and the input field, the focus of the input field overlaps the label.

Actual Results:
# There is no space between the label and the input field, the focus of the input field overlaps the label.

Please refer attached screenshots for the same.
Looks good to me.
Can be a move to RTBC.

Comment #14

lauriii

he/him

Finnish

Finland

CreditAttribution: lauriii at Acquia commented 28 September 2021 at 09:43

Status:

Reviewed & tested by the community

» Needs work

Posted feedback on the MR

Comment #15

bnjmnm

he/him

English

Ann Arbor, MI

CreditAttribution: bnjmnm at Acquia commented 22 October 2021 at 13:34

There are significantly more before/after screenshots than necessary here. Removing credit for any comments that add already-provided screenshots without additional content. Definitely removing credit for #7, which just re-uploaded the screenshots from #5 with new filenames.

Comment #16

22 October 2021 at 14:25

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

Comment #17

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented 16 November 2021 at 08:34

File	Size
Before--patch--pic--3214125.png	50.23 KB
After--patch--pic--3214125.png	49.78 KB

Applied patch #2 in drupal-9.3.x-dev working fine.
for ref sharing screenshot

Comment #18

bnjmnm

he/him

English

Ann Arbor, MI

CreditAttribution: bnjmnm at Acquia commented 16 November 2021 at 12:14

Removing credit for #17. Just 2 comments up in #15 I mentioned there were already more screenshots than needed and removed credit for several comments that simply added more of what we already have.

Also in #17:

Applied patch #2 in drupal-9.3.x-dev working fine.

. Patch #2 is outdated. The work has moved to a merge request and has changed since #2. Be sure to review the most recent changes.

Comment #19

16 November 2021 at 12:14

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.

Comment #20

16 November 2021 at 12:14

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.