Problem/Motivation

The Details caret is misaligned after changes were made for the Extend page. We still need the effects from the Extend page commit on the interior details elements, but we need the main Details element caret to revert to its old style, because it has caused all other Details carets to be misaligned now in Claro.

Proposed resolution

Revert the main details component caret styling to what we had before, and add new styling for interior details caret styling to match what was changed on the Extend page commit.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DyanneNova created an issue. See original summary.

bnjmnm’s picture

I'm not sure reverting the details caret to the original styling is the correct solution. The change that happened in #3072772: Initial Claro design for the modules page was so the caret could maintain a stable position even if the summary content wrapped to multiple lines. It think this should still be addressed with standard details elements, albeit with a different offset than the ones on the modules page. That said, I'm not 100% sure if doing this addresses a bug or if it deviates from the intended styles, so I've provided both options.

The SPECIFIC-POSITION patch keeps the caret top aligned regardless of text wrapping

The PRIOR-STYLING-50-PERCENT patch implements the exact solution suggested in the issue summary and returns the default top: offset to 50%, which means the caret will move when text wraps. This one isn't my preference

In both patches, the modules page caret receives styling that overrides default caret positions so it still looks good:

DyanneNova’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
95.11 KB
36.43 KB
106.94 KB
36.15 KB

I think we should use the 50 Percent patch because it returns the behavior to what was expected and standard before we made the change, and overall seems to looks nicer on details elements than the Specific Position patch, which has more misalignment issues.

Here are some examples of 50 Percent:
Caret 50 Percent Patch on Extend Page

Caret 50 Percent Patch on Node Add Page

Here are some examples of Specific Position:
Caret Specific Position Patch on Extend Page

Caret Specific Position Patch on Node Add Page

This also fixes the misalignment issue on the Status Report page, so I'm going to mark as RTBC for the 50 Percent patch.

  • effulgentsia committed a876b27 on 9.2.x
    Issue #3179768 by bnjmnm, DyanneNova: Fix Claro details caret
    

  • effulgentsia committed 11a5579 on 9.1.x
    Issue #3179768 by bnjmnm, DyanneNova: Fix Claro details caret
    
    (cherry...
effulgentsia’s picture

Version: 9.2.x-dev » 9.1.x-dev
Status: Reviewed & tested by the community » Fixed

Pushed the 50-Percent patch to 9.2.x and 9.1.x.

Status: Fixed » Closed (fixed)

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