@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/page/react

@@ -0,0 +1,122 @@
+## Examples
+
+### Basic page components
+
+A page will typically contain the following components:
+
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
+
+The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
+
+  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
+- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
+- 1 or more `<PageSection>` components
+
+### Vertical navigation
+
+To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
+
+The `isSidebarOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the sidebar is visible.
+
+
+import PageVerticalNav from "./PageVerticalNav.tsx?raw"
+
+<LiveExample src={PageVerticalNav} />
+
+### Multiple sidebar body
+
+You can have multiple `<PageSidebarBody>` components inside the `<PageSidebar>` for more customization. You can modify the `<PageSidebarBody>` further by passing the following properties:
+
+- `usePageInsets` will modify the component's insets to match page insets
+- `isFilled={true}` will cause the component to grow to fill the available vertical space
+- `isFilled={false}` will cause the component to **not** grow to fill the available vertical space
+
+By default, the last `<PageSidebarBody>` will grow to fill the available vertical space. This can be changed by passing `isFilled={false}` as demonstrated in the following example.
+
+
+import PageMultipleSidebarBody from "./PageMultipleSidebarBody.tsx?raw"
+
+<LiveExample src={PageMultipleSidebarBody} />
+
+### Horizontal navigation
+
+To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
+
+
+import PageHorizontalNav from "./PageHorizontalNav.tsx?raw"
+
+<LiveExample src={PageHorizontalNav} />
+
+### Uncontrolled navigation
+
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
+
+
+import PageUncontrolledNav from "./PageUncontrolledNav.tsx?raw"
+
+<LiveExample src={PageUncontrolledNav} />
+
+### Filled page sections
+
+By default, page sections will not expand to fill in the available vertical space in a page.
+
+To change this default behavior, pass `isContentFilled` to the `<Page>` component and `isFilled={true}` to any child `<PageSection>` or `<PageGroup>` component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.
+
+
+import PageWithOrWithoutFill from "./PageWithOrWithoutFill.tsx?raw"
+
+<LiveExample src={PageWithOrWithoutFill} />
+
+### Main section padding
+
+To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.
+
+As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'.
+
+To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
+
+To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg', 'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
+
+To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg' 'xl', and '2xl' breakpoints will have `noPadding`.
+
+
+import PageMainSectionPadding from "./PageMainSectionPadding.tsx?raw"
+
+<LiveExample src={PageMainSectionPadding} />
+
+### Main section variations
+
+This example shows all types of page sections.
+
+
+import PageMainSectionVariations from "./PageMainSectionVariations.tsx?raw"
+
+<LiveExample src={PageMainSectionVariations} />
+
+### Group section
+
+To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.
+
+The following example adds a group containing `<PageBreadcrumb>` and `<PageSection>` components.
+
+To add additional components and information to a group, you may use the following properties:
+
+- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
+- To indicate that horizontal sub navigation should be in a group, use `isHorizontalSubnavGrouped`.
+- To specify additional group content, use `additionalGroupedContent`.
+
+
+import PageGroupSection from "./PageGroupSection.tsx?raw"
+
+<LiveExample src={PageGroupSection} />
+
+### Centered section
+
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v6-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+
+The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
+
+
+import PageCenteredSection from "./PageCenteredSection.tsx?raw"
+
+<LiveExample src={PageCenteredSection} />

package/dist/docs/api/v6/components/pagination/html

@@ -0,0 +1,121 @@
+## Examples
+
+### Top
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Top sticky
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Indeterminate (item count is not known)
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Bottom
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Bottom sticky
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Top disabled
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Compact
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Top with display summary modifier
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Top with display full modifier
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Top with responsive display summary and display full modifiers
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Compact display full modifier
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Inset
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label`  | `.pf-v6-c-pagination__nav` |  Provides an accessible name for pagination navigation element. **Required** |
+| `type="number"` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Defines a field as a number. **Required** |
+| `value` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides initial integer value. **Required** |
+| `min` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides minimum integer value. **Required** |
+| `max` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides max integer value. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-pagination` | `<div>` |  Initiates pagination. |
+| `.pf-v6-c-pagination__current` | `<div>` |  Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
+| `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the menu toggle on summary. |
+| `.pf-v6-c-pagination__page-menu` | `<div>` | Initiates wrapper element for the pagination menu toggle. **Required** when a menu toggle is intended or expected to be rendered. |
+| `.pf-v6-c-pagination__nav` | `<nav>` |  Initiates pagination nav. |
+| `.pf-v6-c-pagination__nav-control` | `<div>` |  Initiates pagination nav control. |
+| `.pf-v6-c-pagination__nav-page-select` | `<div>` |  Initiates pagination nav page select. |
+| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-bottom` | `.pf-v6-c-pagination` | Modifies for bottom pagination component styles. |
+| `.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles. |
+| `.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
+| `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-page-insets` | `.pf-v6-c-pagination` |  Modifies the pagination component padding/inset to visually match padding of page elements. |
+| `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
+| `.pf-m-prev` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the previous page button. |
+| `.pf-m-next` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the next page button. |
+| `.pf-m-last` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the last page button. |

