diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/default-vs-filled-tabs.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/default-vs-filled-tabs.png index 1b7d8a0ad9..cbdbc8ec98 100644 Binary files a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/default-vs-filled-tabs.png and b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/default-vs-filled-tabs.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/nested-tabs-unindented.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/nested-tabs-unindented.png new file mode 100644 index 0000000000..2d644554ab Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/nested-tabs-unindented.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/primary-tabs.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/primary-tabs.png index b3678b5d39..f30fd34127 100644 Binary files a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/primary-tabs.png and b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/primary-tabs.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-1-tabs.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-1-tabs.png index a6011104af..7a6dd9b621 100644 Binary files a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-1-tabs.png and b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-1-tabs.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-2-tabs.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-2-tabs.png index 579deaa74e..8e70336999 100644 Binary files a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-2-tabs.png and b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/img/secondary-2-tabs.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/tabs.md b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/tabs.md index b30660be15..f92783a2b1 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/tabs.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/components/tabs/tabs.md @@ -20,22 +20,18 @@ You can use as many tabs as you want in a page, although it is recommended you k ### Default tabs -Default tabs do not have any borders, other than the bottom line to distinguish between a selected tab, a hovered over tab, and a non-active tab. These tabs are most commonly used as top page header tabs or nested within components. +Default tabs do not have any borders, other than the bottom line to distinguish between a selected tab, a hovered over tab, and a non-active tab. They can be formatted as standard or filled. Filled tabs stretch to fit the width of the container that they are placed in. -Default tabs ex - -Default tabs can be formatted as standard or filled. Filled tabs stretch to fit the width of the container that they are placed in. They can be used in screens with narrower widths, such as a drawer within a [primary detail view](/demos/primary-detail). When in doubt, stick with the standard styled tabs. +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. -Standard and filled tabs ex +Default tabs ex -1. Standard styled tabs -2. Filled styled tabs ### 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 interchangeably with default tabs, but we recommend using the default tabs over boxed tabs. Boxed tabs can be used in combination with default tabs to create more hierarchy on the page. +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. -Boxed tabs ex +Standard and filled tabs ex ### Vertical tabs @@ -57,7 +53,7 @@ Horizontal overflow menus are useful when there is not enough space on a screen ### Hierarchy -When you have more than one tab level in your UI, you can either choose to use a mixture of boxed and default tabs to create hierarchy on a page, or you can chose to use primary and secondary tabs which differ in their font size, with primary tabs using 16pt font, and secondary tabs using 14pt font. +When designing tab organization with two levels of tabs, it's important to create a clear hierarchy. To achieve this, the top level tabs should use the default open tabs, which feature a 16pt font. Meanwhile, the bottom level tabs should use the secondary open tabs, which feature a 14pt font. ### Primary tabs @@ -67,14 +63,15 @@ Use primary tabs only for top page header tabs and vertical tabs. Primary tabs u ### Secondary tabs -Use secondary tabs when, you have another set of tabs, in addition to a primary level, or when using tabs within a component, for example in a modal. Secondary tabs use 14px text. +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 +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 -1. **Secondary tabs:** These should be used when tabs live within a component, like the modal.