npm - @patternfly/patternfly - Versions diffs - 4.222.4 → 5.0.0-alpha.2 - Mend

@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/README.md +3 -3
package/RELEASE-NOTES.md +0 -30
package/base/_fonts.scss +0 -188
package/base/_globals.scss +0 -6
package/base/_icons.scss +28 -0
package/base/_variables.scss +0 -14
package/base/patternfly-fonts.css +0 -120
package/base/patternfly-globals.css +0 -4
package/base/patternfly-icons.scss +0 -28
package/base/patternfly-variables.css +6 -19
package/components/AboutModalBox/about-modal-box.css +1 -28
package/components/AboutModalBox/about-modal-box.scss +1 -27
package/components/Accordion/accordion.css +64 -62
package/components/Accordion/accordion.scss +62 -64
package/components/Alert/alert.css +0 -4
package/components/Alert/alert.scss +0 -7
package/components/Banner/banner.css +1 -1
package/components/Banner/banner.scss +1 -1
package/components/Breadcrumb/breadcrumb.css +0 -6
package/components/Breadcrumb/breadcrumb.scss +0 -9
package/components/Button/button.css +0 -4
package/components/Button/button.scss +0 -7
package/components/Card/card.css +0 -4
package/components/Card/card.scss +0 -7
package/components/Check/check.css +4 -2
package/components/Check/check.scss +2 -2
package/components/Content/content.css +1 -11
package/components/Content/content.scss +1 -15
package/components/DataList/data-list.css +0 -15
package/components/Divider/divider.css +0 -16
package/components/Divider/divider.scss +0 -1
package/components/Drawer/drawer.css +0 -14
package/components/Drawer/drawer.scss +0 -5
package/components/Dropdown/dropdown.css +0 -15
package/components/Dropdown/dropdown.scss +0 -20
package/components/EmptyState/empty-state.css +0 -4
package/components/EmptyState/empty-state.scss +0 -9
package/components/ExpandableSection/expandable-section.css +0 -4
package/components/ExpandableSection/expandable-section.scss +0 -7
package/components/Form/form.css +0 -1
package/components/Form/form.scss +0 -1
package/components/FormControl/form-control.css +1 -1
package/components/FormControl/themes/dark/form-control.scss +1 -1
package/components/InlineEdit/inline-edit.css +1 -12
package/components/InlineEdit/inline-edit.scss +1 -10
package/components/InputGroup/input-group.css +0 -14
package/components/InputGroup/input-group.scss +0 -9
package/components/InputGroup/themes/dark/input-group.scss +0 -8
package/components/JumpLinks/jump-links.css +0 -43
package/components/JumpLinks/jump-links.scss +0 -13
package/components/Label/label.css +0 -3
package/components/Label/label.scss +0 -4
package/components/Menu/menu.css +0 -20
package/components/Menu/menu.scss +0 -6
package/components/NotificationDrawer/notification-drawer.css +1 -0
package/components/NotificationDrawer/notification-drawer.scss +1 -0
package/components/Page/page.css +0 -15
package/components/Pagination/pagination.css +0 -175
package/components/Pagination/pagination.scss +1 -49
package/components/Progress/progress.css +0 -1
package/components/Progress/progress.scss +0 -1
package/components/Radio/radio.css +4 -2
package/components/Radio/radio.scss +2 -2
package/components/SimpleList/simple-list.css +1 -1
package/components/SimpleList/simple-list.scss +1 -1
package/components/SkipToContent/skip-to-content.css +1 -1
package/components/SkipToContent/skip-to-content.scss +1 -1
package/components/Slider/slider.css +7 -0
package/components/Slider/slider.scss +9 -0
package/components/Switch/switch.css +0 -1
package/components/Switch/switch.scss +0 -1
package/components/Table/table-grid.css +0 -10
package/components/Table/table-grid.scss +0 -2
package/components/Table/table-tree-view.css +0 -16
package/components/Table/table-tree-view.scss +0 -4
package/components/Table/table.css +0 -16
package/components/Table/table.scss +0 -1
package/components/Tabs/tabs.css +1 -34
package/components/Tabs/tabs.scss +0 -15
package/components/Title/title.css +0 -5
package/components/Title/title.scss +0 -8
package/components/Toolbar/toolbar.css +0 -31
package/components/Toolbar/toolbar.scss +0 -6
package/components/Wizard/wizard.css +0 -9
package/components/Wizard/wizard.scss +0 -9
package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
package/docs/components/Accordion/examples/Accordion.md +67 -67
package/docs/components/Dropdown/examples/Dropdown.md +0 -216
package/docs/components/InputGroup/examples/InputGroup.md +0 -1
package/docs/components/Pagination/examples/Pagination.md +30 -129
package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
package/docs/components/Slider/examples/Slider.md +6 -6
package/docs/components/Tabs/examples/Tabs.md +1 -2
package/docs/components/Wizard/examples/Wizard.md +6 -6
package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
package/docs/demos/Alert/examples/Alert.md +18 -12
package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
package/docs/demos/Banner/examples/Banner.md +14 -10
package/docs/demos/Card/examples/Card.md +4 -4
package/docs/demos/CardView/examples/CardView.md +6 -4
package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
package/docs/demos/Dashboard/examples/Dashboard.md +7 -4
package/docs/demos/DataList/examples/DataList.md +24 -16
package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -12
package/docs/demos/Drawer/examples/Drawer.md +30 -20
package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
package/docs/demos/Masthead/examples/Masthead.md +54 -36
package/docs/demos/Modal/examples/Modal.md +36 -24
package/docs/demos/Nav/examples/Nav.md +784 -721
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
package/docs/demos/Page/examples/Page.md +54 -36
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +44 -28
package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
package/docs/demos/Table/examples/Table.md +84 -56
package/docs/demos/Tabs/examples/Tabs.md +579 -70
package/docs/demos/Toolbar/examples/Toolbar.md +6 -4
package/docs/demos/Wizard/examples/Wizard.md +67 -45
package/package.json +7 -6
package/patternfly-base-no-reset.css +30 -139
package/patternfly-base.css +30 -143
package/patternfly-charts.css +1 -1
package/patternfly-no-reset.css +118 -665
package/patternfly.css +118 -669
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1
package/sass-utilities/mixins.scss +0 -6
package/sass-utilities/placeholders.scss +0 -7
package/sass-utilities/scss-variables.scss +6 -12
package/assets/fonts/overpass-mono-webfont/example.html +0 -15
package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
package/assets/fonts/overpass-webfont/example.html +0 -18
package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
package/assets/fonts/overpass-webfont/overpass.css +0 -141

