@patternfly/patternfly-doc-core 1.8.1 → 1.8.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/dist/client/components/accordion/index.html +6 -6
- package/dist/client/components/accordion/react/index.html +6 -6
- package/dist/client/components/all-components/index.html +6 -6
- package/dist/client/design-foundations/typography/index.html +6 -6
- package/dist/client/design-foundations/usage-and-behavior/index.html +6 -6
- package/dist/client/get-started/contribute/index.html +6 -6
- package/dist/server/chunks/{CSSTable_CM0NKE3J.mjs → AutoLinkHeader_C2GD0g-K.mjs} +44 -44
- package/dist/server/chunks/CSSTable_B8tlH3gz.mjs +18 -0
- package/dist/server/chunks/{PropsTables_WcioWlx5.mjs → PropsTables_PVzRHJNB.mjs} +5 -4
- package/dist/server/entry.mjs +3 -3
- package/dist/server/{manifest_zgA_NEEc.mjs → manifest_QF66rQCk.mjs} +1 -1
- package/package.json +2 -2
- package/src/components/PropsTable.tsx +2 -2
- package/src/components/PropsTables.astro +24 -10
- package/dist/server/chunks/CSSTable_C1yGETxF.mjs +0 -4
- package/dist/server/chunks/Stack_80ickdCi.mjs +0 -22
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
<astro-island uid="ZOqv9R" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n AccordionExpandableContentBody,\n Button,\n Checkbox,\n} from '@patternfly/react-core'\nimport ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'\n\nexport const AccordionBordered: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('bordered-toggle4')\n const [isDisplayLarge, setIsDisplayLarge] = useState(false)\n\n const displaySize = isDisplayLarge ? 'lg' : 'default'\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <>\n <Accordion isBordered displaySize={displaySize}>\n <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle1')\n }}\n id=\"bordered-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle2')\n }}\n id=\"bordered-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle3')\n }}\n id=\"bordered-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n orci quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle4')\n }}\n id=\"bordered-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand4\" isCustomContent>\n <AccordionExpandableContentBody>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat\n volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n eros.\n </AccordionExpandableContentBody>\n <AccordionExpandableContentBody>\n <Button variant=\"link\" size=\"lg\" isInline>\n Call to action <ArrowRightIcon />\n </Button>\n </AccordionExpandableContentBody>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle5')\n }}\n id=\"bordered-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n iaculis blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n <div style={{ marginTop: '30px' }}>\n <Checkbox\n label=\"Display size large\"\n isChecked={isDisplayLarge}\n onChange={(_event, checked) => setIsDisplayLarge(checked)}\n aria-label=\"show display large variation checkbox\"\n id=\"toggle-display-lg\"\n name=\"toggle-display-lg\"\n />\n </div>\n </>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
58
|
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-12" data-pf-content="true" class="pf-v6-c-content--h3">Toggle icon at start</h3>
|
|
59
59
|
|
|
60
|
-
<astro-island uid="Z14PzbN" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('start-toggle-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion togglePosition=\"start\">\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle1')\n }}\n id=\"start-toggle-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle2')\n }}\n id=\"start-toggle-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle3')\n }}\n id=\"start-toggle-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle4')\n }}\n id=\"start-toggle-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle5')\n }}\n id=\"start-toggle-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
61
|
-
let script = document.querySelector('script[data-island-id="
|
|
60
|
+
<astro-island uid="Z14PzbN" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('start-toggle-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion togglePosition=\"start\">\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle1')\n }}\n id=\"start-toggle-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle2')\n }}\n id=\"start-toggle-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle3')\n }}\n id=\"start-toggle-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle4')\n }}\n id=\"start-toggle-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle5')\n }}\n id=\"start-toggle-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=ACE85E02B2CB32251A28A949tKOO8tPsioxTRjFcDueIv9OkQXu7fGgde1lRo3qbKmwu9nPHpwhOhRMZx8QmrMmx1XHWKYVeAYnwIXpQ%2FdTquiEPJd6dYQtr1kMUwwhpgFtPd4mul7TRtU6NN1ADIKyclV7uc%2B2HGVJ%2BlPvyqRFHvWi5KPLuIsW%2BduShll%2BQw96lPVX0OJc%3D&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="22b5c39b-1407-4baf-ac19-90c86d8d343b">
|
|
61
|
+
let script = document.querySelector('script[data-island-id="22b5c39b-1407-4baf-ac19-90c86d8d343b"]');
|
|
62
62
|
|
|
63
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
63
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=ACE85E02B2CB32251A28A949tKOO8tPsioxTRjFcDueIv9OkQXu7fGgde1lRo3qbKmwu9nPHpwhOhRMZx8QmrMmx1XHWKYVeAYnwIXpQ%2FdTquiEPJd6dYQtr1kMUwwhpgFtPd4mul7TRtU6NN1ADIKyclV7uc%2B2HGVJ%2BlPvyqRFHvWi5KPLuIsW%2BduShll%2BQw96lPVX0OJc%3D&s=%7B%7D');
|
|
64
64
|
|
|
65
65
|
if (script) {
|
|
66
66
|
if(
|
|
@@ -82,10 +82,10 @@ if (script) {
|
|
|
82
82
|
}
|
|
83
83
|
script.remove();
|
|
84
84
|
}
|
|
85
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
86
|
-
let script = document.querySelector('script[data-island-id="
|
|
85
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=5DE8DB260939E3B15E1DDE45mNNUzugijeb92M4wqQ9Jzf7UI8o9E%2Fh%2BJ97QGPNPQvnB8G%2Fnq0HsoApPc315rxlEYNVM&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="8446f906-113e-439c-847f-38bc20fb1cfa">
|
|
86
|
+
let script = document.querySelector('script[data-island-id="8446f906-113e-439c-847f-38bc20fb1cfa"]');
|
|
87
87
|
|
|
88
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
88
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=5DE8DB260939E3B15E1DDE45mNNUzugijeb92M4wqQ9Jzf7UI8o9E%2Fh%2BJ97QGPNPQvnB8G%2Fnq0HsoApPc315rxlEYNVM&s=%7B%7D');
|
|
89
89
|
|
|
90
90
|
if (script) {
|
|
91
91
|
if(
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
<astro-island uid="ZOqv9R" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n AccordionExpandableContentBody,\n Button,\n Checkbox,\n} from '@patternfly/react-core'\nimport ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'\n\nexport const AccordionBordered: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('bordered-toggle4')\n const [isDisplayLarge, setIsDisplayLarge] = useState(false)\n\n const displaySize = isDisplayLarge ? 'lg' : 'default'\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <>\n <Accordion isBordered displaySize={displaySize}>\n <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle1')\n }}\n id=\"bordered-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle2')\n }}\n id=\"bordered-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle3')\n }}\n id=\"bordered-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n orci quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle4')\n }}\n id=\"bordered-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand4\" isCustomContent>\n <AccordionExpandableContentBody>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat\n volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n eros.\n </AccordionExpandableContentBody>\n <AccordionExpandableContentBody>\n <Button variant=\"link\" size=\"lg\" isInline>\n Call to action <ArrowRightIcon />\n </Button>\n </AccordionExpandableContentBody>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle5')\n }}\n id=\"bordered-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n iaculis blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n <div style={{ marginTop: '30px' }}>\n <Checkbox\n label=\"Display size large\"\n isChecked={isDisplayLarge}\n onChange={(_event, checked) => setIsDisplayLarge(checked)}\n aria-label=\"show display large variation checkbox\"\n id=\"toggle-display-lg\"\n name=\"toggle-display-lg\"\n />\n </div>\n </>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
58
|
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6" data-pf-content="true" class="pf-v6-c-content--h3">Toggle icon at start</h3>
|
|
59
59
|
|
|
60
|
-
<astro-island uid="Z14PzbN" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('start-toggle-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion togglePosition=\"start\">\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle1')\n }}\n id=\"start-toggle-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle2')\n }}\n id=\"start-toggle-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle3')\n }}\n id=\"start-toggle-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle4')\n }}\n id=\"start-toggle-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle5')\n }}\n id=\"start-toggle-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
61
|
-
let script = document.querySelector('script[data-island-id="
|
|
60
|
+
<astro-island uid="Z14PzbN" component-url="/_astro/LiveExample.CiM2pGMB.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('start-toggle-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion togglePosition=\"start\">\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle1')\n }}\n id=\"start-toggle-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle2')\n }}\n id=\"start-toggle-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle3')\n }}\n id=\"start-toggle-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle4')\n }}\n id=\"start-toggle-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle5')\n }}\n id=\"start-toggle-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=D58548018DD4907AF872AEEAOTp7U3GuNru2FSROOv50NywzWpSRnomtrIhhKyuIEa%2FtYWnxpxS1tbe00QnX3ZFS5XZBygk6dVKDxt%2FlN4GXsM9Z%2FfKlUjdEIrfkKTGuPkz%2FSRp8%2Fd7gxo0sChNmf0Oq9YI91MXvHWz2JwDC1QsVdt8xw4EzqP6xMdzxV4fLiYQtIxWf%2By4%3D&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="01925268-00d0-43cf-b977-d06362979ac9">
|
|
61
|
+
let script = document.querySelector('script[data-island-id="01925268-00d0-43cf-b977-d06362979ac9"]');
|
|
62
62
|
|
|
63
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
63
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=D58548018DD4907AF872AEEAOTp7U3GuNru2FSROOv50NywzWpSRnomtrIhhKyuIEa%2FtYWnxpxS1tbe00QnX3ZFS5XZBygk6dVKDxt%2FlN4GXsM9Z%2FfKlUjdEIrfkKTGuPkz%2FSRp8%2Fd7gxo0sChNmf0Oq9YI91MXvHWz2JwDC1QsVdt8xw4EzqP6xMdzxV4fLiYQtIxWf%2By4%3D&s=%7B%7D');
|
|
64
64
|
|
|
65
65
|
if (script) {
|
|
66
66
|
if(
|
|
@@ -82,10 +82,10 @@ if (script) {
|
|
|
82
82
|
}
|
|
83
83
|
script.remove();
|
|
84
84
|
}
|
|
85
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
86
|
-
let script = document.querySelector('script[data-island-id="
|
|
85
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=1D9A76EAE6E94C734D1C1B5CbZRwBNOzv%2BO9nBe25dAu8v8xgqEldMiSjVqMXM0%2FlEhXUJtxmwtmI5A8v2Z6kT7IBhoC&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="a40fc65f-8a3b-4bb2-88e0-8a568690411f">
|
|
86
|
+
let script = document.querySelector('script[data-island-id="a40fc65f-8a3b-4bb2-88e0-8a568690411f"]');
|
|
87
87
|
|
|
88
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
88
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=1D9A76EAE6E94C734D1C1B5CbZRwBNOzv%2BO9nBe25dAu8v8xgqEldMiSjVqMXM0%2FlEhXUJtxmwtmI5A8v2Z6kT7IBhoC&s=%7B%7D');
|
|
89
89
|
|
|
90
90
|
if (script) {
|
|
91
91
|
if(
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
animation-fill-mode: both;
|
|
45
45
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
46
46
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
47
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <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"));})();</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="ZqdR7W" prefix="r1" component-url="/_astro/PageToggle.C6_rp-Bm.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" 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-4"><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="ZN0Xgs" prefix="r3" component-url="/_astro/Toolbar.BmilfRHR.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.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-2"><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-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-5"><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-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-6"><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-2"><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> <astro-island uid="1EjclH" component-url="/_astro/Navigation.zYUnVsp7.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></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"> <h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-2" class="pf-v6-c-title pf-m-4xl">All components</h1><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{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><astro-island uid="1zQf7w" component-url="/_astro/SectionGallery.DqD5bUWQ.js" component-export="SectionGallery" renderer-url="/_astro/client.zs76E0tG.js" props="{"illustrations":[0],"section":[0,"components"],"galleryItemsData":[0,{"about-modal":[0,{"illustration":[0,"./images/component-illustrations/about-modal.png"],"summary":[0,"An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."]}],"accordion":[0,{"illustration":[0,"./images/component-illustrations/accordion.png"],"summary":[0,"An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."]}],"action-list":[0,{"illustration":[0,"./images/component-illustrations/action-list.png"],"summary":[0,"An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."]}],"alert":[0,{"illustration":[0,"./images/component-illustrations/alert.png"],"summary":[0,"An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."]}],"application-launcher":[0,{"illustration":[0,"./images/component-illustrations/application-launcher.png"],"summary":[0,"An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."],"label":[0,"demo"]}],"avatar":[0,{"illustration":[0,"./images/component-illustrations/avatar.png"],"summary":[0,"An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."]}],"back-to-top":[0,{"illustration":[0,"./images/component-illustrations/back-to-top.png"],"summary":[0,"The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."]}],"backdrop":[0,{"illustration":[0,"./images/component-illustrations/backdrop.png"],"summary":[0,"A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."]}],"background-image":[0,{"illustration":[0,"./images/component-illustrations/background-image.png"],"summary":[0,"A <b>background image</b> is an image that fills the background of a page."]}],"badge":[0,{"illustration":[0,"./images/component-illustrations/badge.png"],"summary":[0,"A <b>badge</b> is an annotation that displays a numeric value."]}],"banner":[0,{"illustration":[0,"./images/component-illustrations/banner.png"],"summary":[0,"A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."]}],"brand":[0,{"illustration":[0,"./images/component-illustrations/brand.png"],"summary":[0,"A <b>brand</b> is a visual representation of a product&mdash;typically its logo."]}],"breadcrumb":[0,{"illustration":[0,"./images/component-illustrations/breadcrumb.png"],"summary":[0,"A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."]}],"button":[0,{"illustration":[0,"./images/component-illustrations/button.png"],"summary":[0,"A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."]}],"calendar-month":[0,{"illustration":[0,"./images/component-illustrations/calendar-month.png"],"summary":[0,"A <b>calendar month</b> component allows users to select and navigate between days, months, and years."]}],"card":[0,{"illustration":[0,"./images/component-illustrations/card.png"],"summary":[0,"A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."]}],"checkbox":[0,{"illustration":[0,"./images/component-illustrations/checkbox.png"],"summary":[0,"A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."]}],"chip":[0,{"illustration":[0,"./images/component-illustrations/chip.png"],"summary":[0,"A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <a href='/components/label'>the label component</a> instead."],"label":[0,"deprecated"]}],"clipboard-copy":[0,{"illustration":[0,"./images/component-illustrations/clipboard-copy.png"],"summary":[0,"The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."]}],"code-block":[0,{"illustration":[0,"./images/component-illustrations/code-block.png"],"summary":[0,"A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."]}],"code-editor":[0,{"illustration":[0,"./images/component-illustrations/code-editor.png"],"summary":[0,"A <b>code editor</b> is a versatile <a href='https://microsoft.github.io/monaco-editor/'>Monaco-based</a> text editor that supports various programming languages."]}],"content":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>content</b> component contains a block of styled HTML content."]}],"context-selector":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."],"label":[0,"demo"]}],"custom-menus":[0,{"illustration":[0,"./images/component-illustrations/custom-menus.png"],"summary":[0,"<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <a href='/components/menus/menu'>menus</a> and <a href='/components/menus/menu-toggle'>menu toggles.</a>"],"label":[0,"demo"]}],"data-list":[0,{"illustration":[0,"./images/component-illustrations/data-list.png"],"summary":[0,"A <b>data list</b> displays large data sets and interactive content in a flexible layout."]}],"date-picker":[0,{"illustration":[0,"./images/component-illustrations/date-picker.png"],"summary":[0,"A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."]}],"date-and-time-picker":[0,{"illustration":[0,"./images/component-illustrations/date-and-time-picker.png"],"summary":[0,"A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <a href='/components/date-and-time/date-picker'>date picker</a> and <a href='/components/date-and-time/time-picker'>time picker</a> components."],"label":[0,"demo"]}],"description-list":[0,{"illustration":[0,"./images/component-illustrations/description-list.png"],"summary":[0,"A <b>description list</b> displays terms and their corresponding descriptions."]}],"divider":[0,{"illustration":[0,"./images/component-illustrations/divider.png"],"summary":[0,"A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."]}],"drag-and-drop":[0,{"illustration":[0,"./images/component-illustrations/drag-and-drop.png"],"summary":[0,"The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."]}],"drawer":[0,{"illustration":[0,"./images/component-illustrations/drawer.png"],"summary":[0,"A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."]}],"dropdown":[0,{"illustration":[0,"./images/component-illustrations/dropdown.png"],"summary":[0,"A <b>dropdown</b> displays a menu of actions that trigger a process and as that navigate to a new location."],"label":[0,"beta"]}],"dual-list-selector":[0,{"illustration":[0,"./images/component-illustrations/dual-list-selector.png"],"summary":[0,"A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."]}],"empty-state":[0,{"illustration":[0,"./images/component-illustrations/empty-state.png"],"summary":[0,"An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."]}],"expandable-section":[0,{"illustration":[0,"./images/component-illustrations/expandable-section.png"],"summary":[0,"An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."]}],"multiple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload-multiple.png"],"summary":[0,"A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."]}],"simple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload.png"],"summary":[0,"A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."]}],"form-control":[0,{"illustration":[0,"./images/component-illustrations/form-control.png"],"summary":[0,"A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."]}],"form":[0,{"illustration":[0,"./images/component-illustrations/form.png"],"summary":[0,"A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."]}],"form-select":[0,{"illustration":[0,"./images/component-illustrations/form-select.png"],"summary":[0,"A <b>form select</b> is a form element that embeds browser-native menus."]}],"helper-text":[0,{"illustration":[0,"./images/component-illustrations/helper-text.png"],"summary":[0,"<b>Helper text</b> is a text-based support method that adds additional context to field inputs."]}],"hint":[0,{"illustration":[0,"./images/component-illustrations/hint.png"],"summary":[0,"A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page or modal."]}],"icon":[0,{"illustration":[0,"./images/component-illustrations/icon.png"],"summary":[0,"An <b>icon</b> component is a container that supports <a href='/design-foundations/icons#all-icons'>icons</a> of varying dimensions and styles, as well as <a href='/components/spinner'>spinners.</a>"]}],"inline-edit":[0,{"illustration":[0,"./images/component-illustrations/inline-edit.png"],"summary":[0,"An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."]}],"input-group":[0,{"illustration":[0,"./images/component-illustrations/input-group.png"],"summary":[0,"An <b>input group</b> combines multiple related controls or inputs to appear as a single control."]}],"jump-links":[0,{"illustration":[0,"./images/component-illustrations/jump-links.png"],"summary":[0,"When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."]}],"label":[0,{"illustration":[0,"./images/component-illustrations/label.png"],"summary":[0,"A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."]}],"list":[0,{"illustration":[0,"./images/component-illustrations/list.png"],"summary":[0,"A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."]}],"login-page":[0,{"illustration":[0,"./images/component-illustrations/login-page.png"],"summary":[0,"A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."]}],"masthead":[0,{"illustration":[0,"./images/component-illustrations/masthead.png"],"summary":[0,"A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."]}],"menu-toggle":[0,{"illustration":[0,"./images/component-illustrations/menu-toggle.png"],"summary":[0,"A <b>menu toggle</b> is a selectable control that opens and closes a menu."]}],"menu":[0,{"illustration":[0,"./images/component-illustrations/menu.png"],"summary":[0,"A <b>menu</b> is a list of options or actions that users can choose from."]}],"modal":[0,{"illustration":[0,"./images/component-illustrations/modal.png"],"summary":[0,"A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."]}],"navigation":[0,{"illustration":[0,"./images/component-illustrations/navigation.png"],"summary":[0,"A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."]}],"notification-badge":[0,{"illustration":[0,"./images/component-illustrations/notification-badge.png"],"summary":[0,"A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."]}],"notification-drawer":[0,{"illustration":[0,"./images/component-illustrations/notification-drawer.png"],"summary":[0,"A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."]}],"number-input":[0,{"illustration":[0,"./images/component-illustrations/number-input.png"],"summary":[0,"A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."]}],"options-menu":[0,{"illustration":[0,"./images/component-illustrations/options-menu.png"],"summary":[0,"An <b>options menu</b> contains a set of optional settings."],"label":[0,"demo"]}],"overflow-menu":[0,{"illustration":[0,"./images/component-illustrations/overflow-menu.png"],"summary":[0,"An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."]}],"page":[0,{"illustration":[0,"./images/component-illustrations/page.png"],"summary":[0,"A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."]}],"pagination":[0,{"illustration":[0,"./images/component-illustrations/pagination.png"],"summary":[0,"A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."]}],"panel":[0,{"illustration":[0,"./images/component-illustrations/panel.png"],"summary":[0,"A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."]}],"password-generator":[0,{"illustration":[0,"./images/component-illustrations/password-generator.png"],"summary":[0,"This demo demonstrates how to create an input field that generates unique passwords."],"label":[0,"demo"]}],"password-strength":[0,{"illustration":[0,"./images/component-illustrations/password-strength.png"],"summary":[0,"This demo demonstrates how to validate and display feedback about password strength."],"label":[0,"demo"]}],"popover":[0,{"illustration":[0,"./images/component-illustrations/popover.png"],"summary":[0,"A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."]}],"progress-stepper":[0,{"illustration":[0,"./images/component-illustrations/progress-stepper.png"],"summary":[0,"A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."]}],"progress":[0,{"illustration":[0,"./images/component-illustrations/progress.png"],"summary":[0,"A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."]}],"radio":[0,{"illustration":[0,"./images/component-illustrations/radio.png"],"summary":[0,"A <b>radio</b> is a button that's used to present users with mutually exclusive choices."]}],"search-input":[0,{"illustration":[0,"./images/component-illustrations/search-input.png"],"summary":[0,"A <b>search input</b> is a type of input field that can be used to search, find, or filter."]}],"select":[0,{"illustration":[0,"./images/component-illustrations/select.png"],"summary":[0,"A <b>select</b> component is a menu that enables users to select 1 or more items from a list."],"label":[0,"beta"]}],"sidebar":[0,{"illustration":[0,"./images/component-illustrations/sidebar.png"],"summary":[0,"A <b>sidebar</b> is a panel that splits content into a secondary area within a page."]}],"simple-list":[0,{"illustration":[0,"./images/component-illustrations/simple-list.png"],"summary":[0,"A <b>simple list</b> displays selectable items within a page."]}],"skeleton":[0,{"illustration":[0,"./images/component-illustrations/skeleton.png"],"summary":[0,"A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."]}],"skip-to-content":[0,{"illustration":[0,"./images/component-illustrations/skip-to-content.png"],"summary":[0,"A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"]}],"slider":[0,{"illustration":[0,"./images/component-illustrations/slider.png"],"summary":[0,"A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."]}],"spinner":[0,{"illustration":[0,"./images/component-illustrations/spinner.png"],"summary":[0,"A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."]}],"switch":[0,{"illustration":[0,"./images/component-illustrations/switch.png"],"summary":[0,"A <b>switch</b> is a control that toggles the state of a setting between on and off."]}],"tab-content":[0,{"illustration":[0,"./images/component-illustrations/tab-content.png"],"summary":[0,"A <b>tab content</b> component is used to contain content within a tab."]}],"table":[0,{"illustration":[0,"./images/component-illustrations/table.png"],"summary":[0,"A <b>table</b> displays large data sets in a simple grid with column headers."]}],"tabs":[0,{"illustration":[0,"./images/component-illustrations/tabs.png"],"summary":[0,"<b>Tabs</b> group similar content within sub-views of a page."]}],"text-area":[0,{"illustration":[0,"./images/component-illustrations/text-area.png"],"summary":[0,"A <b>text area</b> allows users to enter a longer paragraph of text."]}],"text-input-group":[0,{"illustration":[0,"./images/component-illustrations/text-input-group.png"],"summary":[0,"A <b>text input group</b> is a more custom, flexible, and composable version of a <a href='/components/forms/text-input'>text input</a> that includes elements like icons and buttons."]}],"text-input":[0,{"illustration":[0,"./images/component-illustrations/text-input.png"],"summary":[0,"A <b>text input</b> components allows users to input short text."]}],"tile":[0,{"illustration":[0,"./images/component-illustrations/tile.png"],"summary":[0,"A <b>tile</b> is a container that allows users to select a static option."],"label":[0,"deprecated"]}],"time-picker":[0,{"illustration":[0,"./images/component-illustrations/time-picker.png"],"summary":[0,"A <b>time picker</b> component allows users to select a time from a list of options."]}],"timestamp":[0,{"illustration":[0,"./images/component-illustrations/timestamp.png"],"summary":[0,"A <b>timestamp</b> is a consistently formatted visual that displays date and time values."]}],"title":[0,{"illustration":[0,"./images/component-illustrations/title.png"],"summary":[0,"A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."]}],"toggle-group":[0,{"illustration":[0,"./images/component-illustrations/toggle-group.png"],"summary":[0,"A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."]}],"toolbar":[0,{"illustration":[0,"./images/component-illustrations/toolbar.png"],"summary":[0,"A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."]}],"tooltip":[0,{"illustration":[0,"./images/component-illustrations/tooltip.png"],"summary":[0,"A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."]}],"tree-view":[0,{"illustration":[0,"./images/component-illustrations/tree-view.png"],"summary":[0,"A <b>tree view</b> is a structure that displays data in a hierarchical view."]}],"truncate":[0,{"illustration":[0,"./images/component-illustrations/truncate.png"],"summary":[0,"A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."]}],"wizard":[0,{"illustration":[0,"./images/component-illustrations/wizard.png"],"summary":[0,"A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."]}]}],"placeholderText":[0,"Search components by name"],"countText":[0],"initialLayout":[0],"hasGridText":[0,true],"hasGridImages":[0],"hasListText":[0,true],"hasListImages":[0]}" ssr client="only" opts="{"name":"SectionGalleryBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=8A7D593F99D63EEDFFE556B8TxbHmpqgetfkc9qW9NgRQWAH&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="e931a069-9d3f-423b-a40d-d1c2245b2911">
|
|
48
|
-
let script = document.querySelector('script[data-island-id="
|
|
47
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <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"));})();</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="ZqdR7W" prefix="r1" component-url="/_astro/PageToggle.C6_rp-Bm.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" 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-4"><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="ZN0Xgs" prefix="r3" component-url="/_astro/Toolbar.BmilfRHR.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.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-2"><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-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-5"><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-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-6"><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-2"><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> <astro-island uid="1EjclH" component-url="/_astro/Navigation.zYUnVsp7.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></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"> <h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-2" class="pf-v6-c-title pf-m-4xl">All components</h1><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{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><astro-island uid="1zQf7w" component-url="/_astro/SectionGallery.DqD5bUWQ.js" component-export="SectionGallery" renderer-url="/_astro/client.zs76E0tG.js" props="{"illustrations":[0],"section":[0,"components"],"galleryItemsData":[0,{"about-modal":[0,{"illustration":[0,"./images/component-illustrations/about-modal.png"],"summary":[0,"An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."]}],"accordion":[0,{"illustration":[0,"./images/component-illustrations/accordion.png"],"summary":[0,"An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."]}],"action-list":[0,{"illustration":[0,"./images/component-illustrations/action-list.png"],"summary":[0,"An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."]}],"alert":[0,{"illustration":[0,"./images/component-illustrations/alert.png"],"summary":[0,"An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."]}],"application-launcher":[0,{"illustration":[0,"./images/component-illustrations/application-launcher.png"],"summary":[0,"An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."],"label":[0,"demo"]}],"avatar":[0,{"illustration":[0,"./images/component-illustrations/avatar.png"],"summary":[0,"An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."]}],"back-to-top":[0,{"illustration":[0,"./images/component-illustrations/back-to-top.png"],"summary":[0,"The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."]}],"backdrop":[0,{"illustration":[0,"./images/component-illustrations/backdrop.png"],"summary":[0,"A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."]}],"background-image":[0,{"illustration":[0,"./images/component-illustrations/background-image.png"],"summary":[0,"A <b>background image</b> is an image that fills the background of a page."]}],"badge":[0,{"illustration":[0,"./images/component-illustrations/badge.png"],"summary":[0,"A <b>badge</b> is an annotation that displays a numeric value."]}],"banner":[0,{"illustration":[0,"./images/component-illustrations/banner.png"],"summary":[0,"A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."]}],"brand":[0,{"illustration":[0,"./images/component-illustrations/brand.png"],"summary":[0,"A <b>brand</b> is a visual representation of a product&mdash;typically its logo."]}],"breadcrumb":[0,{"illustration":[0,"./images/component-illustrations/breadcrumb.png"],"summary":[0,"A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."]}],"button":[0,{"illustration":[0,"./images/component-illustrations/button.png"],"summary":[0,"A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."]}],"calendar-month":[0,{"illustration":[0,"./images/component-illustrations/calendar-month.png"],"summary":[0,"A <b>calendar month</b> component allows users to select and navigate between days, months, and years."]}],"card":[0,{"illustration":[0,"./images/component-illustrations/card.png"],"summary":[0,"A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."]}],"checkbox":[0,{"illustration":[0,"./images/component-illustrations/checkbox.png"],"summary":[0,"A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."]}],"chip":[0,{"illustration":[0,"./images/component-illustrations/chip.png"],"summary":[0,"A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <a href='/components/label'>the label component</a> instead."],"label":[0,"deprecated"]}],"clipboard-copy":[0,{"illustration":[0,"./images/component-illustrations/clipboard-copy.png"],"summary":[0,"The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."]}],"code-block":[0,{"illustration":[0,"./images/component-illustrations/code-block.png"],"summary":[0,"A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."]}],"code-editor":[0,{"illustration":[0,"./images/component-illustrations/code-editor.png"],"summary":[0,"A <b>code editor</b> is a versatile <a href='https://microsoft.github.io/monaco-editor/'>Monaco-based</a> text editor that supports various programming languages."]}],"content":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>content</b> component contains a block of styled HTML content."]}],"context-selector":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."],"label":[0,"demo"]}],"custom-menus":[0,{"illustration":[0,"./images/component-illustrations/custom-menus.png"],"summary":[0,"<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <a href='/components/menus/menu'>menus</a> and <a href='/components/menus/menu-toggle'>menu toggles.</a>"],"label":[0,"demo"]}],"data-list":[0,{"illustration":[0,"./images/component-illustrations/data-list.png"],"summary":[0,"A <b>data list</b> displays large data sets and interactive content in a flexible layout."]}],"date-picker":[0,{"illustration":[0,"./images/component-illustrations/date-picker.png"],"summary":[0,"A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."]}],"date-and-time-picker":[0,{"illustration":[0,"./images/component-illustrations/date-and-time-picker.png"],"summary":[0,"A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <a href='/components/date-and-time/date-picker'>date picker</a> and <a href='/components/date-and-time/time-picker'>time picker</a> components."],"label":[0,"demo"]}],"description-list":[0,{"illustration":[0,"./images/component-illustrations/description-list.png"],"summary":[0,"A <b>description list</b> displays terms and their corresponding descriptions."]}],"divider":[0,{"illustration":[0,"./images/component-illustrations/divider.png"],"summary":[0,"A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."]}],"drag-and-drop":[0,{"illustration":[0,"./images/component-illustrations/drag-and-drop.png"],"summary":[0,"The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."]}],"drawer":[0,{"illustration":[0,"./images/component-illustrations/drawer.png"],"summary":[0,"A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."]}],"dropdown":[0,{"illustration":[0,"./images/component-illustrations/dropdown.png"],"summary":[0,"A <b>dropdown</b> displays a menu of actions that trigger a process and as that navigate to a new location."],"label":[0,"beta"]}],"dual-list-selector":[0,{"illustration":[0,"./images/component-illustrations/dual-list-selector.png"],"summary":[0,"A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."]}],"empty-state":[0,{"illustration":[0,"./images/component-illustrations/empty-state.png"],"summary":[0,"An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."]}],"expandable-section":[0,{"illustration":[0,"./images/component-illustrations/expandable-section.png"],"summary":[0,"An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."]}],"multiple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload-multiple.png"],"summary":[0,"A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."]}],"simple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload.png"],"summary":[0,"A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."]}],"form-control":[0,{"illustration":[0,"./images/component-illustrations/form-control.png"],"summary":[0,"A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."]}],"form":[0,{"illustration":[0,"./images/component-illustrations/form.png"],"summary":[0,"A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."]}],"form-select":[0,{"illustration":[0,"./images/component-illustrations/form-select.png"],"summary":[0,"A <b>form select</b> is a form element that embeds browser-native menus."]}],"helper-text":[0,{"illustration":[0,"./images/component-illustrations/helper-text.png"],"summary":[0,"<b>Helper text</b> is a text-based support method that adds additional context to field inputs."]}],"hint":[0,{"illustration":[0,"./images/component-illustrations/hint.png"],"summary":[0,"A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page or modal."]}],"icon":[0,{"illustration":[0,"./images/component-illustrations/icon.png"],"summary":[0,"An <b>icon</b> component is a container that supports <a href='/design-foundations/icons#all-icons'>icons</a> of varying dimensions and styles, as well as <a href='/components/spinner'>spinners.</a>"]}],"inline-edit":[0,{"illustration":[0,"./images/component-illustrations/inline-edit.png"],"summary":[0,"An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."]}],"input-group":[0,{"illustration":[0,"./images/component-illustrations/input-group.png"],"summary":[0,"An <b>input group</b> combines multiple related controls or inputs to appear as a single control."]}],"jump-links":[0,{"illustration":[0,"./images/component-illustrations/jump-links.png"],"summary":[0,"When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."]}],"label":[0,{"illustration":[0,"./images/component-illustrations/label.png"],"summary":[0,"A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."]}],"list":[0,{"illustration":[0,"./images/component-illustrations/list.png"],"summary":[0,"A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."]}],"login-page":[0,{"illustration":[0,"./images/component-illustrations/login-page.png"],"summary":[0,"A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."]}],"masthead":[0,{"illustration":[0,"./images/component-illustrations/masthead.png"],"summary":[0,"A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."]}],"menu-toggle":[0,{"illustration":[0,"./images/component-illustrations/menu-toggle.png"],"summary":[0,"A <b>menu toggle</b> is a selectable control that opens and closes a menu."]}],"menu":[0,{"illustration":[0,"./images/component-illustrations/menu.png"],"summary":[0,"A <b>menu</b> is a list of options or actions that users can choose from."]}],"modal":[0,{"illustration":[0,"./images/component-illustrations/modal.png"],"summary":[0,"A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."]}],"navigation":[0,{"illustration":[0,"./images/component-illustrations/navigation.png"],"summary":[0,"A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."]}],"notification-badge":[0,{"illustration":[0,"./images/component-illustrations/notification-badge.png"],"summary":[0,"A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."]}],"notification-drawer":[0,{"illustration":[0,"./images/component-illustrations/notification-drawer.png"],"summary":[0,"A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."]}],"number-input":[0,{"illustration":[0,"./images/component-illustrations/number-input.png"],"summary":[0,"A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."]}],"options-menu":[0,{"illustration":[0,"./images/component-illustrations/options-menu.png"],"summary":[0,"An <b>options menu</b> contains a set of optional settings."],"label":[0,"demo"]}],"overflow-menu":[0,{"illustration":[0,"./images/component-illustrations/overflow-menu.png"],"summary":[0,"An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."]}],"page":[0,{"illustration":[0,"./images/component-illustrations/page.png"],"summary":[0,"A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."]}],"pagination":[0,{"illustration":[0,"./images/component-illustrations/pagination.png"],"summary":[0,"A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."]}],"panel":[0,{"illustration":[0,"./images/component-illustrations/panel.png"],"summary":[0,"A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."]}],"password-generator":[0,{"illustration":[0,"./images/component-illustrations/password-generator.png"],"summary":[0,"This demo demonstrates how to create an input field that generates unique passwords."],"label":[0,"demo"]}],"password-strength":[0,{"illustration":[0,"./images/component-illustrations/password-strength.png"],"summary":[0,"This demo demonstrates how to validate and display feedback about password strength."],"label":[0,"demo"]}],"popover":[0,{"illustration":[0,"./images/component-illustrations/popover.png"],"summary":[0,"A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."]}],"progress-stepper":[0,{"illustration":[0,"./images/component-illustrations/progress-stepper.png"],"summary":[0,"A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."]}],"progress":[0,{"illustration":[0,"./images/component-illustrations/progress.png"],"summary":[0,"A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."]}],"radio":[0,{"illustration":[0,"./images/component-illustrations/radio.png"],"summary":[0,"A <b>radio</b> is a button that's used to present users with mutually exclusive choices."]}],"search-input":[0,{"illustration":[0,"./images/component-illustrations/search-input.png"],"summary":[0,"A <b>search input</b> is a type of input field that can be used to search, find, or filter."]}],"select":[0,{"illustration":[0,"./images/component-illustrations/select.png"],"summary":[0,"A <b>select</b> component is a menu that enables users to select 1 or more items from a list."],"label":[0,"beta"]}],"sidebar":[0,{"illustration":[0,"./images/component-illustrations/sidebar.png"],"summary":[0,"A <b>sidebar</b> is a panel that splits content into a secondary area within a page."]}],"simple-list":[0,{"illustration":[0,"./images/component-illustrations/simple-list.png"],"summary":[0,"A <b>simple list</b> displays selectable items within a page."]}],"skeleton":[0,{"illustration":[0,"./images/component-illustrations/skeleton.png"],"summary":[0,"A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."]}],"skip-to-content":[0,{"illustration":[0,"./images/component-illustrations/skip-to-content.png"],"summary":[0,"A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"]}],"slider":[0,{"illustration":[0,"./images/component-illustrations/slider.png"],"summary":[0,"A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."]}],"spinner":[0,{"illustration":[0,"./images/component-illustrations/spinner.png"],"summary":[0,"A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."]}],"switch":[0,{"illustration":[0,"./images/component-illustrations/switch.png"],"summary":[0,"A <b>switch</b> is a control that toggles the state of a setting between on and off."]}],"tab-content":[0,{"illustration":[0,"./images/component-illustrations/tab-content.png"],"summary":[0,"A <b>tab content</b> component is used to contain content within a tab."]}],"table":[0,{"illustration":[0,"./images/component-illustrations/table.png"],"summary":[0,"A <b>table</b> displays large data sets in a simple grid with column headers."]}],"tabs":[0,{"illustration":[0,"./images/component-illustrations/tabs.png"],"summary":[0,"<b>Tabs</b> group similar content within sub-views of a page."]}],"text-area":[0,{"illustration":[0,"./images/component-illustrations/text-area.png"],"summary":[0,"A <b>text area</b> allows users to enter a longer paragraph of text."]}],"text-input-group":[0,{"illustration":[0,"./images/component-illustrations/text-input-group.png"],"summary":[0,"A <b>text input group</b> is a more custom, flexible, and composable version of a <a href='/components/forms/text-input'>text input</a> that includes elements like icons and buttons."]}],"text-input":[0,{"illustration":[0,"./images/component-illustrations/text-input.png"],"summary":[0,"A <b>text input</b> components allows users to input short text."]}],"tile":[0,{"illustration":[0,"./images/component-illustrations/tile.png"],"summary":[0,"A <b>tile</b> is a container that allows users to select a static option."],"label":[0,"deprecated"]}],"time-picker":[0,{"illustration":[0,"./images/component-illustrations/time-picker.png"],"summary":[0,"A <b>time picker</b> component allows users to select a time from a list of options."]}],"timestamp":[0,{"illustration":[0,"./images/component-illustrations/timestamp.png"],"summary":[0,"A <b>timestamp</b> is a consistently formatted visual that displays date and time values."]}],"title":[0,{"illustration":[0,"./images/component-illustrations/title.png"],"summary":[0,"A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."]}],"toggle-group":[0,{"illustration":[0,"./images/component-illustrations/toggle-group.png"],"summary":[0,"A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."]}],"toolbar":[0,{"illustration":[0,"./images/component-illustrations/toolbar.png"],"summary":[0,"A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."]}],"tooltip":[0,{"illustration":[0,"./images/component-illustrations/tooltip.png"],"summary":[0,"A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."]}],"tree-view":[0,{"illustration":[0,"./images/component-illustrations/tree-view.png"],"summary":[0,"A <b>tree view</b> is a structure that displays data in a hierarchical view."]}],"truncate":[0,{"illustration":[0,"./images/component-illustrations/truncate.png"],"summary":[0,"A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."]}],"wizard":[0,{"illustration":[0,"./images/component-illustrations/wizard.png"],"summary":[0,"A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."]}]}],"placeholderText":[0,"Search components by name"],"countText":[0],"initialLayout":[0],"hasGridText":[0,true],"hasGridImages":[0],"hasListText":[0,true],"hasListImages":[0]}" ssr client="only" opts="{"name":"SectionGalleryBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=C41B4164BC109133DAB5F6E5xztgQO35jsWEsbAbQjkbgIHd&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="c4a16dce-ec4b-4bda-a0f0-f71cbc56d5aa">
|
|
48
|
+
let script = document.querySelector('script[data-island-id="c4a16dce-ec4b-4bda-a0f0-f71cbc56d5aa"]');
|
|
49
49
|
|
|
50
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
50
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=C41B4164BC109133DAB5F6E5xztgQO35jsWEsbAbQjkbgIHd&s=%7B%7D');
|
|
51
51
|
|
|
52
52
|
if (script) {
|
|
53
53
|
if(
|
|
@@ -69,10 +69,10 @@ if (script) {
|
|
|
69
69
|
}
|
|
70
70
|
script.remove();
|
|
71
71
|
}
|
|
72
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
73
|
-
let script = document.querySelector('script[data-island-id="
|
|
72
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=C777D948A0E46AAF13A0A2AFryFILwoUry7DjXB8TDLibG59&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="6e3db0c4-5803-4e14-b228-3dc51f033db1">
|
|
73
|
+
let script = document.querySelector('script[data-island-id="6e3db0c4-5803-4e14-b228-3dc51f033db1"]');
|
|
74
74
|
|
|
75
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
75
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=C777D948A0E46AAF13A0A2AFryFILwoUry7DjXB8TDLibG59&s=%7B%7D');
|
|
76
76
|
|
|
77
77
|
if (script) {
|
|
78
78
|
if(
|
|
@@ -195,10 +195,10 @@
|
|
|
195
195
|
<p>The line height of your text impacts how you should use <a href="/design-foundations/spacers">spacers</a> in your design.</p>
|
|
196
196
|
<p>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.</p>
|
|
197
197
|
<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>
|
|
198
|
-
<p><img src="/content/typography/line-height.png" alt="Correct and incorrect text spacing examples."></p> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
199
|
-
let script = document.querySelector('script[data-island-id="
|
|
198
|
+
<p><img src="/content/typography/line-height.png" alt="Correct and incorrect text spacing examples."></p> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=28A86DA08AF86E72EB23EDBAt3sTRgjwqNC0QHC%2Flcr5Ajdu&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="5fc3c722-0dfa-4395-8afb-33df8fcafa24">
|
|
199
|
+
let script = document.querySelector('script[data-island-id="5fc3c722-0dfa-4395-8afb-33df8fcafa24"]');
|
|
200
200
|
|
|
201
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
201
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=28A86DA08AF86E72EB23EDBAt3sTRgjwqNC0QHC%2Flcr5Ajdu&s=%7B%7D');
|
|
202
202
|
|
|
203
203
|
if (script) {
|
|
204
204
|
if(
|
|
@@ -220,10 +220,10 @@ if (script) {
|
|
|
220
220
|
}
|
|
221
221
|
script.remove();
|
|
222
222
|
}
|
|
223
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
224
|
-
let script = document.querySelector('script[data-island-id="
|
|
223
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=6B14FDAAA06E3E9B456AFE164I0PhSL2RZPsXRGqts7e41Vb&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="13d63fd2-eeca-4bba-b8fb-bf1806bf97ab">
|
|
224
|
+
let script = document.querySelector('script[data-island-id="13d63fd2-eeca-4bba-b8fb-bf1806bf97ab"]');
|
|
225
225
|
|
|
226
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
226
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=6B14FDAAA06E3E9B456AFE164I0PhSL2RZPsXRGqts7e41Vb&s=%7B%7D');
|
|
227
227
|
|
|
228
228
|
if (script) {
|
|
229
229
|
if(
|
|
@@ -344,10 +344,10 @@
|
|
|
344
344
|
|
|
345
345
|
|
|
346
346
|
|
|
347
|
-
<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> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
348
|
-
let script = document.querySelector('script[data-island-id="
|
|
347
|
+
<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> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=3BD7CAB5205C565CC5B6DD00yLP%2FGU48F%2FZga7ugpD9uCxgK&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="9b8858e9-0405-4cfc-8f37-7cd8e9c63789">
|
|
348
|
+
let script = document.querySelector('script[data-island-id="9b8858e9-0405-4cfc-8f37-7cd8e9c63789"]');
|
|
349
349
|
|
|
350
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
350
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=3BD7CAB5205C565CC5B6DD00yLP%2FGU48F%2FZga7ugpD9uCxgK&s=%7B%7D');
|
|
351
351
|
|
|
352
352
|
if (script) {
|
|
353
353
|
if(
|
|
@@ -369,10 +369,10 @@ if (script) {
|
|
|
369
369
|
}
|
|
370
370
|
script.remove();
|
|
371
371
|
}
|
|
372
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
373
|
-
let script = document.querySelector('script[data-island-id="
|
|
372
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=6299C838F88DC645C4A5C9C3785ldQ4nqd1XAGuv5xgLF9g1&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="7c574921-36e6-43e1-9f68-03cf3e3ef7b4">
|
|
373
|
+
let script = document.querySelector('script[data-island-id="7c574921-36e6-43e1-9f68-03cf3e3ef7b4"]');
|
|
374
374
|
|
|
375
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
375
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=6299C838F88DC645C4A5C9C3785ldQ4nqd1XAGuv5xgLF9g1&s=%7B%7D');
|
|
376
376
|
|
|
377
377
|
if (script) {
|
|
378
378
|
if(
|
|
@@ -91,10 +91,10 @@
|
|
|
91
91
|
<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>
|
|
92
92
|
<h3 id="design-guidelines">Design guidelines</h3>
|
|
93
93
|
<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>
|
|
94
|
-
<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> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
95
|
-
let script = document.querySelector('script[data-island-id="
|
|
94
|
+
<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> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=950B88B0E2CEBB35DF1ABAEAz6e4BPes26DiPPfGo14vX5Dc1Yhyi%2B%2Fzy4wqnU%2BjJZBSGTcgqEoYwI5DtF7Fmd%2F5N7ke5bVI3skQiykx%2FE3yGQ%3D%3D&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="76426aea-9c4e-4dab-b745-13862f71d99a">
|
|
95
|
+
let script = document.querySelector('script[data-island-id="76426aea-9c4e-4dab-b745-13862f71d99a"]');
|
|
96
96
|
|
|
97
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
97
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=950B88B0E2CEBB35DF1ABAEAz6e4BPes26DiPPfGo14vX5Dc1Yhyi%2B%2Fzy4wqnU%2BjJZBSGTcgqEoYwI5DtF7Fmd%2F5N7ke5bVI3skQiykx%2FE3yGQ%3D%3D&s=%7B%7D');
|
|
98
98
|
|
|
99
99
|
if (script) {
|
|
100
100
|
if(
|
|
@@ -116,10 +116,10 @@ if (script) {
|
|
|
116
116
|
}
|
|
117
117
|
script.remove();
|
|
118
118
|
}
|
|
119
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
120
|
-
let script = document.querySelector('script[data-island-id="
|
|
119
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=12C3325D37A184F95D7C1D53DcPZHDlC6YrSDuDR8jhvLb2WDEdOiXpsZ0JPJAOOvsc%2FKnKdJAWQVSeWKgwGcOOO5eKi%2BTzj5mlz&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="087ebc2b-b468-41c9-a7e8-a364d85a1f8d">
|
|
120
|
+
let script = document.querySelector('script[data-island-id="087ebc2b-b468-41c9-a7e8-a364d85a1f8d"]');
|
|
121
121
|
|
|
122
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
122
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=12C3325D37A184F95D7C1D53DcPZHDlC6YrSDuDR8jhvLb2WDEdOiXpsZ0JPJAOOvsc%2FKnKdJAWQVSeWKgwGcOOO5eKi%2BTzj5mlz&s=%7B%7D');
|
|
123
123
|
|
|
124
124
|
if (script) {
|
|
125
125
|
if(
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import 'kleur/colors';
|
|
1
|
+
import { __rest } from 'tslib';
|
|
3
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
3
|
import { u as useOUIAProps, c as css, s as setBreakpointCssVars, l as formatBreakpointMods, b as createIcon, B as Button } from './Button_BKhHR-ak.mjs';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { __rest } from 'tslib';
|
|
7
4
|
/* empty css */
|
|
8
|
-
import
|
|
5
|
+
import React from 'react';
|
|
9
6
|
|
|
10
|
-
const styles$
|
|
7
|
+
const styles$2 = {
|
|
11
8
|
"content": "pf-v6-c-content",
|
|
12
9
|
"contentA": "pf-v6-c-content--a",
|
|
13
10
|
"contentBlockquote": "pf-v6-c-content--blockquote",
|
|
@@ -56,25 +53,25 @@ var ContentVariants;
|
|
|
56
53
|
ContentVariants["dd"] = "dd";
|
|
57
54
|
})(ContentVariants || (ContentVariants = {}));
|
|
58
55
|
const componentStyles = {
|
|
59
|
-
div: styles$
|
|
60
|
-
h1: styles$
|
|
61
|
-
h2: styles$
|
|
62
|
-
h3: styles$
|
|
63
|
-
h4: styles$
|
|
64
|
-
h5: styles$
|
|
65
|
-
h6: styles$
|
|
66
|
-
p: styles$
|
|
67
|
-
a: styles$
|
|
68
|
-
small: styles$
|
|
69
|
-
blockquote: styles$
|
|
70
|
-
pre: styles$
|
|
71
|
-
hr: styles$
|
|
72
|
-
ul: styles$
|
|
73
|
-
ol: styles$
|
|
74
|
-
dl: styles$
|
|
75
|
-
li: styles$
|
|
76
|
-
dt: styles$
|
|
77
|
-
dd: styles$
|
|
56
|
+
div: styles$2.content,
|
|
57
|
+
h1: styles$2.contentH1,
|
|
58
|
+
h2: styles$2.contentH2,
|
|
59
|
+
h3: styles$2.contentH3,
|
|
60
|
+
h4: styles$2.contentH4,
|
|
61
|
+
h5: styles$2.contentH5,
|
|
62
|
+
h6: styles$2.contentH6,
|
|
63
|
+
p: styles$2.contentP,
|
|
64
|
+
a: styles$2.contentA,
|
|
65
|
+
small: styles$2.contentSmall,
|
|
66
|
+
blockquote: styles$2.contentBlockquote,
|
|
67
|
+
pre: styles$2.contentPre,
|
|
68
|
+
hr: styles$2.contentHr,
|
|
69
|
+
ul: styles$2.contentUl,
|
|
70
|
+
ol: styles$2.contentOl,
|
|
71
|
+
dl: styles$2.contentDl,
|
|
72
|
+
li: styles$2.contentLi,
|
|
73
|
+
dt: styles$2.contentDt,
|
|
74
|
+
dd: styles$2.contentDd
|
|
78
75
|
};
|
|
79
76
|
const Content = (_a) => {
|
|
80
77
|
var { children, className = '', component, isPlainList = false, isVisitedLink = false, ouiaId, ouiaSafe = true, isEditorial = false } = _a, props = __rest(_a, ["children", "className", "component", "isPlainList", "isVisitedLink", "ouiaId", "ouiaSafe", "isEditorial"]);
|
|
@@ -82,11 +79,11 @@ const Content = (_a) => {
|
|
|
82
79
|
const Component = wrappingComponent;
|
|
83
80
|
const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);
|
|
84
81
|
const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
|
|
85
|
-
return (jsx(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(componentStyles[wrappingComponent], isList && isPlainList && styles$
|
|
82
|
+
return (jsx(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(componentStyles[wrappingComponent], isList && isPlainList && styles$2.modifiers.plain, isVisitedLink && styles$2.modifiers.visited, isEditorial && styles$2.modifiers.editorial, className), children: children })));
|
|
86
83
|
};
|
|
87
84
|
Content.displayName = 'Content';
|
|
88
85
|
|
|
89
|
-
const styles = {
|
|
86
|
+
const styles$1 = {
|
|
90
87
|
"flex": "pf-v6-l-flex",
|
|
91
88
|
"modifiers": {
|
|
92
89
|
"flex": "pf-m-flex",
|
|
@@ -638,21 +635,37 @@ const l_flex_item_Order = {
|
|
|
638
635
|
const Flex = (_a) => {
|
|
639
636
|
var { children = null, className = '', component = 'div', spacer, spaceItems, gap, rowGap, columnGap, grow, shrink, flex, direction, alignItems, alignContent, alignSelf, align, justifyContent, display, fullWidth, flexWrap, order, style } = _a, props = __rest(_a, ["children", "className", "component", "spacer", "spaceItems", "gap", "rowGap", "columnGap", "grow", "shrink", "flex", "direction", "alignItems", "alignContent", "alignSelf", "align", "justifyContent", "display", "fullWidth", "flexWrap", "order", "style"]);
|
|
640
637
|
const Component = component;
|
|
641
|
-
return (jsx(Component, Object.assign({ className: css(styles.flex, formatBreakpointMods(spacer, styles), formatBreakpointMods(spaceItems, styles), formatBreakpointMods(grow, styles), formatBreakpointMods(shrink, styles), formatBreakpointMods(flex, styles), formatBreakpointMods(direction, styles), formatBreakpointMods(alignItems, styles), formatBreakpointMods(alignContent, styles), formatBreakpointMods(alignSelf, styles), formatBreakpointMods(align, styles), formatBreakpointMods(justifyContent, styles), formatBreakpointMods(display, styles), formatBreakpointMods(fullWidth, styles), formatBreakpointMods(flexWrap, styles), formatBreakpointMods(gap, styles), formatBreakpointMods(rowGap, styles), formatBreakpointMods(columnGap, styles), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }, props, { children: children })));
|
|
638
|
+
return (jsx(Component, Object.assign({ className: css(styles$1.flex, formatBreakpointMods(spacer, styles$1), formatBreakpointMods(spaceItems, styles$1), formatBreakpointMods(grow, styles$1), formatBreakpointMods(shrink, styles$1), formatBreakpointMods(flex, styles$1), formatBreakpointMods(direction, styles$1), formatBreakpointMods(alignItems, styles$1), formatBreakpointMods(alignContent, styles$1), formatBreakpointMods(alignSelf, styles$1), formatBreakpointMods(align, styles$1), formatBreakpointMods(justifyContent, styles$1), formatBreakpointMods(display, styles$1), formatBreakpointMods(fullWidth, styles$1), formatBreakpointMods(flexWrap, styles$1), formatBreakpointMods(gap, styles$1), formatBreakpointMods(rowGap, styles$1), formatBreakpointMods(columnGap, styles$1), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }, props, { children: children })));
|
|
642
639
|
};
|
|
643
640
|
Flex.displayName = 'Flex';
|
|
644
641
|
|
|
645
642
|
const FlexItem = (_a) => {
|
|
646
643
|
var { children = null, className = '', component = 'div', spacer, grow, shrink, flex, alignSelf, align, fullWidth, order, style } = _a, props = __rest(_a, ["children", "className", "component", "spacer", "grow", "shrink", "flex", "alignSelf", "align", "fullWidth", "order", "style"]);
|
|
647
644
|
const Component = component;
|
|
648
|
-
return (jsx(Component, Object.assign({}, props, { className: css(formatBreakpointMods(spacer, styles), formatBreakpointMods(grow, styles), formatBreakpointMods(shrink, styles), formatBreakpointMods(flex, styles), formatBreakpointMods(alignSelf, styles), formatBreakpointMods(align, styles), formatBreakpointMods(fullWidth, styles), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined, children: children })));
|
|
645
|
+
return (jsx(Component, Object.assign({}, props, { className: css(formatBreakpointMods(spacer, styles$1), formatBreakpointMods(grow, styles$1), formatBreakpointMods(shrink, styles$1), formatBreakpointMods(flex, styles$1), formatBreakpointMods(alignSelf, styles$1), formatBreakpointMods(align, styles$1), formatBreakpointMods(fullWidth, styles$1), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined, children: children })));
|
|
649
646
|
};
|
|
650
647
|
FlexItem.displayName = 'FlexItem';
|
|
651
648
|
|
|
649
|
+
const styles = {
|
|
650
|
+
"modifiers": {
|
|
651
|
+
"fill": "pf-m-fill",
|
|
652
|
+
"gutter": "pf-m-gutter"
|
|
653
|
+
},
|
|
654
|
+
"stack": "pf-v6-l-stack",
|
|
655
|
+
"stackItem": "pf-v6-l-stack__item"
|
|
656
|
+
};
|
|
657
|
+
|
|
658
|
+
const Stack = (_a) => {
|
|
659
|
+
var { hasGutter = false, className = '', children = null, component = 'div' } = _a, props = __rest(_a, ["hasGutter", "className", "children", "component"]);
|
|
660
|
+
const Component = component;
|
|
661
|
+
return (jsx(Component, Object.assign({}, props, { className: css(styles.stack, hasGutter && styles.modifiers.gutter, className), children: children })));
|
|
662
|
+
};
|
|
663
|
+
Stack.displayName = 'Stack';
|
|
664
|
+
|
|
652
665
|
const StackItem = (_a) => {
|
|
653
666
|
var { isFilled = false, className = '', children = null, component = 'div' } = _a, props = __rest(_a, ["isFilled", "className", "children", "component"]);
|
|
654
667
|
const Component = component;
|
|
655
|
-
return (jsx(Component, Object.assign({}, props, { className: css(styles
|
|
668
|
+
return (jsx(Component, Object.assign({}, props, { className: css(styles.stackItem, isFilled && styles.modifiers.fill, className), children: children })));
|
|
656
669
|
};
|
|
657
670
|
StackItem.displayName = 'StackItem';
|
|
658
671
|
|
|
@@ -724,17 +737,4 @@ const AutoLinkHeader = ({
|
|
|
724
737
|
);
|
|
725
738
|
};
|
|
726
739
|
|
|
727
|
-
|
|
728
|
-
const $$CSSTable = createComponent(($$result, $$props, $$slots) => {
|
|
729
|
-
const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
|
|
730
|
-
Astro2.self = $$CSSTable;
|
|
731
|
-
const { cssPrefix } = Astro2.props;
|
|
732
|
-
return renderTemplate`${cssPrefix?.length > 0 && renderTemplate`${renderComponent($$result, "Stack", Stack, { "hasGutter": true }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, {}, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "AutoLinkHeader", AutoLinkHeader, { "headingLevel": "h2", "className": "pf-v6-c-content--h2", "id": "css-variables" }, { "default": ($$result4) => renderTemplate`
|
|
733
|
-
CSS variables
|
|
734
|
-
` })}` })}${cssPrefix.map((prefix, index) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, { "key": index }, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "CSSTableComponent", null, { "autoLinkHeader": cssPrefix.length > 1, "cssPrefix": prefix, "client:only": "react", "client:component-hydration": "only", "client:component-path": "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable", "client:component-export": "CSSTable" })}` })}`)}` })}`}`;
|
|
735
|
-
}, "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro", void 0);
|
|
736
|
-
|
|
737
|
-
const $$file = "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro";
|
|
738
|
-
const $$url = undefined;
|
|
739
|
-
|
|
740
|
-
export { $$CSSTable as $, Content as C, StackItem as S, $$file as a, $$url as b };
|
|
740
|
+
export { AutoLinkHeader as A, Content as C, Stack as S, StackItem as a };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { c as createComponent, a as createAstro, r as renderComponent, b as renderTemplate } from './astro/server_Cl9jPh4p.mjs';
|
|
2
|
+
import 'kleur/colors';
|
|
3
|
+
import { S as Stack, a as StackItem, A as AutoLinkHeader } from './AutoLinkHeader_C2GD0g-K.mjs';
|
|
4
|
+
|
|
5
|
+
const $$Astro = createAstro();
|
|
6
|
+
const $$CSSTable = createComponent(($$result, $$props, $$slots) => {
|
|
7
|
+
const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
|
|
8
|
+
Astro2.self = $$CSSTable;
|
|
9
|
+
const { cssPrefix } = Astro2.props;
|
|
10
|
+
return renderTemplate`${cssPrefix?.length > 0 && renderTemplate`${renderComponent($$result, "Stack", Stack, { "hasGutter": true }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, {}, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "AutoLinkHeader", AutoLinkHeader, { "headingLevel": "h2", "className": "pf-v6-c-content--h2", "id": "css-variables" }, { "default": ($$result4) => renderTemplate`
|
|
11
|
+
CSS variables
|
|
12
|
+
` })}` })}${cssPrefix.map((prefix, index) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, { "key": index }, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "CSSTableComponent", null, { "autoLinkHeader": cssPrefix.length > 1, "cssPrefix": prefix, "client:only": "react", "client:component-hydration": "only", "client:component-path": "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable", "client:component-export": "CSSTable" })}` })}`)}` })}`}`;
|
|
13
|
+
}, "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro", void 0);
|
|
14
|
+
|
|
15
|
+
const $$file = "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro";
|
|
16
|
+
const $$url = undefined;
|
|
17
|
+
|
|
18
|
+
export { $$CSSTable as default, $$file as file, $$url as url };
|
|
@@ -3,7 +3,7 @@ import 'kleur/colors';
|
|
|
3
3
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
4
4
|
import { c as css, b as createIcon, B as Button, r as getUniqueId, K as KeyTypes, v as BellIcon, I as InfoCircleIcon, d as ExclamationCircleIcon, E as ExclamationTriangleIcon, C as CheckCircleIcon, u as useOUIAProps } from './Button_BKhHR-ak.mjs';
|
|
5
5
|
/* empty css */
|
|
6
|
-
import { S as Stack } from './
|
|
6
|
+
import { C as Content, S as Stack, a as StackItem, A as AutoLinkHeader } from './AutoLinkHeader_C2GD0g-K.mjs';
|
|
7
7
|
import { __rest } from 'tslib';
|
|
8
8
|
import { useRef, useEffect, forwardRef, useImperativeHandle, createContext, useState, createRef, Fragment, createElement, cloneElement, useContext } from 'react';
|
|
9
9
|
import { T as TimesIcon, P as Popper, u as useIsomorphicLayoutEffect, e as Tooltip, b as Dropdown, M as MenuToggle, c as DropdownList, D as Divider, d as DropdownItem, a as AngleDownIcon, f as checkStyles, S as StarIcon, g as Checkbox, s as setTabIndex, h as handleArrows } from './angle-down-icon_BO1Ed-9Z.mjs';
|
|
@@ -1646,7 +1646,6 @@ const PropsTable = ({
|
|
|
1646
1646
|
componentDescription,
|
|
1647
1647
|
componentProps
|
|
1648
1648
|
}) => {
|
|
1649
|
-
const SectionHeading = headingLevel;
|
|
1650
1649
|
const publicProps = componentProps?.filter((prop) => !prop.isHidden);
|
|
1651
1650
|
const hasPropsToRender = !!publicProps?.length;
|
|
1652
1651
|
const renderTagLabel = (componentProp) => {
|
|
@@ -1671,7 +1670,7 @@ const PropsTable = ({
|
|
|
1671
1670
|
] });
|
|
1672
1671
|
};
|
|
1673
1672
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
1674
|
-
/* @__PURE__ */ jsx(
|
|
1673
|
+
/* @__PURE__ */ jsx(Content, { component: headingLevel, children: componentName }),
|
|
1675
1674
|
/* @__PURE__ */ jsxs(Stack, { hasGutter: true, children: [
|
|
1676
1675
|
componentDescription && /* @__PURE__ */ jsx(
|
|
1677
1676
|
"div",
|
|
@@ -1740,7 +1739,9 @@ const $$PropsTables = createComponent(async ($$result, $$props, $$slots) => {
|
|
|
1740
1739
|
}
|
|
1741
1740
|
const { propComponents } = Astro2.props;
|
|
1742
1741
|
const propsData = await getPropsData(propComponents);
|
|
1743
|
-
return renderTemplate`${
|
|
1742
|
+
return renderTemplate`${renderTemplate`${renderComponent($$result, "Stack", Stack, { "hasGutter": true }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, {}, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "AutoLinkHeader", AutoLinkHeader, { "headingLevel": "h2", "className": "pf-v6-c-content--h2", "id": "props-table" }, { "default": ($$result4) => renderTemplate`
|
|
1743
|
+
Props
|
|
1744
|
+
` })}` })}${propsData.filter((comp) => !!comp).map((component) => renderTemplate`${renderComponent($$result2, "StackItem", StackItem, { "key": component.name }, { "default": ($$result3) => renderTemplate`${renderComponent($$result3, "PropsTable", PropsTable, { "componentName": component.name, "componentDescription": component.description, "componentProps": component.props })}` })}`)}` })}`}`;
|
|
1744
1745
|
}, "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro", void 0);
|
|
1745
1746
|
|
|
1746
1747
|
const $$file = "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro";
|
package/dist/server/entry.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { renderers } from './renderers.mjs';
|
|
2
2
|
import { c as createExports, s as serverEntrypointModule } from './chunks/_@astrojs-ssr-adapter_CbICuCdt.mjs';
|
|
3
|
-
import { manifest } from './
|
|
3
|
+
import { manifest } from './manifest_QF66rQCk.mjs';
|
|
4
4
|
|
|
5
5
|
const serverIslandMap = new Map([
|
|
6
|
-
['PropsTables', () => import('./chunks/
|
|
7
|
-
['CSSTable', () => import('./chunks/
|
|
6
|
+
['PropsTables', () => import('./chunks/PropsTables_PVzRHJNB.mjs')],
|
|
7
|
+
['CSSTable', () => import('./chunks/CSSTable_B8tlH3gz.mjs')],
|
|
8
8
|
]);;
|
|
9
9
|
|
|
10
10
|
const _page0 = () => import('./pages/_image.astro.mjs');
|
|
@@ -96,7 +96,7 @@ function deserializeManifest(serializedManifest) {
|
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
const manifest = deserializeManifest({"hrefRoot":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/","cacheDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/.astro/","outDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/","srcDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/src/","publicDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/public/","buildClientDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/client/","buildServerDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/server/","adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"page","component":"_server-islands.astro","params":["name"],"segments":[[{"content":"_server-islands","dynamic":false,"spread":false}],[{"content":"name","dynamic":true,"spread":false}]],"pattern":"^\\/_server-islands\\/([^/]+?)\\/?$","prerender":false,"isIndex":false,"fallbackRoutes":[],"route":"/_server-islands/[name]","origin":"internal","_meta":{"trailingSlash":"ignore"}}},{"file":"index.html","links":[],"scripts":[],"styles":[],"routeData":{"route":"/","isIndex":true,"type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":true,"fallbackRoutes":[],"distURL":[],"origin":"project","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","isIndex":false,"route":"/_image","pattern":"^\\/_image\\/?$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"node_modules/astro/dist/assets/endpoint/node.js","pathname":"/_image","prerender":false,"fallbackRoutes":[],"origin":"internal","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/props","isIndex":false,"type":"endpoint","pattern":"^\\/props\\/?$","segments":[[{"content":"props","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/props.ts","pathname":"/props","prerender":false,"fallbackRoutes":[],"distURL":[],"origin":"project","_meta":{"trailingSlash":"ignore"}}}],"base":"/","trailingSlash":"ignore","compressHTML":true,"componentMetadata":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/index.astro",{"propagation":"in-tree","containsHead":true}],["\u0000astro:content",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Navigation.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/[section]/[...page].astro",{"propagation":"in-tree","containsHead":true}],["\u0000@astro-page:src/pages/[section]/[...page]@_@astro",{"propagation":"in-tree","containsHead":false}],["\u0000@astrojs-ssr-virtual-entry",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/[section]/[page]/[...tab].astro",{"propagation":"in-tree","containsHead":true}],["\u0000@astro-page:src/pages/[section]/[page]/[...tab]@_@astro",{"propagation":"in-tree","containsHead":false}],["\u0000@astro-page:src/pages/index@_@astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Page.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Masthead.astro",{"propagation":"in-tree","containsHead":false}]],"renderers":[],"clientDirectives":[["idle","(()=>{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\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var n=(a,t)=>{let i=async()=>{await(await a())()};if(t.value){let e=matchMedia(t.value);e.matches?i():e.addEventListener(\"change\",i,{once:!0})}};(self.Astro||(self.Astro={})).media=n;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value==\"object\"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000noop-middleware":"_noop-middleware.mjs","\u0000@astro-page:node_modules/astro/dist/assets/endpoint/node@_@js":"pages/_image.astro.mjs","\u0000@astro-page:src/pages/props@_@ts":"pages/props.astro.mjs","\u0000@astro-page:src/pages/[section]/[page]/[...tab]@_@astro":"pages/_section_/_page_/_---tab_.astro.mjs","\u0000@astro-page:src/pages/[section]/[...page]@_@astro":"pages/_section_/_---page_.astro.mjs","\u0000@astro-page:src/pages/index@_@astro":"pages/index.astro.mjs","\u0000@astrojs-ssr-virtual-entry":"entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000@astrojs-ssr-adapter":"_@astrojs-ssr-adapter.mjs","\u0000@astrojs-manifest":"manifest_zgA_NEEc.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro":"chunks/PropsTables_WcioWlx5.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/astro/dist/assets/services/sharp.js":"chunks/sharp_CbOL3WDk.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/.astro/content-assets.mjs":"chunks/content-assets_DleWbedO.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/.astro/content-modules.mjs":"chunks/content-modules_fX1c2JRG.mjs","\u0000astro:data-layer-content":"chunks/_astro_data-layer-content_D4Ib_RjR.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/AllComponents.mdx?astroPropagatedAssets":"chunks/AllComponents_CjOtwUH6.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/examples/Accordion/Accordion.mdx?astroPropagatedAssets":"chunks/Accordion_BJka4Qvb.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/AllComponents.mdx":"chunks/AllComponents_CRhgTsiT.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/examples/Accordion/Accordion.mdx":"chunks/Accordion_BQIphkaZ.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro":"chunks/CSSTable_C1yGETxF.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PageToggle":"_astro/PageToggle.C6_rp-Bm.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Toolbar.tsx":"_astro/Toolbar.BmilfRHR.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable":"_astro/CSSTable.V4xaGXjj.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/section-gallery/SectionGallery":"_astro/SectionGallery.DqD5bUWQ.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/LiveExample":"_astro/LiveExample.CiM2pGMB.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Navigation.tsx":"_astro/Navigation.zYUnVsp7.js","@astrojs/react/client.js":"_astro/client.zs76E0tG.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro?astro&type=script&index=0&lang.ts":"_astro/Main.astro_astro_type_script_index_0_lang.nbkdxKNK.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/astro/components/ClientRouter.astro?astro&type=script&index=0&lang.ts":"_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js","astro:scripts/before-hydration.js":""},"inlinedScripts":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro?astro&type=script&index=0&lang.ts","const n=window.localStorage.getItem(\"theme-preference\");document?.querySelector(\"html\")?.classList.toggle(\"pf-v6-theme-dark\",n===\"dark\");document.addEventListener(\"astro:after-swap\",()=>{const e=window.localStorage.getItem(\"theme-preference\");document?.querySelector(\"html\")?.classList.toggle(\"pf-v6-theme-dark\",e===\"dark\")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:\"smooth\"})};document.addEventListener(\"DOMContentLoaded\",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,\"\",\" \"),setTimeout(()=>{o(e),history.replaceState(null,\"\",e)},500)}});window.addEventListener(\"hashchange\",()=>{window.location.hash&&o(window.location.hash)});"]],"assets":["/_astro/RedHatTextVF.wYvZ7prR.woff2","/_astro/RedHatTextVF-Italic.Dkj_WqbA.woff2","/_astro/RedHatDisplayVF.CYDHf1NI.woff2","/_astro/RedHatDisplayVF-Italic.CRpusWc8.woff2","/_astro/RedHatMonoVF.C4fMH6Vz.woff2","/_astro/RedHatMonoVF-Italic.DGQo2ogW.woff2","/_astro/fa-solid-900.DguXoeIz.woff2","/_astro/pf-v6-pficon.Dy6oiu9u.woff2","/_astro/_page_.CtheD08_.css","/_astro/_page_.D1z73Byz.css","/PF-HorizontalLogo-Color.svg","/PF-HorizontalLogo-Reverse.svg","/avatarImg.svg","/avatarImgDark.svg","/favicon.svg","/_astro/Button.IBWho7ny.js","/_astro/CSSTable.V4xaGXjj.js","/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js","/_astro/Content.Dv9vgAns.js","/_astro/DropdownGroup.DmTizX-Q.js","/_astro/DropdownList.BUcpBUVP.js","/_astro/LiveExample.B7IM_dLQ.css","/_astro/LiveExample.CiM2pGMB.js","/_astro/Navigation.zYUnVsp7.js","/_astro/PageContext.ipir86Hm.js","/_astro/PageSidebarBody.vGxFk_DU.js","/_astro/PageToggle.C6_rp-Bm.js","/_astro/PageToggleButton.CagcouJB.js","/_astro/SearchInput.BwWsXfyf.js","/_astro/SectionGallery.DqD5bUWQ.js","/_astro/Toolbar.BmilfRHR.js","/_astro/ToolbarContent.Cd-kqxku.js","/_astro/_page_.Chv_bGyU.css","/_astro/_page_.DxJDkZPc.css","/_astro/angle-left-icon.C3MzYN3k.js","/_astro/client.zs76E0tG.js","/_astro/divider.O4WEhuBq.js","/_astro/help-icon.Du6t7nyh.js","/_astro/index.BQFV5hT1.js","/_astro/index.BkswdOFP.js","/_astro/index.CAChmxYj.js","/_astro/index.eCxJ45ll.js","/_astro/page.BTC3Kf3x.js","/content/typography/line-height.png","/index.html"],"buildFormat":"directory","checkOrigin":true,"serverIslandNameMap":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro","PropsTables"],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro","CSSTable"]],"key":"nYpzzY0OL8XCqJLRGpfbhsuRHz3cxq0uwPyekSfrrqA="});
|
|
99
|
+
const manifest = deserializeManifest({"hrefRoot":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/","cacheDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/.astro/","outDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/","srcDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/src/","publicDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/public/","buildClientDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/client/","buildServerDir":"file:///home/runner/work/patternfly-doc-core/patternfly-doc-core/dist/server/","adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"page","component":"_server-islands.astro","params":["name"],"segments":[[{"content":"_server-islands","dynamic":false,"spread":false}],[{"content":"name","dynamic":true,"spread":false}]],"pattern":"^\\/_server-islands\\/([^/]+?)\\/?$","prerender":false,"isIndex":false,"fallbackRoutes":[],"route":"/_server-islands/[name]","origin":"internal","_meta":{"trailingSlash":"ignore"}}},{"file":"index.html","links":[],"scripts":[],"styles":[],"routeData":{"route":"/","isIndex":true,"type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":true,"fallbackRoutes":[],"distURL":[],"origin":"project","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","isIndex":false,"route":"/_image","pattern":"^\\/_image\\/?$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"node_modules/astro/dist/assets/endpoint/node.js","pathname":"/_image","prerender":false,"fallbackRoutes":[],"origin":"internal","_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/props","isIndex":false,"type":"endpoint","pattern":"^\\/props\\/?$","segments":[[{"content":"props","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/props.ts","pathname":"/props","prerender":false,"fallbackRoutes":[],"distURL":[],"origin":"project","_meta":{"trailingSlash":"ignore"}}}],"base":"/","trailingSlash":"ignore","compressHTML":true,"componentMetadata":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/index.astro",{"propagation":"in-tree","containsHead":true}],["\u0000astro:content",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Navigation.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/[section]/[...page].astro",{"propagation":"in-tree","containsHead":true}],["\u0000@astro-page:src/pages/[section]/[...page]@_@astro",{"propagation":"in-tree","containsHead":false}],["\u0000@astrojs-ssr-virtual-entry",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/pages/[section]/[page]/[...tab].astro",{"propagation":"in-tree","containsHead":true}],["\u0000@astro-page:src/pages/[section]/[page]/[...tab]@_@astro",{"propagation":"in-tree","containsHead":false}],["\u0000@astro-page:src/pages/index@_@astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Page.astro",{"propagation":"in-tree","containsHead":false}],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Masthead.astro",{"propagation":"in-tree","containsHead":false}]],"renderers":[],"clientDirectives":[["idle","(()=>{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\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var n=(a,t)=>{let i=async()=>{await(await a())()};if(t.value){let e=matchMedia(t.value);e.matches?i():e.addEventListener(\"change\",i,{once:!0})}};(self.Astro||(self.Astro={})).media=n;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value==\"object\"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000noop-middleware":"_noop-middleware.mjs","\u0000@astro-page:node_modules/astro/dist/assets/endpoint/node@_@js":"pages/_image.astro.mjs","\u0000@astro-page:src/pages/props@_@ts":"pages/props.astro.mjs","\u0000@astro-page:src/pages/[section]/[page]/[...tab]@_@astro":"pages/_section_/_page_/_---tab_.astro.mjs","\u0000@astro-page:src/pages/[section]/[...page]@_@astro":"pages/_section_/_---page_.astro.mjs","\u0000@astro-page:src/pages/index@_@astro":"pages/index.astro.mjs","\u0000@astrojs-ssr-virtual-entry":"entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000@astrojs-ssr-adapter":"_@astrojs-ssr-adapter.mjs","\u0000@astrojs-manifest":"manifest_QF66rQCk.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro":"chunks/PropsTables_PVzRHJNB.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro":"chunks/CSSTable_B8tlH3gz.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/astro/dist/assets/services/sharp.js":"chunks/sharp_CbOL3WDk.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/.astro/content-assets.mjs":"chunks/content-assets_DleWbedO.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/.astro/content-modules.mjs":"chunks/content-modules_fX1c2JRG.mjs","\u0000astro:data-layer-content":"chunks/_astro_data-layer-content_D4Ib_RjR.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/AllComponents.mdx?astroPropagatedAssets":"chunks/AllComponents_CjOtwUH6.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/examples/Accordion/Accordion.mdx?astroPropagatedAssets":"chunks/Accordion_BJka4Qvb.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/AllComponents.mdx":"chunks/AllComponents_CRhgTsiT.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/textContent/examples/Accordion/Accordion.mdx":"chunks/Accordion_BQIphkaZ.mjs","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PageToggle":"_astro/PageToggle.C6_rp-Bm.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Toolbar.tsx":"_astro/Toolbar.BmilfRHR.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable":"_astro/CSSTable.V4xaGXjj.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/section-gallery/SectionGallery":"_astro/SectionGallery.DqD5bUWQ.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/LiveExample":"_astro/LiveExample.CiM2pGMB.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/Navigation.tsx":"_astro/Navigation.zYUnVsp7.js","@astrojs/react/client.js":"_astro/client.zs76E0tG.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro?astro&type=script&index=0&lang.ts":"_astro/Main.astro_astro_type_script_index_0_lang.nbkdxKNK.js","/home/runner/work/patternfly-doc-core/patternfly-doc-core/node_modules/astro/components/ClientRouter.astro?astro&type=script&index=0&lang.ts":"_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js","astro:scripts/before-hydration.js":""},"inlinedScripts":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/layouts/Main.astro?astro&type=script&index=0&lang.ts","const n=window.localStorage.getItem(\"theme-preference\");document?.querySelector(\"html\")?.classList.toggle(\"pf-v6-theme-dark\",n===\"dark\");document.addEventListener(\"astro:after-swap\",()=>{const e=window.localStorage.getItem(\"theme-preference\");document?.querySelector(\"html\")?.classList.toggle(\"pf-v6-theme-dark\",e===\"dark\")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:\"smooth\"})};document.addEventListener(\"DOMContentLoaded\",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,\"\",\" \"),setTimeout(()=>{o(e),history.replaceState(null,\"\",e)},500)}});window.addEventListener(\"hashchange\",()=>{window.location.hash&&o(window.location.hash)});"]],"assets":["/_astro/RedHatTextVF.wYvZ7prR.woff2","/_astro/RedHatTextVF-Italic.Dkj_WqbA.woff2","/_astro/RedHatDisplayVF.CYDHf1NI.woff2","/_astro/RedHatDisplayVF-Italic.CRpusWc8.woff2","/_astro/RedHatMonoVF.C4fMH6Vz.woff2","/_astro/RedHatMonoVF-Italic.DGQo2ogW.woff2","/_astro/fa-solid-900.DguXoeIz.woff2","/_astro/pf-v6-pficon.Dy6oiu9u.woff2","/_astro/_page_.CtheD08_.css","/_astro/_page_.D1z73Byz.css","/PF-HorizontalLogo-Color.svg","/PF-HorizontalLogo-Reverse.svg","/avatarImg.svg","/avatarImgDark.svg","/favicon.svg","/_astro/Button.IBWho7ny.js","/_astro/CSSTable.V4xaGXjj.js","/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js","/_astro/Content.Dv9vgAns.js","/_astro/DropdownGroup.DmTizX-Q.js","/_astro/DropdownList.BUcpBUVP.js","/_astro/LiveExample.B7IM_dLQ.css","/_astro/LiveExample.CiM2pGMB.js","/_astro/Navigation.zYUnVsp7.js","/_astro/PageContext.ipir86Hm.js","/_astro/PageSidebarBody.vGxFk_DU.js","/_astro/PageToggle.C6_rp-Bm.js","/_astro/PageToggleButton.CagcouJB.js","/_astro/SearchInput.BwWsXfyf.js","/_astro/SectionGallery.DqD5bUWQ.js","/_astro/Toolbar.BmilfRHR.js","/_astro/ToolbarContent.Cd-kqxku.js","/_astro/_page_.Chv_bGyU.css","/_astro/_page_.DxJDkZPc.css","/_astro/angle-left-icon.C3MzYN3k.js","/_astro/client.zs76E0tG.js","/_astro/divider.O4WEhuBq.js","/_astro/help-icon.Du6t7nyh.js","/_astro/index.BQFV5hT1.js","/_astro/index.BkswdOFP.js","/_astro/index.CAChmxYj.js","/_astro/index.eCxJ45ll.js","/_astro/page.BTC3Kf3x.js","/content/typography/line-height.png","/index.html"],"buildFormat":"directory","checkOrigin":true,"serverIslandNameMap":[["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro","PropsTables"],["/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/CSSTable.astro","CSSTable"]],"key":"ivZUoSLmDc4ZH/xoeXpJrO0+tsgfiLS8tcAqMFDgBzw="});
|
|
100
100
|
if (manifest.sessionConfig) manifest.sessionConfig.driverModule = null;
|
|
101
101
|
|
|
102
102
|
export { manifest };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly-doc-core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.8.
|
|
4
|
+
"version": "1.8.2",
|
|
5
5
|
"description": "PatternFly Core Documentation",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@astrojs/check": "^0.9.4",
|
|
44
|
-
"@astrojs/node": "^9.1.3",
|
|
45
44
|
"@astrojs/mdx": "^4.2.6",
|
|
45
|
+
"@astrojs/node": "^9.1.3",
|
|
46
46
|
"@astrojs/react": "^4.2.1",
|
|
47
47
|
"@nanostores/react": "^0.8.0",
|
|
48
48
|
"@patternfly/ast-helpers": "^1.4.0-alpha.190",
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
import { css } from '@patternfly/react-styles'
|
|
12
12
|
import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'
|
|
13
13
|
import textStyles from '@patternfly/react-styles/css/utilities/Text/text'
|
|
14
|
+
import { Content } from '@patternfly/react-core'
|
|
14
15
|
|
|
15
16
|
export type ComponentProp = {
|
|
16
17
|
name: string
|
|
@@ -36,7 +37,6 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
|
|
|
36
37
|
componentDescription,
|
|
37
38
|
componentProps,
|
|
38
39
|
}) => {
|
|
39
|
-
const SectionHeading = headingLevel
|
|
40
40
|
const publicProps = componentProps?.filter((prop) => !prop.isHidden)
|
|
41
41
|
const hasPropsToRender = !!publicProps?.length
|
|
42
42
|
|
|
@@ -77,7 +77,7 @@ export const PropsTable: React.FunctionComponent<PropsTableProps> = ({
|
|
|
77
77
|
|
|
78
78
|
return (
|
|
79
79
|
<div>
|
|
80
|
-
<
|
|
80
|
+
<Content component={headingLevel}>{componentName}</Content>
|
|
81
81
|
<Stack hasGutter>
|
|
82
82
|
{componentDescription && (
|
|
83
83
|
<div
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
import { PropsTable } from './PropsTable'
|
|
3
|
+
import { Stack, StackItem } from '@patternfly/react-core'
|
|
4
|
+
import { AutoLinkHeader } from './AutoLinkHeader'
|
|
3
5
|
|
|
4
6
|
async function getPropsData(propComponents?: string[]) {
|
|
5
7
|
if (!propComponents || propComponents.length === 0) {
|
|
@@ -25,14 +27,26 @@ const propsData = await getPropsData(propComponents)
|
|
|
25
27
|
---
|
|
26
28
|
|
|
27
29
|
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
<Stack hasGutter>
|
|
31
|
+
<StackItem>
|
|
32
|
+
<AutoLinkHeader
|
|
33
|
+
headingLevel="h2"
|
|
34
|
+
className="pf-v6-c-content--h2"
|
|
35
|
+
id="props-table"
|
|
36
|
+
>
|
|
37
|
+
Props
|
|
38
|
+
</AutoLinkHeader>
|
|
39
|
+
</StackItem>
|
|
40
|
+
{propsData
|
|
41
|
+
.filter((comp: any) => !!comp)
|
|
42
|
+
.map((component: any) => (
|
|
43
|
+
<StackItem key={component.name}>
|
|
44
|
+
<PropsTable
|
|
45
|
+
componentName={component.name}
|
|
46
|
+
componentDescription={component.description}
|
|
47
|
+
componentProps={component.props}
|
|
48
|
+
/>
|
|
49
|
+
</StackItem>
|
|
50
|
+
))}
|
|
51
|
+
</Stack>
|
|
38
52
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
/* empty css */
|
|
4
|
-
import { c as css } from './Button_BKhHR-ak.mjs';
|
|
5
|
-
|
|
6
|
-
const styles = {
|
|
7
|
-
"modifiers": {
|
|
8
|
-
"fill": "pf-m-fill",
|
|
9
|
-
"gutter": "pf-m-gutter"
|
|
10
|
-
},
|
|
11
|
-
"stack": "pf-v6-l-stack",
|
|
12
|
-
"stackItem": "pf-v6-l-stack__item"
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
const Stack = (_a) => {
|
|
16
|
-
var { hasGutter = false, className = '', children = null, component = 'div' } = _a, props = __rest(_a, ["hasGutter", "className", "children", "component"]);
|
|
17
|
-
const Component = component;
|
|
18
|
-
return (jsx(Component, Object.assign({}, props, { className: css(styles.stack, hasGutter && styles.modifiers.gutter, className), children: children })));
|
|
19
|
-
};
|
|
20
|
-
Stack.displayName = 'Stack';
|
|
21
|
-
|
|
22
|
-
export { Stack as S, styles as s };
|