diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/menu/img/dropdown-disabled-action-tooltip.png b/packages/v4/patternfly-docs/content/design-guidelines/components/menu/img/dropdown-disabled-action-tooltip.png new file mode 100644 index 0000000000..eefd9bbf94 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/menu/img/dropdown-disabled-action-tooltip.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/menu/menu.md b/packages/v4/patternfly-docs/content/design-guidelines/components/menu/menu.md index ac91c756b6..f33eb0b006 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/components/menu/menu.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/components/menu/menu.md @@ -4,7 +4,7 @@ section: components --- ## Elements -Elements vary depending on [menu variation](#Variations) +Elements vary depending on [menu variation](#variations). ## Usage @@ -97,6 +97,41 @@ When using red text for destructive actions, it is still recommended to require drilldown menu +### Disabled menus and menu options + +#### When to use disabled menus and menu options + +Menus or menu items can be disabled for multiple reasons. The reason an action is disabled informs which design pattern you should use. + +Use a disabled menu when: + +* **An action is unavailable due to an unmet prerequisite, condition, permission, or status.** + + If a user needs to complete a prerequisite to enable an action, disable the action and add a [tooltip](/components/tooltip). The tooltip should explain what the user needs to do to enable the action. + + disabled action tooltip + + Example: A user can’t perform bulk actions until they select resources in the list. + + Example: A user cannot view past logs until their container is finished restarting. + +* **An action cannot be performed due to a product constraint or rule.** + + If an action cannot be taken because of a product constraint or rule, hide the action. + + Example: While a user can delete a resource they own, they cannot delete a template or default resource. + +#### When not to use a disabled menu + +Do not use a disabled menu when: + +* **An action can be performed, but is not recommended.** + + When an action can be performed but may result in an undesirable outcome, do not disable it. Instead, add a [confirmation modal](/components/modal). When the user clicks on the action, use a modal to explain the potential consequences and ask the user if they are sure they want to proceed. + + Example: A user wants to delete a system. + + ## Content considerations When creating menu item labels, keep in mind the following guidelines: