Originally submitted on Github

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated, especially compared to our competitors, and universally cited that choosing a more modern-looking admin theme instantly led to Drupal being better-perceived by said users.

There was an amazing community effort to Create a Style Guide For Seven that vastly improved its look + feel compared to the original, but Design best practices and Drupal functionality have moved on since then.

Proposed resolution

Implement new Text area styles to create a favorable first impression of Drupal for evaluators and a better user experience for site authors. No functional differences.

Specification

Quick overview

This image is just a quick overview for checkboxes specs. Please use the Figma link to full specification as the main resource for specs.

text area quick spec

Full specification

FIGMA: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-i...
This link is anchored to the board with the full specification. As an anonymous user you can see the design, but to actually be able to pick colors and sizes please login on Figma.


Remaining tasks

  • Update patch styling to include time inputs
  • Accessibility review
  • RTL review (Right to left)

User interface changes

All Text area styles will be changed, no functional differences.

Test Pages

  • /node/add/page
  • /admin/config/people/accounts
  • /admin/config/development/maintenance
  • /node/add/article
  • /node/add/page
  • /admin/people/create
CommentFileSizeAuthor
#15 claro-editor_style_update-3023300-15.patch18.19 KBhuzooka
#12 interdiff-3023300-7-12.txt4.32 KBhuzooka
#12 claro-editor_style_update-3023300-12.patch17.86 KBhuzooka
#7 claro-editor_style_update-3023300-7.patch15.26 KBhuzooka
#7 interdiff-3023300-5-7.txt383 byteshuzooka
#5 claro-editor_style_update-3023300-5.patch15.23 KBhuzooka
text-area-style.png52.88 KBantonellasevero

Comments

antonellasevero created an issue. See original summary.

antonellasevero’s picture

antonellasevero commented
Issue summary: View changes
antonellasevero’s picture

antonellasevero commented
Issue summary: View changes
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Version: » 8.x-1.x-dev
Assigned: Unassigned » huzooka
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Active » Needs review
Related issues: +#3016343: Fix inconsistencies of TextareaWidget and TextareaWithSummaryWidget form elements, +#3016346: Make disabled flag available for text_format_wrapper, +#2642122: Overriding already overridden libraries-override requires knowledge of previous libraries-overrides, +#2881212: Formatting guidelines toggle script relies on Classy selectors
StatusFileSize
new claro-editor_style_update-3023300-5.patch15.23 KB

This patch represents the stale state from the github PR #68.

Status: Needs review » Needs work

The last submitted patch, 5: claro-editor_style_update-3023300-5.patch, failed testing. View results

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Status: Needs work » Needs review
StatusFileSize
new interdiff-3023300-5-7.txt383 bytes
new claro-editor_style_update-3023300-7.patch15.26 KB

Status: Needs review » Needs work

The last submitted patch, 7: claro-editor_style_update-3023300-7.patch, failed testing. View results

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: Unassigned » lauriii
Status: Needs work » Needs review

Lauriii, please review :)

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Assigned: lauriii » Unassigned
Status: Needs review » Needs work 
  1. +++ b/css/src/components/form.css
@@ -184,16 +184,15 @@ td > .form-item:only-child {
+.tips li {

+++ b/css/src/theme/filter.theme.css
@@ -0,0 +1,52 @@
+.filter-guidelines__item .tips li {

    Should we add a class to the li element? 

  2. +++ b/css/src/theme/filter.theme.css
@@ -0,0 +1,52 @@
+.filter-wrapper .form-item label {
+  display: inline;
+}

    What is this one for?

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: Unassigned » huzooka
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Needs work » Needs review
StatusFileSize
new claro-editor_style_update-3023300-12.patch17.86 KB
new interdiff-3023300-7-12.txt4.32 KB

Addressing #10.

  1. Done.
  2. It left there accidentally. Not needed anymore since the label is hidden visually. Removed.

Status: Needs review » Needs work

The last submitted patch, 12: claro-editor_style_update-3023300-12.patch, failed testing. View results

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: Unassigned » huzooka
Issue tags: +Needs reroll
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Needs work » Needs review
StatusFileSize
new claro-editor_style_update-3023300-15.patch18.19 KB

Status: Needs review » Needs work

The last submitted patch, 15: claro-editor_style_update-3023300-15.patch, failed testing. View results

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Status: Needs work » Needs review
Issue tags: -Needs reroll

  • lauriii committed 0399166 on 8.x-1.x 
    Issue #3023300 by huzooka, antonellasevero, lauriii, ckrina: Text area...

lauriii credited ckrina.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Fixed

Looks good now! Thank you!

saschaeggi’s picture

saschaeggi
he/him
commented

Status: Fixed » Closed (fixed)

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

andrewmacpherson’s picture

andrewmacpherson commented

Filed a follow-up - #3083570: Do not hide the label for the text format select input..

Going by #12, hiding the label for the text format select seems to be intentional, but isn't justified.

The issue summary here lists accessibility review among the tasks, but it isn't mentioned ever again and the issue wasn't tagged, so I assume the review never happened.

Be very careful with removing labels! Does Claro do this anywhere else?