@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.8
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/README.md +1 -1
- package/assets/images/icon-help.hbs +3 -0
- package/components/MenuToggle/menu-toggle.css +8 -4
- package/components/MenuToggle/menu-toggle.scss +15 -3
- package/components/Page/page.css +4 -3
- package/components/Page/page.scss +4 -2
- package/components/_index.css +12 -7
- package/docs/components/Button/examples/Button.md +13 -1
- package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
- package/docs/components/Form/examples/Form.md +156 -12
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Table/examples/Table.md +26 -2
- package/docs/demos/Form/examples/BasicForms.md +130 -10
- package/docs/demos/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +39 -3
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/Page/examples/Page.md +355 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/Table/examples/Table.md +26 -2
- package/package.json +5 -5
- package/patternfly-no-globals.css +12 -7
- package/patternfly.css +12 -7
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -4793,3 +4793,358 @@ wrapperTag: div
|
|
|
4793
4793
|
</div>
|
|
4794
4794
|
|
|
4795
4795
|
```
|
|
4796
|
+
|
|
4797
|
+
### No sidebar
|
|
4798
|
+
|
|
4799
|
+
```html isFullscreen
|
|
4800
|
+
<div class="pf-v6-c-page pf-m-no-sidebar" id="page-demo-no-sidebar">
|
|
4801
|
+
<div class="pf-v6-c-skip-to-content">
|
|
4802
|
+
<a
|
|
4803
|
+
class="pf-v6-c-button pf-m-primary"
|
|
4804
|
+
href="#main-content-page-demo-no-sidebar"
|
|
4805
|
+
>
|
|
4806
|
+
<span class="pf-v6-c-button__text">Skip to content</span>
|
|
4807
|
+
</a>
|
|
4808
|
+
</div>
|
|
4809
|
+
<header class="pf-v6-c-masthead" id="page-demo-no-sidebar-masthead">
|
|
4810
|
+
<div class="pf-v6-c-masthead__main">
|
|
4811
|
+
<span class="pf-v6-c-masthead__toggle">
|
|
4812
|
+
<button
|
|
4813
|
+
class="pf-v6-c-button pf-m-plain"
|
|
4814
|
+
type="button"
|
|
4815
|
+
aria-label="Global navigation"
|
|
4816
|
+
>
|
|
4817
|
+
<span class="pf-v6-c-button__icon">
|
|
4818
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
4819
|
+
</span>
|
|
4820
|
+
</button>
|
|
4821
|
+
</span>
|
|
4822
|
+
<div class="pf-v6-c-masthead__brand">
|
|
4823
|
+
<a class="pf-v6-c-masthead__logo" href="#">
|
|
4824
|
+
<svg height="37px" viewBox="0 0 679 158">
|
|
4825
|
+
<title>PF-HorizontalLogo-Color</title>
|
|
4826
|
+
<defs>
|
|
4827
|
+
<linearGradient
|
|
4828
|
+
x1="68%"
|
|
4829
|
+
y1="2.25860997e-13%"
|
|
4830
|
+
x2="32%"
|
|
4831
|
+
y2="100%"
|
|
4832
|
+
id="linearGradient-page-demo-no-sidebar-masthead"
|
|
4833
|
+
>
|
|
4834
|
+
<stop stop-color="#2B9AF3" offset="0%" />
|
|
4835
|
+
<stop
|
|
4836
|
+
stop-color="#73BCF7"
|
|
4837
|
+
stop-opacity="0.502212631"
|
|
4838
|
+
offset="100%"
|
|
4839
|
+
/>
|
|
4840
|
+
</linearGradient>
|
|
4841
|
+
</defs>
|
|
4842
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
4843
|
+
<g
|
|
4844
|
+
transform="translate(206.000000, 45.750000)"
|
|
4845
|
+
fill="var(--pf-t--global--text--color--regular)"
|
|
4846
|
+
fill-rule="nonzero"
|
|
4847
|
+
>
|
|
4848
|
+
<path
|
|
4849
|
+
d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
|
|
4850
|
+
/>
|
|
4851
|
+
<path
|
|
4852
|
+
d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
|
|
4853
|
+
/>
|
|
4854
|
+
<path
|
|
4855
|
+
d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
|
|
4856
|
+
/>
|
|
4857
|
+
<path
|
|
4858
|
+
d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
|
|
4859
|
+
/>
|
|
4860
|
+
<path
|
|
4861
|
+
d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
|
|
4862
|
+
/>
|
|
4863
|
+
<path
|
|
4864
|
+
d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
|
|
4865
|
+
/>
|
|
4866
|
+
<path
|
|
4867
|
+
d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
|
|
4868
|
+
/>
|
|
4869
|
+
<polygon
|
|
4870
|
+
points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
|
|
4871
|
+
/>
|
|
4872
|
+
<polygon
|
|
4873
|
+
points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
|
|
4874
|
+
/>
|
|
4875
|
+
<path
|
|
4876
|
+
d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
|
|
4877
|
+
/>
|
|
4878
|
+
</g>
|
|
4879
|
+
<g transform="translate(0.000000, 0.000000)">
|
|
4880
|
+
<path
|
|
4881
|
+
d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
|
|
4882
|
+
fill="#0066CC"
|
|
4883
|
+
/>
|
|
4884
|
+
<path
|
|
4885
|
+
d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
|
|
4886
|
+
fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
|
|
4887
|
+
/>
|
|
4888
|
+
<path
|
|
4889
|
+
d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
|
|
4890
|
+
fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
|
|
4891
|
+
transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
|
|
4892
|
+
/>
|
|
4893
|
+
</g>
|
|
4894
|
+
</g>
|
|
4895
|
+
</svg>
|
|
4896
|
+
</a>
|
|
4897
|
+
</div>
|
|
4898
|
+
</div>
|
|
4899
|
+
<div class="pf-v6-c-masthead__content">
|
|
4900
|
+
<div
|
|
4901
|
+
class="pf-v6-c-toolbar pf-m-static"
|
|
4902
|
+
id="page-demo-no-sidebar-masthead-toolbar"
|
|
4903
|
+
>
|
|
4904
|
+
<div class="pf-v6-c-toolbar__content">
|
|
4905
|
+
<div class="pf-v6-c-toolbar__content-section">
|
|
4906
|
+
<div
|
|
4907
|
+
class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
|
|
4908
|
+
>
|
|
4909
|
+
<div
|
|
4910
|
+
class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
|
|
4911
|
+
>
|
|
4912
|
+
<div class="pf-v6-c-toolbar__item">
|
|
4913
|
+
<button
|
|
4914
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
4915
|
+
type="button"
|
|
4916
|
+
aria-expanded="false"
|
|
4917
|
+
aria-label="Application launcher"
|
|
4918
|
+
>
|
|
4919
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
4920
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
4921
|
+
</span>
|
|
4922
|
+
</button>
|
|
4923
|
+
</div>
|
|
4924
|
+
<div class="pf-v6-c-toolbar__item">
|
|
4925
|
+
<button
|
|
4926
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
4927
|
+
type="button"
|
|
4928
|
+
aria-expanded="false"
|
|
4929
|
+
aria-label="Settings"
|
|
4930
|
+
>
|
|
4931
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
4932
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
4933
|
+
</span>
|
|
4934
|
+
</button>
|
|
4935
|
+
</div>
|
|
4936
|
+
<div class="pf-v6-c-toolbar__item">
|
|
4937
|
+
<button
|
|
4938
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
4939
|
+
type="button"
|
|
4940
|
+
aria-expanded="false"
|
|
4941
|
+
aria-label="Help"
|
|
4942
|
+
>
|
|
4943
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
4944
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
4945
|
+
</span>
|
|
4946
|
+
</button>
|
|
4947
|
+
</div>
|
|
4948
|
+
</div>
|
|
4949
|
+
|
|
4950
|
+
<div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
|
|
4951
|
+
<button
|
|
4952
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
4953
|
+
type="button"
|
|
4954
|
+
aria-expanded="false"
|
|
4955
|
+
aria-label="Actions"
|
|
4956
|
+
>
|
|
4957
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
4958
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
4959
|
+
</span>
|
|
4960
|
+
</button>
|
|
4961
|
+
</div>
|
|
4962
|
+
</div>
|
|
4963
|
+
</div>
|
|
4964
|
+
</div>
|
|
4965
|
+
</div>
|
|
4966
|
+
</div>
|
|
4967
|
+
</header>
|
|
4968
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
4969
|
+
<main
|
|
4970
|
+
class="pf-v6-c-page__main"
|
|
4971
|
+
tabindex="-1"
|
|
4972
|
+
id="main-content-page-demo-no-sidebar"
|
|
4973
|
+
>
|
|
4974
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
4975
|
+
<div class="pf-v6-c-page__main-body">
|
|
4976
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
4977
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
4978
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
4979
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
4980
|
+
</li>
|
|
4981
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
4982
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
4983
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4984
|
+
</span>
|
|
4985
|
+
|
|
4986
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
4987
|
+
</li>
|
|
4988
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
4989
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
4990
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4991
|
+
</span>
|
|
4992
|
+
|
|
4993
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
4994
|
+
</li>
|
|
4995
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
4996
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
4997
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4998
|
+
</span>
|
|
4999
|
+
|
|
5000
|
+
<a
|
|
5001
|
+
href="#"
|
|
5002
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
5003
|
+
aria-current="page"
|
|
5004
|
+
>Section landing</a>
|
|
5005
|
+
</li>
|
|
5006
|
+
</ol>
|
|
5007
|
+
</nav>
|
|
5008
|
+
</div>
|
|
5009
|
+
</section>
|
|
5010
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
5011
|
+
<div class="pf-v6-c-page__main-body">
|
|
5012
|
+
<h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
|
|
5013
|
+
<p class="pf-v6-c-content--p">This is a full page demo.</p>
|
|
5014
|
+
</div>
|
|
5015
|
+
</section>
|
|
5016
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
5017
|
+
<div class="pf-v6-c-page__main-body">
|
|
5018
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
5019
|
+
<div class="pf-v6-c-card">
|
|
5020
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5021
|
+
</div>
|
|
5022
|
+
<div class="pf-v6-c-card">
|
|
5023
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5024
|
+
</div>
|
|
5025
|
+
<div class="pf-v6-c-card">
|
|
5026
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5027
|
+
</div>
|
|
5028
|
+
<div class="pf-v6-c-card">
|
|
5029
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5030
|
+
</div>
|
|
5031
|
+
<div class="pf-v6-c-card">
|
|
5032
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5033
|
+
</div>
|
|
5034
|
+
<div class="pf-v6-c-card">
|
|
5035
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5036
|
+
</div>
|
|
5037
|
+
<div class="pf-v6-c-card">
|
|
5038
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5039
|
+
</div>
|
|
5040
|
+
<div class="pf-v6-c-card">
|
|
5041
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5042
|
+
</div>
|
|
5043
|
+
<div class="pf-v6-c-card">
|
|
5044
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5045
|
+
</div>
|
|
5046
|
+
<div class="pf-v6-c-card">
|
|
5047
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5048
|
+
</div>
|
|
5049
|
+
</div>
|
|
5050
|
+
</div>
|
|
5051
|
+
</section>
|
|
5052
|
+
</main>
|
|
5053
|
+
</div>
|
|
5054
|
+
</div>
|
|
5055
|
+
|
|
5056
|
+
```
|
|
5057
|
+
|
|
5058
|
+
### No sidebar or masthead
|
|
5059
|
+
|
|
5060
|
+
```html isFullscreen
|
|
5061
|
+
<div class="pf-v6-c-page pf-m-no-sidebar" id="page-demo-no-sidebar-masthead">
|
|
5062
|
+
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
5063
|
+
<main
|
|
5064
|
+
class="pf-v6-c-page__main"
|
|
5065
|
+
tabindex="-1"
|
|
5066
|
+
id="main-content-page-demo-no-sidebar-masthead"
|
|
5067
|
+
>
|
|
5068
|
+
<section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
|
|
5069
|
+
<div class="pf-v6-c-page__main-body">
|
|
5070
|
+
<nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
|
|
5071
|
+
<ol class="pf-v6-c-breadcrumb__list" role="list">
|
|
5072
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
5073
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
|
|
5074
|
+
</li>
|
|
5075
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
5076
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
5077
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5078
|
+
</span>
|
|
5079
|
+
|
|
5080
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
5081
|
+
</li>
|
|
5082
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
5083
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
5084
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5085
|
+
</span>
|
|
5086
|
+
|
|
5087
|
+
<a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
|
|
5088
|
+
</li>
|
|
5089
|
+
<li class="pf-v6-c-breadcrumb__item">
|
|
5090
|
+
<span class="pf-v6-c-breadcrumb__item-divider">
|
|
5091
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5092
|
+
</span>
|
|
5093
|
+
|
|
5094
|
+
<a
|
|
5095
|
+
href="#"
|
|
5096
|
+
class="pf-v6-c-breadcrumb__link pf-m-current"
|
|
5097
|
+
aria-current="page"
|
|
5098
|
+
>Section landing</a>
|
|
5099
|
+
</li>
|
|
5100
|
+
</ol>
|
|
5101
|
+
</nav>
|
|
5102
|
+
</div>
|
|
5103
|
+
</section>
|
|
5104
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
5105
|
+
<div class="pf-v6-c-page__main-body">
|
|
5106
|
+
<h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
|
|
5107
|
+
<p class="pf-v6-c-content--p">This is a full page demo.</p>
|
|
5108
|
+
</div>
|
|
5109
|
+
</section>
|
|
5110
|
+
<section class="pf-v6-c-page__main-section pf-m-limit-width">
|
|
5111
|
+
<div class="pf-v6-c-page__main-body">
|
|
5112
|
+
<div class="pf-v6-l-gallery pf-m-gutter">
|
|
5113
|
+
<div class="pf-v6-c-card">
|
|
5114
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5115
|
+
</div>
|
|
5116
|
+
<div class="pf-v6-c-card">
|
|
5117
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5118
|
+
</div>
|
|
5119
|
+
<div class="pf-v6-c-card">
|
|
5120
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5121
|
+
</div>
|
|
5122
|
+
<div class="pf-v6-c-card">
|
|
5123
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5124
|
+
</div>
|
|
5125
|
+
<div class="pf-v6-c-card">
|
|
5126
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5127
|
+
</div>
|
|
5128
|
+
<div class="pf-v6-c-card">
|
|
5129
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5130
|
+
</div>
|
|
5131
|
+
<div class="pf-v6-c-card">
|
|
5132
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5133
|
+
</div>
|
|
5134
|
+
<div class="pf-v6-c-card">
|
|
5135
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5136
|
+
</div>
|
|
5137
|
+
<div class="pf-v6-c-card">
|
|
5138
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5139
|
+
</div>
|
|
5140
|
+
<div class="pf-v6-c-card">
|
|
5141
|
+
<div class="pf-v6-c-card__body">This is a card</div>
|
|
5142
|
+
</div>
|
|
5143
|
+
</div>
|
|
5144
|
+
</div>
|
|
5145
|
+
</section>
|
|
5146
|
+
</main>
|
|
5147
|
+
</div>
|
|
5148
|
+
</div>
|
|
5149
|
+
|
|
5150
|
+
```
|
|
@@ -23,7 +23,19 @@ section: components
|
|
|
23
23
|
aria-describedby="password-generator-demo--initial-password"
|
|
24
24
|
>
|
|
25
25
|
<span class="pf-v6-c-button__icon">
|
|
26
|
-
<
|
|
26
|
+
<svg
|
|
27
|
+
class="pf-v6-svg"
|
|
28
|
+
viewBox="0 0 1024 1024"
|
|
29
|
+
fill="currentColor"
|
|
30
|
+
aria-hidden="true"
|
|
31
|
+
role="img"
|
|
32
|
+
width="1em"
|
|
33
|
+
height="1em"
|
|
34
|
+
>
|
|
35
|
+
<path
|
|
36
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
37
|
+
/>
|
|
38
|
+
</svg>
|
|
27
39
|
</span>
|
|
28
40
|
</span></span>
|
|
29
41
|
</div>
|
|
@@ -16042,7 +16042,19 @@ By default, table cell alignment is set to baseline. This retains vertical align
|
|
|
16042
16042
|
aria-label="aria-label="More info""
|
|
16043
16043
|
>
|
|
16044
16044
|
<span class="pf-v6-c-button__icon">
|
|
16045
|
-
<
|
|
16045
|
+
<svg
|
|
16046
|
+
class="pf-v6-svg"
|
|
16047
|
+
viewBox="0 0 1024 1024"
|
|
16048
|
+
fill="currentColor"
|
|
16049
|
+
aria-hidden="true"
|
|
16050
|
+
role="img"
|
|
16051
|
+
width="1em"
|
|
16052
|
+
height="1em"
|
|
16053
|
+
>
|
|
16054
|
+
<path
|
|
16055
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
16056
|
+
/>
|
|
16057
|
+
</svg>
|
|
16046
16058
|
</span>
|
|
16047
16059
|
</button>
|
|
16048
16060
|
</span>
|
|
@@ -16085,7 +16097,19 @@ By default, table cell alignment is set to baseline. This retains vertical align
|
|
|
16085
16097
|
aria-label="aria-label="More info""
|
|
16086
16098
|
>
|
|
16087
16099
|
<span class="pf-v6-c-button__icon">
|
|
16088
|
-
<
|
|
16100
|
+
<svg
|
|
16101
|
+
class="pf-v6-svg"
|
|
16102
|
+
viewBox="0 0 1024 1024"
|
|
16103
|
+
fill="currentColor"
|
|
16104
|
+
aria-hidden="true"
|
|
16105
|
+
role="img"
|
|
16106
|
+
width="1em"
|
|
16107
|
+
height="1em"
|
|
16108
|
+
>
|
|
16109
|
+
<path
|
|
16110
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
16111
|
+
/>
|
|
16112
|
+
</svg>
|
|
16089
16113
|
</span>
|
|
16090
16114
|
</button>
|
|
16091
16115
|
</span>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.3.0-prerelease.
|
|
4
|
+
"version": "6.3.0-prerelease.8",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"@commitlint/config-conventional": "^19.1.0",
|
|
48
48
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
49
49
|
"@octokit/rest": "^20.1.0",
|
|
50
|
-
"@patternfly/documentation-framework": "6.9.
|
|
50
|
+
"@patternfly/documentation-framework": "6.9.3",
|
|
51
51
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
52
|
-
"@patternfly/react-code-editor": "6.2.
|
|
53
|
-
"@patternfly/react-core": "6.2.
|
|
54
|
-
"@patternfly/react-table": "6.2.
|
|
52
|
+
"@patternfly/react-code-editor": "6.2.1",
|
|
53
|
+
"@patternfly/react-core": "6.2.1",
|
|
54
|
+
"@patternfly/react-table": "6.2.1",
|
|
55
55
|
"@starptech/prettyhtml": "^0.10.0",
|
|
56
56
|
"backstopjs": "^6.3.23",
|
|
57
57
|
"cheerio": "^1.0.0-rc.12",
|
|
@@ -18128,16 +18128,20 @@ ul.pf-v6-c-list {
|
|
|
18128
18128
|
flex-wrap: nowrap;
|
|
18129
18129
|
}
|
|
18130
18130
|
|
|
18131
|
-
.pf-v6-c-menu-toggle__icon {
|
|
18132
|
-
flex-shrink: 0;
|
|
18133
|
-
}
|
|
18134
18131
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
|
|
18135
18132
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar img,
|
|
18136
|
-
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
|
|
18133
|
+
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
|
|
18137
18134
|
margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
|
|
18138
18135
|
margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
|
|
18139
18136
|
}
|
|
18140
18137
|
|
|
18138
|
+
.pf-v6-c-menu-toggle__icon {
|
|
18139
|
+
flex-shrink: 0;
|
|
18140
|
+
}
|
|
18141
|
+
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
18142
|
+
vertical-align: middle;
|
|
18143
|
+
}
|
|
18144
|
+
|
|
18141
18145
|
.pf-v6-c-menu-toggle__controls {
|
|
18142
18146
|
display: flex;
|
|
18143
18147
|
gap: var(--pf-v6-c-menu-toggle__controls--Gap);
|
|
@@ -19227,8 +19231,9 @@ ul.pf-v6-c-list {
|
|
|
19227
19231
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
19228
19232
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
19229
19233
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
19230
|
-
--pf-v6-c-page__sidebar--Width: 18.125rem;
|
|
19231
|
-
--pf-v6-c-page__sidebar--
|
|
19234
|
+
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
19235
|
+
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
19236
|
+
--pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
19232
19237
|
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
19233
19238
|
--pf-v6-c-page__sidebar--BoxShadow: none;
|
|
19234
19239
|
--pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
|
|
@@ -19656,7 +19661,7 @@ ul.pf-v6-c-list {
|
|
|
19656
19661
|
-webkit-overflow-scrolling: touch;
|
|
19657
19662
|
}
|
|
19658
19663
|
@media screen and (min-width: 75rem) {
|
|
19659
|
-
.pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
19664
|
+
.pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
19660
19665
|
.pf-v6-c-masthead + .pf-v6-c-page__drawer,
|
|
19661
19666
|
.pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
|
|
19662
19667
|
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
|
package/patternfly.css
CHANGED
|
@@ -18264,16 +18264,20 @@ ul.pf-v6-c-list {
|
|
|
18264
18264
|
flex-wrap: nowrap;
|
|
18265
18265
|
}
|
|
18266
18266
|
|
|
18267
|
-
.pf-v6-c-menu-toggle__icon {
|
|
18268
|
-
flex-shrink: 0;
|
|
18269
|
-
}
|
|
18270
18267
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
|
|
18271
18268
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar img,
|
|
18272
|
-
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
|
|
18269
|
+
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
|
|
18273
18270
|
margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
|
|
18274
18271
|
margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
|
|
18275
18272
|
}
|
|
18276
18273
|
|
|
18274
|
+
.pf-v6-c-menu-toggle__icon {
|
|
18275
|
+
flex-shrink: 0;
|
|
18276
|
+
}
|
|
18277
|
+
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
18278
|
+
vertical-align: middle;
|
|
18279
|
+
}
|
|
18280
|
+
|
|
18277
18281
|
.pf-v6-c-menu-toggle__controls {
|
|
18278
18282
|
display: flex;
|
|
18279
18283
|
gap: var(--pf-v6-c-menu-toggle__controls--Gap);
|
|
@@ -19363,8 +19367,9 @@ ul.pf-v6-c-list {
|
|
|
19363
19367
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
19364
19368
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
19365
19369
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
19366
|
-
--pf-v6-c-page__sidebar--Width: 18.125rem;
|
|
19367
|
-
--pf-v6-c-page__sidebar--
|
|
19370
|
+
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
19371
|
+
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
19372
|
+
--pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
19368
19373
|
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
19369
19374
|
--pf-v6-c-page__sidebar--BoxShadow: none;
|
|
19370
19375
|
--pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
|
|
@@ -19792,7 +19797,7 @@ ul.pf-v6-c-list {
|
|
|
19792
19797
|
-webkit-overflow-scrolling: touch;
|
|
19793
19798
|
}
|
|
19794
19799
|
@media screen and (min-width: 75rem) {
|
|
19795
|
-
.pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
19800
|
+
.pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
19796
19801
|
.pf-v6-c-masthead + .pf-v6-c-page__drawer,
|
|
19797
19802
|
.pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
|
|
19798
19803
|
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
|