@patternfly/patternfly 6.0.0-alpha.157 → 6.0.0-alpha.159
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.
- package/components/Pagination/pagination.css +6 -3
- package/components/Pagination/pagination.scss +6 -3
- package/components/TextInputGroup/text-input-group.css +20 -18
- package/components/TextInputGroup/text-input-group.scss +23 -22
- package/components/_index.css +26 -21
- package/docs/components/Pagination/examples/Pagination.md +196 -713
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
- package/docs/components/Toolbar/examples/Toolbar.md +34 -98
- package/docs/demos/CardView/examples/CardView.md +32 -98
- package/docs/demos/DataList/examples/DataList.md +128 -392
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
- package/docs/demos/Table/examples/Table.md +369 -1132
- package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
- package/package.json +1 -1
- package/patternfly-no-globals.css +26 -21
- package/patternfly.css +26 -21
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/Pagination/examples/Pagination.css +0 -3
|
@@ -13,3 +13,7 @@
|
|
|
13
13
|
#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
|
|
14
14
|
height: 540px;
|
|
15
15
|
}
|
|
16
|
+
|
|
17
|
+
#ws-core-c-text-input-group-plain {
|
|
18
|
+
border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
|
|
19
|
+
}
|
|
@@ -43,6 +43,27 @@ cssPrefix: pf-v6-c-text-input-group
|
|
|
43
43
|
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
### Plain
|
|
47
|
+
|
|
48
|
+
The following example shows a `TextInputGroup` with the `.pf-m-plain` class applied. A plain `TextInputGroup` must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
|
|
49
|
+
For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<div class="pf-v6-c-text-input-group pf-m-plain">
|
|
53
|
+
<div class="pf-v6-c-text-input-group__main">
|
|
54
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
55
|
+
<input
|
|
56
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
57
|
+
type="text"
|
|
58
|
+
value="Text input group with plain styling"
|
|
59
|
+
aria-label="Type to filter"
|
|
60
|
+
/>
|
|
61
|
+
</span>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
|
|
46
67
|
### Utilities and icon with placeholder text
|
|
47
68
|
|
|
48
69
|
```html
|
|
@@ -1697,57 +1697,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1697
1697
|
<div class="pf-v6-c-pagination" aria-label="Element pagination">
|
|
1698
1698
|
<div class="pf-v6-c-pagination__total-items">37 items</div>
|
|
1699
1699
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1700
|
-
<
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
>
|
|
1708
|
-
<
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
<
|
|
1700
|
+
<button
|
|
1701
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
1702
|
+
type="button"
|
|
1703
|
+
aria-expanded="false"
|
|
1704
|
+
aria-label="Menu toggle"
|
|
1705
|
+
id="toolbar-stacked-example-pagination-menu-toggle"
|
|
1706
|
+
>
|
|
1707
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
1708
|
+
<b>1 - 10</b> of
|
|
1709
|
+
<b>36</b>
|
|
1710
|
+
</span>
|
|
1711
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1712
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1713
1713
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1714
|
-
</
|
|
1715
|
-
</
|
|
1716
|
-
|
|
1717
|
-
class="pf-v6-c-options-menu__menu"
|
|
1718
|
-
role="menu"
|
|
1719
|
-
aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
|
|
1720
|
-
hidden
|
|
1721
|
-
>
|
|
1722
|
-
<li role="none">
|
|
1723
|
-
<button
|
|
1724
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1725
|
-
type="button"
|
|
1726
|
-
role="menuitem"
|
|
1727
|
-
>5 per page</button>
|
|
1728
|
-
</li>
|
|
1729
|
-
<li role="none">
|
|
1730
|
-
<button
|
|
1731
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1732
|
-
type="button"
|
|
1733
|
-
role="menuitem"
|
|
1734
|
-
>
|
|
1735
|
-
10 per page
|
|
1736
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1737
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1738
|
-
</div>
|
|
1739
|
-
</button>
|
|
1740
|
-
</li>
|
|
1741
|
-
<li role="none">
|
|
1742
|
-
<button
|
|
1743
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1744
|
-
type="button"
|
|
1745
|
-
role="menuitem"
|
|
1746
|
-
>20 per page</button>
|
|
1747
|
-
</li>
|
|
1748
|
-
</ul>
|
|
1749
|
-
</div>
|
|
1714
|
+
</span>
|
|
1715
|
+
</span>
|
|
1716
|
+
</button>
|
|
1750
1717
|
</div>
|
|
1718
|
+
|
|
1751
1719
|
<nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
|
|
1752
1720
|
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
1753
1721
|
<button
|
|
@@ -1954,57 +1922,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1954
1922
|
<div class="pf-v6-c-pagination" aria-label="Element pagination">
|
|
1955
1923
|
<div class="pf-v6-c-pagination__total-items">37 items</div>
|
|
1956
1924
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1957
|
-
<
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
>
|
|
1965
|
-
<
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
<
|
|
1925
|
+
<button
|
|
1926
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
1927
|
+
type="button"
|
|
1928
|
+
aria-expanded="false"
|
|
1929
|
+
aria-label="Menu toggle"
|
|
1930
|
+
id="toolbar-stacked-collapsed-example-pagination-menu-toggle"
|
|
1931
|
+
>
|
|
1932
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
1933
|
+
<b>1 - 10</b> of
|
|
1934
|
+
<b>36</b>
|
|
1935
|
+
</span>
|
|
1936
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1937
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1970
1938
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1971
|
-
</
|
|
1972
|
-
</
|
|
1973
|
-
|
|
1974
|
-
class="pf-v6-c-options-menu__menu"
|
|
1975
|
-
role="menu"
|
|
1976
|
-
aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
|
|
1977
|
-
hidden
|
|
1978
|
-
>
|
|
1979
|
-
<li role="none">
|
|
1980
|
-
<button
|
|
1981
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1982
|
-
type="button"
|
|
1983
|
-
role="menuitem"
|
|
1984
|
-
>5 per page</button>
|
|
1985
|
-
</li>
|
|
1986
|
-
<li role="none">
|
|
1987
|
-
<button
|
|
1988
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1989
|
-
type="button"
|
|
1990
|
-
role="menuitem"
|
|
1991
|
-
>
|
|
1992
|
-
10 per page
|
|
1993
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1994
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1995
|
-
</div>
|
|
1996
|
-
</button>
|
|
1997
|
-
</li>
|
|
1998
|
-
<li role="none">
|
|
1999
|
-
<button
|
|
2000
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
2001
|
-
type="button"
|
|
2002
|
-
role="menuitem"
|
|
2003
|
-
>20 per page</button>
|
|
2004
|
-
</li>
|
|
2005
|
-
</ul>
|
|
2006
|
-
</div>
|
|
1939
|
+
</span>
|
|
1940
|
+
</span>
|
|
1941
|
+
</button>
|
|
2007
1942
|
</div>
|
|
1943
|
+
|
|
2008
1944
|
<nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
|
|
2009
1945
|
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
2010
1946
|
<button
|
|
@@ -576,56 +576,23 @@ section: patterns
|
|
|
576
576
|
<div class="pf-v6-c-toolbar__item pf-m-pagination">
|
|
577
577
|
<div class="pf-v6-c-pagination pf-m-compact">
|
|
578
578
|
<div class="pf-v6-c-pagination__page-menu">
|
|
579
|
-
<
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
>
|
|
587
|
-
<
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
<
|
|
579
|
+
<button
|
|
580
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
581
|
+
type="button"
|
|
582
|
+
aria-expanded="false"
|
|
583
|
+
aria-label="Menu toggle"
|
|
584
|
+
id="card-view-basic-example-toolbar-top-pagination"
|
|
585
|
+
>
|
|
586
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
587
|
+
<b>1 - 10</b> of
|
|
588
|
+
<b>36</b>
|
|
589
|
+
</span>
|
|
590
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
591
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
592
592
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
593
|
-
</
|
|
594
|
-
</
|
|
595
|
-
|
|
596
|
-
class="pf-v6-c-options-menu__menu"
|
|
597
|
-
role="menu"
|
|
598
|
-
aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
|
|
599
|
-
hidden
|
|
600
|
-
>
|
|
601
|
-
<li role="none">
|
|
602
|
-
<button
|
|
603
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
604
|
-
type="button"
|
|
605
|
-
role="menuitem"
|
|
606
|
-
>5 per page</button>
|
|
607
|
-
</li>
|
|
608
|
-
<li role="none">
|
|
609
|
-
<button
|
|
610
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
611
|
-
type="button"
|
|
612
|
-
role="menuitem"
|
|
613
|
-
>
|
|
614
|
-
10 per page
|
|
615
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
616
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
617
|
-
</div>
|
|
618
|
-
</button>
|
|
619
|
-
</li>
|
|
620
|
-
<li role="none">
|
|
621
|
-
<button
|
|
622
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
623
|
-
type="button"
|
|
624
|
-
role="menuitem"
|
|
625
|
-
>20 per page</button>
|
|
626
|
-
</li>
|
|
627
|
-
</ul>
|
|
628
|
-
</div>
|
|
593
|
+
</span>
|
|
594
|
+
</span>
|
|
595
|
+
</button>
|
|
629
596
|
</div>
|
|
630
597
|
<nav
|
|
631
598
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1151,56 +1118,23 @@ section: patterns
|
|
|
1151
1118
|
>
|
|
1152
1119
|
<div class="pf-v6-c-pagination pf-m-bottom">
|
|
1153
1120
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1154
|
-
<
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
>
|
|
1162
|
-
<
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
<
|
|
1121
|
+
<button
|
|
1122
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
1123
|
+
type="button"
|
|
1124
|
+
aria-expanded="false"
|
|
1125
|
+
aria-label="Menu toggle"
|
|
1126
|
+
id="pagination-menu-toggle-bottom-example"
|
|
1127
|
+
>
|
|
1128
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
1129
|
+
<b>1 - 10</b> of
|
|
1130
|
+
<b>36</b>
|
|
1131
|
+
</span>
|
|
1132
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1133
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1167
1134
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1168
|
-
</
|
|
1169
|
-
</
|
|
1170
|
-
|
|
1171
|
-
class="pf-v6-c-options-menu__menu pf-m-top"
|
|
1172
|
-
role="menu"
|
|
1173
|
-
aria-labelledby="pagination-options-menu-bottom-example-toggle"
|
|
1174
|
-
hidden
|
|
1175
|
-
>
|
|
1176
|
-
<li role="none">
|
|
1177
|
-
<button
|
|
1178
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1179
|
-
type="button"
|
|
1180
|
-
role="menuitem"
|
|
1181
|
-
>5 per page</button>
|
|
1182
|
-
</li>
|
|
1183
|
-
<li role="none">
|
|
1184
|
-
<button
|
|
1185
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1186
|
-
type="button"
|
|
1187
|
-
role="menuitem"
|
|
1188
|
-
>
|
|
1189
|
-
10 per page
|
|
1190
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1191
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1192
|
-
</div>
|
|
1193
|
-
</button>
|
|
1194
|
-
</li>
|
|
1195
|
-
<li role="none">
|
|
1196
|
-
<button
|
|
1197
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1198
|
-
type="button"
|
|
1199
|
-
role="menuitem"
|
|
1200
|
-
>20 per page</button>
|
|
1201
|
-
</li>
|
|
1202
|
-
</ul>
|
|
1203
|
-
</div>
|
|
1135
|
+
</span>
|
|
1136
|
+
</span>
|
|
1137
|
+
</button>
|
|
1204
1138
|
</div>
|
|
1205
1139
|
<nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
|
|
1206
1140
|
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|