package/docs/demos/Tabs/examples/Tabs.md CHANGED Viewed

@@ -7,10 +7,12 @@ section: components
 ```html isFullscreen
 <div class="pf-c-page" id="tabs-tables-and-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-tabs-tables-and-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-tabs-tables-and-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="tabs-tables-and-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1163,10 +1165,12 @@ section: components
 ```html isFullscreen
 <div class="pf-c-page" id="tabs-tables-and-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-tabs-tables-and-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-tabs-tables-and-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="tabs-tables-and-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2105,7 +2109,7 @@ section: components
     >
       <div class="pf-c-page__main-body">
         <div
-          class="pf-c-tabs pf-m-secondary pf-m-page-insets pf-m-border-bottom"
+          class="pf-c-tabs pf-m-secondary pf-m-page-insets"
           id="tabs-tables-and-tabs-example-tabs-secondary"
         >
           <ul class="pf-c-tabs__list">
@@ -2321,10 +2325,12 @@ section: components
 ```html isFullscreen
 <div class="pf-c-page" id="nested-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nested-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nested-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nested-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3238,7 +3244,7 @@ section: components
                     <div class="pf-l-flex pf-m-column">
                       <div class="pf-l-flex__item">
                         <div
-                          class="pf-c-tabs pf-m-secondary pf-m-border-bottom"
+                          class="pf-c-tabs pf-m-secondary"
                           id="nested-tabs-example-tabs-tabs-subtabs"
                         >
                           <ul class="pf-c-tabs__list">
@@ -3345,14 +3351,14 @@ section: components
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h2 class="pf-c-title pf-m-lg">Title of card</h2>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>
                   <div class="pf-l-flex__item pf-m-flex-1">
                     <div class="pf-c-card pf-m-full-height">
                       <div class="pf-c-card__header">
-                        <h2 class="pf-c-title pf-m-lg">Title of card</h2>
+                        <h3 class="pf-c-title pf-m-lg">Title of card</h3>
                       </div>
                     </div>
                   </div>
@@ -3386,10 +3392,12 @@ section: components
 ```html isFullscreen
 <div class="pf-c-page" id="table-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-table-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-table-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="table-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4433,6 +4441,81 @@ section: components
                 </div>
               </div>
             </div>
