diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md index 96a114f87e..7781634497 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md @@ -22,23 +22,41 @@ In addition to the basic dropdown shown above, you may apply the following varia The primary toggle should be used in the same way as you would use a primary button. If you want to draw the user’s attention to a dropdown menu as the primary place to take action on a page, consider using a dropdown with primary styling. ### Secondary toggle -The secondary toggle is a variation of the primary toggle. It has less visual prominence than the primary toggle, but more visual prominence than the basic toggle and other toggle variations. +The secondary toggle is a variation of the primary toggle. It has less visual prominence than the primary toggle, but more visual prominence than the basic toggle and other toggle variations. Use a secondary toggle when the actions in the dropdown are the secondary actions you’d want a user to take. Image showing usage of secondary toggle Use a secondary toggle when other toggle variations would appear visually inconsistent, or lack the sufficient prominence needed to create a visual hierarchy. ### Plain toggle -Plain styling removes the border treatment from a dropdown toggle. This is useful in places where the default border treatment might make your layout feel visually cluttered or crowded. +Plain styling removes the border treatment from a dropdown toggle. This is useful in places where the default border treatment might make your layout feel visually cluttered or crowded. Use a plain toggle when further action hierarchy needs to be established and you already have primary or secondary action toggle on the page. ### Icon toggle When there is not enough space for a labeled button, an icon can be used instead. Icon toggles are best used when you can use a common icon that has a well understood meaning or when you are working with limited space. A common default is to use the vertical ellipses (kebab) icon to generally indicate that it is connected with a menu as shown above. ### Split button -A split button can be used when you want to combine an action button or other control with a dropdown menu. Here are some examples of split buttons. +A split button can be used when you want to combine an action button or other control with a dropdown menu. Use a split button action dropdown when you have multiple actions to show that are related to each other, but one action is more likely or important than the rest. -split button +There are two types of split buttons: split buttons with checkboxes and split buttons with actions. + +#### Split button with checkbox A split button with a checkbox can be used in bulk selection use cases for a list, table, or card grid. Here, the checkbox provides immediate access to bulk selection, and the user can also open the dropdown menu to expose other actions. Text can also be added within the toggle to reflect current state. -A split button with actions is useful when you want to expose a default action with a single click, but also allow access to other actions via the dropdown menu. This can be thought of as providing a shortcut to the most recent or frequently used item in the menu. A split button with actions can contain a labeled action as shown above or an icon in place of the label for use when there is limited space. +split button + +#### Split button with actions + +A split button with actions is useful when you want to expose a default action with a single click, but also allow access to other actions via the dropdown menu. This can be thought of as providing a shortcut to the most recent or frequently used item in the menu. A split button with actions can contain a labeled action or an icon in place of the label for use when there is limited space. + +split button + +**Behavior** + +In this case, the user can either click on the primary button, or on the caret to open/view the rest of the related options. When a user clicks on an action whether the surfaced one, or one from inside the menu, the action will be selected and applied immediately. + +**Example** + +example of split button used inside of a modal + +A split action button is used in a modal where there are different possible submit variations. Here, all the buttons are related in that they are different ways to submit the modal, but the surfaced option is the most likely to be used, while the ones housed in the toggle are other less likely options. diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggle-example.png b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggle-example.png new file mode 100644 index 0000000000..d1e8391e48 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggle-example.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggles.png b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggles.png new file mode 100644 index 0000000000..817f709ff9 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/dropdown/img/split-toggles.png differ