@patternfly/patternfly-doc-core 1.0.1 → 1.0.2
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/.astro/data-store.json +1 -0
- package/.astro/settings.json +5 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.1.7","content-config-digest","7a34c247b3f74bc5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false},\"legacy\":{\"collections\":false}}","textContent",["Map",11,12,61,62,96,97],"contribute",{"id":11,"data":13,"body":17,"filePath":18,"digest":19,"rendered":20},{"id":14,"section":15,"title":16},"Contribute","get-started","Contribute to PatternFly","## 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.","textContent/contribute.md","858dc569bfcdc59d",{"html":21,"metadata":22},"\u003Ch2 id=\"community-contributions\">Community contributions\u003C/h2>\n\u003Cp>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):\u003C/p>\n\u003Cul>\n\u003Cli>New feature ideas.\u003C/li>\n\u003Cli>Bug reports.\u003C/li>\n\u003Cli>Documentation updates.\u003C/li>\n\u003C/ul>\n\u003Cp>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.\u003C/p>\n\u003Cp>If you have any ideas that don’t fit into the projects outlined in this guide, please \u003Ca href=\"https://patternfly.slack.com/archives/C293LQ36J\">reach out to us on Slack\u003C/a>.\u003C/p>\n\u003Ch2 id=\"design\">Design\u003C/h2>\n\u003Cp>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, \u003Ca href=\"http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ\">reach out on the patternfly-design Slack channel.\u003C/a>\u003C/p>\n\u003Ch3 id=\"existing-design-issues\">Existing design issues\u003C/h3>\n\u003Cp>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 \u003Ca href=\"https://github.com/orgs/patternfly/projects/7/views/30\">this GitHub project board.\u003C/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.\u003C/p>\n\u003Ch3 id=\"new-feature-or-enhancement\">New feature or enhancement\u003C/h3>\n\u003Cp>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. \u003Ca href=\"https://github.com/patternfly/patternfly-design/issues\">Start by opening an issue in the patternfly-design repository.\u003C/a> From there, a member of our team will reach out and work with you to plan and design a solution.\u003C/p>\n\u003Ch3 id=\"new-icons\">New icons\u003C/h3>\n\u003Cp>We encourage designers to work with \u003Ca href=\"/design-foundations/icons\">the existing PatternFly icon set\u003C/a>, which covers most common use cases. If your use case isn’t covered, you can propose a new icon.\u003C/p>\n\u003Cp>To contribute a new icon, \u003Ca href=\"https://github.com/patternfly/patternfly-design/issues\">start by opening an issue in the patternfly-design repository\u003C/a> that describes your idea and why it’s needed. A member of our team will reach out to you to discuss next steps.\u003C/p>\n\u003Ch2 id=\"code\">Code\u003C/h2>\n\u003Cp>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.\u003C/p>\n\u003Cp>If you have any questions about these projects, you can reach out to us on our \u003Ca href=\"https://patternfly.slack.com/archives/C9Q224EFL\">patternfly-core\u003C/a> and \u003Ca href=\"https://patternfly.slack.com/archives/C4FM977N0\">patternfly-react\u003C/a> Slack channels.\u003C/p>\n\u003Ch3 id=\"existing-development-issues\">Existing development issues\u003C/h3>\n\u003Cp>To find work that has been approved, but not started, you can view open issues in our \u003Ca href=\"https://github.com/patternfly/patternfly/issues\">patternfly\u003C/a> (HTML/CSS) and \u003Ca href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react\u003C/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.\u003C/p>\n\u003Cp>Be sure to view our detailed contribution instructions for both of these repositories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https://github.com/patternfly/patternfly#guidelines-for-css-development\">Core contribution guidelines\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process\">React contribution guidelines\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"bug-reports\">Bug reports\u003C/h3>\n\u003Cp>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:\u003C/p>\n\u003Col>\n\u003Cli>View the documentation for the feature, to confirm that the behavior is not functioning as intended.\u003C/li>\n\u003Cli>Search open issues in the \u003Ca href=\"https://github.com/patternfly/patternfly/issues\">patternfly\u003C/a> and \u003Ca href=\"https://github.com/patternfly/patternfly-react/issues\">patternfly-react\u003C/a> repositories to see if a related issue already exists.\n\u003Cul>\n\u003Cli>If the bug is present in only the React implementation of PatternFly, \u003Ca href=\"https://github.com/patternfly/patternfly-react/issues\">create a bug issue in patternfly-react.\u003C/a>\u003C/li>\n\u003Cli>If the bug can be seen on both the React and HTML/CSS side, \u003Ca href=\"https://github.com/patternfly/patternfly/issues\">create a bug issue in patternfly\u003C/a>.\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for.\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"documentation\">Documentation\u003C/h2>\n\u003Cp>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.\u003C/p>\n\u003Cp>If you’d like to contribute to documentation, you can refer to our \u003Ca href=\"https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers\">detailed contribution instructions\u003C/a> for additional guidance.\u003C/p>\n\u003Ch3 id=\"existing-documentation-issues\">Existing documentation issues\u003C/h3>\n\u003Cp>Our website documentation is contained in the \u003Ca href=\"https://github.com/patternfly/patternfly-org\">patternfly-org repository\u003C/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.\u003C/p>\n\u003Ch3 id=\"design-guidelines\">Design guidelines\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>If you’d like to contribute to our design guidelines, you can open an issue in \u003Ca href=\"https://github.com/patternfly/patternfly-org\">patternfly-org\u003C/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.\u003C/p>",{"headings":23,"imagePaths":59,"frontmatter":60},[24,28,31,35,38,41,44,47,50,53,56],{"depth":25,"slug":26,"text":27},2,"community-contributions","Community contributions",{"depth":25,"slug":29,"text":30},"design","Design",{"depth":32,"slug":33,"text":34},3,"existing-design-issues","Existing design issues",{"depth":32,"slug":36,"text":37},"new-feature-or-enhancement","New feature or enhancement",{"depth":32,"slug":39,"text":40},"new-icons","New icons",{"depth":25,"slug":42,"text":43},"code","Code",{"depth":32,"slug":45,"text":46},"existing-development-issues","Existing development issues",{"depth":32,"slug":48,"text":49},"bug-reports","Bug reports",{"depth":25,"slug":51,"text":52},"documentation","Documentation",{"depth":32,"slug":54,"text":55},"existing-documentation-issues","Existing documentation issues",{"depth":32,"slug":57,"text":58},"design-guidelines","Design guidelines",[],{"id":14,"title":16,"section":15},"typography",{"id":61,"data":63,"body":66,"filePath":67,"digest":68,"rendered":69},{"id":64,"section":65},"Typography","design-foundations","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| \u003CTitle headingLevel=\"h5\" size='2xl'> Aa \u003C/Title> | --pf-t--global--font--size--heading--h1 | 1.375rem (22px) | 1.3 | Super hero headings \u003Cbr /> H1 \u003Cbr /> Page titles |\n| \u003CTitle headingLevel=\"h5\" size='xl'> Aa \u003C/Title> | --pf-t--global--font--size--heading--h2 | 1.25rem (20px) | 1.3 | Hero headings \u003Cbr /> H2 |\n| \u003CTitle headingLevel=\"h5\" size='lg'> Aa \u003C/Title> | --pf-t--global--font--size--heading--h3 | 1.125rem (18px) | 1.3 | H3 |\n| \u003CTitle headingLevel=\"h5\" size='md'> Aa \u003C/Title> | --pf-t--global--font--size--heading--h4 \u003Cbr /> --pf-t--global--font--size--heading--h5 \u003Cbr /> --pf-t--global--font--size--heading--h6 |1rem (16px) | 1.3 | H4 \u003Cbr /> H5 \u003Cbr /> 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\u003CTitle headingLevel=\"h2\"> This is a default \"xl\" H2. \u003C/Title>\n```\u003CTitle headingLevel=\"h2\" size='lg'> Aa \u003C/Title>```\n\n\u003CTitle headingLevel=\"h2\" size='lg'> This is a customized \"lg\" H2. \u003C/Title>\n```\u003CTitle headingLevel=\"h2\" size='lg'> Aa \u003C/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|\u003Cp style=\"font-size:16px\">Aa\u003C/p> | --pf-t--global--font--size--body--lg | 1rem (16px) | 1.5 | Use for larger body text, like in xl empty states. |\n| \u003CContent>\u003CContent component={ContentVariants.p}>Aa\u003C/Content>\u003C/Content> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |\n| \u003CContent>\u003CContent component={ContentVariants.small}>Aa\u003C/Content>\u003C/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","textContent/typography.md","df42bf1c9e9a76d9",{"html":70,"metadata":71},"\u003Cp>You can use \u003Cstrong>typography\u003C/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.\u003C/p>\n\u003Cp>This page outlines PatternFly’s typography principles and standards, including token values and usage information.\u003C/p>\n\u003Cp>You can place text content on a page using the content or title component:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"/components/content\">Content component:\u003C/a>\u003C/strong> Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.\u003C/li>\n\u003Cli>\u003Cstrong>\u003Ca href=\"/components/title\">Title component:\u003C/a>\u003C/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.\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"patternfly-fonts\">PatternFly fonts\u003C/h2>\n\u003Cp>We use 3 fonts in PatternFly:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Red Hat Display:\u003C/strong> Used for larger text, such as headings.\u003C/li>\n\u003Cli>\u003Cstrong>Red Hat Text:\u003C/strong> Used for smaller text, subheadings, and body text. More readable for long-form text.\u003C/li>\n\u003Cli>\u003Cstrong>Red Hat Mono:\u003C/strong> A tabular font used to format text as code. \u003Ca href=\"#tabular-font-styling\">Read more about our use of tabular font styling.\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Ca href=\"https://github.com/RedHatOfficial/RedHatFont\">Download PatternFly’s fonts from GitHub.\u003C/a>\u003C/p>\n\u003Ch3 id=\"font-sizing-rem-vs-pixel\">Font sizing: rem vs pixel\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>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).\u003C/p>\n\u003Ch2 id=\"headings\">Headings\u003C/h2>\n\u003Cp>All headings use Red Hat Display bold.\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Example\u003C/th>\u003Cth>Tokens\u003C/th>\u003Cth>Size\u003C/th>\u003Cth>Line height\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ctitle headinglevel=\"h5\" size=\"2xl\"> Aa \u003C/title>\u003C/td>\u003Ctd>—pf-t—global—font—size—heading—h1\u003C/td>\u003Ctd>1.375rem (22px)\u003C/td>\u003Ctd>1.3\u003C/td>\u003Ctd>Super hero headings \u003Cbr> H1 \u003Cbr> Page titles\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ctitle headinglevel=\"h5\" size=\"xl\"> Aa \u003C/title>\u003C/td>\u003Ctd>—pf-t—global—font—size—heading—h2\u003C/td>\u003Ctd>1.25rem (20px)\u003C/td>\u003Ctd>1.3\u003C/td>\u003Ctd>Hero headings \u003Cbr> H2\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ctitle headinglevel=\"h5\" size=\"lg\"> Aa \u003C/title>\u003C/td>\u003Ctd>—pf-t—global—font—size—heading—h3\u003C/td>\u003Ctd>1.125rem (18px)\u003C/td>\u003Ctd>1.3\u003C/td>\u003Ctd>H3\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ctitle headinglevel=\"h5\" size=\"md\"> Aa \u003C/title>\u003C/td>\u003Ctd>—pf-t—global—font—size—heading—h4 \u003Cbr> —pf-t—global—font—size—heading—h5 \u003Cbr> —pf-t—global—font—size—heading—h6\u003C/td>\u003Ctd>1rem (16px)\u003C/td>\u003Ctd>1.3\u003C/td>\u003Ctd>H4 \u003Cbr> H5 \u003Cbr> H6\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"customizing-heading-levels\">Customizing heading levels\u003C/h3>\n\u003Cp>The \u003Ca href=\"/components/title\">title component\u003C/a> allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.\u003C/p>\n\u003Cp>The following table shows the default mapping of PatternFly heading levels to text size:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Heading level\u003C/th>\u003Cth>Default size\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>H1\u003C/td>\u003Ctd>2xl (1.375rem, 22px)\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>H2\u003C/td>\u003Ctd>xl (1.25rem, 20px)\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>H3\u003C/td>\u003Ctd>lg (1.125rem, 18px)\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>H4\u003C/td>\u003Ctd>md (1 rem, 16px)\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>H5\u003C/td>\u003Ctd>md (1 rem, 16px)\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>H6\u003C/td>\u003Ctd>md (1 rem, 16px)\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>If you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.\u003C/p>\n\u003Cp>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 \u003Ccode>size\u003C/code> property from \u003Ccode>xl\u003C/code> to \u003Ccode>lg\u003C/code>.\u003C/p>\n\u003Cp>Example:\u003C/p>\n\u003Ctitle headinglevel=\"h2\"> This is a default \"xl\" H2. \u003C/title>\n```\u003Ctitle headinglevel=\"h2\" size=\"lg\"> Aa \u003C/title>```\n\u003Ctitle headinglevel=\"h2\" size=\"lg\"> This is a customized \"lg\" H2. \u003C/title>\n```\u003Ctitle headinglevel=\"h2\" size=\"lg\"> Aa \u003C/title>```\n\u003Cp>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.\u003C/p>\n\u003Cp>Refer to the \u003Ca href=\"/components/title#custom-sizes\">title component examples\u003C/a> to understand the range of customization options.\u003C/p>\n\u003Ch2 id=\"body-text\">Body text\u003C/h2>\n\u003Cp>All body text uses Red Hat Text.\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Example\u003C/th>\u003Cth>Tokens\u003C/th>\u003Cth>Size\u003C/th>\u003Cth>Line height\u003C/th>\u003Cth>Usage\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp style=\"font-size:16px\">Aa\u003C/p>\u003C/td>\u003Ctd>—pf-t—global—font—size—body—lg\u003C/td>\u003Ctd>1rem (16px)\u003C/td>\u003Ctd>1.5\u003C/td>\u003Ctd>Use for larger body text, like in xl empty states.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccontent>\u003Ccontent component=\"{ContentVariants.p}\">Aa\u003C/content>\u003C/content>\u003C/td>\u003Ctd>—pf-t—global—font—size—body—default\u003C/td>\u003Ctd>0.875rem (14px)\u003C/td>\u003Ctd>1.5\u003C/td>\u003Ctd>Use for standard body text.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccontent>\u003Ccontent component=\"{ContentVariants.small}\">Aa\u003C/content>\u003C/content>\u003C/td>\u003Ctd>—pf-t—global—font—size—body—sm\u003C/td>\u003Ctd>0.75rem (12px)\u003C/td>\u003Ctd>1.5\u003C/td>\u003Ctd>User for smaller body text, like helper text.\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"tabular-font-styling\">Tabular font styling\u003C/h2>\n\u003Cp>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.\u003C/p>\n\u003Cp>Sometimes, numerals benefit from the use of a tabular font instead. \u003Cstrong>Tabular fonts\u003C/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.\u003C/p>\n\u003Cp>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: \u003Ccode>.pf-v6-m-tabular-nums\u003C/code>, which sets \u003Ccode>font-variant-numeric: tabular-nums;\u003C/code>\u003C/p>\n\u003Ch2 id=\"line-height-and-spacing\">Line height and spacing\u003C/h2>\n\u003Cp>The line height of your text impacts how you should use \u003Ca href=\"/design-foundations/spacers\">spacers\u003C/a> in your design.\u003C/p>\n\u003Cp>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.\u003C/p>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cimg src=\"/content/typography/line-height.png\" alt=\"Correct and incorrect text spacing examples.\">\u003C/p>",{"headings":72,"imagePaths":94,"frontmatter":95},[73,76,79,82,85,88,91],{"depth":25,"slug":74,"text":75},"patternfly-fonts","PatternFly fonts",{"depth":32,"slug":77,"text":78},"font-sizing-rem-vs-pixel","Font sizing: rem vs pixel",{"depth":25,"slug":80,"text":81},"headings","Headings",{"depth":32,"slug":83,"text":84},"customizing-heading-levels","Customizing heading levels",{"depth":25,"slug":86,"text":87},"body-text","Body text",{"depth":25,"slug":89,"text":90},"tabular-font-styling","Tabular font styling",{"depth":25,"slug":92,"text":93},"line-height-and-spacing","Line height and spacing",[],{"id":64,"section":65},"usage-and-behavior",{"id":96,"data":98,"body":100,"filePath":101,"digest":102,"rendered":103},{"id":99,"section":65},"Usage and behavior","# 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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **Note:** Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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. \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 \u003Cbr />\u003Cbr /> **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 |","textContent/usage-and-behavior.md","07b6d2071e94e4bf",{"html":104,"metadata":105},"\u003Ch1 id=\"patternfly-component-usage-and-behavior-guidelines\">PatternFly component usage and behavior guidelines\u003C/h1>\n\u003Cp>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.\u003C/p>\n\u003Ch2 id=\"displaying-structured-data\">Displaying structured data\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/data-list\">data list\u003C/a>\u003C/strong> and the \u003Cstrong>\u003Ca href=\"/components/table\">table\u003C/a>\u003C/strong> components.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Tables are built from a standard tabular structure of rows and columns.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Data lists support any valid HTML layout inside of a row, which enables more formatting flexibility.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>You want to display data in a grid with column headings.\u003C/td>\u003Ctd>Table\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Data does not easily fit into a grid or you want multiple lines of data in a row.\u003C/td>\u003Ctd>Data list\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to display non-text information like images or charts.\u003C/td>\u003Ctd>Data list or table \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> Tables support graphics within cells, but this approach is only recommended for use with small graphics.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>All rows don’t have the same format.\u003C/td>\u003Ctd>Data list\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"providing-contextual-help-on-a-page\">Providing contextual help on a page\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/tooltip\">tooltip\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/popover\">popover\u003C/a>\u003C/strong>, and \u003Cstrong>\u003Ca href=\"/components/hint\">hint\u003C/a>\u003C/strong> components.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Tooltips are shown when users hover over an element.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Popovers can be shown on hover or click, can contain any HTML content, and are persistent.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Hints are static elements that appear inline with other content on a page.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>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.”\u003C/td>\u003Ctd>Tooltip\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to include formatted text and/or interactive elements in your message body.\u003C/td>\u003Ctd>Hint or popover\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want the information to persist until the user dismisses it.\u003C/td>\u003Ctd>Hint or popover\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want the information to be announced by a screen reader whenever the user tabs to an element.\u003C/td>\u003Ctd>Hint, popover, or tooltip \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to present additional information that might not be necessary or relevant to all users.\u003C/td>\u003Ctd>Hint or popover \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"progressive-disclosure\">Progressive disclosure\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/accordion\">accordion\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/expandable-section\">expandable sections\u003C/a>\u003C/strong>, and \u003Cstrong>\u003Ca href=\"/components/forms/form/#field-groups\">expandable field groups\u003C/a>\u003C/strong>.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>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.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Expandable sections allow designers to hide a single block of content or settings behind a show/hide link.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Expandable field groups allow designers to group form elements into expandable containers.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>You want to group a list of actions, links, or other data into expandable groups.\u003C/td>\u003Ctd>Accordion\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to hide advanced or seldomly used options within a form.\u003C/td>\u003Ctd>Expandable section or field group\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to give the user the ability to show or hide chunks of information on a long scrolling page.\u003C/td>\u003Ctd>Expandable section\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"inputting-data-within-forms\">Inputting data within forms\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/slider\">slider\u003C/a>\u003C/strong> and \u003Cstrong>\u003Ca href=\"/components/number-input\">number input\u003C/a>\u003C/strong> components. Unbound controls do not enforce constraints, such as the \u003Cstrong>\u003Ca href=\"/components/forms/text-input\">text input\u003C/a>\u003C/strong> and \u003Cstrong>\u003Ca href=\"/components/forms/text-area\">text area\u003C/a>\u003C/strong> components.\u003C/p>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>You want to enter text from the keyboard. Possible values are alpha-numeric, unconstrained, or dependent on context.\u003C/td>\u003Ctd>Text area or text input \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> If data will always be constrained to a single line, use a text input. Use a text area component for multi-line input.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to constrain the input of numeric data to a specified range.\u003C/td>\u003Ctd>Number input, slider, text input, or text area \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to optimize numeric data entry for direct manipulation by touch or using the mouse over the keyboard.\u003C/td>\u003Ctd>Number input or slider\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>It’s useful for users to visualize where numeric input falls within the range of possible values.\u003C/td>\u003Ctd>Slider\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"selecting-between-options-on-a-form\">Selecting between options on a form\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/forms/checkbox\">checkbox\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/forms/radio\">radio\u003C/a>\u003C/strong>, or \u003Cstrong>\u003Ca href=\"/components/switch\">switch\u003C/a>\u003C/strong> components.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Checkboxes allow users to select one or more items from a list of options.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Radio buttons allow users to select from a set of mutually exclusive options.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Switches indicate the state of a binary setting or object (such as on/off, enabled/disabled).\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>The user wants to select one or more items from a list of items.\u003C/td>\u003Ctd>Checkbox or switch \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> Switches are sometimes used in place of checkboxes because they provide a larger touch target than a checkbox, which improves the mobile experience.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>The user wants to select from a set of mutually exclusive options.\u003C/td>\u003Ctd>Radio\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>The user wants to enable an option or feature.\u003C/td>\u003Ctd>Checkbox, radio, or switch \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> Checkboxes are often used to enable or disable software features, because they allow you to concisely display on/off settings. \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"displaying-progress\">Displaying progress\u003C/h2>\n\u003Cp>It’s important to display progress for action that will take more than a few seconds to complete. Use the \u003Cstrong>\u003Ca href=\"/components/progress\">progress\u003C/a>\u003C/strong> component to show users the percentage of completion for a process or task. Use the \u003Cstrong>\u003Ca href=\"/components/spinner\">spinner\u003C/a>\u003C/strong> and \u003Cstrong>\u003Ca href=\"/components/skeleton\">skeleton\u003C/a>\u003C/strong> components to just simply indicate activity while the user is waiting for an action to complete.\u003C/p>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>The user is waiting for a process to complete, but the time left until completion is not known.\u003C/td>\u003Ctd>Spinner\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>The user is waiting for a process to complete, but the time left until completion is known.\u003C/td>\u003Ctd>Progress or spinner \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>The user is progressing through a step-by-step task and you want to reflect where they are in the process.\u003C/td>\u003Ctd>Progress\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>The user is waiting for a page to load.\u003C/td>\u003Ctd>Progress, skeleton, or spinner \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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. \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> Spinners may be used to provide feedback on page loading when the details of the data are not known.\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"displaying-object-details-in-context\">Displaying object details in context\u003C/h2>\n\u003Cp>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 \u003Cstrong>\u003Ca href=\"/components/data-list\">data list\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/drawer\">drawer\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/table\">table\u003C/a>\u003C/strong>, and \u003Cstrong>\u003Ca href=\"/components/popover\">popovers\u003C/a>\u003C/strong> components.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Data lists and tables support expandable rows for displaying object details directly in the list or table.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Drawers can be used to create a side-by-side primary-detail view.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Popovers can be used to display details about an object in a list or table.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>You want to view details of multiple objects at the same time for comparison.\u003C/td>\u003Ctd>Data list or expandable table row\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Your detailed data is best presented in a horizontal format.\u003C/td>\u003Ctd>Data list, drawer, expandable table row, or popover \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Your detailed data is best presented in a vertical format.\u003C/td>\u003Ctd>Drawer or popover\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You have only a small amount of detailed data to show.\u003C/td>\u003Ctd>Data list, drawer, expandable table row, or popover \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/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.\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You don’t want to cover other information while displaying details.\u003C/td>\u003Ctd>Data list, drawer, or expandable table row \u003Cbr>\u003Cbr> \u003Cstrong>Note:\u003C/strong> Both inline and overlay drawers are available. If you don’t want to cover content on a page, we recommend the \u003Ca href=\"/components/drawer#basic-inline\">inline drawer\u003C/a> variation.\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"dropdown-menus-for-actions-and-selections\">Dropdown menus for actions and selections\u003C/h2>\n\u003Cp>To allow users to select between items in a menu, we recommend using the \u003Cstrong>\u003Ca href=\"/components/menus/select\">select\u003C/a>\u003C/strong>, \u003Cstrong>\u003Ca href=\"/components/menus/options-menu\">options\u003C/a>\u003C/strong>, or \u003Cstrong>\u003Ca href=\"/components/menus/dropdown\">dropdown\u003C/a>\u003C/strong> menu components.\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>Select menus allow users to select one or more values from a list.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Options menus are similar to a select, but are more appropriate when users make selections from optional settings.\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>Dropdown menus allow you to expose a list of possible actions.\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>Your use case dictates which of these components you should use:\u003C/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\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Cstrong>Use case\u003C/strong>\u003C/th>\u003Cth>\u003Cstrong>Recommended component\u003C/strong>\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>You want to select a value or multiple values from a list.\u003C/td>\u003Ctd>Select\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to select filter terms from a list.\u003C/td>\u003Ctd>Select\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to make the selected value visible when the menu is closed.\u003C/td>\u003Ctd>Select\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to select options from one or more lists (sorting options, for example).\u003C/td>\u003Ctd>Options menu\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>You want to expose a list of commands or actions in a limited space.\u003C/td>\u003Ctd>Dropdown\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>",{"headings":106,"imagePaths":135,"frontmatter":136},[107,111,114,117,120,123,126,129,132],{"depth":108,"slug":109,"text":110},1,"patternfly-component-usage-and-behavior-guidelines","PatternFly component usage and behavior guidelines",{"depth":25,"slug":112,"text":113},"displaying-structured-data","Displaying structured data",{"depth":25,"slug":115,"text":116},"providing-contextual-help-on-a-page","Providing contextual help on a page",{"depth":25,"slug":118,"text":119},"progressive-disclosure","Progressive disclosure",{"depth":25,"slug":121,"text":122},"inputting-data-within-forms","Inputting data within forms",{"depth":25,"slug":124,"text":125},"selecting-between-options-on-a-form","Selecting between options on a form",{"depth":25,"slug":127,"text":128},"displaying-progress","Displaying progress",{"depth":25,"slug":130,"text":131},"displaying-object-details-in-context","Displaying object details in context",{"depth":25,"slug":133,"text":134},"dropdown-menus-for-actions-and-selections","Dropdown menus for actions and selections",[],{"id":99,"section":65}]
|