diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/multi-select.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/multi-select.svg new file mode 100644 index 0000000000..de61667c91 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/multi-select.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-elements.svg new file mode 100644 index 0000000000..ea80c3ab2a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-elements.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-form-view.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-form-view.svg new file mode 100644 index 0000000000..870381a020 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-form-view.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-table-view.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-table-view.svg new file mode 100644 index 0000000000..9f41df1450 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-table-view.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-typology.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-typology.svg new file mode 100644 index 0000000000..2eb32ed328 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/img/toggle-typology.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/toggle-group.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/toggle-group.md index 46aaa3b588..118cf8c5b5 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/toggle-group.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/toggle-group/toggle-group.md @@ -3,10 +3,14 @@ id: Toggle group section: components --- +import '../components.css'; + ## Elements Toggle items can consist of icons, text, or both. Styling of toggles is dependent on the background color. -Toggle group elements +
+![Elements of a toggle group.](./img/toggle-elements.svg) +
## Usage Toggle groups can be used when the user must select a single choice from a mutually exclusive set of options and can be used with or without icons. @@ -29,12 +33,13 @@ Single select toggle groups are commonly used to switch between views including: - a form view and a YAML view - a card view and a table view -Single select toggle group ex - -Single select toggle group ex2 +
+![Example of a single select toggle group in a form.](./img/toggle-form-view.svg) +
-1. **Zoom in**: By selecting this action, the view would zoom in by one increment. -2. **Fit to screen**: This action will fit the topology view to screen. After selection, the item will return to its default state, with a white background. +
+![Example of a single select toggle group in a table.](./img/toggle-table-view.svg) +
### Multi select toggle group Use single multi select toggle groups when you want to select multiple attributes from a group. This is most commonly used for filtering a content view when there is a lot of space available. @@ -42,7 +47,9 @@ Use single multi select toggle groups when you want to select multiple attribute #### Examples Selecting an attribute will apply that filter to the table. In this case, only nodes that are “ready” are shown. -Multi select toggle group ex +
+![Example of a multi select toggle group.](./img/multi-select.svg) +
### Toggle items @@ -51,7 +58,10 @@ Use toggle items when you want to select a single action from a group. We recomm #### Examples Toggle items are most commonly used in canvas views, such as topology. Selecting a toggle item will switch the user into that “mode” or allow them to take that action. -Toggle items ex +
+![Example of toggle items.](./img/toggle-typology.svg) +
1. **Zoom in**: This item changes the cursor into a zoom icon and allows the user to zoom, as long as that toggle is selected. -2. **Zoom cursor**: The cursor changes into a zoom icon and the user may exit that mode by selecting the “move” hand toggle item. +2. **Fit to screen**: This action will fit the topology view to screen. After selection, the item will return to its default state, with a white background. +3. **Zoom cursor**: The cursor changes into a zoom icon and the user may exit that mode by selecting the “move” hand toggle item.