diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/Card.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/Card.png deleted file mode 100644 index 579f1c103e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/Card.png and /dev/null differ 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 new file mode 100644 index 0000000000..66480c828d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/card-overflow.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png deleted file mode 100644 index 474952337d..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/cardoverflow.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-table-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-table-overflow.svg new file mode 100644 index 0000000000..998f56b556 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-table-overflow.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..eae4201d0d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/mobile-toolbar-overflow.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/table-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/table-overflow.svg new file mode 100644 index 0000000000..1675a342a8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/table-overflow.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png deleted file mode 100644 index bf8070e5b6..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/tableoverflow.png and /dev/null differ 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 new file mode 100644 index 0000000000..59e8b8ab13 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbar-overflow.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png deleted file mode 100644 index 157d0dd2a5..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/img/toolbaroverflow.png and /dev/null differ 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 a5ee9748a4..3c45c70fe4 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 @@ -3,26 +3,50 @@ id: Overflow menu 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. ### 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. +**Toolbar overflow in desktop view** + +
+![image showing toolbar overflow](./img/toolbar-overflow.svg) +
- image showing toolbar overflow +**Toolbar overflow in mobile view** + +
+![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. - image showing table with overflow +**Table overflow in desktop view** + +
+![image showing table with overflow](./img/table-overflow.svg) +
+ +**Table overflow in mobile view** + +
+![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 +
+![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 dont 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 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). ## 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.