package/dist/docs/api/v6/components/pagination/react

@@ -0,0 +1,71 @@
+## Examples
+
+### Top
+
+
+import PaginationTop from "./PaginationTop.tsx?raw"
+
+<LiveExample src={PaginationTop} />
+
+### Bottom
+
+
+import PaginationBottom from "./PaginationBottom.tsx?raw"
+
+<LiveExample src={PaginationBottom} />
+
+### Indeterminate
+
+By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
+
+
+import PaginationIndeterminate from "./PaginationIndeterminate.tsx?raw"
+
+<LiveExample src={PaginationIndeterminate} />
+
+### Disabled
+
+
+import PaginationDisabled from "./PaginationDisabled.tsx?raw"
+
+<LiveExample src={PaginationDisabled} />
+
+### No items
+
+
+import PaginationNoItems from "./PaginationNoItems.tsx?raw"
+
+<LiveExample src={PaginationNoItems} />
+
+### One page
+
+
+import PaginationOnePage from "./PaginationOnePage.tsx?raw"
+
+<LiveExample src={PaginationOnePage} />
+
+### Compact
+
+
+import PaginationCompact from "./PaginationCompact.tsx?raw"
+
+<LiveExample src={PaginationCompact} />
+
+### Offset
+
+
+import PaginationOffset from "./PaginationOffset.tsx?raw"
+
+<LiveExample src={PaginationOffset} />
+
+### Sticky
+
+```ts isFullscreen file="./PaginationSticky.tsx"
+```
+
+### Inset
+
+
+import PaginationInset from "./PaginationInset.tsx?raw"
+
+<LiveExample src={PaginationInset} />

package/dist/docs/api/v6/components/panel/html

@@ -0,0 +1,88 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Secondary
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Header
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Footer
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Header and footer
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### No body
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Raised
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Bordered
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Scrollable
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Scrollable with header and footer
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-panel` | `<div>` | Initiates the panel. **Required** |
+| `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
+| `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
+| `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
+| `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
+| `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
+| `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
+| `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
+| `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
+| `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |

package/dist/docs/api/v6/components/panel/html-demos

@@ -0,0 +1,8 @@
+## Demos
+
+### With a menu
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />

package/dist/docs/api/v6/components/panel/react

@@ -0,0 +1,190 @@
+## Examples
+
+### Basic
+
+```js
+
+const BasicPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Header
+
+```js
+
+const HeaderPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Footer
+
+```js
+
+const FooterPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
+```
+
+### Header and footer
+
+```js
+
+const HeaderFooterPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
+```
+
+### No body
+
+```js
+
+const NoBodyPanel = () => (
+  <Panel>
+    <PanelMain>Main content</PanelMain>
+  </Panel>
+);
+```
+
+### Raised
+
+```js
+
+const RaisedPanel = () => (
+  <Panel variant="raised">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Bordered
+
+```js
+
+const BorderedPanel = () => (
+  <Panel variant="bordered">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Secondary variant
+
+```js
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Scrollable
+
+```js
+
+const ScrollablePanel = () => (
+  <Panel isScrollable>
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
+### Scrollable with header and footer
+
+```js
+
+const ScrollableHeaderFooterPanel = () => (
+  <Panel isScrollable>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
+```

package/dist/docs/api/v6/components/password-generator/html-demos

@@ -0,0 +1,12 @@
+## Examples
+
+### Provide a generated password
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+## Documentation
+
+This demo shows how to use a menu in conjunction with a form input to provide a generated password and an associated button for refresh.

package/dist/docs/api/v6/components/password-strength/html-demos

@@ -0,0 +1,33 @@
+## Examples
+
+### Initial state
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Invalid password
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Valid, weak password
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Valid, strong password
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+## Documentation
+
+This demo implements a password strength meter. It uses multiple helper text items in the form helper text area below the input field to indicate whether the password meets validity criteria. Once the validity criteria are met, it also places helper text in the info area above the input field to indicate the strength of the password.