diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/card-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/card-overflow.svg index 66480c828d..d6954bd222 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/card-overflow.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/card-overflow.svg @@ -1,36 +1,38 @@ - - + + - - + + - - - - - + + + + + + + - + - + - - + + - + @@ -39,7 +41,7 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-toolbar-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-toolbar-overflow.svg index eae4201d0d..d754b7da26 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-toolbar-overflow.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-toolbar-overflow.svg @@ -13,15 +13,15 @@ - - - + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbar-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbar-overflow.svg index 59e8b8ab13..2ca115a88a 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbar-overflow.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbar-overflow.svg @@ -1,5 +1,5 @@ - - + + @@ -17,10 +17,10 @@ - + - + @@ -30,25 +30,27 @@ - - + + - - - - + + + + + + - + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md index 3c45c70fe4..ef3313a744 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md @@ -6,24 +6,41 @@ section: components import '../components.css'; ## Usage -Use an overflow menu when additional options are available to the user but there is a space constraint. Common usage for overflow menu's happen when switching a UI from a desktop to a mobile device. +Use an overflow menu when a space constraint makes it impossible to display all additional options in a horizontal layout, like a toolbar or table row. Overflow menus are commonly used when a UI switches from a desktop to a mobile device. ### When to use -* Use an overflow menu in a table toolbar to group a number of actions and create visual space. Avoid having more than 3 actions fully displayed within a toolbar. + +#### Cards + +- Use an overflow menu within a card component to present additional menu options or provide action links. + +
+![image showing card overflow](./img/card-overflow.svg) +
+ + +#### Toolbars **Toolbar overflow in desktop view** +- Use overflow menus in desktop toolbars to contain additional, less primary actions that can't be displayed within the available horizontal space. +
![image showing toolbar overflow](./img/toolbar-overflow.svg)
**Toolbar overflow in mobile view** +- Use overflow menus in mobile toolbars to contain all additional actions, including primary actions that would typically be visible in desktop views. This doesn't include filtering or sorting, which should remain available as buttons in the toolbar. +
![image showing toolbar overflow on mobile](./img/mobile-toolbar-overflow.svg)
-* Use an overflow menu within a table row when additional actions are available that don’t correspond with a column header. +#### Tables + +- Use an overflow menu in a table toolbar to group a number of actions and create visual space. Avoid having more than 3 actions fully displayed within a toolbar. + **Table overflow in desktop view** @@ -37,19 +54,13 @@ Use an overflow menu when additional options are available to the user but there ![image showing toolbar overflow on mobile](./img/mobile-table-overflow.svg) -* Use an overflow menu within a card component to present additional menu options or provide action links. - -
-![image showing card overflow](./img/card-overflow.svg) -
- ### When not to use * Do not use an overflow menu when there are 2 or fewer actions available to the user. -* Do not use in conjunction with label groups when there isn’t enough space to display each label. Instead, use an [overflow label](https://v4-archive.patternfly.org/v4/components/label-group). -* Do not use an overflow menu to hide additional content that you don't want to be seen by default, instead use an [expandable section](https://v4-archive.patternfly.org/v4/components/expandable-section/design-guidelines). +* Do not use in conjunction with label groups when there isn’t enough space to display each label. Instead, use a [label group with overflow](/components/label#label-group-with-overflow). +* Do not use an overflow menu to hide additional content that you don't want to be seen by default, instead use an [expandable section](/components/expandable-section). ## Behavior -Overflow menus are represented by a kebab button, as the user clicks on the kebab, a horizontal list will appear with additional options to click. +Overflow menus are represented by a button with a kebab icon (fa-ellipsis-v), which opens a horizontal list with additional options when selected. ## Content considerations * Text should be short and direct so users can quickly scan and decide on an action.