Skip to content

Commit 357029e

Browse files
chore(action-list): image updates
1 parent 8b46983 commit 357029e

7 files changed

Lines changed: 239 additions & 3 deletions

File tree

packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/action-list.md

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
id: Action list
33
section: components
44
---
5+
6+
import '../components.css';
7+
58
## Usage
69
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.
710

@@ -14,17 +17,23 @@ Action lists are also designed to stack buttons correctly within the space they
1417
#### Action list for actions in a modal
1518
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.
1619

17-
<img src="./img/action-modal.png" alt="Action list used inside of a modal" width="446" />
20+
<div class="ws-docs-content-img">
21+
![Action list used inside of a modal](./img/action-modal.svg)
22+
</div>
1823

1924
#### Action list for actions in a wizard
2025
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.
2126

22-
<img src="./img/action-wizard.png" alt="Action list used inside of a wizard" />
27+
<div class="ws-docs-content-img">
28+
![Action list used inside of a wizard](./img/action-wizard.svg)
29+
</div>
2330

2431
#### Action list for actions in a toolbar
2532
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.
2633

27-
<img src="./img/action-toolbar.png" alt="Action list used inside of a toolbar"/>
34+
<div class="ws-docs-content-img">
35+
![Action list used inside of a toolbar](./img/action-toolbar.svg)
36+
</div>
2837

2938
## Accessibility
3039
For information regarding accessibility, visit the [action list accessibility tab](/components/action-list/accessibility).

packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-modal.svg

Lines changed: 32 additions & 0 deletions
Loading

packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-toolbar.svg

Lines changed: 77 additions & 0 deletions
Loading

packages/documentation-site/patternfly-docs/content/design-guidelines/components/action-list/img/action-wizard.svg

Lines changed: 118 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)