+            <div class="pf-c-toolbar__item pf-m-pagination">
+              <div class="pf-c-pagination pf-m-compact">
+                <div class="pf-c-options-menu">
+                  <button
+                    class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+                    type="button"
+                    id="table-tabs-example-tabs-toolbar-top-pagination-toggle"
+                    aria-haspopup="listbox"
+                    aria-expanded="false"
+                  >
+                    <span class="pf-c-options-menu__toggle-text">
+                      <b>1 - 10</b>&nbsp;of&nbsp;
+                      <b>36</b>
+                    </span>
+                    <div class="pf-c-options-menu__toggle-icon">
+                      <i class="fas fa-caret-down" aria-hidden="true"></i>
+                    </div>
+                  </button>
+                  <ul
+                    class="pf-c-options-menu__menu"
+                    aria-labelledby="table-tabs-example-tabs-toolbar-top-pagination-toggle"
+                    hidden
+                  >
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >5 per page</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >
+                        10 per page
+                        <div class="pf-c-options-menu__menu-item-icon">
+                          <i class="fas fa-check" aria-hidden="true"></i>
+                        </div>
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >20 per page</button>
+                    </li>
+                  </ul>
+                </div>
+                <nav
+                  class="pf-c-pagination__nav"
+                  aria-label="Toolbar top pagination"
+                >
+                  <div class="pf-c-pagination__nav-control pf-m-prev">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      disabled
+                      aria-label="Go to previous page"
+                    >
+                      <i class="fas fa-angle-left" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                  <div class="pf-c-pagination__nav-control pf-m-next">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Go to next page"
+                    >
+                      <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </nav>
+              </div>
+            </div>
           </div>
           <div
@@ -4832,8 +4915,467 @@ section: components
                       </div>
                     </td>
                   </tr>
