Status Report Page Update

Closing #3025913: System Status Report Style Update as a duplicate of this one and postponing this until the designs are ready. Adding the beta blocker tag for now, but we might remove it after reviewing beta roadmap.

The designs are currently blocked on modules page designs which are being created in #3072772: Initial Claro design for the modules page.

Here is an updated design based on the Details component that is also used on the Modules page. Once the component is reviewed there, this one can move back to Active.

This page will need WCAG conformance testing once styling is completed. https://www.drupal.org/project/drupal/issues/3087225

The modules page designs are done, so we can start working on this! 🎉

Here is an updated design to remove the checked icons, reduce the width of the divider, and move descriptions out of a details component, based on our call earlier today in the Claro sprint.

This is great, thank you!! I think this is ready for implementation, specially the parts that don't need the work done in #3072772: Initial Claro design for the modules page.

@DyanneNova would you mind updating the summary with the final designs&links?

This patch gets it about as far as it can get without having the Figma available. Once that's ready this can continue.

Updated the summary to point to the correct Figma page for the Status Report.

Here's a patch with most of the changes. The only thing missing to match the design is removing the border around the details components.

I uploaded the wrong patch in #16. It should have been this one. It's the same interdiff as in #16.

This looks so nice! I just found a handful of small things.

1.

+++ b/core/themes/claro/css/components/system-status-counter.pcss.css
@@ -3,30 +3,25 @@
+

nit: Extra space here

2.

+++ b/core/themes/claro/css/components/system-status-report-general-info.pcss.css
@@ -3,25 +3,17 @@
 .system-status-general-info__header {

This looks like it could use a top margin equal to the header's top padding so that the border has equal space between the card and the heading.

3.

+++ b/core/themes/claro/css/components/system-status-report-general-info.pcss.css
@@ -3,25 +3,17 @@
   border-top: 1px solid #ccc;
   background: #fcfcfa;

I believe this top border should be removed since .card has its own border, and I think this background should be removed so the background is white per the Figma design?

4.

+++ b/core/themes/claro/css/components/system-status-report-general-info.pcss.css
@@ -99,33 +91,20 @@
     overflow-x: hidden;

It is hard to see, but this is hiding the edges of the box shadow in this section. I think it's fine to just remove.

5. This is pretty minor, but maybe the icons here could be the darker gray on the right, which is closer to the Figma design?

6. This is likely out of scope for this issue and needs a follow-up, but the details icon position looks a bit off, and it appears to be related to the modules page changes, specifically changing top:50% in the comment #34 patch: #3072772-34: Initial Claro design for the modules page.
It looks like there were unforeseen consequences for details elements elsewhere.

Handled 1 to 4.

1.

+++ b/core/themes/claro/css/components/system-status-counter.pcss.css
@@ -3,30 +3,24 @@
 
+@import "../base/variables.pcss.css";
 .system-status-counter {
   display: inline-block;
   overflow-y: hidden;
   box-sizing: border-box;
   width: 100%;
   white-space: nowrap;
-  border: 1px solid #e6e4df;
-  border-radius: 3px;
...
+

This is a tiny problem, but this was the wrong extra space. The one after @imports was fine. It's the extra space on line 14 that should be removed. This could probably be fixed on commit.

2.

+++ b/core/themes/claro/css/components/system-status-report-general-info.css
@@ -13,6 +13,7 @@
 .system-status-general-info__header {
   padding: 2.75rem 0 .75em;
   border-top: 1px solid #ccc;
+  margin-top: 2.75rem;
 }

This addition creates too much padding on the header in the lower section, above the "Status Details" heading. I think a better solution would be to apply the same padding-top to .system-status-general-info as .system-status-report.

These changes look good to me otherwise. The only thing missing is removing the border around details elements to match the design per #16, and possibly #19.5 and #19.6.

Based on #21 it seems like this should be needs work.

Here's an updated patch that should fix everything mentioned in #21.

The above patch works fine .
Before patch

After patch

RTBC

1. 
   The icon should be 25px from the left, and 18px from the text on the right. The details link is using 12px font but the designs are using 14px.
2. 
   The designs are using grey background and white strokes for the icons. Which one is correct? According to the details text should be 12px and it's 16px currently. The subtitle should be 14px but it's 18px currently. Also the color is different from the designs.
3. 
   The details arrow is not aligned to the center.
4. 
   These icons are not aligned with the adjacent text.

Worked on #27.

We need to update the headers and text to be consistent. That should be 18px headers and 14px text throughout the page.

I think this was a mistake:
.system-status-general-info__header {
- padding: 2.75rem 0 .75em;
+ padding: 2.75rem 0.75em;
border-top: 1px solid #ccc;
}

We should update the icons to match the grey circle designs from the Figma. I originally thought that they must have been left the other way intentionally, but it doesn't sound like that's the case.

The details caret was misaligned after the Extend page was committed. I've opened up a follow-up here #3179768: Fix Claro details caret for that issue, because it extends beyond the scope of this issue and effects many Claro pages.

This patch clears up the differences in text size, along with padding issues, and the gray and white circular icon designs.

I believe the description text under Status Details should be 14px, and is 16px, but that's all I see.

This should fix the text size issue.

The patch in #33 covers everything I have found. Marking as RTBC. :)

Pushed to 9.2.x and 9.1.x.

Filed a couple regressions related to this issue.
#3350384: Claro: role=button on status report items
#3350387: Claro: fix size of H3 elements in status report