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.
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.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | Caret-Specific-NodaAdd.png | 36.15 KB | dyannenova |
| #3 | Caret-Specific-Extend.png | 106.94 KB | dyannenova |
| #3 | Caret-50-NodeAdd.png | 36.43 KB | dyannenova |
| #3 | Caret-50-Extend.png | 95.11 KB | dyannenova |
| #2 | modules-page-caret.png | 96 KB | bnjmnm |
Comments
Comment #2
bnjmnmI'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:
Comment #3
dyannenovaI 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:
Here are some examples of Specific Position:
This also fixes the misalignment issue on the Status Report page, so I'm going to mark as RTBC for the 50 Percent patch.
Comment #6
effulgentsia commentedPushed the 50-Percent patch to 9.2.x and 9.1.x.