+                  <tr role="row">
+                    <td class="pf-c-table__check" role="cell">
+                      <input
+                        type="checkbox"
+                        name="checkrow6"
+                        aria-labelledby="table-tabs-example-table-node6"
+                      />
+                    </td>
+                    <th role="columnheader" data-label="Repository name">
+                      <div>
+                        <div id="table-tabs-example-table-node6">Node 6</div>
+                        <a href="#">siemur/test-space</a>
+                      </div>
+                    </th>
+                    <td role="cell" data-label="Branches">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">34</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code-branch"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Pull requests">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">21</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Workspaces">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">26</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Last commit">2 days ago</td>
+                    <td class="pf-c-table__action" role="cell">
+                      <div
+                        class="pf-c-overflow-menu"
+                        id="table-tabs-example-table-dropdown-kebab-6"
+                      >
+                        <div class="pf-c-overflow-menu__control">
+                          <div class="pf-c-dropdown">
+                            <button
+                              class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                              type="button"
+                              id="table-tabs-example-table-dropdown-kebab-6-dropdown-toggle"
+                              aria-label="Dropdown for tabs table"
+                              aria-expanded="false"
+                            >
+                              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                            </button>
+                            <ul
+                              class="pf-c-dropdown__menu pf-m-align-right"
+                              aria-labelledby="table-tabs-example-table-dropdown-kebab-6-dropdown-toggle"
+                              hidden
+                            >
+                              <li>
+                                <button
+                                  class="pf-c-dropdown__menu-item"
+                                >Action Link</button>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr role="row">
+                    <td class="pf-c-table__check" role="cell">
+                      <input
+                        type="checkbox"
+                        name="checkrow7"
+                        aria-labelledby="table-tabs-example-table-node7"
+                      />
+                    </td>
+                    <th role="columnheader" data-label="Repository name">
+                      <div>
+                        <div id="table-tabs-example-table-node7">Node 7</div>
+                        <a href="#">siemur/test-space</a>
+                      </div>
+                    </th>
+                    <td role="cell" data-label="Branches">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">34</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code-branch"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Pull requests">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">21</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Workspaces">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">26</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Last commit">2 days ago</td>
+                    <td class="pf-c-table__action" role="cell">
+                      <div
+                        class="pf-c-overflow-menu"
+                        id="table-tabs-example-table-dropdown-kebab-7"
+                      >
+                        <div class="pf-c-overflow-menu__control">
+                          <div class="pf-c-dropdown">
+                            <button
+                              class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                              type="button"
+                              id="table-tabs-example-table-dropdown-kebab-7-dropdown-toggle"
+                              aria-label="Dropdown for tabs table"
+                              aria-expanded="false"
+                            >
+                              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                            </button>
+                            <ul
+                              class="pf-c-dropdown__menu pf-m-align-right"
+                              aria-labelledby="table-tabs-example-table-dropdown-kebab-7-dropdown-toggle"
+                              hidden
+                            >
+                              <li>
+                                <button
+                                  class="pf-c-dropdown__menu-item"
+                                >Action Link</button>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr role="row">
+                    <td class="pf-c-table__check" role="cell">
+                      <input
+                        type="checkbox"
+                        name="checkrow8"
+                        aria-labelledby="table-tabs-example-table-node8"
+                      />
+                    </td>
+                    <th role="columnheader" data-label="Repository name">
+                      <div>
+                        <div id="table-tabs-example-table-node8">Node 8</div>
+                        <a href="#">siemur/test-space</a>
+                      </div>
+                    </th>
+                    <td role="cell" data-label="Branches">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">34</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code-branch"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Pull requests">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">21</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Workspaces">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">26</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Last commit">2 days ago</td>
+                    <td class="pf-c-table__action" role="cell">
+                      <div
+                        class="pf-c-overflow-menu"
+                        id="table-tabs-example-table-dropdown-kebab-8"
+                      >
+                        <div class="pf-c-overflow-menu__control">
+                          <div class="pf-c-dropdown">
+                            <button
+                              class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                              type="button"
+                              id="table-tabs-example-table-dropdown-kebab-8-dropdown-toggle"
+                              aria-label="Dropdown for tabs table"
+                              aria-expanded="false"
+                            >
+                              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                            </button>
+                            <ul
+                              class="pf-c-dropdown__menu pf-m-align-right"
+                              aria-labelledby="table-tabs-example-table-dropdown-kebab-8-dropdown-toggle"
+                              hidden
+                            >
+                              <li>
+                                <button
+                                  class="pf-c-dropdown__menu-item"
+                                >Action Link</button>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr role="row">
+                    <td class="pf-c-table__check" role="cell">
+                      <input
+                        type="checkbox"
+                        name="checkrow9"
+                        aria-labelledby="table-tabs-example-table-node9"
+                      />
+                    </td>
+                    <th role="columnheader" data-label="Repository name">
+                      <div>
+                        <div id="table-tabs-example-table-node9">Node 9</div>
+                        <a href="#">siemur/test-space</a>
+                      </div>
+                    </th>
+                    <td role="cell" data-label="Branches">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">34</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code-branch"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Pull requests">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">21</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Workspaces">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">26</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Last commit">2 days ago</td>
+                    <td class="pf-c-table__action" role="cell">
+                      <div
+                        class="pf-c-overflow-menu"
+                        id="table-tabs-example-table-dropdown-kebab-9"
+                      >
+                        <div class="pf-c-overflow-menu__control">
+                          <div class="pf-c-dropdown">
+                            <button
+                              class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                              type="button"
+                              id="table-tabs-example-table-dropdown-kebab-9-dropdown-toggle"
+                              aria-label="Dropdown for tabs table"
+                              aria-expanded="false"
+                            >
+                              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                            </button>
+                            <ul
+                              class="pf-c-dropdown__menu pf-m-align-right"
+                              aria-labelledby="table-tabs-example-table-dropdown-kebab-9-dropdown-toggle"
+                              hidden
+                            >
+                              <li>
+                                <button
+                                  class="pf-c-dropdown__menu-item"
+                                >Action Link</button>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr role="row">
+                    <td class="pf-c-table__check" role="cell">
+                      <input
+                        type="checkbox"
+                        name="checkrow10"
+                        aria-labelledby="table-tabs-example-table-node10"
+                      />
+                    </td>
+                    <th role="columnheader" data-label="Repository name">
+                      <div>
+                        <div id="table-tabs-example-table-node10">Node 10</div>
+                        <a href="#">siemur/test-space</a>
+                      </div>
+                    </th>
+                    <td role="cell" data-label="Branches">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">34</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code-branch"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Pull requests">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">21</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-code"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Workspaces">
+                      <div class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
+                        <div class="pf-l-flex__item">26</div>
+                        <div class="pf-l-flex__item">
+                          <i class="fas fa-cube"></i>
+                        </div>
+                      </div>
+                    </td>
+                    <td role="cell" data-label="Last commit">2 days ago</td>
+                    <td class="pf-c-table__action" role="cell">
+                      <div
+                        class="pf-c-overflow-menu"
+                        id="table-tabs-example-table-dropdown-kebab-10"
+                      >
+                        <div class="pf-c-overflow-menu__control">
+                          <div class="pf-c-dropdown">
+                            <button
+                              class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                              type="button"
+                              id="table-tabs-example-table-dropdown-kebab-10-dropdown-toggle"
+                              aria-label="Dropdown for tabs table"
+                              aria-expanded="false"
+                            >
+                              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                            </button>
+                            <ul
+                              class="pf-c-dropdown__menu pf-m-align-right"
+                              aria-labelledby="table-tabs-example-table-dropdown-kebab-10-dropdown-toggle"
+                              hidden
+                            >
+                              <li>
+                                <button
+                                  class="pf-c-dropdown__menu-item"
+                                >Action Link</button>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
                 </tbody>
               </table>
