@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.6
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/Button/button.css +18 -0
- package/components/Button/button.scss +22 -0
- package/components/MenuToggle/menu-toggle.css +4 -0
- package/components/MenuToggle/menu-toggle.scss +5 -0
- package/components/_index.css +22 -0
- package/docs/components/Button/examples/Button.md +116 -0
- package/docs/components/Drawer/examples/Drawer.md +1 -1
- package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
- package/docs/components/Wizard/examples/Wizard.md +15 -15
- package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
- package/docs/demos/Drawer/examples/Drawer.md +31 -33
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
- package/docs/demos/Wizard/examples/Wizard.md +31 -34
- package/package.json +1 -1
- package/patternfly-no-globals.css +22 -0
- package/patternfly.css +22 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -315,6 +315,14 @@
|
|
|
315
315
|
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
316
316
|
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
317
317
|
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
|
|
318
|
+
--pf-v6-c-button--m-circle--ScaleX: 1.29;
|
|
319
|
+
--pf-v6-c-button--m-circle--ScaleY: 1.29;
|
|
320
|
+
--pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
321
|
+
--pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
322
|
+
--pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
323
|
+
--pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
|
|
324
|
+
--pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
325
|
+
--pf-v6-c-button--m-circle--PaddingInlineStart: 0;
|
|
318
326
|
}
|
|
319
327
|
|
|
320
328
|
.pf-v6-c-button {
|
|
@@ -682,6 +690,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
682
690
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
683
691
|
--pf-v6-c-button--hover__icon--ScaleX: 1;
|
|
684
692
|
}
|
|
693
|
+
.pf-v6-c-button.pf-m-circle {
|
|
694
|
+
--pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
|
|
695
|
+
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
|
|
696
|
+
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
|
|
697
|
+
--pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
|
|
698
|
+
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
|
|
699
|
+
}
|
|
700
|
+
.pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
|
|
701
|
+
scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
|
|
702
|
+
}
|
|
685
703
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
686
704
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
687
705
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
|
@@ -371,6 +371,16 @@
|
|
|
371
371
|
--#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
372
372
|
--#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
373
373
|
--#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
|
|
374
|
+
|
|
375
|
+
// Circle
|
|
376
|
+
--#{$button}--m-circle--ScaleX: 1.29;
|
|
377
|
+
--#{$button}--m-circle--ScaleY: 1.29;
|
|
378
|
+
--#{$button}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
379
|
+
--#{$button}--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
380
|
+
--#{$button}--m-circle--PaddingBlockStart: var(--#{$button}--m-circle--Padding--base);
|
|
381
|
+
--#{$button}--m-circle--PaddingInlineEnd: 0;
|
|
382
|
+
--#{$button}--m-circle--PaddingBlockEnd: var(--#{$button}--m-circle--Padding--base);
|
|
383
|
+
--#{$button}--m-circle--PaddingInlineStart: 0;
|
|
374
384
|
}
|
|
375
385
|
|
|
376
386
|
.#{$button} {
|
|
@@ -774,6 +784,18 @@
|
|
|
774
784
|
}
|
|
775
785
|
}
|
|
776
786
|
|
|
787
|
+
&.pf-m-circle {
|
|
788
|
+
--#{$button}--BorderRadius: var(--#{$button}--m-circle--BorderRadius);
|
|
789
|
+
--#{$button}--PaddingBlockStart: var(--#{$button}--m-circle--PaddingBlockStart);
|
|
790
|
+
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-circle--PaddingInlineEnd);
|
|
791
|
+
--#{$button}--PaddingBlockEnd: var(--#{$button}--m-circle--PaddingBlockEnd);
|
|
792
|
+
--#{$button}--PaddingInlineStart: var(--#{$button}--m-circle--PaddingInlineStart);
|
|
793
|
+
|
|
794
|
+
& .pf-v6-c-button__icon {
|
|
795
|
+
scale: var(--#{$button}--m-circle--ScaleX) var(--#{$button}--m-circle--ScaleY);
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
|
|
777
799
|
&:hover,
|
|
778
800
|
&:focus {
|
|
779
801
|
--#{$button}--Color: var(--#{$button}--hover--Color);
|
|
@@ -123,6 +123,7 @@
|
|
|
123
123
|
--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
|
|
124
124
|
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
125
125
|
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
126
|
+
--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
126
127
|
--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
|
|
127
128
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
128
129
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
@@ -251,6 +252,9 @@
|
|
|
251
252
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
|
|
252
253
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
|
|
253
254
|
}
|
|
255
|
+
.pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
|
|
256
|
+
--pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
|
|
257
|
+
}
|
|
254
258
|
.pf-v6-c-menu-toggle.pf-m-plain::before {
|
|
255
259
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
|
|
256
260
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
|
|
@@ -151,6 +151,7 @@
|
|
|
151
151
|
--#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent;
|
|
152
152
|
--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
153
153
|
--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
154
|
+
--#{$menu-toggle}--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
154
155
|
|
|
155
156
|
// Typeahead
|
|
156
157
|
--#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
|
|
@@ -307,6 +308,10 @@
|
|
|
307
308
|
--#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart);
|
|
308
309
|
--#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd);
|
|
309
310
|
|
|
311
|
+
&.pf-m-circle {
|
|
312
|
+
--#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-plain--m-circle--BorderRadius);
|
|
313
|
+
}
|
|
314
|
+
|
|
310
315
|
&::before {
|
|
311
316
|
--#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--m-plain--BorderWidth);
|
|
312
317
|
--#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor);
|
package/components/_index.css
CHANGED
|
@@ -1885,6 +1885,14 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1885
1885
|
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
1886
1886
|
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
1887
1887
|
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
|
|
1888
|
+
--pf-v6-c-button--m-circle--ScaleX: 1.29;
|
|
1889
|
+
--pf-v6-c-button--m-circle--ScaleY: 1.29;
|
|
1890
|
+
--pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
1891
|
+
--pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
|
|
1892
|
+
--pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
1893
|
+
--pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
|
|
1894
|
+
--pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
|
|
1895
|
+
--pf-v6-c-button--m-circle--PaddingInlineStart: 0;
|
|
1888
1896
|
}
|
|
1889
1897
|
|
|
1890
1898
|
.pf-v6-c-button {
|
|
@@ -2252,6 +2260,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2252
2260
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
2253
2261
|
--pf-v6-c-button--hover__icon--ScaleX: 1;
|
|
2254
2262
|
}
|
|
2263
|
+
.pf-v6-c-button.pf-m-circle {
|
|
2264
|
+
--pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
|
|
2265
|
+
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
|
|
2266
|
+
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
|
|
2267
|
+
--pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
|
|
2268
|
+
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
|
|
2269
|
+
}
|
|
2270
|
+
.pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
|
|
2271
|
+
scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
|
|
2272
|
+
}
|
|
2255
2273
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
|
2256
2274
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
|
2257
2275
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
|
@@ -11019,6 +11037,7 @@ ul.pf-v6-c-list {
|
|
|
11019
11037
|
--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
|
|
11020
11038
|
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
11021
11039
|
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
11040
|
+
--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
11022
11041
|
--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
|
|
11023
11042
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
11024
11043
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
@@ -11147,6 +11166,9 @@ ul.pf-v6-c-list {
|
|
|
11147
11166
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
|
|
11148
11167
|
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
|
|
11149
11168
|
}
|
|
11169
|
+
.pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
|
|
11170
|
+
--pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
|
|
11171
|
+
}
|
|
11150
11172
|
.pf-v6-c-menu-toggle.pf-m-plain::before {
|
|
11151
11173
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
|
|
11152
11174
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
|
|
@@ -1833,6 +1833,121 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
|
|
|
1833
1833
|
|
|
1834
1834
|
```
|
|
1835
1835
|
|
|
1836
|
+
### Circle buttons
|
|
1837
|
+
|
|
1838
|
+
```html isBeta
|
|
1839
|
+
<button
|
|
1840
|
+
class="pf-v6-c-button pf-m-circle pf-m-primary"
|
|
1841
|
+
type="button"
|
|
1842
|
+
aria-label="Add primary circle variant"
|
|
1843
|
+
>
|
|
1844
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1845
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1846
|
+
</span>
|
|
1847
|
+
</button>
|
|
1848
|
+
|
|
1849
|
+
<button
|
|
1850
|
+
class="pf-v6-c-button pf-m-circle pf-m-secondary"
|
|
1851
|
+
type="button"
|
|
1852
|
+
aria-label="Add secondary circle variant"
|
|
1853
|
+
>
|
|
1854
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1855
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1856
|
+
</span>
|
|
1857
|
+
</button>
|
|
1858
|
+
|
|
1859
|
+
<button
|
|
1860
|
+
class="pf-v6-c-button pf-m-circle pf-m-tertiary"
|
|
1861
|
+
type="button"
|
|
1862
|
+
aria-label="Add tertiary circle variant"
|
|
1863
|
+
>
|
|
1864
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1865
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1866
|
+
</span>
|
|
1867
|
+
</button>
|
|
1868
|
+
|
|
1869
|
+
<button
|
|
1870
|
+
class="pf-v6-c-button pf-m-circle pf-m-danger"
|
|
1871
|
+
type="button"
|
|
1872
|
+
aria-label="Add danger circle variant"
|
|
1873
|
+
>
|
|
1874
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1875
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1876
|
+
</span>
|
|
1877
|
+
</button>
|
|
1878
|
+
|
|
1879
|
+
<button
|
|
1880
|
+
class="pf-v6-c-button pf-m-circle pf-m-warning"
|
|
1881
|
+
type="button"
|
|
1882
|
+
aria-label="Add warning circle variant"
|
|
1883
|
+
>
|
|
1884
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1885
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1886
|
+
</span>
|
|
1887
|
+
</button>
|
|
1888
|
+
|
|
1889
|
+
<button
|
|
1890
|
+
class="pf-v6-c-button pf-m-circle pf-m-link"
|
|
1891
|
+
type="button"
|
|
1892
|
+
aria-label="Add link circle variant"
|
|
1893
|
+
>
|
|
1894
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1895
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1896
|
+
</span>
|
|
1897
|
+
</button>
|
|
1898
|
+
|
|
1899
|
+
<button
|
|
1900
|
+
class="pf-v6-c-button pf-m-circle pf-m-plain"
|
|
1901
|
+
type="button"
|
|
1902
|
+
aria-label="Remove plain circle variant"
|
|
1903
|
+
>
|
|
1904
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1905
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
1906
|
+
</span>
|
|
1907
|
+
</button>
|
|
1908
|
+
|
|
1909
|
+
<button
|
|
1910
|
+
class="pf-v6-c-button pf-m-circle pf-m-control"
|
|
1911
|
+
type="button"
|
|
1912
|
+
aria-label="Copy control circle variant"
|
|
1913
|
+
>
|
|
1914
|
+
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1915
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
1916
|
+
</span>
|
|
1917
|
+
</button>
|
|
1918
|
+
|
|
1919
|
+
<button
|
|
1920
|
+
class="pf-v6-c-button pf-m-circle pf-m-plain"
|
|
1921
|
+
type="button"
|
|
1922
|
+
aria-label="Upload circle variant"
|
|
1923
|
+
>
|
|
1924
|
+
<span class="pf-v6-c-button__icon">
|
|
1925
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
1926
|
+
</span>
|
|
1927
|
+
</button>
|
|
1928
|
+
|
|
1929
|
+
<button
|
|
1930
|
+
class="pf-v6-c-button pf-m-circle pf-m-in-progress pf-m-plain"
|
|
1931
|
+
type="button"
|
|
1932
|
+
>
|
|
1933
|
+
<span class="pf-v6-c-button__progress">
|
|
1934
|
+
<svg
|
|
1935
|
+
class="pf-v6-c-spinner pf-m-md"
|
|
1936
|
+
role="progressbar"
|
|
1937
|
+
viewBox="0 0 100 100"
|
|
1938
|
+
aria-label="Uploading circle variant..."
|
|
1939
|
+
>
|
|
1940
|
+
<circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
|
|
1941
|
+
</svg>
|
|
1942
|
+
</span>
|
|
1943
|
+
|
|
1944
|
+
<span class="pf-v6-c-button__icon">
|
|
1945
|
+
<i class="fas fa-upload" aria-hidden="true"></i>
|
|
1946
|
+
</span>
|
|
1947
|
+
</button>
|
|
1948
|
+
|
|
1949
|
+
```
|
|
1950
|
+
|
|
1836
1951
|
### Counts
|
|
1837
1952
|
|
|
1838
1953
|
```html
|
|
@@ -2236,3 +2351,4 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
2236
2351
|
| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
|
|
2237
2352
|
| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
|
|
2238
2353
|
| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
|
|
2354
|
+
| `.pf-m-circle` | `.pf-v6-c-button` | Modifies a button to have a circular shape, instead of only rounded corners or a pill shape. Intended for buttons that contain only an icon. |
|
|
@@ -449,7 +449,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
449
449
|
</div>
|
|
450
450
|
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
451
451
|
<div
|
|
452
|
-
class="pf-v6-c-drawer__body
|
|
452
|
+
class="pf-v6-c-drawer__body"
|
|
453
453
|
style="--pf-v6-c-drawer__panel__body--PaddingInlineStart: 48px;"
|
|
454
454
|
>Drawer panel body content with modified inline start padding</div>
|
|
455
455
|
</div>
|
|
@@ -262,6 +262,45 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
262
262
|
|
|
263
263
|
```
|
|
264
264
|
|
|
265
|
+
### Plain circle
|
|
266
|
+
|
|
267
|
+
```html isBeta
|
|
268
|
+
<button
|
|
269
|
+
class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain"
|
|
270
|
+
type="button"
|
|
271
|
+
aria-expanded="false"
|
|
272
|
+
aria-label="Circle styled actions"
|
|
273
|
+
>
|
|
274
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
275
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
276
|
+
</span>
|
|
277
|
+
</button>
|
|
278
|
+
|
|
279
|
+
<button
|
|
280
|
+
class="pf-v6-c-menu-toggle pf-m-circle pf-m-expanded pf-m-plain"
|
|
281
|
+
type="button"
|
|
282
|
+
aria-expanded="true"
|
|
283
|
+
aria-label="Circle and expanded styled actions"
|
|
284
|
+
>
|
|
285
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
286
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
287
|
+
</span>
|
|
288
|
+
</button>
|
|
289
|
+
|
|
290
|
+
<button
|
|
291
|
+
class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain pf-m-disabled"
|
|
292
|
+
type="button"
|
|
293
|
+
aria-expanded="false"
|
|
294
|
+
disabled
|
|
295
|
+
aria-label="Circle and disabled styled actions"
|
|
296
|
+
>
|
|
297
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
298
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
299
|
+
</span>
|
|
300
|
+
</button>
|
|
301
|
+
|
|
302
|
+
```
|
|
303
|
+
|
|
265
304
|
### Plain with text
|
|
266
305
|
|
|
267
306
|
```html
|
|
@@ -2189,6 +2228,7 @@ Shown with default, primary, and secondary styling
|
|
|
2189
2228
|
| `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
2190
2229
|
| `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
2191
2230
|
| `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
2231
|
+
| `.pf-m-circle` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to be circular in shape. This is intended to be applied only to a plain menu toggle without any text. |
|
|
2192
2232
|
| `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
2193
2233
|
| `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|
|
2194
2234
|
| `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
|
|
@@ -846,23 +846,23 @@ wrapperTag: div
|
|
|
846
846
|
</div>
|
|
847
847
|
</div>
|
|
848
848
|
<div class="pf-v6-c-drawer__panel pf-m-width-33">
|
|
849
|
-
<div class="pf-v6-c-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
</div>drawer-panel
|
|
849
|
+
<div class="pf-v6-c-drawer__head">
|
|
850
|
+
drawer-panel
|
|
851
|
+
<div class="pf-v6-c-drawer__actions">
|
|
852
|
+
<div class="pf-v6-c-drawer__close">
|
|
853
|
+
<button
|
|
854
|
+
class="pf-v6-c-button pf-m-plain"
|
|
855
|
+
type="button"
|
|
856
|
+
aria-label="Close drawer panel"
|
|
857
|
+
>
|
|
858
|
+
<span class="pf-v6-c-button__icon">
|
|
859
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
860
|
+
</span>
|
|
861
|
+
</button>
|
|
862
|
+
</div>
|
|
864
863
|
</div>
|
|
865
864
|
</div>
|
|
865
|
+
<div class="pf-v6-c-drawer__body">drawer-body</div>
|
|
866
866
|
</div>
|
|
867
867
|
</div>
|
|
868
868
|
<footer class="pf-v6-c-wizard__footer">
|
|
@@ -727,46 +727,44 @@ cssPrefix: pf-d-description-list
|
|
|
727
727
|
</div>
|
|
728
728
|
</div>
|
|
729
729
|
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg">
|
|
730
|
-
<div class="pf-v6-c-
|
|
731
|
-
<div class="pf-v6-c-
|
|
732
|
-
<
|
|
730
|
+
<div class="pf-v6-c-drawer__head">
|
|
731
|
+
<div class="pf-v6-c-drawer__actions">
|
|
732
|
+
<button
|
|
733
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
734
|
+
type="button"
|
|
735
|
+
aria-expanded="false"
|
|
736
|
+
aria-label="Menu toggle"
|
|
737
|
+
id="description-list-in-drawer-example-toggle"
|
|
738
|
+
>
|
|
739
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
740
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
741
|
+
</span>
|
|
742
|
+
</button>
|
|
743
|
+
<div class="pf-v6-c-drawer__close">
|
|
733
744
|
<button
|
|
734
|
-
class="pf-v6-c-
|
|
745
|
+
class="pf-v6-c-button pf-m-plain"
|
|
735
746
|
type="button"
|
|
736
|
-
aria-
|
|
737
|
-
aria-label="Menu toggle"
|
|
738
|
-
id="description-list-in-drawer-example-toggle"
|
|
747
|
+
aria-label="Close drawer panel"
|
|
739
748
|
>
|
|
740
|
-
<span class="pf-v6-c-
|
|
741
|
-
<i class="fas fa-
|
|
749
|
+
<span class="pf-v6-c-button__icon">
|
|
750
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
742
751
|
</span>
|
|
743
752
|
</button>
|
|
744
|
-
<div class="pf-v6-c-drawer__close">
|
|
745
|
-
<button
|
|
746
|
-
class="pf-v6-c-button pf-m-plain"
|
|
747
|
-
type="button"
|
|
748
|
-
aria-label="Close drawer panel"
|
|
749
|
-
>
|
|
750
|
-
<span class="pf-v6-c-button__icon">
|
|
751
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
752
|
-
</span>
|
|
753
|
-
</button>
|
|
754
|
-
</div>
|
|
755
753
|
</div>
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
</span>
|
|
754
|
+
</div>
|
|
755
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
756
|
+
<div class="pf-v6-l-flex__item">
|
|
757
|
+
<span class="pf-v6-c-label pf-m-compact pf-m-blue">
|
|
758
|
+
<span class="pf-v6-c-label__content">
|
|
759
|
+
<span class="pf-v6-c-label__text">DC</span>
|
|
762
760
|
</span>
|
|
763
|
-
</
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
</
|
|
761
|
+
</span>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="pf-v6-l-flex__item">
|
|
764
|
+
<h2
|
|
765
|
+
class="pf-v6-c-title pf-m-xl"
|
|
766
|
+
id="description-list-in-drawer-example-drawer-label"
|
|
767
|
+
>mary-test</h2>
|
|
770
768
|
</div>
|
|
771
769
|
</div>
|
|
772
770
|
</div>
|
|
@@ -338,46 +338,44 @@ wrapperTag: div
|
|
|
338
338
|
</div>
|
|
339
339
|
</div>
|
|
340
340
|
<div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
|
|
341
|
-
<div class="pf-v6-c-
|
|
342
|
-
<div class="pf-v6-c-
|
|
343
|
-
<
|
|
341
|
+
<div class="pf-v6-c-drawer__head">
|
|
342
|
+
<div class="pf-v6-c-drawer__actions">
|
|
343
|
+
<button
|
|
344
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
345
|
+
type="button"
|
|
346
|
+
aria-expanded="false"
|
|
347
|
+
aria-label="Menu toggle"
|
|
348
|
+
id="drawer-collapsed-example-toggle"
|
|
349
|
+
>
|
|
350
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
351
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
352
|
+
</span>
|
|
353
|
+
</button>
|
|
354
|
+
<div class="pf-v6-c-drawer__close">
|
|
344
355
|
<button
|
|
345
|
-
class="pf-v6-c-
|
|
356
|
+
class="pf-v6-c-button pf-m-plain"
|
|
346
357
|
type="button"
|
|
347
|
-
aria-
|
|
348
|
-
aria-label="Menu toggle"
|
|
349
|
-
id="drawer-collapsed-example-toggle"
|
|
358
|
+
aria-label="Close drawer panel"
|
|
350
359
|
>
|
|
351
|
-
<span class="pf-v6-c-
|
|
352
|
-
<i class="fas fa-
|
|
360
|
+
<span class="pf-v6-c-button__icon">
|
|
361
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
353
362
|
</span>
|
|
354
363
|
</button>
|
|
355
|
-
<div class="pf-v6-c-drawer__close">
|
|
356
|
-
<button
|
|
357
|
-
class="pf-v6-c-button pf-m-plain"
|
|
358
|
-
type="button"
|
|
359
|
-
aria-label="Close drawer panel"
|
|
360
|
-
>
|
|
361
|
-
<span class="pf-v6-c-button__icon">
|
|
362
|
-
<i class="fas fa-times" aria-hidden="true"></i>
|
|
363
|
-
</span>
|
|
364
|
-
</button>
|
|
365
|
-
</div>
|
|
366
364
|
</div>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
</span>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
367
|
+
<div class="pf-v6-l-flex__item">
|
|
368
|
+
<span class="pf-v6-c-label pf-m-compact pf-m-blue">
|
|
369
|
+
<span class="pf-v6-c-label__content">
|
|
370
|
+
<span class="pf-v6-c-label__text">DC</span>
|
|
373
371
|
</span>
|
|
374
|
-
</
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
</
|
|
372
|
+
</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="pf-v6-l-flex__item">
|
|
375
|
+
<h2
|
|
376
|
+
class="pf-v6-c-title pf-m-xl"
|
|
377
|
+
id="drawer-collapsed-example-drawer-label"
|
|
378
|
+
>mary-test</h2>
|
|
381
379
|
</div>
|
|
382
380
|
</div>
|
|
383
381
|
</div>
|