@patternfly/patternfly 4.175.0 → 4.176.3

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 (33) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Dropdown/dropdown.css +10 -9
  4. package/components/Dropdown/dropdown.scss +17 -16
  5. package/components/Label/label.css +43 -12
  6. package/components/Label/label.scss +45 -13
  7. package/components/Nav/nav.css +11 -0
  8. package/components/Nav/nav.scss +14 -0
  9. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  10. package/docs/components/Label/examples/Label.md +33 -67
  11. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  12. package/docs/components/LogViewer/examples/LogViewer.md +9 -9
  13. package/docs/components/Menu/examples/Menu.md +43 -42
  14. package/docs/components/Nav/examples/Navigation.md +23 -44
  15. package/docs/demos/Alert/examples/Alert.md +52 -359
  16. package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
  17. package/docs/demos/Card/examples/Card.md +42 -36
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
  19. package/docs/demos/Drawer/examples/Drawer.md +3 -3
  20. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
  21. package/docs/demos/Masthead/examples/Masthead.md +14 -6
  22. package/docs/demos/Nav/examples/Nav.md +9 -301
  23. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  24. package/docs/demos/Page/examples/Page.md +162 -3084
  25. package/docs/demos/Table/examples/Table.md +183 -18031
  26. package/docs/demos/Tabs/examples/Tabs.md +686 -7389
  27. package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
  28. package/docs/demos/Wizard/examples/Wizard.md +2 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +100 -21
  31. package/patternfly.css +100 -21
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
@@ -1769,1032 +1769,49 @@ section: components
1769
1769
 
1770
1770
  ### Toolbar pagination management on mobile
1771
1771
 
