Docs/usage guide info page - #302
kathrinschalber wants to merge 3 commits into
Conversation
✅ Deploy Preview for industrial-experience ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueThanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| ▶️ In which group should we put it? | ||
|
|
||
| - Separate group "Page"? | ||
| - System feedback and status? |
panch1739
left a comment
panch1739
left a comment
There was a problem hiding this comment.
@kathrinschalber I answered some of the questions, but nothing is written in stone, lets discuss this in our dedicated meeting :)
| The implementation renders the title as an `h1`, followed by optional copy text and optional instructions. The default icon is decorative and uses `aria-hidden="true"`; slotted images remain responsible for their own accessible alternative text. | ||
|
|
||
| **Open discussion points** | ||
| - ▶️ Is it always used for a full page? (what about if e.g. user enters the correct main url with the wrong query parameters) |
There was a problem hiding this comment.
Info pages replace the page content.
Use an info page only when there is no usable content left to show. If the page still renders and only part of the request failed (for example unsupported query parameters on a valid route), keep the page and explain the problem with an inline notification, or show an empty state if the result set is legitimately empty.
Keep the application header whenever the user is authenticated and has somewhere to navigate to. Do not show the app header only when there is no shell to keep: before sign-in, on expired sessions, or when accepting the action is what grants access in the first place, such as an invitation from someone outside the user's existing workspaces.
|
|
||
| **Open discussion points** | ||
| - ▶️ Is it always used for a full page? (what about if e.g. user enters the correct main url with the wrong query parameters) | ||
| - ▶️ Which components are allowed in the action slot? (e.g. only button, or icon button, button link, custom components) Should we recommend a specific action component set for the `actions` slot? |
There was a problem hiding this comment.
For the use case described, any type of label button should be supported. Unsure if we should technically limit the slot, but i cannot think any other use case than a label button.
One primary action, optionally one secondary. I would avoid icon-only buttons: the action is the user's single recovery path and needs a visible label, and the layout has no space constraint that would justify hiding it.
| **Open discussion points** | ||
| - ▶️ Is it always used for a full page? (what about if e.g. user enters the correct main url with the wrong query parameters) | ||
| - ▶️ Which components are allowed in the action slot? (e.g. only button, or icon button, button link, custom components) Should we recommend a specific action component set for the `actions` slot? | ||
| - ▶️ Header vs. title vs. title text? -> differences between Figma + Code |
There was a problem hiding this comment.
This could be a leftover from the original implementation, let's check.
| Do **not** use an info page... | ||
|
|
||
| - for transient failures while the user remains in the current workflow -> use inline notifications or toast instead so users can continue working in context | ||
| - for non-full-page layouts -> use empty state instead ▶️ is this the separation from empty state? |
There was a problem hiding this comment.
Basically yes, as described above, the info page is meant to be used as a full page layout, and therefore, everything is bigger. (bigger fonts, bigger images, supported illustrations).
Theoretically we could consider if is worth merging these two things and just have sizes, but it feels semantically wrong. Lets discuss it
|
|
||
| **Open discussion points** | ||
|
|
||
| - ▶️ How are non-error informational pages in scope for the component or should use a separate pattern? (as it is called "Info" page) |
There was a problem hiding this comment.
It can be used for informational states such as invitations, pending access, completed flows and system status.
For us, a common case would be an invitation to join a group or a company. E.g.,:
The component is the same: a full page layout that supports text and illustrations. The HTTP is just a dedicated usage of that.
|
|
||
| ### Illustration mapping | ||
|
|
||
| The Figma specification documents six predefined HTTP illustrations - ▶️ how do we handle these? - example, pattern? |
There was a problem hiding this comment.
In figma, i have a pattern section. Im using the info page component and adding on top the examples. See figma component.
| - **`titleText`**: Required short title (H1!) | ||
| - **`copyText`**: Optional explanation of the topic and how it can be resolved. ▶️? | ||
| - **`instructions`**: Optional instructions describing what the user should do next. The implementation renders this text with a soft text color. | ||
| - **`image` slot**: Optional illustration or custom icon that replaces the default icon. Slotted content is constrained to the image container with `max-width: 100%`, `max-height: 100%`, and `object-fit: contain`. ▶️ Alt text needed? |
There was a problem hiding this comment.
yes, we should...maybe we could add the property in figma, as we did with aria label? In code:
|
|
||
| ### Size and layout | ||
|
|
||
| - **Illustration slot size**: The default documented size is `260 × 196 px`; the specification also shows a larger resizable illustration example at `675 × 509 px`. ▶️ so can we have bigger images or not? |
There was a problem hiding this comment.
We just recommend a standard proportion that works well for the use cases discovered.
The illustration size is not technically restricted. How much presence the illustration should have depends on what the page is doing: a brief interruption like a 404 needs little, while a welcoming moment like an invitation benefits from a larger one. That judgement belongs to the team designing the page.
3 participants
EIX-341
💡 What is the current behavior?
🆕 What is the new behavior?
👨💻 Help & support