@patternfly/patternfly-doc-core 1.0.9 → 1.0.10
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/dist/_astro/{PageContext.TBi_RMo9.js → Button.DKGEfrg3.js} +2 -2
- package/dist/_astro/Navigation.B9EZ0uZW.js +1 -0
- package/dist/_astro/PageContext.DS_dXivY.js +1 -0
- package/dist/_astro/PageToggle.Dmw_iWsV.js +1 -0
- package/dist/_astro/Toolbar.4NX38I90.js +1 -0
- package/dist/_astro/_id_.HeMUkeNi.css +1 -0
- package/dist/_astro/divider.Ctugrpkm.js +1 -0
- package/dist/_astro/page.ydZpSeb1.js +1 -0
- package/dist/design-foundations/typography/index.html +2 -2
- package/dist/design-foundations/usage-and-behavior/index.html +2 -2
- package/dist/get-started/contribute/index.html +2 -2
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/Navigation.tsx +7 -16
- package/src/components/PageToggle.tsx +21 -18
- package/dist/_astro/Navigation.OnCEl9d3.js +0 -1
- package/dist/_astro/PageToggle.Ba91FstB.js +0 -1
- package/dist/_astro/Toolbar.YoU-fHmW.js +0 -1
- package/dist/_astro/_id_.EhyPoRav.css +0 -1
- package/dist/_astro/divider.akZuULNq.js +0 -1
- package/dist/_astro/navStore.B3Aif4yA.js +0 -1
package/dist/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.4.1"><title>PatternFly</title><link rel="stylesheet" href="/_astro/_id_.DZfGTTvw.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/_id_.
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_id_.HeMUkeNi.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
3
3
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
4
4
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-2"] { view-transition-name: astro-xikxfxwm-2; }@layer astro { ::view-transition-old(astro-xikxfxwm-2) {
|
|
5
5
|
animation-duration: 180ms;
|
|
@@ -39,4 +39,4 @@
|
|
|
39
39
|
animation-fill-mode: both;
|
|
40
40
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-3"] { view-transition-name: astro-2e6ke2uy-3; }@layer astro { ::view-transition-old(astro-2e6ke2uy-3) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-3) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-3) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-3"],
|
|
41
41
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-3"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-3"],
|
|
42
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-3"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.4.1"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js"></script></head> <body> <div class="pf-v6-c-page"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z2dhSf7" prefix="r0" component-url="/_astro/PageToggle.Ba91FstB.js" component-export="PageToggle" renderer-url="/_astro/client.CeeiqVaE.js" props="{}" ssr client="idle" opts="{"name":"PageToggle","value":true}" await-children><button id="nav-toggle" aria-expanded="true" aria-disabled="false" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-10"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="1TDdq0" prefix="r2" component-url="/_astro/Toolbar.YoU-fHmW.js" component-export="Toolbar" renderer-url="/_astro/client.CeeiqVaE.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-4"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-disabled="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-11"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-disabled="false" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-12"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-4"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="Z1fp3F5" component-url="/_astro/Navigation.OnCEl9d3.js" component-export="Navigation" renderer-url="/_astro/client.CeeiqVaE.js" props="{"navEntries":[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"title":[0,"Contribute to PatternFly"]}],"body":[0,"## Community contributions \n\nThank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren't limited to): \n- New feature ideas. \n- Bug reports.\n- Documentation updates.\n\nThis guide outlines the ways that you can contribute to PatternFly's design, code, and documentation to help us stay on top of the latest and greatest solutions.\n\nIf you have any ideas that don't fit into the projects outlined in this guide, please [reach out to us on Slack](https://patternfly.slack.com/archives/C293LQ36J).\n\n## Design\n\nIf you have skills in visual and interaction design, you can contribute to PatternFly's design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, [reach out on the patternfly-design Slack channel.](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ)\n\n### Existing design issues \n\nThe PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via [this GitHub project board.](https://github.com/orgs/patternfly/projects/7/views/30) This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you'd like to work on, leave a comment on the issue and a member of our team will reach out with next steps.\n\n### New feature or enhancement\nIf you have an idea for a new design pattern, a new component type, or an existing feature improvement, we'd love to hear it. [Start by opening an issue in the patternfly-design repository.](https://github.com/patternfly/patternfly-design/issues) From there, a member of our team will reach out and work with you to plan and design a solution.\n\n### New icons\nWe encourage designers to work with [the existing PatternFly icon set](/design-foundations/icons), which covers most common use cases. If your use case isn't covered, you can propose a new icon.\n\nTo contribute a new icon, [start by opening an issue in the patternfly-design repository](https://github.com/patternfly/patternfly-design/issues) that describes your idea and why it's needed. A member of our team will reach out to you to discuss next steps.\n\n## Code\n\nThe primary PatternFly libraries include HTML/CSS (commonly called \"core\") and React. If you're looking to contribute to PatternFly's codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes. \n\nIf you have any questions about these projects, you can reach out to us on our [patternfly-core](https://patternfly.slack.com/archives/C9Q224EFL) and [patternfly-react](https://patternfly.slack.com/archives/C4FM977N0) Slack channels.\n\n### Existing development issues \n\nTo find work that has been approved, but not started, you can view open issues in our [patternfly](https://github.com/patternfly/patternfly/issues) (HTML/CSS) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) (React) repositories. If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. \n\nBe sure to view our detailed contribution instructions for both of these repositories:\n- [Core contribution guidelines](https://github.com/patternfly/patternfly#guidelines-for-css-development)\n- [React contribution guidelines](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process)\n\n### Bug reports\n\nIf you believe that you've come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:\n\n1. View the documentation for the feature, to confirm that the behavior is not functioning as intended. \n1. Search open issues in the [patternfly](https://github.com/patternfly/patternfly/issues) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) repositories to see if a related issue already exists.\n - If the bug is present in only the React implementation of PatternFly, [create a bug issue in patternfly-react.](https://github.com/patternfly/patternfly-react/issues)\n - If the bug can be seen on both the React and HTML/CSS side, [create a bug issue in patternfly](https://github.com/patternfly/patternfly/issues).\n1. Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.\n\n## Documentation \n\nAcross our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it.\n\nIf you'd like to contribute to documentation, you can refer to our [detailed contribution instructions](https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers) for additional guidance.\n\n### Existing documentation issues\n\nOur website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org). If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. \n\n### Design guidelines\nOur design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions.\n\nIf you'd like to contribute to our design guidelines, you can open an issue in [patternfly-org](https://github.com/patternfly/patternfly-org) to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content."],"filePath":[0,"textContent/contribute.md"],"digest":[0,"858dc569bfcdc59d"],"rendered":[0,{"html":[0,"<h2 id=\"community-contributions\">Community contributions</h2>\n<p>Thank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren’t limited to):</p>\n<ul>\n<li>New feature ideas.</li>\n<li>Bug reports.</li>\n<li>Documentation updates.</li>\n</ul>\n<p>This guide outlines the ways that you can contribute to PatternFly’s design, code, and documentation to help us stay on top of the latest and greatest solutions.</p>\n<p>If you have any ideas that don’t fit into the projects outlined in this guide, please <a href=\"https://patternfly.slack.com/archives/C293LQ36J\">reach out to us on Slack</a>.</p>\n<h2 id=\"design\">Design</h2>\n<p>If you have skills in visual and interaction design, you can contribute to PatternFly’s design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, <a href=\"http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ\">reach out on the patternfly-design Slack channel.</a></p>\n<h3 id=\"existing-design-issues\">Existing design issues</h3>\n<p>The PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via <a href=\"https://github.com/orgs/patternfly/projects/7/views/30\">this GitHub project board.</a> This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you’d like to work on, leave a comment on the issue and a member of our team will reach out with next steps.</p>\n<h3 id=\"new-feature-or-enhancement\">New feature or enhancement</h3>\n<p>If you have an idea for a new design pattern, a new component type, or an existing feature improvement, we’d love to hear it. <a href=\"https://github.com/patternfly/patternfly-design/issues\">Start by opening an issue in the patternfly-design repository.</a> From there, a member of our team will reach out and work with you to plan and design a solution.</p>\n<h3 id=\"new-icons\">New icons</h3>\n<p>We encourage designers to work with <a href=\"/design-foundations/icons\">the existing PatternFly icon set</a>, which covers most common use cases. If your use case isn’t covered, you can propose a new icon.</p>\n<p>To contribute a new icon, <a href=\"https://github.com/patternfly/patternfly-design/issues\">start by opening an issue in the patternfly-design repository</a> that describes your idea and why it’s needed. A member of our team will reach out to you to discuss next steps.</p>\n<h2 id=\"code\">Code</h2>\n<p>The primary PatternFly libraries include HTML/CSS (commonly called “core”) and React. If you’re looking to contribute to PatternFly’s codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes.</p>\n<p>If you have any questions about these projects, you can reach out to us on our <a href=\"https://patternfly.slack.com/archives/C9Q224EFL\">patternfly-core</a> and <a href=\"https://patternfly.slack.com/archives/C4FM977N0\">patternfly-react</a> Slack channels.</p>\n<h3 id=\"existing-development-issues\">Existing development issues</h3>\n<p>To find work that has been approved, but not started, you can view open issues in our <a href=\"https://github.com/patternfly/patternfly/issues\">patternfly</a> (HTML/CSS) and <a href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react</a> (React) repositories. If you find an issue that you’d like to work on, leave a comment and someone from our team will reach out to you with next steps.</p>\n<p>Be sure to view our detailed contribution instructions for both of these repositories:</p>\n<ul>\n<li><a href=\"https://github.com/patternfly/patternfly#guidelines-for-css-development\">Core contribution guidelines</a></li>\n<li><a href=\"https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process\">React contribution guidelines</a></li>\n</ul>\n<h3 id=\"bug-reports\">Bug reports</h3>\n<p>If you believe that you’ve come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:</p>\n<ol>\n<li>View the documentation for the feature, to confirm that the behavior is not functioning as intended.</li>\n<li>Search open issues in the <a href=\"https://github.com/patternfly/patternfly/issues\">patternfly</a> and <a href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react</a> repositories to see if a related issue already exists.\n<ul>\n<li>If the bug is present in only the React implementation of PatternFly, <a href=\"https://github.com/patternfly/patternfly-react/issues\">create a bug issue in patternfly-react.</a></li>\n<li>If the bug can be seen on both the React and HTML/CSS side, <a href=\"https://github.com/patternfly/patternfly/issues\">create a bug issue in patternfly</a>.</li>\n</ul>\n</li>\n<li>Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.</li>\n</ol>\n<h2 id=\"documentation\">Documentation</h2>\n<p>Across our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it.</p>\n<p>If you’d like to contribute to documentation, you can refer to our <a href=\"https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers\">detailed contribution instructions</a> for additional guidance.</p>\n<h3 id=\"existing-documentation-issues\">Existing documentation issues</h3>\n<p>Our website documentation is contained in the <a href=\"https://github.com/patternfly/patternfly-org\">patternfly-org repository</a>. If you find an issue that you’d like to work on, leave a comment and someone from our team will reach out to you with next steps.</p>\n<h3 id=\"design-guidelines\">Design guidelines</h3>\n<p>Our design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions.</p>\n<p>If you’d like to contribute to our design guidelines, you can open an issue in <a href=\"https://github.com/patternfly/patternfly-org\">patternfly-org</a> to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content.</p>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"community-contributions"],"text":[0,"Community contributions"]}],[0,{"depth":[0,2],"slug":[0,"design"],"text":[0,"Design"]}],[0,{"depth":[0,3],"slug":[0,"existing-design-issues"],"text":[0,"Existing design issues"]}],[0,{"depth":[0,3],"slug":[0,"new-feature-or-enhancement"],"text":[0,"New feature or enhancement"]}],[0,{"depth":[0,3],"slug":[0,"new-icons"],"text":[0,"New icons"]}],[0,{"depth":[0,2],"slug":[0,"code"],"text":[0,"Code"]}],[0,{"depth":[0,3],"slug":[0,"existing-development-issues"],"text":[0,"Existing development issues"]}],[0,{"depth":[0,3],"slug":[0,"bug-reports"],"text":[0,"Bug reports"]}],[0,{"depth":[0,2],"slug":[0,"documentation"],"text":[0,"Documentation"]}],[0,{"depth":[0,3],"slug":[0,"existing-documentation-issues"],"text":[0,"Existing documentation issues"]}],[0,{"depth":[0,3],"slug":[0,"design-guidelines"],"text":[0,"Design guidelines"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Contribute"],"title":[0,"Contribute to PatternFly"],"section":[0,"get-started"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}],[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"]}],"body":[0,"You can use **typography** to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.\n\nThis page outlines PatternFly's typography principles and standards, including token values and usage information.\n\nYou can place text content on a page using the content or title component: \n- **[Content component:](/components/content)** Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.\n- **[Title component:](/components/title)** Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.\n\n## PatternFly fonts\n\nWe use 3 fonts in PatternFly:\n- **Red Hat Display:** Used for larger text, such as headings.\n- **Red Hat Text:** Used for smaller text, subheadings, and body text. More readable for long-form text. \n- **Red Hat Mono:** A tabular font used to format text as code. [Read more about our use of tabular font styling.](#tabular-font-styling)\n\n[Download PatternFly's fonts from GitHub.](https://github.com/RedHatOfficial/RedHatFont)\n\n### Font sizing: rem vs pixel\n\nFont size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.\n\nPatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same). \n\n## Headings \n\nAll headings use Red Hat Display bold.\n\n| Example | Tokens | Size | Line height | Usage | \n| --- | --- | --- | --- | --- |\n| <Title headingLevel=\"h5\" size='2xl'> Aa </Title> | --pf-t--global--font--size--heading--h1 | 1.375rem (22px) | 1.3 | Super hero headings <br /> H1 <br /> Page titles |\n| <Title headingLevel=\"h5\" size='xl'> Aa </Title> | --pf-t--global--font--size--heading--h2 | 1.25rem (20px) | 1.3 | Hero headings <br /> H2 |\n| <Title headingLevel=\"h5\" size='lg'> Aa </Title> | --pf-t--global--font--size--heading--h3 | 1.125rem (18px) | 1.3 | H3 |\n| <Title headingLevel=\"h5\" size='md'> Aa </Title> | --pf-t--global--font--size--heading--h4 <br /> --pf-t--global--font--size--heading--h5 <br /> --pf-t--global--font--size--heading--h6 |1rem (16px) | 1.3 | H4 <br /> H5 <br /> H6 |\n\n### Customizing heading levels\nThe [title component](/components/title) allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility. \n\nThe following table shows the default mapping of PatternFly heading levels to text size:\n\n| Heading level | Default size |\n|----|-----------|\n| H1 | 2xl (1.375rem, 22px)|\n| H2 | xl (1.25rem, 20px) |\n| H3 | lg (1.125rem, 18px) |\n| H4 | md (1 rem, 16px) |\n| H5 | md (1 rem, 16px) |\n| H6 | md (1 rem, 16px) |\n\nIf you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.\n\nFor example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the `size` property from `xl` to `lg`. \n\nExample: \n\n<Title headingLevel=\"h2\"> This is a default \"xl\" H2. </Title>\n```<Title headingLevel=\"h2\" size='lg'> Aa </Title>```\n\n<Title headingLevel=\"h2\" size='lg'> This is a customized \"lg\" H2. </Title>\n```<Title headingLevel=\"h2\" size='lg'> Aa </Title>```\n\nMake sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title. \n\nRefer to the [title component examples](/components/title#custom-sizes) to understand the range of customization options.\n\n## Body text\n\nAll body text uses Red Hat Text.\n\n| Example | Tokens | Size | Line height | Usage | \n| --- | --- | --- | --- | --- |\n|<p style=\"font-size:16px\">Aa</p> | --pf-t--global--font--size--body--lg | 1rem (16px) | 1.5 | Use for larger body text, like in xl empty states. |\n| <Content><Content component={ContentVariants.p}>Aa</Content></Content> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |\n| <Content><Content component={ContentVariants.small}>Aa</Content></Content> | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |\n\n## Tabular font styling \n\nThe primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font. \n\nSometimes, numerals benefit from the use of a tabular font instead. **Tabular fonts** apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement. \n\nTabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: `.pf-v6-m-tabular-nums`, which sets `font-variant-numeric: tabular-nums;`\n\n## Line height and spacing\nThe line height of your text impacts how you should use [spacers](/design-foundations/spacers) in your design. \n\nYour overall line height can be calculated by multiplying the font's built-in line height by the text size. \n\nFor example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs. \n\n"],"filePath":[0,"textContent/typography.md"],"digest":[0,"df42bf1c9e9a76d9"],"rendered":[0,{"html":[0,"<p>You can use <strong>typography</strong> to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.</p>\n<p>This page outlines PatternFly’s typography principles and standards, including token values and usage information.</p>\n<p>You can place text content on a page using the content or title component:</p>\n<ul>\n<li><strong><a href=\"/components/content\">Content component:</a></strong> Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.</li>\n<li><strong><a href=\"/components/title\">Title component:</a></strong> Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.</li>\n</ul>\n<h2 id=\"patternfly-fonts\">PatternFly fonts</h2>\n<p>We use 3 fonts in PatternFly:</p>\n<ul>\n<li><strong>Red Hat Display:</strong> Used for larger text, such as headings.</li>\n<li><strong>Red Hat Text:</strong> Used for smaller text, subheadings, and body text. More readable for long-form text.</li>\n<li><strong>Red Hat Mono:</strong> A tabular font used to format text as code. <a href=\"#tabular-font-styling\">Read more about our use of tabular font styling.</a></li>\n</ul>\n<p><a href=\"https://github.com/RedHatOfficial/RedHatFont\">Download PatternFly’s fonts from GitHub.</a></p>\n<h3 id=\"font-sizing-rem-vs-pixel\">Font sizing: rem vs pixel</h3>\n<p>Font size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage’s HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.</p>\n<p>PatternFly’s default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same).</p>\n<h2 id=\"headings\">Headings</h2>\n<p>All headings use Red Hat Display bold.</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><title headinglevel=\"h5\" size=\"2xl\"> Aa </title></td><td>—pf-t—global—font—size—heading—h1</td><td>1.375rem (22px)</td><td>1.3</td><td>Super hero headings <br> H1 <br> Page titles</td></tr><tr><td><title headinglevel=\"h5\" size=\"xl\"> Aa </title></td><td>—pf-t—global—font—size—heading—h2</td><td>1.25rem (20px)</td><td>1.3</td><td>Hero headings <br> H2</td></tr><tr><td><title headinglevel=\"h5\" size=\"lg\"> Aa </title></td><td>—pf-t—global—font—size—heading—h3</td><td>1.125rem (18px)</td><td>1.3</td><td>H3</td></tr><tr><td><title headinglevel=\"h5\" size=\"md\"> Aa </title></td><td>—pf-t—global—font—size—heading—h4 <br> —pf-t—global—font—size—heading—h5 <br> —pf-t—global—font—size—heading—h6</td><td>1rem (16px)</td><td>1.3</td><td>H4 <br> H5 <br> H6</td></tr></tbody></table>\n<h3 id=\"customizing-heading-levels\">Customizing heading levels</h3>\n<p>The <a href=\"/components/title\">title component</a> allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.</p>\n<p>The following table shows the default mapping of PatternFly heading levels to text size:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Heading level</th><th>Default size</th></tr></thead><tbody><tr><td>H1</td><td>2xl (1.375rem, 22px)</td></tr><tr><td>H2</td><td>xl (1.25rem, 20px)</td></tr><tr><td>H3</td><td>lg (1.125rem, 18px)</td></tr><tr><td>H4</td><td>md (1 rem, 16px)</td></tr><tr><td>H5</td><td>md (1 rem, 16px)</td></tr><tr><td>H6</td><td>md (1 rem, 16px)</td></tr></tbody></table>\n<p>If you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.</p>\n<p>For example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the <code>size</code> property from <code>xl</code> to <code>lg</code>.</p>\n<p>Example:</p>\n<title headinglevel=\"h2\"> This is a default \"xl\" H2. </title>\n```<title headinglevel=\"h2\" size=\"lg\"> Aa </title>```\n<title headinglevel=\"h2\" size=\"lg\"> This is a customized \"lg\" H2. </title>\n```<title headinglevel=\"h2\" size=\"lg\"> Aa </title>```\n<p>Make sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title.</p>\n<p>Refer to the <a href=\"/components/title#custom-sizes\">title component examples</a> to understand the range of customization options.</p>\n<h2 id=\"body-text\">Body text</h2>\n<p>All body text uses Red Hat Text.</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><p style=\"font-size:16px\">Aa</p></td><td>—pf-t—global—font—size—body—lg</td><td>1rem (16px)</td><td>1.5</td><td>Use for larger body text, like in xl empty states.</td></tr><tr><td><content><content component=\"{ContentVariants.p}\">Aa</content></content></td><td>—pf-t—global—font—size—body—default</td><td>0.875rem (14px)</td><td>1.5</td><td>Use for standard body text.</td></tr><tr><td><content><content component=\"{ContentVariants.small}\">Aa</content></content></td><td>—pf-t—global—font—size—body—sm</td><td>0.75rem (12px)</td><td>1.5</td><td>User for smaller body text, like helper text.</td></tr></tbody></table>\n<h2 id=\"tabular-font-styling\">Tabular font styling</h2>\n<p>The primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font.</p>\n<p>Sometimes, numerals benefit from the use of a tabular font instead. <strong>Tabular fonts</strong> apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement.</p>\n<p>Tabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: <code>.pf-v6-m-tabular-nums</code>, which sets <code>font-variant-numeric: tabular-nums;</code></p>\n<h2 id=\"line-height-and-spacing\">Line height and spacing</h2>\n<p>The line height of your text impacts how you should use <a href=\"/design-foundations/spacers\">spacers</a> in your design.</p>\n<p>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.</p>\n<p>For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.</p>\n<p><img src=\"/content/typography/line-height.png\" alt=\"Correct and incorrect text spacing examples.\"></p>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"patternfly-fonts"],"text":[0,"PatternFly fonts"]}],[0,{"depth":[0,3],"slug":[0,"font-sizing-rem-vs-pixel"],"text":[0,"Font sizing: rem vs pixel"]}],[0,{"depth":[0,2],"slug":[0,"headings"],"text":[0,"Headings"]}],[0,{"depth":[0,3],"slug":[0,"customizing-heading-levels"],"text":[0,"Customizing heading levels"]}],[0,{"depth":[0,2],"slug":[0,"body-text"],"text":[0,"Body text"]}],[0,{"depth":[0,2],"slug":[0,"tabular-font-styling"],"text":[0,"Tabular font styling"]}],[0,{"depth":[0,2],"slug":[0,"line-height-and-spacing"],"text":[0,"Line height and spacing"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"]}],"body":[0,"# PatternFly component usage and behavior guidelines\n\nAs you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.\n\n## Displaying structured data\nStructured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the **[data list](/components/data-list)** and the **[table](/components/table)** components.\n\n- Tables are built from a standard tabular structure of rows and columns. \n\n- Data lists support any valid HTML layout inside of a row, which enables more formatting flexibility.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|----------| ---------- |\n| You want to display data in a grid with column headings. | Table |\n| Data does not easily fit into a grid or you want multiple lines of data in a row. | Data list |\n| You want to display non-text information like images or charts. | Data list or table <br /><br /> **Note:** Tables support graphics within cells, but this approach is only recommended for use with small graphics. |\n| All rows don’t have the same format. | Data list |\n\n## Providing contextual help on a page\nContextual help includes any on-screen elements intended to guide the user towards additional information that will help them complete a task. To display this type of content, we recommend using the **[tooltip](/components/tooltip)**, **[popover](/components/popover)**, and **[hint](/components/hint)** components. \n\n- Tooltips are shown when users hover over an element. \n\n- Popovers can be shown on hover or click, can contain any HTML content, and are persistent. \n\n- Hints are static elements that appear inline with other content on a page.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n| You want to provide a short (no more than 1-2 lines) explanation of new or unfamiliar UI elements as a simple text string that is only shown “on-demand.” |Tooltip|\n| You want to include formatted text and/or interactive elements in your message body. | Hint or popover |\n| You want the information to persist until the user dismisses it. | Hint or popover |\n|You want the information to be announced by a screen reader whenever the user tabs to an element.| Hint, popover, or tooltip <br /><br /> **Note:** By default, popovers are only triggered when the user clicks on an element. Therefore screen readers will not read popover text when tabbing through an interface. If a popover is triggered on hover (optional behavior), it will behave like a tooltip and its content will be announced whenever a keyboard user tabs to the trigger element. |\n|You want to present additional information that might not be necessary or relevant to all users.| Hint or popover <br /><br /> **Note:** Hints can be used to convey information to advanced users (such as “pro-tips”). However, since a hint adds static content to a page, you should consider whether it’s important for this information to be shown at all times.|\n\n## Progressive disclosure\nProgressive disclosure is the practice of showing and hiding information as needed, in order to simplify a user interface. To progressively disclose content, we recommend using the **[accordion](/components/accordion)**, **[expandable sections](/components/expandable-section)**, and **[expandable field groups](/components/forms/form/#field-groups)**.\n\n- Accordions allow content to be placed in stackable, expandable containers so that content can be hidden from view to simplify presentation and reduce the need for scrolling.\n\n- Expandable sections allow designers to hide a single block of content or settings behind a show/hide link. \n\n- Expandable field groups allow designers to group form elements into expandable containers.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n| ------------------------ | ----------- |\n| You want to group a list of actions, links, or other data into expandable groups. | Accordion |\n|You want to hide advanced or seldomly used options within a form.| Expandable section or field group |\n|You want to give the user the ability to show or hide chunks of information on a long scrolling page.| Expandable section |\n\n## Inputting data within forms\nData input controls allow users to input information into a form. Input may be bound or unbound. Bound input controls only allow users to input data within a defined range, such as the **[slider](/components/slider)** and **[number input](/components/number-input)** components. Unbound controls do not enforce constraints, such as the **[text input](/components/forms/text-input)** and **[text area](/components/forms/text-area)** components.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to enter text from the keyboard. Possible values are alpha-numeric, unconstrained, or dependent on context.| Text area or text input <br /><br /> **Note:** If data will always be constrained to a single line, use a text input. Use a text area component for multi-line input.|\n|You want to constrain the input of numeric data to a specified range.|Number input, slider, text input, or text area <br /><br /> **Note:** You can use a standard text input for this use case and validate the entered value, but using a number input or slider will be a more direct way to constrain the values that a user can input. |\n|You want to optimize numeric data entry for direct manipulation by touch or using the mouse over the keyboard.|Number input or slider|\n|It’s useful for users to visualize where numeric input falls within the range of possible values.| Slider |\n\n## Selecting between options on a form\nThere are a few components that you can use to allow users to select form options. Depending on the nature of options being presented, we recommend using the **[checkbox](/components/forms/checkbox)**, **[radio](/components/forms/radio)**, or **[switch](/components/switch)** components. \n\n- Checkboxes allow users to select one or more items from a list of options. \n\n- Radio buttons allow users to select from a set of mutually exclusive options.\n\n- Switches indicate the state of a binary setting or object (such as on/off, enabled/disabled).\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|The user wants to select one or more items from a list of items. | Checkbox or switch <br /><br /> **Note:** Switches are sometimes used in place of checkboxes because they provide a larger touch target than a checkbox, which improves the mobile experience. |\n| The user wants to select from a set of mutually exclusive options.| Radio |\n|The user wants to enable an option or feature.| Checkbox, radio, or switch <br /><br /> **Note:** Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. <br /><br /> **Note:** You can use 2 radio buttons to allow users to choose between options like on/off or enabled/disabled, however this approach uses more space and is only recommended when it’s important to make both labeled options visible at the same time.|\n\n## Displaying progress\nIt’s important to display progress for action that will take more than a few seconds to complete. Use the **[progress](/components/progress)** component to show users the percentage of completion for a process or task. Use the **[spinner](/components/spinner)** and **[skeleton](/components/skeleton)** components to just simply indicate activity while the user is waiting for an action to complete.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n| The user is waiting for a process to complete, but the time left until completion is not known.| Spinner |\n|The user is waiting for a process to complete, but the time left until completion is known.| Progress or spinner <br /><br /> **Note:** A progress component is the preferred recommendation when it is possible to estimate the time to completion or the percentage of the task that is done.|\n| The user is progressing through a step-by-step task and you want to reflect where they are in the process.| Progress |\n|The user is waiting for a page to load.| Progress, skeleton, or spinner <br /><br /> **Note:** Progress bars are not typically used during page loading, but could be used with the skeleton component if you want to provide the user with more information about time to completion. <br /><br /> **Note:** Spinners may be used to provide feedback on page loading when the details of the data are not known. |\n\n## Displaying object details in context\nIt is often necessary to display more details about an object listed in a summary view, such as a list or a table. This can be accomplished by drilling-down into a new page or presenting contextual details on the same page. To take these approaches, we recommend using the **[data list](/components/data-list)**, **[drawer](/components/drawer)**, **[table](/components/table)**, and **[popovers](/components/popover)** components.\n\n- Data lists and tables support expandable rows for displaying object details directly in the list or table. \n\n- Drawers can be used to create a side-by-side primary-detail view. \n\n- Popovers can be used to display details about an object in a list or table.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to view details of multiple objects at the same time for comparison.| Data list or expandable table row |\n|Your detailed data is best presented in a horizontal format.| Data list, drawer, expandable table row, or popover <br /><br /> **Note:** Drawers can be attached to either the left, right, or bottom edge of the parent container. To present horizontal data, use a bottom/horizontal drawer to create a top-bottom primary-detail view.|\n|Your detailed data is best presented in a vertical format.| Drawer or popover|\n|You have only a small amount of detailed data to show.|Data list, drawer, expandable table row, or popover <br /><br /> **Note:** Row expansions and drawers can accommodate any amount of information. Showing a small amount of data within a row expansion or drawer may waste space because each presentation type will consume the full width or height of its parent container. Popovers will adjust to the size and shape of their contents.|\n|You don’t want to cover other information while displaying details.|Data list, drawer, or expandable table row <br /><br /> **Note:** Both inline and overlay drawers are available. If you don’t want to cover content on a page, we recommend the [inline drawer](/components/drawer#basic-inline) variation. |\n\n## Dropdown menus for actions and selections\nTo allow users to select between items in a menu, we recommend using the **[select](/components/menus/select)**, **[options](/components/menus/options-menu)**, or **[dropdown](/components/menus/dropdown)** menu components.\n\n- Select menus allow users to select one or more values from a list. \n\n- Options menus are similar to a select, but are more appropriate when users make selections from optional settings. \n\n- Dropdown menus allow you to expose a list of possible actions.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to select a value or multiple values from a list.| Select |\n|You want to select filter terms from a list.| Select |\n|You want to make the selected value visible when the menu is closed.| Select |\n|You want to select options from one or more lists (sorting options, for example).| Options menu |\n|You want to expose a list of commands or actions in a limited space.| Dropdown |"],"filePath":[0,"textContent/usage-and-behavior.md"],"digest":[0,"07b6d2071e94e4bf"],"rendered":[0,{"html":[0,"<h1 id=\"patternfly-component-usage-and-behavior-guidelines\">PatternFly component usage and behavior guidelines</h1>\n<p>As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.</p>\n<h2 id=\"displaying-structured-data\">Displaying structured data</h2>\n<p>Structured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the <strong><a href=\"/components/data-list\">data list</a></strong> and the <strong><a href=\"/components/table\">table</a></strong> components.</p>\n<ul>\n<li>\n<p>Tables are built from a standard tabular structure of rows and columns.</p>\n</li>\n<li>\n<p>Data lists support any valid HTML layout inside of a row, which enables more formatting flexibility.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to display data in a grid with column headings.</td><td>Table</td></tr><tr><td>Data does not easily fit into a grid or you want multiple lines of data in a row.</td><td>Data list</td></tr><tr><td>You want to display non-text information like images or charts.</td><td>Data list or table <br><br> <strong>Note:</strong> Tables support graphics within cells, but this approach is only recommended for use with small graphics.</td></tr><tr><td>All rows don’t have the same format.</td><td>Data list</td></tr></tbody></table>\n<h2 id=\"providing-contextual-help-on-a-page\">Providing contextual help on a page</h2>\n<p>Contextual help includes any on-screen elements intended to guide the user towards additional information that will help them complete a task. To display this type of content, we recommend using the <strong><a href=\"/components/tooltip\">tooltip</a></strong>, <strong><a href=\"/components/popover\">popover</a></strong>, and <strong><a href=\"/components/hint\">hint</a></strong> components.</p>\n<ul>\n<li>\n<p>Tooltips are shown when users hover over an element.</p>\n</li>\n<li>\n<p>Popovers can be shown on hover or click, can contain any HTML content, and are persistent.</p>\n</li>\n<li>\n<p>Hints are static elements that appear inline with other content on a page.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to provide a short (no more than 1-2 lines) explanation of new or unfamiliar UI elements as a simple text string that is only shown “on-demand.”</td><td>Tooltip</td></tr><tr><td>You want to include formatted text and/or interactive elements in your message body.</td><td>Hint or popover</td></tr><tr><td>You want the information to persist until the user dismisses it.</td><td>Hint or popover</td></tr><tr><td>You want the information to be announced by a screen reader whenever the user tabs to an element.</td><td>Hint, popover, or tooltip <br><br> <strong>Note:</strong> By default, popovers are only triggered when the user clicks on an element. Therefore screen readers will not read popover text when tabbing through an interface. If a popover is triggered on hover (optional behavior), it will behave like a tooltip and its content will be announced whenever a keyboard user tabs to the trigger element.</td></tr><tr><td>You want to present additional information that might not be necessary or relevant to all users.</td><td>Hint or popover <br><br> <strong>Note:</strong> Hints can be used to convey information to advanced users (such as “pro-tips”). However, since a hint adds static content to a page, you should consider whether it’s important for this information to be shown at all times.</td></tr></tbody></table>\n<h2 id=\"progressive-disclosure\">Progressive disclosure</h2>\n<p>Progressive disclosure is the practice of showing and hiding information as needed, in order to simplify a user interface. To progressively disclose content, we recommend using the <strong><a href=\"/components/accordion\">accordion</a></strong>, <strong><a href=\"/components/expandable-section\">expandable sections</a></strong>, and <strong><a href=\"/components/forms/form/#field-groups\">expandable field groups</a></strong>.</p>\n<ul>\n<li>\n<p>Accordions allow content to be placed in stackable, expandable containers so that content can be hidden from view to simplify presentation and reduce the need for scrolling.</p>\n</li>\n<li>\n<p>Expandable sections allow designers to hide a single block of content or settings behind a show/hide link.</p>\n</li>\n<li>\n<p>Expandable field groups allow designers to group form elements into expandable containers.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to group a list of actions, links, or other data into expandable groups.</td><td>Accordion</td></tr><tr><td>You want to hide advanced or seldomly used options within a form.</td><td>Expandable section or field group</td></tr><tr><td>You want to give the user the ability to show or hide chunks of information on a long scrolling page.</td><td>Expandable section</td></tr></tbody></table>\n<h2 id=\"inputting-data-within-forms\">Inputting data within forms</h2>\n<p>Data input controls allow users to input information into a form. Input may be bound or unbound. Bound input controls only allow users to input data within a defined range, such as the <strong><a href=\"/components/slider\">slider</a></strong> and <strong><a href=\"/components/number-input\">number input</a></strong> components. Unbound controls do not enforce constraints, such as the <strong><a href=\"/components/forms/text-input\">text input</a></strong> and <strong><a href=\"/components/forms/text-area\">text area</a></strong> components.</p>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to enter text from the keyboard. Possible values are alpha-numeric, unconstrained, or dependent on context.</td><td>Text area or text input <br><br> <strong>Note:</strong> If data will always be constrained to a single line, use a text input. Use a text area component for multi-line input.</td></tr><tr><td>You want to constrain the input of numeric data to a specified range.</td><td>Number input, slider, text input, or text area <br><br> <strong>Note:</strong> You can use a standard text input for this use case and validate the entered value, but using a number input or slider will be a more direct way to constrain the values that a user can input.</td></tr><tr><td>You want to optimize numeric data entry for direct manipulation by touch or using the mouse over the keyboard.</td><td>Number input or slider</td></tr><tr><td>It’s useful for users to visualize where numeric input falls within the range of possible values.</td><td>Slider</td></tr></tbody></table>\n<h2 id=\"selecting-between-options-on-a-form\">Selecting between options on a form</h2>\n<p>There are a few components that you can use to allow users to select form options. Depending on the nature of options being presented, we recommend using the <strong><a href=\"/components/forms/checkbox\">checkbox</a></strong>, <strong><a href=\"/components/forms/radio\">radio</a></strong>, or <strong><a href=\"/components/switch\">switch</a></strong> components.</p>\n<ul>\n<li>\n<p>Checkboxes allow users to select one or more items from a list of options.</p>\n</li>\n<li>\n<p>Radio buttons allow users to select from a set of mutually exclusive options.</p>\n</li>\n<li>\n<p>Switches indicate the state of a binary setting or object (such as on/off, enabled/disabled).</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>The user wants to select one or more items from a list of items.</td><td>Checkbox or switch <br><br> <strong>Note:</strong> Switches are sometimes used in place of checkboxes because they provide a larger touch target than a checkbox, which improves the mobile experience.</td></tr><tr><td>The user wants to select from a set of mutually exclusive options.</td><td>Radio</td></tr><tr><td>The user wants to enable an option or feature.</td><td>Checkbox, radio, or switch <br><br> <strong>Note:</strong> Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. <br><br> <strong>Note:</strong> You can use 2 radio buttons to allow users to choose between options like on/off or enabled/disabled, however this approach uses more space and is only recommended when it’s important to make both labeled options visible at the same time.</td></tr></tbody></table>\n<h2 id=\"displaying-progress\">Displaying progress</h2>\n<p>It’s important to display progress for action that will take more than a few seconds to complete. Use the <strong><a href=\"/components/progress\">progress</a></strong> component to show users the percentage of completion for a process or task. Use the <strong><a href=\"/components/spinner\">spinner</a></strong> and <strong><a href=\"/components/skeleton\">skeleton</a></strong> components to just simply indicate activity while the user is waiting for an action to complete.</p>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>The user is waiting for a process to complete, but the time left until completion is not known.</td><td>Spinner</td></tr><tr><td>The user is waiting for a process to complete, but the time left until completion is known.</td><td>Progress or spinner <br><br> <strong>Note:</strong> A progress component is the preferred recommendation when it is possible to estimate the time to completion or the percentage of the task that is done.</td></tr><tr><td>The user is progressing through a step-by-step task and you want to reflect where they are in the process.</td><td>Progress</td></tr><tr><td>The user is waiting for a page to load.</td><td>Progress, skeleton, or spinner <br><br> <strong>Note:</strong> Progress bars are not typically used during page loading, but could be used with the skeleton component if you want to provide the user with more information about time to completion. <br><br> <strong>Note:</strong> Spinners may be used to provide feedback on page loading when the details of the data are not known.</td></tr></tbody></table>\n<h2 id=\"displaying-object-details-in-context\">Displaying object details in context</h2>\n<p>It is often necessary to display more details about an object listed in a summary view, such as a list or a table. This can be accomplished by drilling-down into a new page or presenting contextual details on the same page. To take these approaches, we recommend using the <strong><a href=\"/components/data-list\">data list</a></strong>, <strong><a href=\"/components/drawer\">drawer</a></strong>, <strong><a href=\"/components/table\">table</a></strong>, and <strong><a href=\"/components/popover\">popovers</a></strong> components.</p>\n<ul>\n<li>\n<p>Data lists and tables support expandable rows for displaying object details directly in the list or table.</p>\n</li>\n<li>\n<p>Drawers can be used to create a side-by-side primary-detail view.</p>\n</li>\n<li>\n<p>Popovers can be used to display details about an object in a list or table.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to view details of multiple objects at the same time for comparison.</td><td>Data list or expandable table row</td></tr><tr><td>Your detailed data is best presented in a horizontal format.</td><td>Data list, drawer, expandable table row, or popover <br><br> <strong>Note:</strong> Drawers can be attached to either the left, right, or bottom edge of the parent container. To present horizontal data, use a bottom/horizontal drawer to create a top-bottom primary-detail view.</td></tr><tr><td>Your detailed data is best presented in a vertical format.</td><td>Drawer or popover</td></tr><tr><td>You have only a small amount of detailed data to show.</td><td>Data list, drawer, expandable table row, or popover <br><br> <strong>Note:</strong> Row expansions and drawers can accommodate any amount of information. Showing a small amount of data within a row expansion or drawer may waste space because each presentation type will consume the full width or height of its parent container. Popovers will adjust to the size and shape of their contents.</td></tr><tr><td>You don’t want to cover other information while displaying details.</td><td>Data list, drawer, or expandable table row <br><br> <strong>Note:</strong> Both inline and overlay drawers are available. If you don’t want to cover content on a page, we recommend the <a href=\"/components/drawer#basic-inline\">inline drawer</a> variation.</td></tr></tbody></table>\n<h2 id=\"dropdown-menus-for-actions-and-selections\">Dropdown menus for actions and selections</h2>\n<p>To allow users to select between items in a menu, we recommend using the <strong><a href=\"/components/menus/select\">select</a></strong>, <strong><a href=\"/components/menus/options-menu\">options</a></strong>, or <strong><a href=\"/components/menus/dropdown\">dropdown</a></strong> menu components.</p>\n<ul>\n<li>\n<p>Select menus allow users to select one or more values from a list.</p>\n</li>\n<li>\n<p>Options menus are similar to a select, but are more appropriate when users make selections from optional settings.</p>\n</li>\n<li>\n<p>Dropdown menus allow you to expose a list of possible actions.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,1],"slug":[0,"patternfly-component-usage-and-behavior-guidelines"],"text":[0,"PatternFly component usage and behavior guidelines"]}],[0,{"depth":[0,2],"slug":[0,"displaying-structured-data"],"text":[0,"Displaying structured data"]}],[0,{"depth":[0,2],"slug":[0,"providing-contextual-help-on-a-page"],"text":[0,"Providing contextual help on a page"]}],[0,{"depth":[0,2],"slug":[0,"progressive-disclosure"],"text":[0,"Progressive disclosure"]}],[0,{"depth":[0,2],"slug":[0,"inputting-data-within-forms"],"text":[0,"Inputting data within forms"]}],[0,{"depth":[0,2],"slug":[0,"selecting-between-options-on-a-form"],"text":[0,"Selecting between options on a form"]}],[0,{"depth":[0,2],"slug":[0,"displaying-progress"],"text":[0,"Displaying progress"]}],[0,{"depth":[0,2],"slug":[0,"displaying-object-details-in-context"],"text":[0,"Displaying object details in context"]}],[0,{"depth":[0,2],"slug":[0,"dropdown-menus-for-actions-and-selections"],"text":[0,"Dropdown menus for actions and selections"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-2"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-2"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <div data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-8" data-pf-content="true" class="pf-v6-c-content"> Page content </div> </div></section> </main> </div> </div> <script type="module">const t=window.localStorage.getItem("theme-preference");document?.querySelector("html")?.classList.toggle("pf-v6-theme-dark",t==="dark");document.addEventListener("astro:after-swap",()=>{const e=window.localStorage.getItem("theme-preference");document?.querySelector("html")?.classList.toggle("pf-v6-theme-dark",e==="dark")});</script></body></html> </body></html>
|
|
42
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-3"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.4.1"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js"></script></head> <body> <div class="pf-v6-c-page"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z2dhSf7" prefix="r0" component-url="/_astro/PageToggle.Dmw_iWsV.js" component-export="PageToggle" renderer-url="/_astro/client.CeeiqVaE.js" props="{}" ssr client="idle" opts="{"name":"PageToggle","value":true}" await-children><button id="nav-toggle" aria-expanded="true" aria-disabled="false" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-10"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="1TDdq0" prefix="r2" component-url="/_astro/Toolbar.4NX38I90.js" component-export="Toolbar" renderer-url="/_astro/client.CeeiqVaE.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-4"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-disabled="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-11"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-disabled="false" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-12"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-4"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="Z1fp3F5" component-url="/_astro/Navigation.B9EZ0uZW.js" component-export="Navigation" renderer-url="/_astro/client.CeeiqVaE.js" props="{"navEntries":[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"title":[0,"Contribute to PatternFly"]}],"body":[0,"## Community contributions \n\nThank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren't limited to): \n- New feature ideas. \n- Bug reports.\n- Documentation updates.\n\nThis guide outlines the ways that you can contribute to PatternFly's design, code, and documentation to help us stay on top of the latest and greatest solutions.\n\nIf you have any ideas that don't fit into the projects outlined in this guide, please [reach out to us on Slack](https://patternfly.slack.com/archives/C293LQ36J).\n\n## Design\n\nIf you have skills in visual and interaction design, you can contribute to PatternFly's design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, [reach out on the patternfly-design Slack channel.](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ)\n\n### Existing design issues \n\nThe PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via [this GitHub project board.](https://github.com/orgs/patternfly/projects/7/views/30) This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you'd like to work on, leave a comment on the issue and a member of our team will reach out with next steps.\n\n### New feature or enhancement\nIf you have an idea for a new design pattern, a new component type, or an existing feature improvement, we'd love to hear it. [Start by opening an issue in the patternfly-design repository.](https://github.com/patternfly/patternfly-design/issues) From there, a member of our team will reach out and work with you to plan and design a solution.\n\n### New icons\nWe encourage designers to work with [the existing PatternFly icon set](/design-foundations/icons), which covers most common use cases. If your use case isn't covered, you can propose a new icon.\n\nTo contribute a new icon, [start by opening an issue in the patternfly-design repository](https://github.com/patternfly/patternfly-design/issues) that describes your idea and why it's needed. A member of our team will reach out to you to discuss next steps.\n\n## Code\n\nThe primary PatternFly libraries include HTML/CSS (commonly called \"core\") and React. If you're looking to contribute to PatternFly's codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes. \n\nIf you have any questions about these projects, you can reach out to us on our [patternfly-core](https://patternfly.slack.com/archives/C9Q224EFL) and [patternfly-react](https://patternfly.slack.com/archives/C4FM977N0) Slack channels.\n\n### Existing development issues \n\nTo find work that has been approved, but not started, you can view open issues in our [patternfly](https://github.com/patternfly/patternfly/issues) (HTML/CSS) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) (React) repositories. If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. \n\nBe sure to view our detailed contribution instructions for both of these repositories:\n- [Core contribution guidelines](https://github.com/patternfly/patternfly#guidelines-for-css-development)\n- [React contribution guidelines](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process)\n\n### Bug reports\n\nIf you believe that you've come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:\n\n1. View the documentation for the feature, to confirm that the behavior is not functioning as intended. \n1. Search open issues in the [patternfly](https://github.com/patternfly/patternfly/issues) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) repositories to see if a related issue already exists.\n - If the bug is present in only the React implementation of PatternFly, [create a bug issue in patternfly-react.](https://github.com/patternfly/patternfly-react/issues)\n - If the bug can be seen on both the React and HTML/CSS side, [create a bug issue in patternfly](https://github.com/patternfly/patternfly/issues).\n1. Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.\n\n## Documentation \n\nAcross our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it.\n\nIf you'd like to contribute to documentation, you can refer to our [detailed contribution instructions](https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers) for additional guidance.\n\n### Existing documentation issues\n\nOur website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org). If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. \n\n### Design guidelines\nOur design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions.\n\nIf you'd like to contribute to our design guidelines, you can open an issue in [patternfly-org](https://github.com/patternfly/patternfly-org) to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content."],"filePath":[0,"textContent/contribute.md"],"digest":[0,"858dc569bfcdc59d"],"rendered":[0,{"html":[0,"<h2 id=\"community-contributions\">Community contributions</h2>\n<p>Thank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren’t limited to):</p>\n<ul>\n<li>New feature ideas.</li>\n<li>Bug reports.</li>\n<li>Documentation updates.</li>\n</ul>\n<p>This guide outlines the ways that you can contribute to PatternFly’s design, code, and documentation to help us stay on top of the latest and greatest solutions.</p>\n<p>If you have any ideas that don’t fit into the projects outlined in this guide, please <a href=\"https://patternfly.slack.com/archives/C293LQ36J\">reach out to us on Slack</a>.</p>\n<h2 id=\"design\">Design</h2>\n<p>If you have skills in visual and interaction design, you can contribute to PatternFly’s design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, <a href=\"http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ\">reach out on the patternfly-design Slack channel.</a></p>\n<h3 id=\"existing-design-issues\">Existing design issues</h3>\n<p>The PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via <a href=\"https://github.com/orgs/patternfly/projects/7/views/30\">this GitHub project board.</a> This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you’d like to work on, leave a comment on the issue and a member of our team will reach out with next steps.</p>\n<h3 id=\"new-feature-or-enhancement\">New feature or enhancement</h3>\n<p>If you have an idea for a new design pattern, a new component type, or an existing feature improvement, we’d love to hear it. <a href=\"https://github.com/patternfly/patternfly-design/issues\">Start by opening an issue in the patternfly-design repository.</a> From there, a member of our team will reach out and work with you to plan and design a solution.</p>\n<h3 id=\"new-icons\">New icons</h3>\n<p>We encourage designers to work with <a href=\"/design-foundations/icons\">the existing PatternFly icon set</a>, which covers most common use cases. If your use case isn’t covered, you can propose a new icon.</p>\n<p>To contribute a new icon, <a href=\"https://github.com/patternfly/patternfly-design/issues\">start by opening an issue in the patternfly-design repository</a> that describes your idea and why it’s needed. A member of our team will reach out to you to discuss next steps.</p>\n<h2 id=\"code\">Code</h2>\n<p>The primary PatternFly libraries include HTML/CSS (commonly called “core”) and React. If you’re looking to contribute to PatternFly’s codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes.</p>\n<p>If you have any questions about these projects, you can reach out to us on our <a href=\"https://patternfly.slack.com/archives/C9Q224EFL\">patternfly-core</a> and <a href=\"https://patternfly.slack.com/archives/C4FM977N0\">patternfly-react</a> Slack channels.</p>\n<h3 id=\"existing-development-issues\">Existing development issues</h3>\n<p>To find work that has been approved, but not started, you can view open issues in our <a href=\"https://github.com/patternfly/patternfly/issues\">patternfly</a> (HTML/CSS) and <a href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react</a> (React) repositories. If you find an issue that you’d like to work on, leave a comment and someone from our team will reach out to you with next steps.</p>\n<p>Be sure to view our detailed contribution instructions for both of these repositories:</p>\n<ul>\n<li><a href=\"https://github.com/patternfly/patternfly#guidelines-for-css-development\">Core contribution guidelines</a></li>\n<li><a href=\"https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process\">React contribution guidelines</a></li>\n</ul>\n<h3 id=\"bug-reports\">Bug reports</h3>\n<p>If you believe that you’ve come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps:</p>\n<ol>\n<li>View the documentation for the feature, to confirm that the behavior is not functioning as intended.</li>\n<li>Search open issues in the <a href=\"https://github.com/patternfly/patternfly/issues\">patternfly</a> and <a href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react</a> repositories to see if a related issue already exists.\n<ul>\n<li>If the bug is present in only the React implementation of PatternFly, <a href=\"https://github.com/patternfly/patternfly-react/issues\">create a bug issue in patternfly-react.</a></li>\n<li>If the bug can be seen on both the React and HTML/CSS side, <a href=\"https://github.com/patternfly/patternfly/issues\">create a bug issue in patternfly</a>.</li>\n</ul>\n</li>\n<li>Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.</li>\n</ol>\n<h2 id=\"documentation\">Documentation</h2>\n<p>Across our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it.</p>\n<p>If you’d like to contribute to documentation, you can refer to our <a href=\"https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers\">detailed contribution instructions</a> for additional guidance.</p>\n<h3 id=\"existing-documentation-issues\">Existing documentation issues</h3>\n<p>Our website documentation is contained in the <a href=\"https://github.com/patternfly/patternfly-org\">patternfly-org repository</a>. If you find an issue that you’d like to work on, leave a comment and someone from our team will reach out to you with next steps.</p>\n<h3 id=\"design-guidelines\">Design guidelines</h3>\n<p>Our design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions.</p>\n<p>If you’d like to contribute to our design guidelines, you can open an issue in <a href=\"https://github.com/patternfly/patternfly-org\">patternfly-org</a> to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content.</p>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"community-contributions"],"text":[0,"Community contributions"]}],[0,{"depth":[0,2],"slug":[0,"design"],"text":[0,"Design"]}],[0,{"depth":[0,3],"slug":[0,"existing-design-issues"],"text":[0,"Existing design issues"]}],[0,{"depth":[0,3],"slug":[0,"new-feature-or-enhancement"],"text":[0,"New feature or enhancement"]}],[0,{"depth":[0,3],"slug":[0,"new-icons"],"text":[0,"New icons"]}],[0,{"depth":[0,2],"slug":[0,"code"],"text":[0,"Code"]}],[0,{"depth":[0,3],"slug":[0,"existing-development-issues"],"text":[0,"Existing development issues"]}],[0,{"depth":[0,3],"slug":[0,"bug-reports"],"text":[0,"Bug reports"]}],[0,{"depth":[0,2],"slug":[0,"documentation"],"text":[0,"Documentation"]}],[0,{"depth":[0,3],"slug":[0,"existing-documentation-issues"],"text":[0,"Existing documentation issues"]}],[0,{"depth":[0,3],"slug":[0,"design-guidelines"],"text":[0,"Design guidelines"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Contribute"],"title":[0,"Contribute to PatternFly"],"section":[0,"get-started"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}],[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"]}],"body":[0,"You can use **typography** to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.\n\nThis page outlines PatternFly's typography principles and standards, including token values and usage information.\n\nYou can place text content on a page using the content or title component: \n- **[Content component:](/components/content)** Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.\n- **[Title component:](/components/title)** Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.\n\n## PatternFly fonts\n\nWe use 3 fonts in PatternFly:\n- **Red Hat Display:** Used for larger text, such as headings.\n- **Red Hat Text:** Used for smaller text, subheadings, and body text. More readable for long-form text. \n- **Red Hat Mono:** A tabular font used to format text as code. [Read more about our use of tabular font styling.](#tabular-font-styling)\n\n[Download PatternFly's fonts from GitHub.](https://github.com/RedHatOfficial/RedHatFont)\n\n### Font sizing: rem vs pixel\n\nFont size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.\n\nPatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same). \n\n## Headings \n\nAll headings use Red Hat Display bold.\n\n| Example | Tokens | Size | Line height | Usage | \n| --- | --- | --- | --- | --- |\n| <Title headingLevel=\"h5\" size='2xl'> Aa </Title> | --pf-t--global--font--size--heading--h1 | 1.375rem (22px) | 1.3 | Super hero headings <br /> H1 <br /> Page titles |\n| <Title headingLevel=\"h5\" size='xl'> Aa </Title> | --pf-t--global--font--size--heading--h2 | 1.25rem (20px) | 1.3 | Hero headings <br /> H2 |\n| <Title headingLevel=\"h5\" size='lg'> Aa </Title> | --pf-t--global--font--size--heading--h3 | 1.125rem (18px) | 1.3 | H3 |\n| <Title headingLevel=\"h5\" size='md'> Aa </Title> | --pf-t--global--font--size--heading--h4 <br /> --pf-t--global--font--size--heading--h5 <br /> --pf-t--global--font--size--heading--h6 |1rem (16px) | 1.3 | H4 <br /> H5 <br /> H6 |\n\n### Customizing heading levels\nThe [title component](/components/title) allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility. \n\nThe following table shows the default mapping of PatternFly heading levels to text size:\n\n| Heading level | Default size |\n|----|-----------|\n| H1 | 2xl (1.375rem, 22px)|\n| H2 | xl (1.25rem, 20px) |\n| H3 | lg (1.125rem, 18px) |\n| H4 | md (1 rem, 16px) |\n| H5 | md (1 rem, 16px) |\n| H6 | md (1 rem, 16px) |\n\nIf you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.\n\nFor example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the `size` property from `xl` to `lg`. \n\nExample: \n\n<Title headingLevel=\"h2\"> This is a default \"xl\" H2. </Title>\n```<Title headingLevel=\"h2\" size='lg'> Aa </Title>```\n\n<Title headingLevel=\"h2\" size='lg'> This is a customized \"lg\" H2. </Title>\n```<Title headingLevel=\"h2\" size='lg'> Aa </Title>```\n\nMake sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title. \n\nRefer to the [title component examples](/components/title#custom-sizes) to understand the range of customization options.\n\n## Body text\n\nAll body text uses Red Hat Text.\n\n| Example | Tokens | Size | Line height | Usage | \n| --- | --- | --- | --- | --- |\n|<p style=\"font-size:16px\">Aa</p> | --pf-t--global--font--size--body--lg | 1rem (16px) | 1.5 | Use for larger body text, like in xl empty states. |\n| <Content><Content component={ContentVariants.p}>Aa</Content></Content> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |\n| <Content><Content component={ContentVariants.small}>Aa</Content></Content> | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |\n\n## Tabular font styling \n\nThe primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font. \n\nSometimes, numerals benefit from the use of a tabular font instead. **Tabular fonts** apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement. \n\nTabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: `.pf-v6-m-tabular-nums`, which sets `font-variant-numeric: tabular-nums;`\n\n## Line height and spacing\nThe line height of your text impacts how you should use [spacers](/design-foundations/spacers) in your design. \n\nYour overall line height can be calculated by multiplying the font's built-in line height by the text size. \n\nFor example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs. \n\n"],"filePath":[0,"textContent/typography.md"],"digest":[0,"df42bf1c9e9a76d9"],"rendered":[0,{"html":[0,"<p>You can use <strong>typography</strong> to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.</p>\n<p>This page outlines PatternFly’s typography principles and standards, including token values and usage information.</p>\n<p>You can place text content on a page using the content or title component:</p>\n<ul>\n<li><strong><a href=\"/components/content\">Content component:</a></strong> Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.</li>\n<li><strong><a href=\"/components/title\">Title component:</a></strong> Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.</li>\n</ul>\n<h2 id=\"patternfly-fonts\">PatternFly fonts</h2>\n<p>We use 3 fonts in PatternFly:</p>\n<ul>\n<li><strong>Red Hat Display:</strong> Used for larger text, such as headings.</li>\n<li><strong>Red Hat Text:</strong> Used for smaller text, subheadings, and body text. More readable for long-form text.</li>\n<li><strong>Red Hat Mono:</strong> A tabular font used to format text as code. <a href=\"#tabular-font-styling\">Read more about our use of tabular font styling.</a></li>\n</ul>\n<p><a href=\"https://github.com/RedHatOfficial/RedHatFont\">Download PatternFly’s fonts from GitHub.</a></p>\n<h3 id=\"font-sizing-rem-vs-pixel\">Font sizing: rem vs pixel</h3>\n<p>Font size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage’s HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.</p>\n<p>PatternFly’s default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same).</p>\n<h2 id=\"headings\">Headings</h2>\n<p>All headings use Red Hat Display bold.</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><title headinglevel=\"h5\" size=\"2xl\"> Aa </title></td><td>—pf-t—global—font—size—heading—h1</td><td>1.375rem (22px)</td><td>1.3</td><td>Super hero headings <br> H1 <br> Page titles</td></tr><tr><td><title headinglevel=\"h5\" size=\"xl\"> Aa </title></td><td>—pf-t—global—font—size—heading—h2</td><td>1.25rem (20px)</td><td>1.3</td><td>Hero headings <br> H2</td></tr><tr><td><title headinglevel=\"h5\" size=\"lg\"> Aa </title></td><td>—pf-t—global—font—size—heading—h3</td><td>1.125rem (18px)</td><td>1.3</td><td>H3</td></tr><tr><td><title headinglevel=\"h5\" size=\"md\"> Aa </title></td><td>—pf-t—global—font—size—heading—h4 <br> —pf-t—global—font—size—heading—h5 <br> —pf-t—global—font—size—heading—h6</td><td>1rem (16px)</td><td>1.3</td><td>H4 <br> H5 <br> H6</td></tr></tbody></table>\n<h3 id=\"customizing-heading-levels\">Customizing heading levels</h3>\n<p>The <a href=\"/components/title\">title component</a> allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.</p>\n<p>The following table shows the default mapping of PatternFly heading levels to text size:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Heading level</th><th>Default size</th></tr></thead><tbody><tr><td>H1</td><td>2xl (1.375rem, 22px)</td></tr><tr><td>H2</td><td>xl (1.25rem, 20px)</td></tr><tr><td>H3</td><td>lg (1.125rem, 18px)</td></tr><tr><td>H4</td><td>md (1 rem, 16px)</td></tr><tr><td>H5</td><td>md (1 rem, 16px)</td></tr><tr><td>H6</td><td>md (1 rem, 16px)</td></tr></tbody></table>\n<p>If you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.</p>\n<p>For example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the <code>size</code> property from <code>xl</code> to <code>lg</code>.</p>\n<p>Example:</p>\n<title headinglevel=\"h2\"> This is a default \"xl\" H2. </title>\n```<title headinglevel=\"h2\" size=\"lg\"> Aa </title>```\n<title headinglevel=\"h2\" size=\"lg\"> This is a customized \"lg\" H2. </title>\n```<title headinglevel=\"h2\" size=\"lg\"> Aa </title>```\n<p>Make sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title.</p>\n<p>Refer to the <a href=\"/components/title#custom-sizes\">title component examples</a> to understand the range of customization options.</p>\n<h2 id=\"body-text\">Body text</h2>\n<p>All body text uses Red Hat Text.</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><p style=\"font-size:16px\">Aa</p></td><td>—pf-t—global—font—size—body—lg</td><td>1rem (16px)</td><td>1.5</td><td>Use for larger body text, like in xl empty states.</td></tr><tr><td><content><content component=\"{ContentVariants.p}\">Aa</content></content></td><td>—pf-t—global—font—size—body—default</td><td>0.875rem (14px)</td><td>1.5</td><td>Use for standard body text.</td></tr><tr><td><content><content component=\"{ContentVariants.small}\">Aa</content></content></td><td>—pf-t—global—font—size—body—sm</td><td>0.75rem (12px)</td><td>1.5</td><td>User for smaller body text, like helper text.</td></tr></tbody></table>\n<h2 id=\"tabular-font-styling\">Tabular font styling</h2>\n<p>The primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font.</p>\n<p>Sometimes, numerals benefit from the use of a tabular font instead. <strong>Tabular fonts</strong> apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement.</p>\n<p>Tabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: <code>.pf-v6-m-tabular-nums</code>, which sets <code>font-variant-numeric: tabular-nums;</code></p>\n<h2 id=\"line-height-and-spacing\">Line height and spacing</h2>\n<p>The line height of your text impacts how you should use <a href=\"/design-foundations/spacers\">spacers</a> in your design.</p>\n<p>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.</p>\n<p>For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.</p>\n<p><img src=\"/content/typography/line-height.png\" alt=\"Correct and incorrect text spacing examples.\"></p>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"patternfly-fonts"],"text":[0,"PatternFly fonts"]}],[0,{"depth":[0,3],"slug":[0,"font-sizing-rem-vs-pixel"],"text":[0,"Font sizing: rem vs pixel"]}],[0,{"depth":[0,2],"slug":[0,"headings"],"text":[0,"Headings"]}],[0,{"depth":[0,3],"slug":[0,"customizing-heading-levels"],"text":[0,"Customizing heading levels"]}],[0,{"depth":[0,2],"slug":[0,"body-text"],"text":[0,"Body text"]}],[0,{"depth":[0,2],"slug":[0,"tabular-font-styling"],"text":[0,"Tabular font styling"]}],[0,{"depth":[0,2],"slug":[0,"line-height-and-spacing"],"text":[0,"Line height and spacing"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"]}],"body":[0,"# PatternFly component usage and behavior guidelines\n\nAs you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.\n\n## Displaying structured data\nStructured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the **[data list](/components/data-list)** and the **[table](/components/table)** components.\n\n- Tables are built from a standard tabular structure of rows and columns. \n\n- Data lists support any valid HTML layout inside of a row, which enables more formatting flexibility.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|----------| ---------- |\n| You want to display data in a grid with column headings. | Table |\n| Data does not easily fit into a grid or you want multiple lines of data in a row. | Data list |\n| You want to display non-text information like images or charts. | Data list or table <br /><br /> **Note:** Tables support graphics within cells, but this approach is only recommended for use with small graphics. |\n| All rows don’t have the same format. | Data list |\n\n## Providing contextual help on a page\nContextual help includes any on-screen elements intended to guide the user towards additional information that will help them complete a task. To display this type of content, we recommend using the **[tooltip](/components/tooltip)**, **[popover](/components/popover)**, and **[hint](/components/hint)** components. \n\n- Tooltips are shown when users hover over an element. \n\n- Popovers can be shown on hover or click, can contain any HTML content, and are persistent. \n\n- Hints are static elements that appear inline with other content on a page.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n| You want to provide a short (no more than 1-2 lines) explanation of new or unfamiliar UI elements as a simple text string that is only shown “on-demand.” |Tooltip|\n| You want to include formatted text and/or interactive elements in your message body. | Hint or popover |\n| You want the information to persist until the user dismisses it. | Hint or popover |\n|You want the information to be announced by a screen reader whenever the user tabs to an element.| Hint, popover, or tooltip <br /><br /> **Note:** By default, popovers are only triggered when the user clicks on an element. Therefore screen readers will not read popover text when tabbing through an interface. If a popover is triggered on hover (optional behavior), it will behave like a tooltip and its content will be announced whenever a keyboard user tabs to the trigger element. |\n|You want to present additional information that might not be necessary or relevant to all users.| Hint or popover <br /><br /> **Note:** Hints can be used to convey information to advanced users (such as “pro-tips”). However, since a hint adds static content to a page, you should consider whether it’s important for this information to be shown at all times.|\n\n## Progressive disclosure\nProgressive disclosure is the practice of showing and hiding information as needed, in order to simplify a user interface. To progressively disclose content, we recommend using the **[accordion](/components/accordion)**, **[expandable sections](/components/expandable-section)**, and **[expandable field groups](/components/forms/form/#field-groups)**.\n\n- Accordions allow content to be placed in stackable, expandable containers so that content can be hidden from view to simplify presentation and reduce the need for scrolling.\n\n- Expandable sections allow designers to hide a single block of content or settings behind a show/hide link. \n\n- Expandable field groups allow designers to group form elements into expandable containers.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n| ------------------------ | ----------- |\n| You want to group a list of actions, links, or other data into expandable groups. | Accordion |\n|You want to hide advanced or seldomly used options within a form.| Expandable section or field group |\n|You want to give the user the ability to show or hide chunks of information on a long scrolling page.| Expandable section |\n\n## Inputting data within forms\nData input controls allow users to input information into a form. Input may be bound or unbound. Bound input controls only allow users to input data within a defined range, such as the **[slider](/components/slider)** and **[number input](/components/number-input)** components. Unbound controls do not enforce constraints, such as the **[text input](/components/forms/text-input)** and **[text area](/components/forms/text-area)** components.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to enter text from the keyboard. Possible values are alpha-numeric, unconstrained, or dependent on context.| Text area or text input <br /><br /> **Note:** If data will always be constrained to a single line, use a text input. Use a text area component for multi-line input.|\n|You want to constrain the input of numeric data to a specified range.|Number input, slider, text input, or text area <br /><br /> **Note:** You can use a standard text input for this use case and validate the entered value, but using a number input or slider will be a more direct way to constrain the values that a user can input. |\n|You want to optimize numeric data entry for direct manipulation by touch or using the mouse over the keyboard.|Number input or slider|\n|It’s useful for users to visualize where numeric input falls within the range of possible values.| Slider |\n\n## Selecting between options on a form\nThere are a few components that you can use to allow users to select form options. Depending on the nature of options being presented, we recommend using the **[checkbox](/components/forms/checkbox)**, **[radio](/components/forms/radio)**, or **[switch](/components/switch)** components. \n\n- Checkboxes allow users to select one or more items from a list of options. \n\n- Radio buttons allow users to select from a set of mutually exclusive options.\n\n- Switches indicate the state of a binary setting or object (such as on/off, enabled/disabled).\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|The user wants to select one or more items from a list of items. | Checkbox or switch <br /><br /> **Note:** Switches are sometimes used in place of checkboxes because they provide a larger touch target than a checkbox, which improves the mobile experience. |\n| The user wants to select from a set of mutually exclusive options.| Radio |\n|The user wants to enable an option or feature.| Checkbox, radio, or switch <br /><br /> **Note:** Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. <br /><br /> **Note:** You can use 2 radio buttons to allow users to choose between options like on/off or enabled/disabled, however this approach uses more space and is only recommended when it’s important to make both labeled options visible at the same time.|\n\n## Displaying progress\nIt’s important to display progress for action that will take more than a few seconds to complete. Use the **[progress](/components/progress)** component to show users the percentage of completion for a process or task. Use the **[spinner](/components/spinner)** and **[skeleton](/components/skeleton)** components to just simply indicate activity while the user is waiting for an action to complete.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n| The user is waiting for a process to complete, but the time left until completion is not known.| Spinner |\n|The user is waiting for a process to complete, but the time left until completion is known.| Progress or spinner <br /><br /> **Note:** A progress component is the preferred recommendation when it is possible to estimate the time to completion or the percentage of the task that is done.|\n| The user is progressing through a step-by-step task and you want to reflect where they are in the process.| Progress |\n|The user is waiting for a page to load.| Progress, skeleton, or spinner <br /><br /> **Note:** Progress bars are not typically used during page loading, but could be used with the skeleton component if you want to provide the user with more information about time to completion. <br /><br /> **Note:** Spinners may be used to provide feedback on page loading when the details of the data are not known. |\n\n## Displaying object details in context\nIt is often necessary to display more details about an object listed in a summary view, such as a list or a table. This can be accomplished by drilling-down into a new page or presenting contextual details on the same page. To take these approaches, we recommend using the **[data list](/components/data-list)**, **[drawer](/components/drawer)**, **[table](/components/table)**, and **[popovers](/components/popover)** components.\n\n- Data lists and tables support expandable rows for displaying object details directly in the list or table. \n\n- Drawers can be used to create a side-by-side primary-detail view. \n\n- Popovers can be used to display details about an object in a list or table.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to view details of multiple objects at the same time for comparison.| Data list or expandable table row |\n|Your detailed data is best presented in a horizontal format.| Data list, drawer, expandable table row, or popover <br /><br /> **Note:** Drawers can be attached to either the left, right, or bottom edge of the parent container. To present horizontal data, use a bottom/horizontal drawer to create a top-bottom primary-detail view.|\n|Your detailed data is best presented in a vertical format.| Drawer or popover|\n|You have only a small amount of detailed data to show.|Data list, drawer, expandable table row, or popover <br /><br /> **Note:** Row expansions and drawers can accommodate any amount of information. Showing a small amount of data within a row expansion or drawer may waste space because each presentation type will consume the full width or height of its parent container. Popovers will adjust to the size and shape of their contents.|\n|You don’t want to cover other information while displaying details.|Data list, drawer, or expandable table row <br /><br /> **Note:** Both inline and overlay drawers are available. If you don’t want to cover content on a page, we recommend the [inline drawer](/components/drawer#basic-inline) variation. |\n\n## Dropdown menus for actions and selections\nTo allow users to select between items in a menu, we recommend using the **[select](/components/menus/select)**, **[options](/components/menus/options-menu)**, or **[dropdown](/components/menus/dropdown)** menu components.\n\n- Select menus allow users to select one or more values from a list. \n\n- Options menus are similar to a select, but are more appropriate when users make selections from optional settings. \n\n- Dropdown menus allow you to expose a list of possible actions.\n\nYour use case dictates which of these components you should use:\n\n| **Use case** | **Recommended component** |\n|------------------------ | -----------|\n|You want to select a value or multiple values from a list.| Select |\n|You want to select filter terms from a list.| Select |\n|You want to make the selected value visible when the menu is closed.| Select |\n|You want to select options from one or more lists (sorting options, for example).| Options menu |\n|You want to expose a list of commands or actions in a limited space.| Dropdown |"],"filePath":[0,"textContent/usage-and-behavior.md"],"digest":[0,"07b6d2071e94e4bf"],"rendered":[0,{"html":[0,"<h1 id=\"patternfly-component-usage-and-behavior-guidelines\">PatternFly component usage and behavior guidelines</h1>\n<p>As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.</p>\n<h2 id=\"displaying-structured-data\">Displaying structured data</h2>\n<p>Structured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the <strong><a href=\"/components/data-list\">data list</a></strong> and the <strong><a href=\"/components/table\">table</a></strong> components.</p>\n<ul>\n<li>\n<p>Tables are built from a standard tabular structure of rows and columns.</p>\n</li>\n<li>\n<p>Data lists support any valid HTML layout inside of a row, which enables more formatting flexibility.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to display data in a grid with column headings.</td><td>Table</td></tr><tr><td>Data does not easily fit into a grid or you want multiple lines of data in a row.</td><td>Data list</td></tr><tr><td>You want to display non-text information like images or charts.</td><td>Data list or table <br><br> <strong>Note:</strong> Tables support graphics within cells, but this approach is only recommended for use with small graphics.</td></tr><tr><td>All rows don’t have the same format.</td><td>Data list</td></tr></tbody></table>\n<h2 id=\"providing-contextual-help-on-a-page\">Providing contextual help on a page</h2>\n<p>Contextual help includes any on-screen elements intended to guide the user towards additional information that will help them complete a task. To display this type of content, we recommend using the <strong><a href=\"/components/tooltip\">tooltip</a></strong>, <strong><a href=\"/components/popover\">popover</a></strong>, and <strong><a href=\"/components/hint\">hint</a></strong> components.</p>\n<ul>\n<li>\n<p>Tooltips are shown when users hover over an element.</p>\n</li>\n<li>\n<p>Popovers can be shown on hover or click, can contain any HTML content, and are persistent.</p>\n</li>\n<li>\n<p>Hints are static elements that appear inline with other content on a page.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to provide a short (no more than 1-2 lines) explanation of new or unfamiliar UI elements as a simple text string that is only shown “on-demand.”</td><td>Tooltip</td></tr><tr><td>You want to include formatted text and/or interactive elements in your message body.</td><td>Hint or popover</td></tr><tr><td>You want the information to persist until the user dismisses it.</td><td>Hint or popover</td></tr><tr><td>You want the information to be announced by a screen reader whenever the user tabs to an element.</td><td>Hint, popover, or tooltip <br><br> <strong>Note:</strong> By default, popovers are only triggered when the user clicks on an element. Therefore screen readers will not read popover text when tabbing through an interface. If a popover is triggered on hover (optional behavior), it will behave like a tooltip and its content will be announced whenever a keyboard user tabs to the trigger element.</td></tr><tr><td>You want to present additional information that might not be necessary or relevant to all users.</td><td>Hint or popover <br><br> <strong>Note:</strong> Hints can be used to convey information to advanced users (such as “pro-tips”). However, since a hint adds static content to a page, you should consider whether it’s important for this information to be shown at all times.</td></tr></tbody></table>\n<h2 id=\"progressive-disclosure\">Progressive disclosure</h2>\n<p>Progressive disclosure is the practice of showing and hiding information as needed, in order to simplify a user interface. To progressively disclose content, we recommend using the <strong><a href=\"/components/accordion\">accordion</a></strong>, <strong><a href=\"/components/expandable-section\">expandable sections</a></strong>, and <strong><a href=\"/components/forms/form/#field-groups\">expandable field groups</a></strong>.</p>\n<ul>\n<li>\n<p>Accordions allow content to be placed in stackable, expandable containers so that content can be hidden from view to simplify presentation and reduce the need for scrolling.</p>\n</li>\n<li>\n<p>Expandable sections allow designers to hide a single block of content or settings behind a show/hide link.</p>\n</li>\n<li>\n<p>Expandable field groups allow designers to group form elements into expandable containers.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to group a list of actions, links, or other data into expandable groups.</td><td>Accordion</td></tr><tr><td>You want to hide advanced or seldomly used options within a form.</td><td>Expandable section or field group</td></tr><tr><td>You want to give the user the ability to show or hide chunks of information on a long scrolling page.</td><td>Expandable section</td></tr></tbody></table>\n<h2 id=\"inputting-data-within-forms\">Inputting data within forms</h2>\n<p>Data input controls allow users to input information into a form. Input may be bound or unbound. Bound input controls only allow users to input data within a defined range, such as the <strong><a href=\"/components/slider\">slider</a></strong> and <strong><a href=\"/components/number-input\">number input</a></strong> components. Unbound controls do not enforce constraints, such as the <strong><a href=\"/components/forms/text-input\">text input</a></strong> and <strong><a href=\"/components/forms/text-area\">text area</a></strong> components.</p>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to enter text from the keyboard. Possible values are alpha-numeric, unconstrained, or dependent on context.</td><td>Text area or text input <br><br> <strong>Note:</strong> If data will always be constrained to a single line, use a text input. Use a text area component for multi-line input.</td></tr><tr><td>You want to constrain the input of numeric data to a specified range.</td><td>Number input, slider, text input, or text area <br><br> <strong>Note:</strong> You can use a standard text input for this use case and validate the entered value, but using a number input or slider will be a more direct way to constrain the values that a user can input.</td></tr><tr><td>You want to optimize numeric data entry for direct manipulation by touch or using the mouse over the keyboard.</td><td>Number input or slider</td></tr><tr><td>It’s useful for users to visualize where numeric input falls within the range of possible values.</td><td>Slider</td></tr></tbody></table>\n<h2 id=\"selecting-between-options-on-a-form\">Selecting between options on a form</h2>\n<p>There are a few components that you can use to allow users to select form options. Depending on the nature of options being presented, we recommend using the <strong><a href=\"/components/forms/checkbox\">checkbox</a></strong>, <strong><a href=\"/components/forms/radio\">radio</a></strong>, or <strong><a href=\"/components/switch\">switch</a></strong> components.</p>\n<ul>\n<li>\n<p>Checkboxes allow users to select one or more items from a list of options.</p>\n</li>\n<li>\n<p>Radio buttons allow users to select from a set of mutually exclusive options.</p>\n</li>\n<li>\n<p>Switches indicate the state of a binary setting or object (such as on/off, enabled/disabled).</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>The user wants to select one or more items from a list of items.</td><td>Checkbox or switch <br><br> <strong>Note:</strong> Switches are sometimes used in place of checkboxes because they provide a larger touch target than a checkbox, which improves the mobile experience.</td></tr><tr><td>The user wants to select from a set of mutually exclusive options.</td><td>Radio</td></tr><tr><td>The user wants to enable an option or feature.</td><td>Checkbox, radio, or switch <br><br> <strong>Note:</strong> Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. <br><br> <strong>Note:</strong> You can use 2 radio buttons to allow users to choose between options like on/off or enabled/disabled, however this approach uses more space and is only recommended when it’s important to make both labeled options visible at the same time.</td></tr></tbody></table>\n<h2 id=\"displaying-progress\">Displaying progress</h2>\n<p>It’s important to display progress for action that will take more than a few seconds to complete. Use the <strong><a href=\"/components/progress\">progress</a></strong> component to show users the percentage of completion for a process or task. Use the <strong><a href=\"/components/spinner\">spinner</a></strong> and <strong><a href=\"/components/skeleton\">skeleton</a></strong> components to just simply indicate activity while the user is waiting for an action to complete.</p>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>The user is waiting for a process to complete, but the time left until completion is not known.</td><td>Spinner</td></tr><tr><td>The user is waiting for a process to complete, but the time left until completion is known.</td><td>Progress or spinner <br><br> <strong>Note:</strong> A progress component is the preferred recommendation when it is possible to estimate the time to completion or the percentage of the task that is done.</td></tr><tr><td>The user is progressing through a step-by-step task and you want to reflect where they are in the process.</td><td>Progress</td></tr><tr><td>The user is waiting for a page to load.</td><td>Progress, skeleton, or spinner <br><br> <strong>Note:</strong> Progress bars are not typically used during page loading, but could be used with the skeleton component if you want to provide the user with more information about time to completion. <br><br> <strong>Note:</strong> Spinners may be used to provide feedback on page loading when the details of the data are not known.</td></tr></tbody></table>\n<h2 id=\"displaying-object-details-in-context\">Displaying object details in context</h2>\n<p>It is often necessary to display more details about an object listed in a summary view, such as a list or a table. This can be accomplished by drilling-down into a new page or presenting contextual details on the same page. To take these approaches, we recommend using the <strong><a href=\"/components/data-list\">data list</a></strong>, <strong><a href=\"/components/drawer\">drawer</a></strong>, <strong><a href=\"/components/table\">table</a></strong>, and <strong><a href=\"/components/popover\">popovers</a></strong> components.</p>\n<ul>\n<li>\n<p>Data lists and tables support expandable rows for displaying object details directly in the list or table.</p>\n</li>\n<li>\n<p>Drawers can be used to create a side-by-side primary-detail view.</p>\n</li>\n<li>\n<p>Popovers can be used to display details about an object in a list or table.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to view details of multiple objects at the same time for comparison.</td><td>Data list or expandable table row</td></tr><tr><td>Your detailed data is best presented in a horizontal format.</td><td>Data list, drawer, expandable table row, or popover <br><br> <strong>Note:</strong> Drawers can be attached to either the left, right, or bottom edge of the parent container. To present horizontal data, use a bottom/horizontal drawer to create a top-bottom primary-detail view.</td></tr><tr><td>Your detailed data is best presented in a vertical format.</td><td>Drawer or popover</td></tr><tr><td>You have only a small amount of detailed data to show.</td><td>Data list, drawer, expandable table row, or popover <br><br> <strong>Note:</strong> Row expansions and drawers can accommodate any amount of information. Showing a small amount of data within a row expansion or drawer may waste space because each presentation type will consume the full width or height of its parent container. Popovers will adjust to the size and shape of their contents.</td></tr><tr><td>You don’t want to cover other information while displaying details.</td><td>Data list, drawer, or expandable table row <br><br> <strong>Note:</strong> Both inline and overlay drawers are available. If you don’t want to cover content on a page, we recommend the <a href=\"/components/drawer#basic-inline\">inline drawer</a> variation.</td></tr></tbody></table>\n<h2 id=\"dropdown-menus-for-actions-and-selections\">Dropdown menus for actions and selections</h2>\n<p>To allow users to select between items in a menu, we recommend using the <strong><a href=\"/components/menus/select\">select</a></strong>, <strong><a href=\"/components/menus/options-menu\">options</a></strong>, or <strong><a href=\"/components/menus/dropdown\">dropdown</a></strong> menu components.</p>\n<ul>\n<li>\n<p>Select menus allow users to select one or more values from a list.</p>\n</li>\n<li>\n<p>Options menus are similar to a select, but are more appropriate when users make selections from optional settings.</p>\n</li>\n<li>\n<p>Dropdown menus allow you to expose a list of possible actions.</p>\n</li>\n</ul>\n<p>Your use case dictates which of these components you should use:</p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table>"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,1],"slug":[0,"patternfly-component-usage-and-behavior-guidelines"],"text":[0,"PatternFly component usage and behavior guidelines"]}],[0,{"depth":[0,2],"slug":[0,"displaying-structured-data"],"text":[0,"Displaying structured data"]}],[0,{"depth":[0,2],"slug":[0,"providing-contextual-help-on-a-page"],"text":[0,"Providing contextual help on a page"]}],[0,{"depth":[0,2],"slug":[0,"progressive-disclosure"],"text":[0,"Progressive disclosure"]}],[0,{"depth":[0,2],"slug":[0,"inputting-data-within-forms"],"text":[0,"Inputting data within forms"]}],[0,{"depth":[0,2],"slug":[0,"selecting-between-options-on-a-form"],"text":[0,"Selecting between options on a form"]}],[0,{"depth":[0,2],"slug":[0,"displaying-progress"],"text":[0,"Displaying progress"]}],[0,{"depth":[0,2],"slug":[0,"displaying-object-details-in-context"],"text":[0,"Displaying object details in context"]}],[0,{"depth":[0,2],"slug":[0,"dropdown-menus-for-actions-and-selections"],"text":[0,"Dropdown menus for actions and selections"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"]}],"imagePaths":[1,[]]}]}],"collection":[0,"textContent"]}]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-2"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-2"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <div data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-8" data-pf-content="true" class="pf-v6-c-content"> Page content </div> </div></section> </main> </div> </div> <script type="module">const t=window.localStorage.getItem("theme-preference");document?.querySelector("html")?.classList.toggle("pf-v6-theme-dark",t==="dark");document.addEventListener("astro:after-swap",()=>{const e=window.localStorage.getItem("theme-preference");document?.querySelector("html")?.classList.toggle("pf-v6-theme-dark",e==="dark")});</script></body></html> </body></html>
|
package/package.json
CHANGED
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react'
|
|
2
|
-
import {
|
|
3
|
-
Nav,
|
|
4
|
-
NavList,
|
|
5
|
-
PageSidebar,
|
|
6
|
-
PageSidebarBody,
|
|
7
|
-
} from '@patternfly/react-core'
|
|
8
|
-
import { useStore } from '@nanostores/react'
|
|
9
|
-
import { isNavOpen } from '../stores/navStore'
|
|
2
|
+
import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core'
|
|
10
3
|
import { NavSection } from './NavSection'
|
|
11
4
|
import { type TextContentEntry } from './NavEntry'
|
|
12
5
|
|
|
@@ -17,7 +10,6 @@ interface NavigationProps {
|
|
|
17
10
|
export const Navigation: React.FunctionComponent<NavigationProps> = ({
|
|
18
11
|
navEntries,
|
|
19
12
|
}: NavigationProps) => {
|
|
20
|
-
const $isNavOpen = useStore(isNavOpen)
|
|
21
13
|
const [activeItem, setActiveItem] = useState('')
|
|
22
14
|
|
|
23
15
|
useEffect(() => {
|
|
@@ -47,12 +39,11 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
|
|
|
47
39
|
})
|
|
48
40
|
|
|
49
41
|
return (
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</PageSidebar>
|
|
42
|
+
// Can possibly add back PageSidebar wrapper when https://github.com/patternfly/patternfly/issues/7377 goes in
|
|
43
|
+
<PageSidebarBody id="page-sidebar-body">
|
|
44
|
+
<Nav onSelect={onNavSelect}>
|
|
45
|
+
<NavList>{navSections}</NavList>
|
|
46
|
+
</Nav>
|
|
47
|
+
</PageSidebarBody>
|
|
57
48
|
)
|
|
58
49
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type React from 'react'
|
|
2
|
+
import styles from '@patternfly/react-styles/css/components/Page/page'
|
|
2
3
|
import { PageToggleButton } from '@patternfly/react-core'
|
|
3
4
|
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'
|
|
4
5
|
import { useStore } from '@nanostores/react'
|
|
@@ -8,38 +9,40 @@ import { useEffect } from 'react'
|
|
|
8
9
|
export const PageToggle: React.FunctionComponent = () => {
|
|
9
10
|
const $isNavOpen = useStore(isNavOpen)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
function onToggle() {
|
|
13
|
+
isNavOpen.set(!$isNavOpen)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
/** Applies sidebar styles to the island element astro creates as a wrapper for the sidebar.
|
|
18
|
+
* Without it the page content will not expand to fill the space left by the sidebar when it is collapsed.
|
|
19
|
+
*/
|
|
20
|
+
// Possibly can refactor to remove applying classes when https://github.com/patternfly/patternfly/issues/7377 goes in
|
|
15
21
|
const isClientSide = typeof window !== 'undefined'
|
|
16
|
-
const sideBarIsland =
|
|
22
|
+
const sideBarIsland =
|
|
23
|
+
document.getElementById('page-sidebar-body')?.parentElement
|
|
17
24
|
|
|
18
25
|
if (!isClientSide || !sideBarIsland) {
|
|
19
26
|
return
|
|
20
27
|
}
|
|
21
28
|
|
|
22
|
-
if (!sideBarIsland.classList.contains(
|
|
23
|
-
sideBarIsland.classList.add(
|
|
29
|
+
if (!sideBarIsland.classList.contains(styles.pageSidebar)) {
|
|
30
|
+
sideBarIsland.classList.add(
|
|
31
|
+
styles.pageSidebar,
|
|
32
|
+
$isNavOpen ? styles.modifiers.expanded : styles.modifiers.collapsed,
|
|
33
|
+
)
|
|
24
34
|
} else {
|
|
25
|
-
sideBarIsland.classList.toggle(
|
|
26
|
-
sideBarIsland.classList.toggle(
|
|
35
|
+
sideBarIsland.classList.toggle(styles.modifiers.expanded)
|
|
36
|
+
sideBarIsland.classList.toggle(styles.modifiers.collapsed)
|
|
27
37
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function onToggle() {
|
|
31
|
-
isNavOpen.set(!$isNavOpen)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
applySidebarStylesToIsland()
|
|
38
|
+
sideBarIsland.setAttribute('aria-hidden', `${!$isNavOpen}`)
|
|
36
39
|
}, [$isNavOpen])
|
|
37
40
|
|
|
38
41
|
return (
|
|
39
42
|
<PageToggleButton
|
|
40
|
-
variant="plain"
|
|
41
43
|
aria-label="Global navigation"
|
|
42
44
|
onSidebarToggle={onToggle}
|
|
45
|
+
isSidebarOpen={$isNavOpen}
|
|
43
46
|
>
|
|
44
47
|
<BarsIcon />
|
|
45
48
|
</PageToggleButton>
|