diff --git a/docs/common/DocsDoNot.vue b/docs/common/DocsDoNot.vue
index 0330c6614..dbd7b5a28 100644
--- a/docs/common/DocsDoNot.vue
+++ b/docs/common/DocsDoNot.vue
@@ -36,6 +36,7 @@
.show {
display: inline-block;
margin: 8px;
+ vertical-align: top;
border: 1px solid #dedede;
border-radius: 4px;
}
diff --git a/docs/common/DocsPageTemplate/index.vue b/docs/common/DocsPageTemplate/index.vue
index 5d22a6047..9f4c5f65d 100644
--- a/docs/common/DocsPageTemplate/index.vue
+++ b/docs/common/DocsPageTemplate/index.vue
@@ -44,7 +44,7 @@
import MethodsTable from './jsdocs/MethodsTable';
import Header from './Header';
import SideNav from './SideNav';
- import jsdocs from '~/jsdocs';
+ import jsdocs from '~/jsdocs.js';
import tableOfContents from '~/tableOfContents.js';
export default {
diff --git a/docs/pages/errors/alert.png b/docs/pages/errors/alert.png
new file mode 100644
index 000000000..bb7cab0ce
Binary files /dev/null and b/docs/pages/errors/alert.png differ
diff --git a/docs/pages/errors/banner.png b/docs/pages/errors/banner.png
new file mode 100644
index 000000000..b7364ca55
Binary files /dev/null and b/docs/pages/errors/banner.png differ
diff --git a/docs/pages/errors/disable.png b/docs/pages/errors/disable.png
new file mode 100644
index 000000000..b596caedd
Binary files /dev/null and b/docs/pages/errors/disable.png differ
diff --git a/docs/pages/errors/disclosure-do.png b/docs/pages/errors/disclosure-do.png
new file mode 100644
index 000000000..c4e991720
Binary files /dev/null and b/docs/pages/errors/disclosure-do.png differ
diff --git a/docs/pages/errors/disclosure-dont.png b/docs/pages/errors/disclosure-dont.png
new file mode 100644
index 000000000..6d2ad1bab
Binary files /dev/null and b/docs/pages/errors/disclosure-dont.png differ
diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
new file mode 100644
index 000000000..bfa4d836e
--- /dev/null
+++ b/docs/pages/errors/index.vue
@@ -0,0 +1,218 @@
+
+
+
+ Errors occur when the software fails to do what the user expected it to or when the system fails. The system should display clear messages to help users identify when these errors happen and ways to quickly understand and resolve them.
+
+ User errors occur when a user input or interaction isn’t understood by the system. Examples include invalid field inputs and accessing blocked pages.
+
+ System errors are usually caused by factors that are not the fault of the user. Examples include connectivity or network issues, missing data or page not found, and other unexpected issues.
+
+ Follow the
+ Error messages should also be actionable. Offer the solution as an action when possible and make sure the action label is specific to the outcome. If including an action isn’t possible, then briefly explain how the user can fix their problem.
+
+ “Sorry, something went wrong. Refresh page"
+
+ “500 internal server error. It looks like the server failed to fulfill an apparently valid GET or POST request. We are aware of this issue and you can try solving it by reloading the page. We apologize for the inconvenience and hope this doesn’t occur again.”
+
+ Let the user know what went wrong without blaming them. Do not use all caps, exclamation points, or other alarmist language.
+
+ “Please enter a valid email”
+
+ “WARNING!! You didn’t fill this out”
+
+ Even though errors can induce negative emotions, avoid being too whimsical and lighthearted. This can have the opposite effect and cause more frustration.
+
+ “Storage limit reached”
+
+ “Whoops! Looks like the tank is too full 😎"
+
+ Sizes:
+ Banners are appended to the app bar and notify the user about global system errors and/or notifications that affect the whole app experience.
+
+ Error summaries should appear at the top of the page and use an alert component. Use them in forms or for page-level errors that are not associated with a specific component or location on the page.
+
+ Place inline error messages in close proximity to where the error occurred. This can be an icon only, or icon and text. When paired with text, use
+ Sometimes pages do not load because of 404 or 500 errors, unsupported browsers, and restricted permissions. Users should see a brief explanation of what went wrong and an action that might help address the problem.
+
+ One of the best ways to handle errors is to prevent them from happening in the first place. Following is a non-exhaustive list of common patterns that our products use to minimize the chance of users experiencing frustration from errors.
+
+ If an operation can cause unintentional and irreversible data loss, or will create errors under the current condition, disable the action rather than hiding it. Disabling it provides the user with context as to what is possible. It should be clear to the user what they need to do for the action to become possible.
+
+ However, forms that create or update data generally should not have a disabled submit button and follow our form validation patterns instead.
+
+ For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.
+
+ For conditions which partially block or interrupt the user experience, use a warning icon with
+ Modals are helpful for preventing errors but should not be overused since they can disrupt user flow. For operations with relatively significant but not critical consequences, provide the option to undo an action.
+
+ Especially for repetitive, common actions, setting configurations to known commonly used defaults can help people save time and avoid overlooking unintentional errors.
+
+ Error messages are important, but should not overwhelm the user. Apply the concept of
+ For error messages, this means not showing all error messages at once. Show enough information for the user to discover where the problem is, and present the detail they need at the moment of resolving the error.
+
+ Do not use red color as the only indicator for errors. Color alone is not sufficient to indicate an error state. Errors must be accompanied by an additional visual indicator such as an icon as mentioned in
+ Important information to resolve errors should also be keyboard accessible. Avoid using snackbars and tooltips as the primary way to access this critical information.
+
+ User errors
+
+
+ System errors
+
+
+ Tone
+
+
+ Color
+
+
+ Icon
+
+ 14px
, 24px
+
+ Banner
+
+
+ Error summary
+
+
+ Inline error messages
+
+ KLabeledIcon
+
+ Page error
+
+
+ Disable, don't hide
+
+
+ Warnings
+
+ palette.orange.v_400
and informative language of the consequences under the current condition.
+
+ Undo
+
+
+ Good defaults
+
+
+ Progressive disclosure
+
+
Finally, these principles are a work in progress. The intent is that this is a living set of principles that will evolve to better serve the design team, the product process, and our users.
Equity is at the heart of Learning Equality’s mission. Our products address barriers of access to educational opportunity that are faced by marginalized populations.
++ Equity is at the heart of Learning Equality’s mission. Our products address barriers of access to educational opportunity that are faced by marginalized populations. +
The learning process can sometimes feel tiring and challenging. Learning can be far more effective by keeping people motivated and engaged. We support not only concept and skill proficiency, but also the ability to continue learning in the future.
++ The learning process can sometimes feel tiring and challenging. Learning can be far more effective by keeping people motivated and engaged. We support not only concept and skill proficiency, but also the ability to continue learning in the future. +
Communities understand their own needs best. Our tools enable them to have ownership over how their goals, educational resources, and identities are represented. We understand that one size doesn’t fit all, so we serve the unique needs of our communities in these ways:
++ Communities understand their own needs best. Our tools enable them to have ownership over how their goals, educational resources, and identities are represented. We understand that one size doesn’t fit all, so we serve the unique needs of our communities in these ways: +
Consistency removes friction with the product, allowing people to focus on what they’re trying to get done. Each function of our products should feel empowering and familiar with the rest of the product ecosystem.
++ Consistency removes friction with the product, allowing people to focus on what they’re trying to get done. Each function of our products should feel empowering and familiar with the rest of the product ecosystem. +