1772
- ```html isFullscreen
1773
- <div class="pf-c-page" id="toolbar-pagination-management">
1774
- <a
1775
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1776
- href="#main-content-toolbar-pagination-management"
1777
- >Skip to content</a>
1778
- <header class="pf-c-page__header">
1779
- <div class="pf-c-page__header-brand">
1780
- <div class="pf-c-page__header-brand-toggle">
1781
- <button
1782
- class="pf-c-button pf-m-plain"
1783
- type="button"
1784
- id="toolbar-pagination-management-nav-toggle"
1785
- aria-label="Global navigation"
1786
- aria-expanded="true"
1787
- aria-controls="toolbar-pagination-management-primary-nav"
1788
- >
1789
- <i class="fas fa-bars" aria-hidden="true"></i>
1790
- </button>
1791
- </div>
1792
- <a href="#" class="pf-c-page__header-brand-link">
1793
- <img
1794
- class="pf-c-brand"
1795
- src="/assets/images/PF-Masthead-Logo.svg"
1796
- alt="PatternFly logo"
1797
- />
1798
- </a>
1772
+ ```hbs isFullscreen
1773
+ {{#> page-demo-default page-demo-default--id="toolbar-pagination-management"}}
1774
+ {{#> page-main-section}}
1775
+ {{#> toolbar toolbar--id=(concat page-demo-default--id '-mobile-example') toolbar--modifier="pf-m-nowrap"}}
1776
+ {{#> toolbar-content}}
1777
+ {{#> toolbar-content-section toolbar-content-section--modifier="pf-m-nowrap"}}
1778
+ {{#> toolbar-group toolbar-group--modifier="pf-m-toggle-group pf-m-show"}}
1779
+ {{> toolbar-toggle toolbar-toggle--IsExpanded="false"}}
1780
+ {{#> toolbar-group toolbar-group--modifier="pf-m-filter-group"}}
1781
+ {{#> toolbar-item toolbar-item--modifier="pf-m-search-filter"}}
1782
+ {{#> input-group}}
1783
+ {{#> select select--attribute="style='width: 150px'" id=(concat toolbar--id '-select-name') select-toggle--icon="fas fa-filter"}}
1784
+ Name
1785
+ {{/select}}
1786
+ {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'id="' toolbar--id '-textInput11" name="textInput11" type="search" placeholder="Filter by name..." aria-label="Search input example"')}}
1787
+ {{/form-control}}
1788
+ {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Search button for search input"'}}
1789
+ <i class="fas fa-search" aria-hidden="true"></i>
1790
+ {{/button}}
1791
+ {{/input-group}}
1792
+ {{/toolbar-item}}
1793
+ {{/toolbar-group}}
1794
+ {{/toolbar-group}}
1795
+ {{> toolbar-overflow-menu-example toolbar-overflow-menu-example--control="true"}}
1796
+ {{#> toolbar-item toolbar-item--modifier=(concat 'pf-m-pagination ' toolbar-item-pagination--modifier)}}
1797
+ {{#> pagination pagination--modifier="pf-m-compact pf-m-hidden pf-m-visible-on-md"}}
1798
+ {{#> pagination pagination--IsCompact="true"}}
1799
+ {{> pagination-options-menu id="pagination-options-menu-bottom-example" options-menu--IsText="true"}}
1800
+ {{> pagination-nav-content}}
1801
+ {{/pagination}}
1802
+ {{/pagination}}
1803
+ {{/toolbar-item}}
1804
+ {{/toolbar-content-section}}
1805
+ {{> toolbar-expandable-content}}
1806
+ {{/toolbar-content}}
1807
+ {{/toolbar}}
1808
+ <div>
1809
+ {{> table-simple-table page--id="toolbar-and-table-static-search-overflow-menu-collapsed"}}
1810
+ {{#> pagination pagination--modifier="pf-m-bottom"}}
1811
+ {{> pagination-options-menu id="pagination-options-menu-bottom-collapsed-example" options-menu--IsText="true" pagination-options-menu--modifier="pf-m-top"}}
1812
+ {{> pagination-nav-content}}
1813
+ {{/pagination}}
1799
1814
  </div>
1800
-
1801
- <div class="pf-c-page__header-tools">
1802
- <div class="pf-c-page__header-tools-group">
1803
- <div
1804
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
1805
- >
1806
- <button
1807
- class="pf-c-button pf-m-plain"
1808
- type="button"
1809
- aria-label="Settings"
1810
- >
1811
- <i class="fas fa-cog" aria-hidden="true"></i>
1812
- </button>
1813
- </div>
1814
- <div
1815
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
1816
- >
1817
- <button
1818
- class="pf-c-button pf-m-plain"
1819
- type="button"
1820
- aria-label="Help"
1821
- >
1822
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
1823
- </button>
1824
- </div>
1825
- </div>
1826
- <div class="pf-c-page__header-tools-group">
1827
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
1828
- <div class="pf-c-dropdown">
1829
- <button
1830
- class="pf-c-dropdown__toggle pf-m-plain"
1831
- id="toolbar-pagination-management-dropdown-kebab-1-button"
1832
- aria-expanded="false"
1833
- type="button"
1834
- aria-label="Actions"
1835
- >
1836
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1837
- </button>
1838
- <ul
1839
- class="pf-c-dropdown__menu pf-m-align-right"
1840
- aria-labelledby="toolbar-pagination-management-dropdown-kebab-1-button"
1841
- hidden
1842
- >
1843
- <li>
1844
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1845
- </li>
1846
- <li>
1847
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1848
- </li>
1849
- <li>
1850
- <a
1851
- class="pf-c-dropdown__menu-item pf-m-disabled"
1852
- href="#"
1853
- aria-disabled="true"
1854
- tabindex="-1"
1855
- >Disabled link</a>
1856
- </li>
1857
- <li>
1858
- <button
1859
- class="pf-c-dropdown__menu-item"
1860
- type="button"
1861
- disabled
1862
- >Disabled action</button>
1863
- </li>
1864
- <li class="pf-c-divider" role="separator"></li>
1865
- <li>
1866
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1867
- </li>
1868
- </ul>
1869
- </div>
1870
- </div>
1871
- <div
1872
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
1873
- >
1874
- <div class="pf-c-dropdown">
1875
- <button
1876
- class="pf-c-dropdown__toggle pf-m-plain"
1877
- id="toolbar-pagination-management-dropdown-kebab-2-button"
1878
- aria-expanded="false"
1879
- type="button"
1880
- >
1881
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
1882
- <span class="pf-c-dropdown__toggle-icon">
1883
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1884
- </span>
1885
- </button>
1886
- <ul
1887
- class="pf-c-dropdown__menu"
1888
- aria-labelledby="toolbar-pagination-management-dropdown-kebab-2-button"
1889
- hidden
1890
- >
1891
- <li>
1892
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1893
- </li>
1894
- <li>
1895
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1896
- </li>
1897
- <li>
1898
- <a
1899
- class="pf-c-dropdown__menu-item pf-m-disabled"
1900
- href="#"
1901
- aria-disabled="true"
1902
- tabindex="-1"
1903
- >Disabled link</a>
1904
- </li>
1905
- <li>
1906
- <button
1907
- class="pf-c-dropdown__menu-item"
1908
- type="button"
1909
- disabled
1910
- >Disabled action</button>
1911
- </li>
1912
- <li class="pf-c-divider" role="separator"></li>
1913
- <li>
1914
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1915
- </li>
1916
- </ul>
1917
- </div>
1918
- </div>
1919
- </div>
1920
- <img
1921
- class="pf-c-avatar"
1922
- src="/assets/images/img_avatar.svg"
1923
- alt="Avatar image"
1924
- />
1925
- </div>
1926
- </header>
1927
- <div class="pf-c-page__sidebar">
1928
- <div class="pf-c-page__sidebar-body">
1929
- <nav
1930
- class="pf-c-nav"
1931
- id="toolbar-pagination-management-primary-nav"
1932
- aria-label="Global"
1933
- >
1934
- <ul class="pf-c-nav__list">
1935
- <li class="pf-c-nav__item">
1936
- <a href="#" class="pf-c-nav__link">System panel</a>
1937
- </li>
1938
- <li class="pf-c-nav__item">
1939
- <a
1940
- href="#"
1941
- class="pf-c-nav__link pf-m-current"
1942
- aria-current="page"
1943
- >Policy</a>
1944
- </li>
1945
- <li class="pf-c-nav__item">
1946
- <a href="#" class="pf-c-nav__link">Authentication</a>
1947
- </li>
1948
- <li class="pf-c-nav__item">
1949
- <a href="#" class="pf-c-nav__link">Network services</a>
1950
- </li>
1951
- <li class="pf-c-nav__item">
1952
- <a href="#" class="pf-c-nav__link">Server</a>
1953
- </li>
1954
- </ul>
1955
- </nav>
1956
- </div>
1957
- </div>
1958
- <main
1959
- class="pf-c-page__main"
1960
- tabindex="-1"
1961
- id="main-content-toolbar-pagination-management"
1962
- >
1963
- <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1964
- <div class="pf-c-page__main-body">
1965
- <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1966
- <ol class="pf-c-breadcrumb__list">
1967
- <li class="pf-c-breadcrumb__item">
1968
- <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1969
- </li>
1970
- <li class="pf-c-breadcrumb__item">
1971
- <span class="pf-c-breadcrumb__item-divider">
1972
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1973
- </span>
1974
-
1975
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1976
- </li>
1977
- <li class="pf-c-breadcrumb__item">
1978
- <span class="pf-c-breadcrumb__item-divider">
1979
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1980
- </span>
1981
-
1982
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1983
- </li>
1984
- <li class="pf-c-breadcrumb__item">
1985
- <span class="pf-c-breadcrumb__item-divider">
1986
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1987
- </span>
1988
-
1989
- <a
1990
- href="#"
1991
- class="pf-c-breadcrumb__link pf-m-current"
1992
- aria-current="page"
1993
- >Section landing</a>
1994
- </li>
1995
- </ol>
1996
- </nav>
1997
- </div>
1998
- </section>
1999
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
2000
- <div class="pf-c-page__main-body">
2001
- <div class="pf-c-content">
2002
- <h1>Main title</h1>
2003
- <p>This is a demo of the page component.</p>
2004
- </div>
2005
- </div>
2006
- </section>
2007
- <section class="pf-c-page__main-section">
2008
- <div
2009
- class="pf-c-toolbar pf-m-nowrap"
2010
- id="toolbar-pagination-management-mobile-example"
2011
- >
2012
- <div class="pf-c-toolbar__content">
2013
- <div class="pf-c-toolbar__content-section pf-m-nowrap">
2014
- <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show">
2015
- <div class="pf-c-toolbar__toggle">
2016
- <button
2017
- class="pf-c-button pf-m-plain"
2018
- type="button"
2019
- aria-label="Show filters"
2020
- aria-expanded="false"
2021
- aria-controls="toolbar-pagination-management-mobile-example-expandable-content"
2022
- >
2023
- <i class="fas fa-filter" aria-hidden="true"></i>
2024
- </button>
2025
- </div>
2026
- <div class="pf-c-toolbar__group pf-m-filter-group">
2027
- <div class="pf-c-toolbar__item pf-m-search-filter">
2028
- <div class="pf-c-input-group">
2029
- <div class="pf-c-select" style="width: 150px">
2030
- <span
2031
- id="toolbar-pagination-management-mobile-example-select-name-label"
2032
- hidden
2033
- >Choose one</span>
2034
-
2035
- <button
2036
- class="pf-c-select__toggle"
2037
- type="button"
2038
- id="toolbar-pagination-management-mobile-example-select-name-toggle"
2039
- aria-haspopup="true"
2040
- aria-expanded="false"
2041
- aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label toolbar-pagination-management-mobile-example-select-name-toggle"
2042
- >
2043
- <div class="pf-c-select__toggle-wrapper">
2044
- <span class="pf-c-select__toggle-icon">
2045
- <i class="fas fa-filter" aria-hidden="true"></i>
2046
- </span>
2047
- <span class="pf-c-select__toggle-text">Name</span>
2048
- </div>
2049
- <span class="pf-c-select__toggle-arrow">
2050
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2051
- </span>
2052
- </button>
2053
-
2054
- <ul
2055
- class="pf-c-select__menu"
2056
- role="listbox"
2057
- aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label"
2058
- hidden
2059
- style="width: 150px"
2060
- >
2061
- <li role="presentation">
2062
- <button
2063
- class="pf-c-select__menu-item"
2064
- role="option"
2065
- >Running</button>
2066
- </li>
2067
- <li role="presentation">
2068
- <button
2069
- class="pf-c-select__menu-item pf-m-selected"
2070
- role="option"
2071
- aria-selected="true"
2072
- >
2073
- Stopped
2074
- <span class="pf-c-select__menu-item-icon">
2075
- <i class="fas fa-check" aria-hidden="true"></i>
2076
- </span>
2077
- </button>
2078
- </li>
2079
- <li role="presentation">
2080
- <button
2081
- class="pf-c-select__menu-item"
2082
- role="option"
2083
- >Down</button>
2084
- </li>
2085
- <li role="presentation">
2086
- <button
2087
- class="pf-c-select__menu-item"
2088
- role="option"
2089
- >Degraded</button>
2090
- </li>
2091
- <li role="presentation">
2092
- <button
2093
- class="pf-c-select__menu-item"
2094
- role="option"
2095
- >Needs maintenance</button>
2096
- </li>
2097
- </ul>
2098
- </div>
2099
- <input
2100
- class="pf-c-form-control"
2101
- id="toolbar-pagination-management-mobile-example-textInput11"
2102
- name="textInput11"
2103
- type="search"
2104
- placeholder="Filter by name..."
2105
- aria-label="Search input example"
2106
- />
2107
- <button
2108
- class="pf-c-button pf-m-control"
2109
- type="button"
2110
- aria-label="Search button for search input"
2111
- >
2112
- <i class="fas fa-search" aria-hidden="true"></i>
2113
- </button>
2114
- </div>
2115
- </div>
2116
- </div>
2117
- </div>
2118
- <div class="pf-c-toolbar__item pf-m-overflow-menu">
2119
- <div
2120
- class="pf-c-overflow-menu"
2121
- id="toolbar-pagination-management-mobile-example-overflow-menu"
2122
- >
2123
- <div class="pf-c-overflow-menu__control">
2124
- <div class="pf-c-dropdown">
2125
- <button
2126
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
2127
- type="button"
2128
- id="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
2129
- aria-label="Overflow menu"
2130
- aria-expanded="false"
2131
- >
2132
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2133
- </button>
2134
- <ul
2135
- class="pf-c-dropdown__menu"
2136
- aria-labelledby="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
2137
- hidden
2138
- >
2139
- <li>
2140
- <button class="pf-c-dropdown__menu-item">Primary</button>
2141
- </li>
2142
- <li>
2143
- <button class="pf-c-dropdown__menu-item">Secondary</button>
2144
- </li>
2145
- <li>
2146
- <button class="pf-c-dropdown__menu-item">Tertiary</button>
2147
- </li>
2148
- </ul>
2149
- </div>
2150
- </div>
2151
- </div>
2152
- </div>
2153
- <div class="pf-c-toolbar__item pf-m-pagination">
2154
- <div
2155
- class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2156
- >
2157
- <div
2158
- class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2159
- >
2160
- <div class="pf-c-options-menu">
2161
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2162
- <span class="pf-c-options-menu__toggle-text">
2163
- <b>1 - 10</b>&nbsp;of&nbsp;
2164
- <b>36</b>
2165
- </span>
2166
- <button
2167
- class="pf-c-options-menu__toggle-button"
2168
- id="pagination-options-menu-bottom-example-toggle"
2169
- aria-haspopup="listbox"
2170
- aria-expanded="false"
2171
- aria-label="Items per page"
2172
- >
2173
- <span class="pf-c-options-menu__toggle-button-icon">
2174
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2175
- </span>
2176
- </button>
2177
- </div>
2178
- <ul
2179
- class="pf-c-options-menu__menu"
2180
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
2181
- hidden
2182
- >
2183
- <li>
2184
- <button
2185
- class="pf-c-options-menu__menu-item"
2186
- type="button"
2187
- >5 per page</button>
2188
- </li>
2189
- <li>
2190
- <button
2191
- class="pf-c-options-menu__menu-item"
2192
- type="button"
2193
- >
2194
- 10 per page
2195
- <div class="pf-c-options-menu__menu-item-icon">
2196
- <i class="fas fa-check" aria-hidden="true"></i>
2197
- </div>
2198
- </button>
2199
- </li>
2200
- <li>
2201
- <button
2202
- class="pf-c-options-menu__menu-item"
2203
- type="button"
2204
- >20 per page</button>
2205
- </li>
2206
- </ul>
2207
- </div>
2208
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
2209
- <div class="pf-c-pagination__nav-control pf-m-prev">
2210
- <button
2211
- class="pf-c-button pf-m-plain"
2212
- type="button"
2213
- disabled
2214
- aria-label="Go to previous page"
2215
- >
2216
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2217
- </button>
2218
- </div>
2219
- <div class="pf-c-pagination__nav-control pf-m-next">
2220
- <button
2221
- class="pf-c-button pf-m-plain"
2222
- type="button"
2223
- aria-label="Go to next page"
2224
- >
2225
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2226
- </button>
2227
- </div>
2228
- </nav>
2229
- </div>
2230
- </div>
2231
- </div>
2232
- </div>
2233
- <div
2234
- class="pf-c-toolbar__expandable-content pf-m-hidden"
2235
- id="toolbar-pagination-management-mobile-example-expandable-content"
2236
- hidden
2237
- ></div>
2238
- </div>
2239
- </div>
2240
- <div>
2241
- <table
2242
- class="pf-c-table pf-m-grid-md"
2243
- role="grid"
2244
- aria-label="This is a table with checkboxes"
2245
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
2246
- >
2247
- <thead>
2248
- <tr role="row">
2249
- <td></td>
2250
- <th role="columnheader" scope="col">Repositories</th>
2251
- <th role="columnheader" scope="col">Branches</th>
2252
- <th role="columnheader" scope="col">Pull requests</th>
2253
- <th role="columnheader" scope="col">Workspaces</th>
2254
- <th role="columnheader" scope="col">Last commit</th>
2255
- <td></td>
2256
- <td></td>
2257
- </tr>
2258
- </thead>
2259
-
2260
- <tbody role="rowgroup">
2261
- <tr role="row">
2262
- <td class="pf-c-table__check" role="cell">
2263
- <input
2264
- type="checkbox"
2265
- name="checkrow1"
2266
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
2267
- />
2268
- </td>
2269
- <th role="columnheader" data-label="Repository name">
2270
- <div>
2271
- <div
2272
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
2273
- >Node 1</div>
2274
- <a href="#">siemur/test-space</a>
2275
- </div>
2276
- </th>
2277
- <td role="cell" data-label="Branches">
2278
- <span>
2279
- <i class="fas fa-code-branch"></i> 10
2280
- </span>
2281
- </td>
2282
- <td role="cell" data-label="Pull requests">
2283
- <span>
2284
- <i class="fas fa-code"></i> 25
2285
- </span>
2286
- </td>
2287
- <td role="cell" data-label="Workspaces">
2288
- <span>
2289
- <i class="fas fa-cube"></i> 5
2290
- </span>
2291
- </td>
2292
- <td role="cell" data-label="Last commit">2 days ago</td>
2293
- <td role="cell" data-label="Action">
2294
- <a href="#">Action link</a>
2295
- </td>
2296
- <td class="pf-c-table__action" role="cell">
2297
- <div class="pf-c-dropdown">
2298
- <button
2299
- class="pf-c-dropdown__toggle pf-m-plain"
2300
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-1-button"
2301
- aria-expanded="false"
2302
- type="button"
2303
- aria-label="Actions"
2304
- >
2305
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2306
- </button>
2307
- <ul
2308
- class="pf-c-dropdown__menu pf-m-align-right"
2309
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-1-button"
2310
- hidden
2311
- >
2312
- <li>
2313
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2314
- </li>
2315
- <li>
2316
- <button
2317
- class="pf-c-dropdown__menu-item"
2318
- type="button"
2319
- >Action</button>
2320
- </li>
2321
- <li>
2322
- <a
2323
- class="pf-c-dropdown__menu-item pf-m-disabled"
2324
- href="#"
2325
- aria-disabled="true"
2326
- tabindex="-1"
2327
- >Disabled link</a>
2328
- </li>
2329
- <li>
2330
- <button
2331
- class="pf-c-dropdown__menu-item"
2332
- type="button"
2333
- disabled
2334
- >Disabled action</button>
2335
- </li>
2336
- <li class="pf-c-divider" role="separator"></li>
2337
- <li>
2338
- <a
2339
- class="pf-c-dropdown__menu-item"
2340
- href="#"
2341
- >Separated link</a>
2342
- </li>
2343
- </ul>
2344
- </div>
2345
- </td>
2346
- </tr>
2347
-
2348
- <tr role="row">
2349
- <td class="pf-c-table__check" role="cell">
2350
- <input
2351
- type="checkbox"
2352
- name="checkrow2"
2353
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
2354
- />
2355
- </td>
2356
- <th role="columnheader" data-label="Repository name">
2357
- <div>
2358
- <div
2359
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
2360
- >Node 2</div>
2361
- <a href="#">siemur/test-space</a>
2362
- </div>
2363
- </th>
2364
- <td role="cell" data-label="Branches">
2365
- <span>
2366
- <i class="fas fa-code-branch"></i> 8
2367
- </span>
2368
- </td>
2369
- <td role="cell" data-label="Pull requests">
2370
- <span>
2371
- <i class="fas fa-code"></i> 30
2372
- </span>
2373
- </td>
2374
- <td role="cell" data-label="Workspaces">
2375
- <span>
2376
- <i class="fas fa-cube"></i> 2
2377
- </span>
2378
- </td>
2379
- <td role="cell" data-label="Last commit">2 days ago</td>
2380
- <td role="cell" data-label="Action">
2381
- <a href="#">Action link</a>
2382
- </td>
2383
- <td class="pf-c-table__action" role="cell">
2384
- <div class="pf-c-dropdown">
2385
- <button
2386
- class="pf-c-dropdown__toggle pf-m-plain"
2387
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-2-button"
2388
- aria-expanded="false"
2389
- type="button"
2390
- aria-label="Actions"
2391
- >
2392
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2393
- </button>
2394
- <ul
2395
- class="pf-c-dropdown__menu pf-m-align-right"
2396
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-2-button"
2397
- hidden
2398
- >
2399
- <li>
2400
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2401
- </li>
2402
- <li>
2403
- <button
2404
- class="pf-c-dropdown__menu-item"
2405
- type="button"
2406
- >Action</button>
2407
- </li>
2408
- <li>
2409
- <a
2410
- class="pf-c-dropdown__menu-item pf-m-disabled"
2411
- href="#"
2412
- aria-disabled="true"
2413
- tabindex="-1"
2414
- >Disabled link</a>
2415
- </li>
2416
- <li>
2417
- <button
2418
- class="pf-c-dropdown__menu-item"
2419
- type="button"
2420
- disabled
2421
- >Disabled action</button>
2422
- </li>
2423
- <li class="pf-c-divider" role="separator"></li>
2424
- <li>
2425
- <a
2426
- class="pf-c-dropdown__menu-item"
2427
- href="#"
2428
- >Separated link</a>
2429
- </li>
2430
- </ul>
2431
- </div>
2432
- </td>
2433
- </tr>
2434
-
2435
- <tr role="row">
2436
- <td class="pf-c-table__check" role="cell">
2437
- <input
2438
- type="checkbox"
2439
- name="checkrow3"
2440
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
2441
- />
2442
- </td>
2443
- <th role="columnheader" data-label="Repository name">
2444
- <div>
2445
- <div
2446
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
2447
- >Node 3</div>
2448
- <a href="#">siemur/test-space</a>
2449
- </div>
2450
- </th>
2451
- <td role="cell" data-label="Branches">
2452
- <span>
2453
- <i class="fas fa-code-branch"></i> 12
2454
- </span>
2455
- </td>
2456
- <td role="cell" data-label="Pull requests">
2457
- <span>
2458
- <i class="fas fa-code"></i> 48
2459
- </span>
2460
- </td>
2461
- <td role="cell" data-label="Workspaces">
2462
- <span>
2463
- <i class="fas fa-cube"></i> 13
2464
- </span>
2465
- </td>
2466
- <td role="cell" data-label="Last commit">30 days ago</td>
2467
- <td role="cell" data-label="Action">
2468
- <a href="#">Action link</a>
2469
- </td>
2470
- <td class="pf-c-table__action" role="cell">
2471
- <div class="pf-c-dropdown">
2472
- <button
2473
- class="pf-c-dropdown__toggle pf-m-plain"
2474
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-3-button"
2475
- aria-expanded="false"
2476
- type="button"
2477
- aria-label="Actions"
2478
- >
2479
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2480
- </button>
2481
- <ul
2482
- class="pf-c-dropdown__menu pf-m-align-right"
2483
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-3-button"
2484
- hidden
2485
- >
2486
- <li>
2487
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2488
- </li>
2489
- <li>
2490
- <button
2491
- class="pf-c-dropdown__menu-item"
2492
- type="button"
2493
- >Action</button>
2494
- </li>
2495
- <li>
2496
- <a
2497
- class="pf-c-dropdown__menu-item pf-m-disabled"
2498
- href="#"
2499
- aria-disabled="true"
2500
- tabindex="-1"
2501
- >Disabled link</a>
2502
- </li>
2503
- <li>
2504
- <button
2505
- class="pf-c-dropdown__menu-item"
2506
- type="button"
2507
- disabled
2508
- >Disabled action</button>
2509
- </li>
2510
- <li class="pf-c-divider" role="separator"></li>
2511
- <li>
2512
- <a
2513
- class="pf-c-dropdown__menu-item"
2514
- href="#"
2515
- >Separated link</a>
2516
- </li>
2517
- </ul>
2518
- </div>
2519
- </td>
2520
- </tr>
2521
-
2522
- <tr role="row">
2523
- <td class="pf-c-table__check" role="cell">
2524
- <input
2525
- type="checkbox"
2526
- name="checkrow4"
2527
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
2528
- />
2529
- </td>
2530
- <th role="columnheader" data-label="Repository name">
2531
- <div>
2532
- <div
2533
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
2534
- >Node 4</div>
2535
- <a href="#">siemur/test-space</a>
2536
- </div>
2537
- </th>
2538
- <td role="cell" data-label="Branches">
2539
- <span>
2540
- <i class="fas fa-code-branch"></i> 3
2541
- </span>
2542
- </td>
2543
- <td role="cell" data-label="Pull requests">
2544
- <span>
2545
- <i class="fas fa-code"></i> 8
2546
- </span>
2547
- </td>
2548
- <td role="cell" data-label="Workspaces">
2549
- <span>
2550
- <i class="fas fa-cube"></i> 20
2551
- </span>
2552
- </td>
2553
- <td role="cell" data-label="Last commit">8 days ago</td>
2554
- <td role="cell" data-label="Action">
2555
- <a href="#">Action link</a>
2556
- </td>
2557
- <td class="pf-c-table__action" role="cell">
2558
- <div class="pf-c-dropdown">
2559
- <button
2560
- class="pf-c-dropdown__toggle pf-m-plain"
2561
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-4-button"
2562
- aria-expanded="false"
2563
- type="button"
2564
- aria-label="Actions"
2565
- >
2566
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2567
- </button>
2568
- <ul
2569
- class="pf-c-dropdown__menu pf-m-align-right"
2570
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-4-button"
2571
- hidden
2572
- >
2573
- <li>
2574
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2575
- </li>
2576
- <li>
2577
- <button
2578
- class="pf-c-dropdown__menu-item"
2579
- type="button"
2580
- >Action</button>
2581
- </li>
2582
- <li>
2583
- <a
2584
- class="pf-c-dropdown__menu-item pf-m-disabled"
2585
- href="#"
2586
- aria-disabled="true"
2587
- tabindex="-1"
2588
- >Disabled link</a>
2589
- </li>
2590
- <li>
2591
- <button
2592
- class="pf-c-dropdown__menu-item"
2593
- type="button"
2594
- disabled
2595
- >Disabled action</button>
2596
- </li>
2597
- <li class="pf-c-divider" role="separator"></li>
2598
- <li>
2599
- <a
2600
- class="pf-c-dropdown__menu-item"
2601
- href="#"
2602
- >Separated link</a>
2603
- </li>
2604
- </ul>
2605
- </div>
2606
- </td>
2607
- </tr>
2608
-
2609
- <tr role="row">
2610
- <td class="pf-c-table__check" role="cell">
2611
- <input
2612
- type="checkbox"
2613
- name="checkrow5"
2614
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
2615
- />
2616
- </td>
2617
- <td role="cell" data-label="Repository name">
2618
- <div>
2619
- <div
2620
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
2621
- >Node 5</div>
2622
- <a href="#">siemur/test-space</a>
2623
- </div>
2624
- </td>
2625
- <td role="cell" data-label="Branches">
2626
- <span>
2627
- <i class="fas fa-code-branch"></i> 34
2628
- </span>
2629
- </td>
2630
- <td role="cell" data-label="Pull requests">
2631
- <span>
2632
- <i class="fas fa-code"></i> 21
2633
- </span>
2634
- </td>
2635
- <td role="cell" data-label="Workspaces">
2636
- <span>
2637
- <i class="fas fa-cube"></i> 26
2638
- </span>
2639
- </td>
2640
- <td role="cell" data-label="Last commit">2 days ago</td>
2641
- <td role="cell" data-label="Action">
2642
- <a href="#">Action link</a>
2643
- </td>
2644
- <td class="pf-c-table__action" role="cell">
2645
- <div class="pf-c-dropdown">
2646
- <button
2647
- class="pf-c-dropdown__toggle pf-m-plain"
2648
- id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-5-button"
2649
- aria-expanded="false"
2650
- type="button"
2651
- aria-label="Actions"
2652
- >
2653
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2654
- </button>
2655
- <ul
2656
- class="pf-c-dropdown__menu pf-m-align-right"
2657
- aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-5-button"
2658
- hidden
2659
- >
2660
- <li>
2661
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2662
- </li>
2663
- <li>
2664
- <button
2665
- class="pf-c-dropdown__menu-item"
2666
- type="button"
2667
- >Action</button>
2668
- </li>
2669
- <li>
2670
- <a
2671
- class="pf-c-dropdown__menu-item pf-m-disabled"
2672
- href="#"
2673
- aria-disabled="true"
2674
- tabindex="-1"
2675
- >Disabled link</a>
2676
- </li>
2677
- <li>
2678
- <button
2679
- class="pf-c-dropdown__menu-item"
2680
- type="button"
2681
- disabled
2682
- >Disabled action</button>
2683
- </li>
2684
- <li class="pf-c-divider" role="separator"></li>
2685
- <li>
2686
- <a
2687
- class="pf-c-dropdown__menu-item"
2688
- href="#"
2689
- >Separated link</a>
2690
- </li>
2691
- </ul>
2692
- </div>
2693
- </td>
2694
- </tr>
2695
- </tbody>
2696
- </table>
2697
- <div class="pf-c-pagination pf-m-bottom">
2698
- <div class="pf-c-options-menu pf-m-top">
2699
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2700
- <span class="pf-c-options-menu__toggle-text">
2701
- <b>1 - 10</b>&nbsp;of&nbsp;
2702
- <b>36</b>
2703
- </span>
2704
- <button
2705
- class="pf-c-options-menu__toggle-button"
2706
- id="pagination-options-menu-bottom-collapsed-example-toggle"
2707
- aria-haspopup="listbox"
2708
- aria-expanded="false"
2709
- aria-label="Items per page"
2710
- >
2711
- <span class="pf-c-options-menu__toggle-button-icon">
2712
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2713
- </span>
2714
- </button>
2715
- </div>
2716
- <ul
2717
- class="pf-c-options-menu__menu pf-m-top"
2718
- aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"
2719
- hidden
2720
- >
2721
- <li>
2722
- <button
2723
- class="pf-c-options-menu__menu-item"
2724
- type="button"
2725
- >5 per page</button>
2726
- </li>
2727
- <li>
2728
- <button class="pf-c-options-menu__menu-item" type="button">
2729
- 10 per page
2730
- <div class="pf-c-options-menu__menu-item-icon">
2731
- <i class="fas fa-check" aria-hidden="true"></i>
2732
- </div>
2733
- </button>
2734
- </li>
2735
- <li>
2736
- <button
2737
- class="pf-c-options-menu__menu-item"
2738
- type="button"
2739
- >20 per page</button>
2740
- </li>
2741
- </ul>
2742
- </div>
2743
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
2744
- <div class="pf-c-pagination__nav-control pf-m-first">
2745
- <button
2746
- class="pf-c-button pf-m-plain"
2747
- type="button"
2748
- disabled
2749
- aria-label="Go to first page"
2750
- >
2751
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2752
- </button>
2753
- </div>
2754
- <div class="pf-c-pagination__nav-control pf-m-prev">
2755
- <button
2756
- class="pf-c-button pf-m-plain"
2757
- type="button"
2758
- disabled
2759
- aria-label="Go to previous page"
2760
- >
2761
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2762
- </button>
2763
- </div>
2764
- <div class="pf-c-pagination__nav-page-select">
2765
- <input
2766
- class="pf-c-form-control"
2767
- aria-label="Current page"
2768
- type="number"
2769
- min="1"
2770
- max="4"
2771
- value="1"
2772
- />
2773
- <span aria-hidden="true">of 4</span>
2774
- </div>
2775
- <div class="pf-c-pagination__nav-control pf-m-next">
2776
- <button
2777
- class="pf-c-button pf-m-plain"
2778
- type="button"
2779
- aria-label="Go to next page"
2780
- >
2781
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2782
- </button>
2783
- </div>
2784
- <div class="pf-c-pagination__nav-control pf-m-last">
2785
- <button
2786
- class="pf-c-button pf-m-plain"
2787
- type="button"
2788
- aria-label="Go to last page"
2789
- >
2790
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2791
- </button>
2792
- </div>
2793
- </nav>
2794
- </div>
2795
- </div>
2796
- </section>
2797
- </main>
2798
- </div>
2799
-
1815
+ {{/page-main-section}}
1816
+ {{/page-demo-default}}
2800
1817
  ```