+              <div class="pf-c-pagination pf-m-bottom">
+                <div class="pf-c-options-menu pf-m-top">
+                  <button
+                    class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
+                    type="button"
+                    id="-footer-pagination-toggle"
+                    aria-haspopup="listbox"
+                    aria-expanded="false"
+                  >
+                    <span class="pf-c-options-menu__toggle-text">
+                      <b>1 - 10</b>&nbsp;of&nbsp;
+                      <b>36</b>
+                    </span>
+                    <div class="pf-c-options-menu__toggle-icon">
+                      <i class="fas fa-caret-down" aria-hidden="true"></i>
+                    </div>
+                  </button>
+                  <ul
+                    class="pf-c-options-menu__menu pf-m-top"
+                    aria-labelledby="-footer-pagination-toggle"
+                    hidden
+                  >
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >5 per page</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >
+                        10 per page
+                        <div class="pf-c-options-menu__menu-item-icon">
+                          <i class="fas fa-check" aria-hidden="true"></i>
+                        </div>
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-options-menu__menu-item"
+                        type="button"
+                      >20 per page</button>
+                    </li>
+                  </ul>
+                </div>
+                <nav class="pf-c-pagination__nav" aria-label="Pagination">
+                  <div class="pf-c-pagination__nav-control pf-m-first">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      disabled
+                      aria-label="Go to first page"
+                    >
+                      <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                  <div class="pf-c-pagination__nav-control pf-m-prev">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      disabled
+                      aria-label="Go to previous page"
+                    >
+                      <i class="fas fa-angle-left" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                  <div class="pf-c-pagination__nav-page-select">
+                    <input
+                      class="pf-c-form-control"
+                      aria-label="Current page"
+                      type="number"
+                      min="1"
+                      max="4"
+                      value="1"
+                    />
+                    <span aria-hidden="true">of 4</span>
+                  </div>
+                  <div class="pf-c-pagination__nav-control pf-m-next">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Go to next page"
+                    >
+                      <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                  <div class="pf-c-pagination__nav-control pf-m-last">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Go to last page"
+                    >
+                      <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </nav>
+              </div>
             </div>
           </div>
