diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md index 7b98c8fb8f..e31a3651d7 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md @@ -2,6 +2,9 @@ id: Action list section: components --- + +import '../components.css'; + ## Usage Use an action list to determine which spacing guidelines to use for a group of actions in [toolbars](/components/toolbar), [modals](/components/modal), [forms](/components/forms/form), [data lists](/components/data-list), [wizards](/components/wizard), and more. Using an action list allows you to know what spacing to use for a group of actions, depending on your use case. @@ -14,17 +17,23 @@ Action lists are also designed to stack buttons correctly within the space they #### Action list for actions in a modal In this example, an action list is used for action buttons inside a modal. The action list allows for 16px spacing to be maintained between the action buttons. -Action list used inside of a modal +
+![Action list used inside of a modal](./img/action-modal.svg) +
#### Action list for actions in a wizard In this example, an action list is used for the actions within a wizard. The action list allows for 16px spacing to be maintained between the main action buttons, and 48px of spacing to be maintained between them and the cancel button. -Action list used inside of a wizard +
+![Action list used inside of a wizard](./img/action-wizard.svg) +
#### Action list for actions in a toolbar In this example, an action list is used for the actions within a toolbar. The action list allows for 16px spacing to be maintained between action buttons. -Action list used inside of a toolbar +
+![Action list used inside of a toolbar](./img/action-toolbar.svg) +
## Accessibility For information regarding accessibility, visit the [action list accessibility tab](/components/action-list/accessibility). diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.png deleted file mode 100644 index fd7b3f36a1..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.svg new file mode 100644 index 0000000000..df09591111 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.png deleted file mode 100644 index 05962148f3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.svg new file mode 100644 index 0000000000..014cb4b726 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.png deleted file mode 100644 index 5a9d18a851..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.svg new file mode 100644 index 0000000000..f955cd0f72 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md index 62d946d9b5..7665839a41 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md @@ -4,14 +4,19 @@ section: components related: ['Alert', 'Alert group'] --- +import '../components.css'; + ## Elements ### Alerts + Alert elements vary depending on the variation of alert. Toast alerts are always dismissible, but bordered inline alerts can be both dismissable and non-dismissible. All other elements are consistent between toast and bordered inline alerts. Plain inline alerts are never dismissable, and consist of only a status area and alert title. - -Alert types -1. **Status area**: The status area indicates the severity of the alert with a specific icon and color. +
+![Alert types](./img/alert-types.svg) +
+ +1. **Status area**: The status area indicates the severity of the alert with a specific icon and color. 2. **Alert title**: The alert title concisely communicates the alert’s main message. Its text color is coded to match the alert type. @@ -27,18 +32,22 @@ Alert elements vary depending on the variation of alert. Toast alerts are always An alert group stacks and positions 2 or more alerts in a live region, either in a layer over the main content of a page or inline with the page content. Alert groups should always rank alerts by age, stacking new alerts on top of old ones as they surface. -An example of an alert group stacked on a page. Each alert is labeled according to its place in the stack hierarchy: Newest on top, second newest in the middle, and oldest on the bottom. +
+![An example of an alert group stacked on a page. Each alert is labeled according to its place in the stack hierarchy: Newest on top, second newest in the middle, and oldest on the bottom.](./img/alert-group-elements.svg) +
1. **Newest notification:** Always appears at the top of the alert group. 2. **Second newest notification:** Moves down when a newer notification surfaces. 3. **Oldest notification:** Continues to move down the stack as newer notifications surface, until a user closes it. 4. **Overflow footer (optional):** Use this when you do not want to display more than a specified number of alerts at the same time on the user's screen. See [Managing overflow](#managing-overflow) for more information about overflow footer interactions. - ### Communicating severity + The status icon, background, and alert title are coded to communicate the severity of an alert. -alert styles +
+![Alert status](./img/alert-status.svg) +
|Type |Icon |Usage | |---------|--------|--------------| @@ -51,12 +60,13 @@ The status icon, background, and alert title are coded to communicate the severi For more information about what colors to use for status and severity, visit the [Colors page](/design-foundations/colors/#status-and-state-colors). ## Usage -Use an alert component when you are trying to give the user essential information in a prominent way. More specific use cases differ based on component variation. + +Use an alert component when you are trying to give the user essential information in a prominent way. More specific use cases differ based on component variation. ### Customizing alerts - + If your use case falls outside of PatternFly's standard alert variations, use [icons](/design-foundations/icons) and [colors](/design-foundations/colors) to create custom alerts that meet your needs. - + View custom alerts in action in our [custom alert examples](/components/alert#custom-icons). ### Managing overflow @@ -65,31 +75,42 @@ If you don't want multiple alerts to stack and fill the screen until the user di The overflow link should be configured to navigate to a place where the user can view and manage a complete list of incoming alerts. If a [notification drawer](/components/notification-drawer) is being used, it should open the drawer. You may customize the text accordingly to reflect the result of clicking the link. However, we recommend displaying the number of new/unread notifications present to give the user feedback about how many additional notifications are remaining to view as in the example below. -An example of an alert group with overflow footer +
+![An example of an alert group with overflow footer](./img/alert-group-with-overflow.svg) +
See our [toast alert guidelines](#using-toast-alerts) for more information about using toast alerts. ## Placement + Toast alerts should be placed in an alert group in the upper-right corner of a page. Use 8px of padding between each alert in an alert group. Alert group alignment on a page will depend on your use case. ### Toast alerts + Toast alerts communicate information about an update, confirmation, or other activity. A toast alert overlays content in the upper-right corner of the page and disappears when it times out or when the user dismisses it. - -![toast notification placement](./img/toast-notification.png) - + +
+![Toast notification placement](./img/toast-notification.svg) +
#### Using toast alerts + Use toast alerts to communicate an update, confirmation, or other activity to the user without blocking their workflow. For example, you can use a toast alert to inform the user that their message was sent. You can include links in a toast alert for a user to take action on the event that surfaced the alert, but the links should only be a shortcut for the user. A toast alert should never be used as the only means for taking actions on an alert event. - + Toast alerts stack in the upper-right corner of a page. To properly position and stack a set of alerts, use an [alert group](#alert-groups) component. When alerts stack, the most recent alert appears at the top, and others move down as more alerts come in. When alerts are deleted, the remaining alerts move up. - -![alert group](./img/toast-notification-multiple.png) - + +
+![alert group](./img/toast-notification-multiple.svg) +
+ Toast alerts should always have a close button so that the user can dismiss them. If you include an automatic timeout for your toast alert, 8 seconds is recommended. Toast alerts should not disappear while the user is hovering over them. - -toast alerts in a page - + +
+![toast alerts in a page](./img/toast-alert-desktop.svg) +
+ Toast alerts are commonly used in the following situations: + - Confirming that a message sent - Confirming that an update was made - Informing the user that their action was completed successfully @@ -97,72 +118,91 @@ Toast alerts are commonly used in the following situations: **For desktop views**, right align toast alert groups over your page content. Each alert should stack on top of one another with 8px of padding in between. -An example of a right-aligned toast alert group over a desktop view. +
+![An example of a right-aligned toast alert group over a desktop view](./img/alert-group-desktop.svg) +
**For mobile views**, center toast alert groups over your page content. -An example of a centered toast alert group over a mobile view. - -An example of a centered toast alert group over a mobile view. +
+![An example of a centered toast alert group over a mobile view](./img/alert-group-mobile.svg) +
See our [toast alert guidelines](#using-toast-alerts) for more information about using toast alerts. - ### Bordered inline alerts + Bordered inline alerts communicate information about a specific user action on a page. An inline alert appears within the content area and disappears when the user closes it or navigates away from the page. -![inline notification placement](./img/inline-notification.png) +
+![inline notification placement](./img/inline-notification.svg) +
#### Using bordered inline alerts + Use bordered inline alerts to return feedback as the result of a user action within a page without blocking the user’s workflow. Common uses for bordered inline alerts include form validation and warning messages. - -* **If an alert message applies globally to the content on a page,** place the alert in the page header area just below the title. - - global inline alert in a page - -* **If the alert applies only to specific content,** place it inline with the page content to call attention to the error. - - inline alert inline with content -* **If the alert is being used to indicate errors,** use an error validation summary at the top of the page to indicate what errors are present. The summary should be a quick, general overview. Show an error alert next to the field that is causing the error. The error message should be concise and actionable. It should tell the user what happened and the next steps needed to fix it. +- **If an alert message applies globally to the content on a page,** place the alert in the page header area just below the title. - inline alert inline with link demo 1 +
+![global inline alert in a page](./img/inline-alert-page-level.svg) +
+ +- **If the alert applies only to specific content,** place it inline with the page content to call attention to the error. - inline alert inline with link demo 2 +
+![inline alert inline with content](./img/inline-alert-specific-context.svg) +
-* **If multiple errors are present in the same location,** order them from most to least severe. +- **If the alert is being used to indicate errors,** use an error validation summary at the top of the page to indicate what errors are present. The summary should be a quick, general overview. Show an error alert next to the field that is causing the error. The error message should be concise and actionable. It should tell the user what happened and the next steps needed to fix it. - multiple alerts on a page +
+![inline alert inline with link demo](./img/inline-alert-page-level-with-link.svg) +
-* **If the alert is being used to indicate errors on a modal,** use an error validation summary at the top of the modal below the title to indicate what errors are present. Show an error alert next to the field that is causing the error. The error message should be concise and actionable. It should tell the user what happened and the next steps needed to fix it. +- **If multiple errors are present in the same location,** order them from most to least severe. - multiple alerts on a page demo 2 +
+![multiple alerts on a page](./img/multiple-alerts.svg) +
-* **If the alert is being used to indicate errors on a modal with an existing alert,** display the new alert above the existing alert. +- **If the alert is being used to indicate errors on a modal,** use an error validation summary at the top of the modal below the title to indicate what errors are present. Show an error alert next to the field that is causing the error. The error message should be concise and actionable. It should tell the user what happened and the next steps needed to fix it. - multiple alerts on a modal with existing alert +
+![multiple alerts on a page demo 2](./img/inline-alert-modal-with-link-two.svg) +
+ +- **If the alert is being used to indicate errors on a modal with an existing alert,** display the new alert above the existing alert. + +
+![multiple alerts on a modal with existing alert](./img/inline-alert-modal-with-existing-alert.svg) +
**The user can dismiss an information alert by using the close button.** Error-related alerts (warning and critical severity) should disappear only when the underlying issue that caused the alert is resolved. However, if the issue cannot be resolved on the current page, use a [modal](/components/modal) instead of an inline alert to provide user the options to proceed. - -In addition to static message content and links, **you have the option of including interactive elements** in the body of an inline alert to ask the user for further input or feedback. - -alert with radio button options +In addition to static message content and links, **you have the option of including interactive elements** in the body of an inline alert to ask the user for further input or feedback. +
+![Alert with radio button options](./img/option-alert.svg) +
Bordered inline alerts are commonly used in the following situations: + - Informing the user that the information they entered into a form field isn’t valid - Informing the user of something that needs their attention - Informing the user that they need to set something up - Informing the user that a feature is temporarily unavailable ### Plain inline alerts + Plain inline alerts communicate information about a temporarily persistent error or other activity. A plain inline alert is less visually intrusive than a bordered inline alert, and is designed to be placed in content-heavy areas, such as within a form, wizard, or drawer. This alert type persists until the error or action is resolved. - -![plain inline notification placement](./img/plain-inline-notification.png) + +
+![plain inline notification placement](./img/plain-inline-notification.svg) +
#### Using plain inline alerts - + Use plain inline alerts to communicate non-imperative messages to the user without adding visual clutter. This alert type is particularly helpful within other components, such as wizards, drawers, modals, side panels, and popovers, which may already contain a lot of information. Plain inline alerts are non-dismissible, and it is not recommended to use them with actions or links. @@ -170,51 +210,57 @@ Plain inline alerts are non-dismissible, and it is not recommended to use them w **Using plain inline alerts on tabbed pages:** On a tabbed page that has a gray background, inline alerts do not offer enough contrast. Using them in this context requires additional formatting. + - If the alert is relevant to the entire page and all the tabs within the page, it should be placed on the header: - - ![alert group](./img/inline-header-alert.png) - + +
+![Alert in page header section](./img/inline-header-alert.svg) +
+ - If the alert is not relevant to the entire page, the white header area should be extended below the tab and separated from the tabs by a gray line. Place the plain inline alert in the resulting “banner”: - - ![alert group](./img/below-tab-alert.png) - + +
+![Alert below tab content](./img/below-tab-alert.svg) +
+ Plain inline alerts are commonly used in the following situations: + - Informing the user of something that needs their attention - Informing the user that a temporary error has occurred - Informing the user that a feature is temporarily unresponsive ## Content considerations - + - In inline alerts and toast alerts, avoid using “success” and “successfully.” They’re extraneous. - +
- + | **Do** | **Don’t** | |:------:|:---------:| | Account created| Your account was successfully created.| - +
- + - Be concise. In one-line toast alerts, use fragments instead of sentences if possible. - +
- + | **Do** | **Don’t** | |:------:|:---------:| | Message sent| Your message has been sent.| - +
- In toast alerts containing links, describe how the user can navigate through the UI to perform the action. Learn more about how descriptive text supports accessibility in the next section. - +
- + | **Do** | **Don’t** | |:------:|:---------:| | From the **Settings** tab, click **View logs.**| **View logs**| - +
- + ## Accessibility For information regarding accessibility, visit the [alert accessibility](/components/alert/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-page-level.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-page-level.png deleted file mode 100644 index 5935f80490..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-page-level.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-specific-context.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-specific-context.png deleted file mode 100644 index 0e2545ba84..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Inline-alert-specific-context.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Toast-alerts-desktop.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Toast-alerts-desktop.png deleted file mode 100644 index 4ec002d92b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/Toast-alerts-desktop.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.png deleted file mode 100644 index 607dfdcf36..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.svg new file mode 100644 index 0000000000..9dc8b338b9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-desktop.svg @@ -0,0 +1,250 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.png deleted file mode 100644 index 00f5236b27..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.svg new file mode 100644 index 0000000000..39c6cfb80f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-elements.svg @@ -0,0 +1,251 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.png deleted file mode 100644 index bce48184ef..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.svg new file mode 100644 index 0000000000..85d4b3da5b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-mobile.svg @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.png deleted file mode 100644 index 7d44b1c879..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.svg new file mode 100644 index 0000000000..5b271d96e9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-group-with-overflow.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.png deleted file mode 100644 index 962c8c6049..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.svg new file mode 100644 index 0000000000..013d5fa3f4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-status.svg @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.png deleted file mode 100644 index 2c8b047b09..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.svg new file mode 100644 index 0000000000..2b4d4dbe5e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/alert-types.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/below-tab-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/below-tab-alert.svg new file mode 100644 index 0000000000..99679f54f4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/below-tab-alert.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.png deleted file mode 100644 index f1410130cb..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.svg new file mode 100644 index 0000000000..2715e4e9da --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-existing-alert.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.png deleted file mode 100644 index bf99b969fb..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.svg new file mode 100644 index 0000000000..0981368237 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-one.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.png deleted file mode 100644 index 96f46b06f5..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.svg new file mode 100644 index 0000000000..ed49c1f39b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-modal-with-link-two.svg @@ -0,0 +1,252 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-one.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-one.png deleted file mode 100644 index 7d22117456..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-one.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-two.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-two.png deleted file mode 100644 index 39d69733fe..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link-two.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link.svg new file mode 100644 index 0000000000..c8dda8b08a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level-with-link.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level.svg new file mode 100644 index 0000000000..e50b6f4d29 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-page-level.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-specific-context.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-specific-context.svg new file mode 100644 index 0000000000..7daebab9b2 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-alert-specific-context.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-header-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-header-alert.svg new file mode 100644 index 0000000000..0d5baa445f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-header-alert.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.png deleted file mode 100644 index c671ef9583..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.svg new file mode 100644 index 0000000000..745bd61418 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-interactive-alert.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.png deleted file mode 100644 index 20bbece9e6..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.svg new file mode 100644 index 0000000000..2da7f0be64 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/inline-notification.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/multiple-alerts.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/multiple-alerts.svg new file mode 100644 index 0000000000..6ce92f26fd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/multiple-alerts.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.png deleted file mode 100644 index 870d6b6c28..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.svg new file mode 100644 index 0000000000..745bd61418 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/option-alert.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.png deleted file mode 100644 index 74a8249ed2..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.svg new file mode 100644 index 0000000000..822e6648f1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/plain-inline-notification.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-alert-desktop.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-alert-desktop.svg new file mode 100644 index 0000000000..21bcd7e915 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-alert-desktop.svg @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.png deleted file mode 100644 index febd15c81a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.svg new file mode 100644 index 0000000000..dd5781622f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification-multiple.svg @@ -0,0 +1,154 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.png deleted file mode 100644 index e96dfed76f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.svg new file mode 100644 index 0000000000..27363845fb --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/alert/img/toast-notification.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.png deleted file mode 100644 index 6dc292565c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.svg new file mode 100644 index 0000000000..58b8ab1bee --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-horizontal-nav.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.png deleted file mode 100644 index 86036d5ab3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.svg new file mode 100644 index 0000000000..d35c047f40 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/img/page-vertical-nav.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md index cc598706c8..df545932c4 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/page/page.md @@ -3,12 +3,16 @@ id: Page section: components --- +import '../components.css'; + ## Elements The basic layout of a page differs depending on whether your application uses vertical or horizontal primary navigation as illustrated below. ### Page with vertical navigation -page with vertical navigation +
+![page with vertical navigation](./img/page-vertical-nav.svg) +
**1. Masthead:** The masthead provides a consistent header for every page in your application. See the [masthead design guidelines](/components/masthead/design-guidelines) for more details. @@ -24,7 +28,9 @@ The basic layout of a page differs depending on whether your application uses ve ### Page with horizontal navigation -page with horizontal navigation +
+ ![page with horizontal navigation](./img/page-horizontal-nav.svg) +
When using a horizontal primary navigation, the left-hand sidebar is removed and the navigation is placed inline with other masthead elements. All other page elements remain the same.