diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md b/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md index b8ea027e5c..7931be9eaf 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md @@ -9,7 +9,9 @@ An **action** is any process that a user can trigger by clicking or selecting a The following image of a card view demonstrates some of the more common uses of actions that you will find in a UI, but does not cover all scenarios. -![A card view, where the toolbar action buttons, actionable card, ellipsis icon, and action menu item are marked with annotations.](./img/actions-pattern.png) +
+![A card view where the toolbar actions, actionable card, ellipsis icon, and action menu items are marked with annotations.](./img/actions-elements.svg) +
1. [**Action button:**](/components/button) Most buttons in a UI trigger an action. 1. [**Action card:**](/components/card#actionable) A card itself can be actionable, meaning an action will be triggered when a user selects the card. @@ -40,7 +42,9 @@ Users can typically trigger deletion using buttons or menu items. Consider the f After a user triggers deletion, communicate that it will be permanent via a confirmation modal: -![Confirmation modal with danger styling.](./img/critical-deletion-modal.png) +
+![A confirmation modal with danger styling.](./img/actions-deletion.svg) +
1. A **warning icon** beside the title. 1. A **labeled text input** to ask users to confirm the resource name. @@ -49,7 +53,9 @@ After a user triggers deletion, communicate that it will be permanent via a conf Once a resource has been successfully deleted, show an [inline success alert:](/components/alert#inline-alerts-variants) -![Inline success alert for deletion.](./img/critical-deletion-success.png) +
+![An inline success alert for deletion.](./img/actions-inline-success.svg) +
#### Removal When the action of removing a resource can be reversed, it has a lower impact on the user experience. A confirmation dialog isn't necessary because users can easily retrieve the removed resource. @@ -70,7 +76,9 @@ Many PatternFly components have design options that allow you to include actions For example, if a button affects data in a table or card view, place the button in the toolbar. -![A toolbar with a primary action button and a secondary dropdown menu toggle.](./img/component-actions-dropdown.png) +
+![A toolbar with a primary action button and a secondary dropdown menu toggle.](./img/actions-component-level.svg) +
### Page-wide actions @@ -78,14 +86,20 @@ Sometimes, an action isn't intended to affect a specific component and is intend Actions that affect a page as a whole should be placed on the top right of a page, at the header level. Do not place any page-wide actions in a toolbar. -![A UI screen with a page-wide action button.](../../components/table/img/page-action.png) +
+![An UI with a secondary page-wide action button.](./img/actions-page-level.svg) +
#### Single actions When there is only a single page-wide action, use a primary or secondary button. Use a primary if it is the primary action you would like the user to take on the page, and a secondary button if it is not the primary call to action. -![A primary page-wide action button.](./img/page-actions-primary.png) +
+![A primary page-wide action button.](./img/actions-single-action.svg) +
#### Multiple actions If there are multiple possible page-wide actions a user can take on the page, house them in a dropdown menu. For guidance on menu toggle styling, refer to the [dropdown menu design guidelines](/components/menus/dropdown/design-guidelines). -![A secondary page-wide menu toggle.](./img/page-actions-secondary.png) \ No newline at end of file +
+![A secondary page-wide menu toggle.](./img/actions-multi-actions.svg) +
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-component-level.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-component-level.svg new file mode 100644 index 0000000000..3a52b899c4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-component-level.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-deletion.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-deletion.svg new file mode 100644 index 0000000000..4bb4804c15 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-deletion.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-elements.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-elements.svg new file mode 100644 index 0000000000..b6291f8467 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-elements.svg @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-inline-success.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-inline-success.svg new file mode 100644 index 0000000000..db7a283b8b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-inline-success.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-multi-actions.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-multi-actions.svg new file mode 100644 index 0000000000..bcead0c56a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-multi-actions.svg @@ -0,0 +1,197 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-page-level.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-page-level.svg new file mode 100644 index 0000000000..6fb282cc5e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-page-level.svg @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-pattern.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-pattern.png deleted file mode 100644 index 5d578728f8..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-pattern.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-single-action.svg b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-single-action.svg new file mode 100644 index 0000000000..3e3ad8fa67 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/actions-single-action.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/component-actions-dropdown.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/component-actions-dropdown.png deleted file mode 100644 index 2ed1773735..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/component-actions-dropdown.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-modal.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-modal.png deleted file mode 100644 index 37a8f27f3a..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-modal.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-success.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-success.png deleted file mode 100644 index a8d476a84f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/critical-deletion-success.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-primary.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-primary.png deleted file mode 100644 index 7190e62796..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-primary.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-secondary.png b/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-secondary.png deleted file mode 100644 index 7236143485..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/patterns/actions/img/page-actions-secondary.png and /dev/null differ