@@ -4971,43 +5513,6 @@ section: components
                         </div>
                       </div>
                     </div>
-                    <div class="pf-l-flex pf-m-column">
-                      <div class="pf-l-flex__item">
-                        <h3 class="pf-c-title" id="-title">Tags</h3>
-                      </div>
-                      <div class="pf-l-flex__item">
-                        <div class="pf-c-label-group">
-                          <div class="pf-c-label-group__main">
-                            <ul
-                              class="pf-c-label-group__list"
-                              role="list"
-                              aria-label="Group of labels"
-                            >
-                              <li class="pf-c-label-group__list-item">
-                                <span class="pf-c-label pf-m-outline">
-                                  <span class="pf-c-label__content">Tag 1</span>
-                                </span>
-                              </li>
-                              <li class="pf-c-label-group__list-item">
-                                <span class="pf-c-label pf-m-outline">
-                                  <span class="pf-c-label__content">Tag 2</span>
-                                </span>
-                              </li>
-                              <li class="pf-c-label-group__list-item">
-                                <span class="pf-c-label pf-m-outline">
-                                  <span class="pf-c-label__content">Tag 3</span>
-                                </span>
-                              </li>
-                              <li class="pf-c-label-group__list-item">
-                                <span class="pf-c-label pf-m-overflow">
-                                  <span class="pf-c-label__content">2 more</span>
-                                </span>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </section>
@@ -5063,7 +5568,7 @@ section: components
         <div class="pf-l-grid pf-m-gutter">
           <div class="pf-l-grid__item">
             <div
-              class="pf-c-tabs pf-m-inset-none pf-m-secondary"
+              class="pf-c-tabs pf-m-secondary pf-m-inset-none"
               id="modal-tabs-example-tabs"
             >
               <ul class="pf-c-tabs__list">
@@ -5132,10 +5637,12 @@ section: components
 </div>
 <div class="pf-c-page" id="modal-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -5993,12 +6500,12 @@ section: components
     <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
       <div class="pf-c-page__main-body">
         <div class="pf-c-content">
-          <h1>Main title</h1>
-          <p>This is a full page demo.</p>
+          <h1>Projects</h1>
+          <p>Click any project card to view tabs within modals.</p>
         </div>
       </div>
     </section>
-    <section class="pf-c-page__main-section">
+    <section class="pf-c-page__main-section pf-m-fill">
       <div class="pf-l-gallery pf-m-gutter">
         <div
           class="pf-c-card pf-m-selectable-raised pf-m-compact"
@@ -6038,10 +6545,12 @@ section: components
 ```html isFullscreen
 <div class="pf-c-page" id="gray-tabs-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-gray-tabs-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-gray-tabs-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="gray-tabs-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -6983,7 +7492,7 @@ section: components
               </div>
               <div class="pf-l-grid__item">
                 <div
-                  class="pf-c-tabs pf-m-secondary pf-m-border-bottom pf-m-inset-none"
+                  class="pf-c-tabs pf-m-secondary pf-m-inset-none"
                   id="gray-tabs-example-tabs-subtabs"
                 >
                   <ul class="pf-c-tabs__list">