Update empty state 404 documentation example to match new branding #5079
Conversation
jmuzina
added
Review: Design needed
Review: QA needed
Review: Code needed
Documentation 📝
Demo
Jenkins 
demos.haus
jmuzina
force-pushed
the
update-empty-state
branch
from
cb79523
to
cbbd98f
Compare
jmuzina
changed the title
| @@ -6,15 +6,18 @@ | |||
| {% block content %} | |||
| <section class="p-strip"> | |||
| <div class="row"> | |||
There was a problem hiding this comment.
It seems that the canonical.com version is using older (the "default") grid class names.
We could utilise the new "shorthand" layouts here.
So instead of having .row > .col-3.col-medium-2 + .col-9.col-medium-4, we could use the .row--25-75 > .col + .col - that should cover the responsiveness of the grid.
| <div class="row"> | |
| <div class="row--25-75"> |
There was a problem hiding this comment.
Made suggested changes to use new grid class names!
| <div class="col-6 col-medium-3 u-vertically-center u-align--center"> | ||
| <img src="https://assets.ubuntu.com/v1/03c7318e-image-404.svg" alt="Page not found" width="360" height="365"> | ||
| <hr class="p-rule"> | ||
| <div class="col-3 col-medium-2 col-medium-3 u-hide--small"> |
There was a problem hiding this comment.
As per previous comment:
| <div class="col-3 col-medium-2 col-medium-3 u-hide--small"> | |
| <div class="col u-hide--small"> |
| <h1>404: Page not found</h1> | ||
| <p class="p-heading--4">Sorry, we couldn’t find that page.</p> | ||
| </div> | ||
| <div class="col-9 col-medium-4"> |
There was a problem hiding this comment.
| <div class="col-9 col-medium-4"> | |
| <div class="col"> |
There was a problem hiding this comment.
very close, couple of small suggestions to bring it in line with current design thinkin:
- remove the horixontal rule (no need as it is the first thing after the header)
- replace p-strip with p-section--hero, which is a new component we use for the section on the page containing the h1 heading
| @@ -5,16 +5,19 @@ | |||
|
|
|||
| {% block content %} | |||
| <section class="p-strip"> | |||
There was a problem hiding this comment.
| <section class="p-strip"> | |
| <section class="p-section--hero"> |
| <div class="col-6 col-medium-3 u-vertically-center u-align--center"> | ||
| <img src="https://assets.ubuntu.com/v1/03c7318e-image-404.svg" alt="Page not found" width="360" height="365"> | ||
| <div class="row--25-75"> | ||
| <hr class="p-rule"> |
There was a problem hiding this comment.
| <hr class="p-rule"> |
jmuzina
force-pushed
the
update-empty-state
branch
from
0e7d275
to
61a7c2d
Compare
| @@ -58,6 +58,10 @@ To import either or all of these components into your project, copy the snippets | |||
|
|
|||
| // dependencies for user action triggered empty state example | |||
| @include vf-u-vertically-center; | |||
There was a problem hiding this comment.
Thanks for remembering to update this section as well. I think we don't need vf-u-vertically-center anymore (class name was removed from the example), and the comment above it is misleading I guess (it's a copy of a comment above). I think it was meant to refer to error management example
| @@ -18,3 +18,7 @@ | |||
|
|
|||
| // dependencies for user action triggered empty state example | |||
| @include vf-u-vertically-center; | |||
There was a problem hiding this comment.
As commented in the documentation, this is probably not needed anymore?
Done
Updates the empty state error management pattern to match the updated branding / copy seen on c.com.
Fixes WD-7904
QA
Check if PR is ready for release
If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:
Feature 🎁,Breaking Change 💣,Bug 🐛,Documentation 📝,Maintenance 🔨.package.jsonshould be updated relative to the most recent release, following semver convention:Screenshots