diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-boxed.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-boxed.svg new file mode 100644 index 0000000000..62936856b1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-boxed.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-default.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-default.svg new file mode 100644 index 0000000000..5f56bd7b91 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-default.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-disabled.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-disabled.svg new file mode 100644 index 0000000000..f9ae652f44 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-disabled.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-horizontal-overflow.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-horizontal-overflow.svg new file mode 100644 index 0000000000..22bbcf3bd0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-horizontal-overflow.svg @@ -0,0 +1,234 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-modal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-modal.svg new file mode 100644 index 0000000000..da7ad4a985 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-modal.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-primary.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-primary.svg new file mode 100644 index 0000000000..3962f02304 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-primary.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-secondary.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-secondary.svg new file mode 100644 index 0000000000..b5d0fc81af --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-secondary.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-vertical.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-vertical.svg new file mode 100644 index 0000000000..f567d20022 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/img/tabs-vertical.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/tabs.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/tabs.md index f92783a2b1..96506a94ef 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/tabs.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tabs/tabs.md @@ -3,6 +3,8 @@ id: Tabs section: components --- +import '../components.css'; + ## Usage Use tabs when you want to organize information into highly scannable display for users. @@ -24,32 +26,42 @@ Default tabs do not have any borders, other than the bottom line to distinguish Is it recommended to use these tabs over other tab types in most cases - specifically for top page header tabs or tabs nested within components. -Default tabs ex +
+![Example of default tabs.](./img/tabs-default.svg) +
### Boxed tabs Box tabs are functionally the same as default tabs, but they are outlined by a box to emphasize the area that the tab spans. Boxed tabs can be used in screens with narrower widths, such as a drawer within a primary detail view. -Standard and filled tabs ex +
+![Example of boxed tabs.](./img/tabs-boxed.svg) +
### Vertical tabs Vertical tabs are placed on the left hand side of a page or container. -Vertical tabs ex +
+![Example of vertical tabs.](./img/tabs-vertical.svg) +
### Disabled tabs PatternFly supports a disabled tab variation for all tab types. A disabled tab can be used to indicate that a section is unavailable to the user, usually due to a lack of permissions. Information to explain why the tab is disabled may be provided by using a tooltip on the element. -Example of disabled tab with tooltip +
+![Example of a disable tab with a tooltip.](./img/tabs-disabled.svg) +
### Horizontal overflow Horizontal overflow menus are useful when there is not enough space on a screen to display all tabs. The overflow menu contains all the remaining tabs and is always placed as the last tab on the right. Selecting options from overflow menu changes the name of the main tab to the selected one. You may show an overflowing tab count next to the overflow menu name, if needed. -Horizontal overflow interaction +
+![Example of horizontal overflow.](./img/tabs-horizontal-overflow.svg) +
### Hierarchy @@ -59,19 +71,22 @@ When designing tab organization with two levels of tabs, it's important to creat Use primary tabs only for top page header tabs and vertical tabs. Primary tabs use 16px text. -Primary tabs ex +
+![Example of primary tabs.](./img/tabs-primary.svg) +
### Secondary tabs Use secondary tabs to help differentiate between two levels of tabs and make it easier for users to navigate through the interface. -Secondary tabs ex - -1. Primary tabs -2. Secondary tabs +
+![Example of primary and secondary tabs.](./img/tabs-secondary.svg) +
Secondary tabs should also be used when tabs live within a component, or are in a non-full page context, like in a modal. -Secondary tabs ex +
+![Example of secondary tabs used in a modal.](./img/tabs-modal.svg) +