Originally submitted on Github
Problem/Motivation
Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated.
Proposed resolution
Implement new Accordion/Sidebar 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 Accordion/sidebar specs. Please use the Figma link to full specification as the main resource for specks.
Full specification
FIGMA: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
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 colours and sizes please login to Figma.
Remaining tasks
- Update patch with new styles implemented
- Accessibility review
- RTL review (Right to left)
User interface changes
All Accordion/Sidebar styles will be changed, no functional differences.
Test Pages
- /node/add/article
- /node/add/page
- /admin/modules
- /user/1/edit?destination=/admin/people
- /admin/people/create
- /admin/modules
Node add/edit page design: here.
Comment | File | Size | Author |
---|---|---|---|
#33 | claro-sidebar-3023309-32-reroll.patch | 24.59 KB | lauriii |
#32 | Screen Shot 2019-06-04 at 13.53.19.png | 49.43 KB | lauriii |
#32 | interdiff.txt | 837 bytes | lauriii |
#32 | claro-sidebar-3023309-32.patch | 24.99 KB | lauriii |
#29 | Screen Shot 2019-05-22 at 17.13.17.png | 50.88 KB | lauriii |
Comments
Comment #2
saschaeggiMissing final specs
Comment #3
huzookaAdding #2980304: Seven theme's details/summary focus style is broken/missing in some browsers. as related issue.
Comment #4
ckrinaComment #5
ckrinaComment #6
ckrinaAdding final design specs so it's ready to develop.
Comment #7
ckrinaI forgot to change status.
Comment #8
huzookaEven that we have design now, I'll postpone this until #3038784: Details style update is merged since these elements are details.
We should wait for #3038784: Details style update to prevent double-coding (mostly) the same thing twice.
Comment #9
ckrinaComment #10
huzookaI'm working on this.
Comment #11
huzookaNode add/edit sidebar is ready for the first review.
Screenshots in progress.
Comment #12
huzookaI found a smaller bug...
Comment #13
huzookaComment #14
lauriiiTested manually with Firefox, Chrome, Safari, IE 11 (including high contrast) and Edge (including high contrast) and everything seems to be working consistently ✨
We should open an issue in Drupal core for creating a new accordion render element. Let's also add @todo mentioning the Drupal core issue.
s/settings/setting
I like the fact that this comment is explaining why since that's usually always the most valuable information to include in a comment 👍 I'm just wondering there is a better way to phrase this. We should at least mention that colliding vertical margins collapse and we want to take benefit of that behavior.
Should we override that CSS? Are we using anything from there?
Nit: according to Twig coding standards, there shouldn't be whitespace after
inner_wrapper_classes
.Comment #15
huzookaComment #16
huzookaAdding the core bug report related to #15.4: #3055760: Fix RTL styles of Vertical tabs in Seven theme
Comment #17
huzookaAddressing #14.2, #14.3, #14.4 and #14.5.
To fulfill #14.1, we need a clear 'motivation' section for the core feature request — to prevent misunderstanding.
(Right now my interpretation is that the Accordion may be used as a standalone UI element as well.)
Comment #18
huzookaComment #19
huzookaBack to needs work (for #15.1).
Comment #20
huzookaScreenshots generated with patch #17 attached.
Comment #21
lauriii@huzooka that was the motivation for opening the issue. We should open issue for standardizing the way accordion markup gets rendered so that it could be used elsewhere. It's not a blocker and I don't think we even have to build support for that in Claro, but it would be nice to have at some point.
Comment #22
huzookaComment #23
huzookaThis patch addresses #15.1 as well, so we are ready for a next review.
Comment #24
ckrinaSorry for the late comment, but yeah on a UI perspective this is a component that we might use in other places. We don't have, right now, this "new use case" other than the sidebar, but I'd say that on a frontend/design implementation perspective it'd be already a separated component. So +1 on the direction taken :)
Comment #25
lauriiiPatch currently:
Styleguide:
Should we fix some of the details in the entity meta element on this issue as well? The issues I can see:
Comment #26
huzookaLauri, where can I find the styleguide you mentioned in #25?
Comment #27
huzookaI found a node edit page design... I added it to the issue summary.
Comment #28
huzookaAddressing #25.
Comment #29
lauriiiLooks already much better! I think we should still adjust the margin on top of the revision message to match the designs:
Comment #30
huzookaThe extra space should be added between the group of the revision inputs (checkbox + message) and the publishing group (changed date + author).
Comment #31
lauriiiComment #32
lauriiiThis addresses #29.
Comment #33
lauriiiRerolled patch from #32.
Comment #34
lauriiiI think this is ready to be committed. My changes to the patch were relatively small, but I'm still waiting for confirmation from @huzooka that my changes are fine.
Comment #35
huzooka#33 is fine, I agree with the RTBC.
Comment #37
lauriiiCommitted! Thank you everyone! ✌️