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..d741e8242f 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md @@ -3,13 +3,17 @@ id: Actions section: patterns --- +import '../components.css'; + An **action** is any process that a user can trigger by clicking or selecting a linked component. Common actions include adding, deleting, editing, filtering, and submitting, for example. In PatternFly, most actions are shown in the UI as action buttons, action items (in menus), and action cards. These components are incorporated into the design of other components, such as a toolbar with action buttons, a dropdown menu with action items, and so on. ## Elements 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 +44,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 +55,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 +78,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 +88,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