Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(color): update status color table #1929

Merged
merged 7 commits into from
Sep 26, 2024
+33 −44
Merged

docs(color): update status color table #1929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afa446a
docs(color): update info in status tokens table to match tokens
marionnegp Sep 25, 2024
063c5e0
docs(color): add note about deprecated status name
marionnegp Sep 25, 2024
9a0417d
docs(color): remove "error" as a status name
marionnegp Sep 25, 2024
a8bc0ff
Merge branch 'staging/clefairy' into docs/status-colors-info
bennypowers Sep 26, 2024
6faec6a
docs: color table
bennypowers Sep 26, 2024
e69780a
chore: patch core for ssr
bennypowers Sep 26, 2024
4132290
Merge branch 'staging/clefairy' into docs/status-colors-info
bennypowers Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 20 additions & 44 deletions docs/foundations/color/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ subnav:
collection: sortedColor
order: 2
permalink: /foundations/color/usage/index.html
importElements:
- rh-alert
- rh-tag
- rh-table
---

<script type="module" src="/assets/javascript/elements/uxdot-best-practice.js"></script>

<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
<script data-helmet type="module">
import '/assets/javascript/elements/uxdot-best-practice.js';
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-tag/rh-tag.js';
import '@rhds/elements/rh-table/rh-table.js';
</script>

<link data-helmet rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">

## Using color

Expand All @@ -39,7 +39,7 @@ To learn more about our Red Hat red color, go to the [Brand
standards](https://www.redhat.com/en/about/brand/standards) website.

<rh-alert state="warning">
<h4 slot="header">Usage Warning</h4>
<h4 slot="header">Usage warning</h4>
<p>Do not apply the Red Hat red color to text in dark environments unless
it meets <a href="https://www.w3.org/WAI/WCAG21/Understanding/">WCAG 2.1 AA</a>
requirements.</p>
Expand Down Expand Up @@ -173,44 +173,20 @@ patterns like [alerts](/elements/alert), [badges](/elements/badge),

<rh-alert state="warning">
<h4 slot="header">Usage Warning</h4>
<p>The red-orange color is reserved for danger or error states, do not use it anywhere else.</p>
<p>The red-orange color is reserved for danger or error states. Do not use it anywhere else.</p>
</rh-alert>

<rh-table>
<table>
<thead>
<tr>
<th scope="col" data-label="Status">Status</th>
<th scope="col" data-label="Use case">Use case</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Status">Note/Tip</td>
<td data-label="Use case">Use purple to communicate helpful or important information.</td>
</tr>
<tr>
<td data-label="Status">Neutral</td>
<td data-label="Use case">Use gray to communicate information that will have no impact on a user.</td>
</tr>
<tr>
<td data-label="Status">Success</td>
<td data-label="Use case">Use green to communicate a success state.</td>
</tr>
<tr>
<td data-label="Status">Caution</td>
<td data-label="Use case">Use yellow to communicate that an issue can be avoided.</td>
</tr>
<tr>
<td data-label="Status">Warning</td>
<td data-label="Use case">Use orange to communicate that a destructive action might occur if an issue is not resolved.</td>
</tr>
<tr>
<td data-label="Status">Danger/Error</td>
<td data-label="Use case">Use red-orange to communicate a destructive action or critical error.</td>
</tr>
</tbody>
</table>

| Status | Use case |
| ------- | --------------------------------------------------------------------------------------------------------------- |
| Neutral | Use gray to communicate information that will have no impact on a user. |
| Info | Use purple to communicate helpful or important information.<br>*Note:* "Info" was previously called "note/tip." |
| Success | Use green to communicate a success state. |
| Warning | Use yellow to communicate that a destructive action might occur if an issue is not resolved. |
| Caution | Use orange to communicate that an issue can be avoided. |
| Danger | Use red-orange to communicate a destructive action or critical error. |

</rh-table>


Expand Down Expand Up @@ -280,4 +256,4 @@ using elements and patterns from the desaturated theme instead.
<uxdot-feedback>
<h2>Foundations</h2>
<p>To learn how to use our other foundations in your designs, visit the <a href="/foundations">foundations</a> section.</p>
</uxdot-feedback>
</uxdot-feedback>
13 changes: 13 additions & 0 deletions patches/@patternfly+pfe-core+4.0.2.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
diff --git a/node_modules/@patternfly/pfe-core/ssr-shims.js b/node_modules/@patternfly/pfe-core/ssr-shims.js
index d432769..c7a30fb 100644
--- a/node_modules/@patternfly/pfe-core/ssr-shims.js
+++ b/node_modules/@patternfly/pfe-core/ssr-shims.js
@@ -42,6 +42,8 @@ globalThis.IntersectionObserver ?? (globalThis.IntersectionObserver = ObserverSh
// @ts-expect-error: this runs in node
globalThis.MutationObserver ?? (globalThis.MutationObserver = ObserverShim);
// @ts-expect-error: this runs in node
+globalThis.ResizeObserver ?? (globalThis.ResizeObserver = ObserverShim);
+// @ts-expect-error: this runs in node
globalThis.getComputedStyle ?? (globalThis.getComputedStyle = function () {
return {
getPropertyPriority() {
Loading