Graceful degradation guidelines #548
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…adation-guidelines
|
|
||
| If the dialog is a core part of a workflow, replace the content of the dialog with a message explaining why the expected UI isn't there. If you're using a dialog component that supports error states (for example, [select panel](/components/select-menu#select-panel)), follow the component's guidelines for rendering error messages. | ||
|
|
||
| <img |
There was a problem hiding this comment.
The first screenshot can be grabbed from here, to make sure it's consistent with the SelectPanel docs.
The warning icon also feels slightly too big. To match the SelectPanel docs you can grab an example here.
|
|
||
| If you're not using a component that supports error states, replace the content of the dialog with a [blankstate](/components/blankslate) component explaining why the expected UI isn't there. | ||
|
|
||
| <img |
There was a problem hiding this comment.
The first image seems blurry and the warning icon feels too big.
There was a problem hiding this comment.
Yea I think we need a variant of Blankslate that works in smaller areas.
|
|
||
| Default to removing non-functional buttons from the UI. Don't remove buttons that are critical to a user's workflow—it may be disorienting. | ||
|
|
||
| <DoDontContainer> |
There was a problem hiding this comment.
Both images are blurry on my 4k screen.
|
|
||
| ### Handling action menus with non-functional items | ||
|
|
||
| <img |
There was a problem hiding this comment.
The spacing in the menus are too little. You can find them in Figma here if that helps.
There was a problem hiding this comment.
It would be good to get more feedback on this because I find this a bit much. Maybe a dialog explaining those aren't available upon clicking an item would be better...
There was a problem hiding this comment.
Maybe a dialog explaining those aren't available upon clicking an item would be better...
I considered that, but I was concerned that it might be frustrating to have to click and open a dialog to get more context.
…adation-guidelines
…adation-guidelines
…hand global side sheet that appears when clicking avatar in global nav header)
… image dimensions
…adation-guidelines
This was referenced Sep 19, 2023
Closed
tbenning
reviewed
Sep 27, 2023
| width="960" | ||
| alt="Example of a degraded global nav" | ||
| src="https://github.com/primer/design/assets/2313998/3427b08a-e30d-43b0-80b3-2f3431a90461" | ||
| /> |
There was a problem hiding this comment.
Should the purple labels on these images say
organization link cannot be loaded instead of org link cannot be?
tbenning
reviewed
Sep 27, 2023
| width="960" | ||
| alt="Two images: 1. comment box; 2. blankslate in place of comment box" | ||
| src="https://github.com/primer/design/assets/2313998/8321cdb9-8bc2-4f7c-8107-ff535d12498f" | ||
| /> |
There was a problem hiding this comment.
Nitpick: Image 1 is a bit blurry and image 2 has a bit funny border spacing. Not blocking.
There was a problem hiding this comment.
I'm not seeing either of these issues on my end. Maybe we can attempt a screen-share, or you could send a marked up screenshot?
tbenning
reviewed
Sep 27, 2023
| width="456" | ||
| alt="A form with some fields disabled. Disabled fields have error messages." | ||
| src="https://github.com/primer/design/assets/2313998/a869762c-33f5-4cf9-bd95-d76d776f233c" | ||
| /> |
There was a problem hiding this comment.
I see that we are using red error color with the warning symbol. I noticed in most other places we use gray and the yellow/amber color to warn users. Should we keep the color consistent instead of showing a red error color?
There was a problem hiding this comment.
This is just the style we use for <FormControl.Validation variant="error">. Storybook example.
We're removing "warning" variant from form controls in the next major Primer React release (coming soon!), and I'm not sure if this is a good enough reason to keep it around. cc @joshblack
tbenning
approved these changes
Sep 28, 2023
mperrotti
added a commit
that referenced
this pull request
Sep 29, 2023
* rough first draft * adds images and formats do/dont examples to rough draft * checkpoint for misc content edits, added section for navigation * reformats and adds to degraded content info, adds button flowchart * adds and updates content, applies some layout * reworked title * adds page to nav, rms error messages stub file * adds guidance about error states to empty states guidelines * adds info about forms and data loss confusion * adds rough draft of navigation degradation and loading guidelines * rm commented text that was being unintentionally rendered * revises navigation guidance for individual nav items (example: right-hand global side sheet that appears when clicking avatar in global nav header) * adds more specific guidance about sidesheet degradation, adjusts some image dimensions * misc edits and refinements * addresses PR feedback, removes guidance that sometimes it's ok to disable a button * fixes typo * adds screen recording to demonstrate an inert button, and other edits * appease the linter * appease the linter (second attempt) * tweaks and typo corrections * image and video improvements * content improvements * image tweak * misc image updates
mperrotti
added a commit
that referenced
this pull request
Oct 5, 2023
* rough first draft * adds images and formats do/dont examples to rough draft * checkpoint for misc content edits, added section for navigation * reformats and adds to degraded content info, adds button flowchart * adds and updates content, applies some layout * reworked title * adds page to nav, rms error messages stub file * adds guidance about error states to empty states guidelines * adds info about forms and data loss confusion * adds rough draft of navigation degradation and loading guidelines * rm commented text that was being unintentionally rendered * revises navigation guidance for individual nav items (example: right-hand global side sheet that appears when clicking avatar in global nav header) * basic content outline * adds more specific guidance about sidesheet degradation, adjusts some image dimensions * some refinements to content and structure * adds graphics and applies some layout * adds a11y guidance * tweaks to formatting and content * adds loading pg to nav * misc edits and refinements * addresses PR feedback, removes guidance that sometimes it's ok to disable a button * fixes typo * adds screen recording to demonstrate an inert button, and other edits * appease the linter * appease the linter (second attempt) * adds more info about button loading state a11y * tweaks and typo corrections * fix button loading state section's layout * image and video improvements * updates button loading guidance to align with parallel work * small typo fix * content improvements * image tweak * image tweak * updates from merging degraded experience docs * appease the linter * rough first draft * adds images and formats do/dont examples to rough draft * checkpoint for misc content edits, added section for navigation * reformats and adds to degraded content info, adds button flowchart * adds and updates content, applies some layout * reworked title * adds page to nav, rms error messages stub file * adds guidance about error states to empty states guidelines * adds info about forms and data loss confusion * adds rough draft of navigation degradation and loading guidelines * rm commented text that was being unintentionally rendered * revises navigation guidance for individual nav items (example: right-hand global side sheet that appears when clicking avatar in global nav header) * adds more specific guidance about sidesheet degradation, adjusts some image dimensions * basic content outline * some refinements to content and structure * adds graphics and applies some layout * adds a11y guidance * tweaks to formatting and content * adds loading pg to nav * adds more info about button loading state a11y * Fix broken link on filter input docs (#581) * Component page breadcrumbs (#569) * fix for breadcrumbs withPrefix * bumped version * yarn.lock * editing component layout to include breadcrumbs * fixes component pg breadcrumb nav --------- Co-authored-by: Mike Perrotti <[email protected]> * Expose dotcom shared components (#557) * Expose dotcom shared components * Update content/github-staff/github-shared-components.mdx Co-authored-by: Emily Brick <[email protected]> * Change format of shared_components.json * Renaming * Fix link styles; rearrange shared components page * Stop using outdated shared deploy config * Add ListView component to fallback recipe file * Pull data from github master branch * Remove unnecessary console.log; remove unused ToC item * D'oh, fix other ToC link * Stop grouping shared components alphabetically --------- Co-authored-by: Emily Brick <[email protected]> * Icon design guidelines missing images (#585) * Add nested dialog policy (#583) * Add nested dialog policy * Update dialog.mdx * Update content/components/dialog.mdx * Update content/components/dialog.mdx Co-authored-by: Owen Niblock <[email protected]> * Update dialog.mdx --------- Co-authored-by: Owen Niblock <[email protected]> * Add accessibility GitHub issues link to component documentation (#573) * add an accessibility permalink * testing out two a11y sections * added component and imported into component layout * modified component layout * added accessibility component into tooltip file * fixed component * individually importing the accessibility link component into docs pages * added accessibility link component to components a-f * added a11y component to the rest of component pages * updated contribution guides to reflect these changes * fixed linter * fixed linter...again * added consistent headings * Update content/guides/contribute/documentation.mdx Co-authored-by: Josep Martins <[email protected]> * Update content/components/tooltip.mdx * updated accessibility component * updated Link to match link in footer --------- Co-authored-by: Josep Martins <[email protected]> * Update README.md (#586) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * typo fix and adding project board link (#587) * Add info about required css loading (#588) * Add info about required css loading * Review fixes * Fix markdown linter (#589) * Primer Design data visualization guidance (#591) * Adding light documentation for chart guidance * update nav and rename for consistency * misc edits and refinements * addresses PR feedback, removes guidance that sometimes it's ok to disable a button * fixes typo * adds screen recording to demonstrate an inert button, and other edits * appease the linter * appease the linter (second attempt) * tweaks and typo corrections * fix button loading state section's layout * Only show highest-ranking status for Rails components on status page (#592) * image and video improvements * updates button loading guidance to align with parallel work * small typo fix * Replace broken link with the working one (#593) * Replace broken link with the working one * Fix as per comments * Fix 'require' in Rails setup docs (#603) * Add Primer::Beta::NavList as a valid railsId (#607) * Lookbook embeds (#608) * Native Lookbook embeds * Add more panels; fix URLs * Fix prod URLs * Fix dev embed URLs; add inspect button * content improvements * image tweak * Graceful degradation guidelines (#548) * rough first draft * adds images and formats do/dont examples to rough draft * checkpoint for misc content edits, added section for navigation * reformats and adds to degraded content info, adds button flowchart * adds and updates content, applies some layout * reworked title * adds page to nav, rms error messages stub file * adds guidance about error states to empty states guidelines * adds info about forms and data loss confusion * adds rough draft of navigation degradation and loading guidelines * rm commented text that was being unintentionally rendered * revises navigation guidance for individual nav items (example: right-hand global side sheet that appears when clicking avatar in global nav header) * adds more specific guidance about sidesheet degradation, adjusts some image dimensions * misc edits and refinements * addresses PR feedback, removes guidance that sometimes it's ok to disable a button * fixes typo * adds screen recording to demonstrate an inert button, and other edits * appease the linter * appease the linter (second attempt) * tweaks and typo corrections * image and video improvements * content improvements * image tweak * misc image updates * updates from merging degraded experience docs * appease the linter * Update content/ui-patterns/loading.mdx Co-authored-by: Katie Langerman <[email protected]> * Update content/ui-patterns/loading.mdx Co-authored-by: Katie Langerman <[email protected]> * Update content/ui-patterns/loading.mdx Co-authored-by: Katie Langerman <[email protected]> * addresses PR feedback * appease the linter * updates interstitial loading screen recording --------- Co-authored-by: Emily Brick <[email protected]> Co-authored-by: Cameron Dutro <[email protected]> Co-authored-by: Josep Martins <[email protected]> Co-authored-by: Kate Higa <[email protected]> Co-authored-by: Owen Niblock <[email protected]> Co-authored-by: Daniil Kachur <[email protected]> Co-authored-by: Tyler Benning <[email protected]> Co-authored-by: Katie Langerman <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Interface guidelines for GitHub's graceful degradation patterns. Graceful degradation in the github.com monolith is the practice of ensuring that a page still renders and primary experiences are still available during downtime of optional service dependencies.
Related: https://thehub.github.com/epd/engineering/dev-practicals/graceful-degradation/ (only available to GitHub staff)