@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,148 @@
+## Examples
+
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. 
+
+To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
+
+The `<ModalBody>`, `<ModalHeader>`, and `<ModalFooter>` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.
+
+
+import ModalBasic from "./ModalBasic.tsx?raw"
+
+<LiveExample src={ModalBasic} />
+
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<ModalBody>`.
+
+
+import ModalWithOverflowingContent from "./ModalWithOverflowingContent.tsx?raw"
+
+<LiveExample src={ModalWithOverflowingContent} />
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
+
+
+import ModalWithDescription from "./ModalWithDescription.tsx?raw"
+
+<LiveExample src={ModalWithDescription} />
+
+### Top aligned
+
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
+
+import ModalTopAligned from "./ModalTopAligned.tsx?raw"
+
+<LiveExample src={ModalTopAligned} />
+
+### Modal sizes
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
+
+In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.
+
+
+import ModalSize from "./ModalSize.tsx?raw"
+
+<LiveExample src={ModalSize} />
+
+### Custom width
+
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
+
+import ModalCustomWidth from "./ModalCustomWidth.tsx?raw"
+
+<LiveExample src={ModalCustomWidth} />
+
+### Custom header
+
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+
+
+import ModalCustomHeader from "./ModalCustomHeader.tsx?raw"
+
+<LiveExample src={ModalCustomHeader} />
+
+### No header or footer
+
+To exclusively present information in a modal, remove the header and/or footer.
+
+When a modal has no header or footer, make sure to add an `aria-label` explicitly stating this, so that those using assistive technologies can understand this context.
+
+
+import ModalNoHeaderFooter from "./ModalNoHeaderFooter.tsx?raw"
+
+<LiveExample src={ModalNoHeaderFooter} />
+
+### Title icon
+
+To add an icon before a modal’s title, use the `titleIconVariant` property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.
+
+
+import ModalTitleIcon from "./ModalTitleIcon.tsx?raw"
+
+<LiveExample src={ModalTitleIcon} />
+
+### Custom title icon
+
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
+
+import ModalCustomTitleIcon from "./ModalCustomTitleIcon.tsx?raw"
+
+<LiveExample src={ModalCustomTitleIcon} />
+
+### With wizard
+
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
+
+import ModalWithWizard from "./ModalWithWizard.tsx?raw"
+
+<LiveExample src={ModalWithWizard} />
+
+### With dropdown
+
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+
+To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
+
+import ModalWithDropdown from "./ModalWithDropdown.tsx?raw"
+
+<LiveExample src={ModalWithDropdown} />
+
+### With help
+
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
+
+import ModalWithHelp from "./ModalWithHelp.tsx?raw"
+
+<LiveExample src={ModalWithHelp} />
+
+### With form
+
+To collect user input within a modal, you can add a [form](/components/forms/form).
+
+To enable form submission from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
+
+
+import ModalWithForm from "./ModalWithForm.tsx?raw"
+
+<LiveExample src={ModalWithForm} />
+
+### Custom focus
+
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+
+
+import ModalCustomFocus from "./ModalCustomFocus.tsx?raw"
+
+<LiveExample src={ModalCustomFocus} />

package/dist/docs/api/v6/components/modal/react-deprecated

@@ -0,0 +1,158 @@
+## Examples
+
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
+
+
+import ModalBasic from "./ModalBasic.tsx?raw"
+
+<LiveExample src={ModalBasic} />
+
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
+
+
+import ModalWithOverflowingContent from "./ModalWithOverflowingContent.tsx?raw"
+
+<LiveExample src={ModalWithOverflowingContent} />
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
+
+
+import ModalWithDescription from "./ModalWithDescription.tsx?raw"
+
+<LiveExample src={ModalWithDescription} />
+
+### Top aligned
+
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
+
+import ModalTopAligned from "./ModalTopAligned.tsx?raw"
+
+<LiveExample src={ModalTopAligned} />
+
+### Small modal
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
+
+The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
+
+
+import ModalSmall from "./ModalSmall.tsx?raw"
+
+<LiveExample src={ModalSmall} />
+
+### Medium modal
+
+The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
+
+
+import ModalMedium from "./ModalMedium.tsx?raw"
+
+<LiveExample src={ModalMedium} />
+
+### Large modal
+
+The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
+
+
+import ModalLarge from "./ModalLarge.tsx?raw"
+
+<LiveExample src={ModalLarge} />
+
+### Custom width
+
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
+
+import ModalCustomWidth from "./ModalCustomWidth.tsx?raw"
+
+<LiveExample src={ModalCustomWidth} />
+
+### Custom header and footer
+
+To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
+
+
+import ModalCustomHeaderFooter from "./ModalCustomHeaderFooter.tsx?raw"
+
+<LiveExample src={ModalCustomHeaderFooter} />
+
+### No header or footer
+
+To exclusively present information in a modal, remove the `header` and/or `footer`.
+
+
+import ModalNoHeaderFooter from "./ModalNoHeaderFooter.tsx?raw"
+
+<LiveExample src={ModalNoHeaderFooter} />
+
+### Title icon
+
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "custom" -- or to an imported custom icon. The following example uses a "warning" variant.
+
+
+import ModalTitleIcon from "./ModalTitleIcon.tsx?raw"
+
+<LiveExample src={ModalTitleIcon} />
+
+### Custom title icon
+
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
+
+import ModalCustomTitleIcon from "./ModalCustomTitleIcon.tsx?raw"
+
+<LiveExample src={ModalCustomTitleIcon} />
+
+### With wizard
+
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
+
+import ModalWithWizard from "./ModalWithWizard.tsx?raw"
+
+<LiveExample src={ModalWithWizard} />
+
+### With dropdown
+
+To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
+
+import ModalWithDropdown from "./ModalWithDropdown.tsx?raw"
+
+<LiveExample src={ModalWithDropdown} />
+
+### With help
+
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
+
+import ModalWithHelp from "./ModalWithHelp.tsx?raw"
+
+<LiveExample src={ModalWithHelp} />
+
+### With form
+
+To collect user input within a modal, you can add a [form](/components/form).
+
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
+
+
+import ModalWithForm from "./ModalWithForm.tsx?raw"
+
+<LiveExample src={ModalWithForm} />
+
+### Custom focus
+
+Use the `elementToFocus` property to customize which element inside the Modal receives focus when initially opened.
+
+
+import ModalCustomFocus from "./ModalCustomFocus.tsx?raw"
+
+<LiveExample src={ModalCustomFocus} />

package/dist/docs/api/v6/components/multiple-file-upload/html

@@ -0,0 +1,77 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Drag over
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Horizontal
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Horizontal drag over
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### File upload status
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### File upload status expanded
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Horizontal file upload status expanded
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
+| `.pf-v6-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
+| `.pf-v6-c-multiple-file-upload__title` | `<div>` | Defines the title. |
+| `.pf-v6-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
+| `.pf-v6-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
+| `.pf-v6-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
+| `.pf-v6-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
+| `.pf-v6-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
+| `.pf-v6-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
+| `.pf-v6-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
+| `.pf-v6-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
+| `.pf-v6-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
+| `.pf-v6-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
+| `.pf-v6-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
+| `.pf-v6-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
+| `.pf-v6-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
+| `.pf-v6-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |

package/dist/docs/api/v6/components/multiple-file-upload/react

@@ -0,0 +1,57 @@
+Multiple file upload is able to:
+
+- Accept one or more files via browse or drag-and-drop
+- Provide their data to you using file objects via the `onFileDrop` callback prop
+- Read files as dataURLs, calling provided callbacks as needed when files start/finish being read, as well as when the read succeeds or fails
+- Display (in real time) the upload progress/status of each file
+  - Uploaded files are represented by the multiple file upload status item component, this component includes the aforementioned built-in file reading logic
+  - If you prefer to supply your own file reading logic and strictly use multiple file upload status item as a display component, the `customFileHandler`, `fileName`, `fileSize`, `progressValue`, and `progressVariant` props exist to allow you to do that
+
+## Restricting file size and type
+
+As with singular file upload, any [props accepted by react-dropzone's Dropzone component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a dropzoneProps object in order to customize the behavior of the Dropzone, such as restricting the type of files allowed. The following examples will only accept the files they list as accepted. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the accept prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
+
+### IMPORTANT: A note about security
+
+Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.
+
+## Composable structure
+
+File upload - multiple is designed in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```
+<MultipleFileUpload>
+  <MultipleFileUploadMain />
+  <MultipleFileUploadStatus>
+    <MultipleFileUploadStatusItem />
+  </MultipleFileUploadStatus>
+</MultipleFileUpload>
+```
+
+## Examples
+
+### Basic
+
+The below example demonstrates a typical application of file upload - multiple, with a few tweaks from that typical application to enhance the convenience of the example.
+
+The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal` prop, showing our available styling variations.
+
+The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
+
+
+import MultipleFileUploadBasic from "./MultipleFileUploadBasic.tsx?raw"
+
+<LiveExample src={MultipleFileUploadBasic} />
+
+## Types
+
+Multiple file upload uses the `DropzoneOptions` type from react-dropzone. It is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).
+
+Additionally, it calls the `onFileDrop` callback with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
+
+```
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```

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

@@ -0,0 +1,161 @@
+import './Navigation.css'
+
+## Examples
+
+### Default
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Grouped nav
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Grouped nav, no titles
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Expanded
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Expanded with subnav titles
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Mixed
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Expandable, third level
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Horizontal
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Horizontal overflow
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Horizontal subnav
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Horizontal subnav overflow
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Nav with flyout
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Nav with drilldown menu
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Nav with drilldown menu level two
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Nav with drilldown menu level three
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Nav item icons
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+## Documentation
+
+### Overview
+
+The navigation system relies on several different sub-components:
+
+* `.pf-v6-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[landmark description]"` | `.pf-v6-c-nav` |  Describes `<nav>` landmark. |
+| `aria-label="[section title]"` | `.pf-v6-c-nav__section` |  Describes a nav `<section>`, where a `.pf-v6-c-nav__section-title` is not present. |
+| `aria-labelledby="[id value of link describing subnav]"` | `.pf-v6-c-nav__subnav` |  Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
+| `aria-expanded="false"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is hidden. |
+| `aria-expanded="true"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is visible. |
+| `hidden` | `.pf-v6-c-nav__subnav` |  Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-v6-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
+| `aria-current="page"` | `.pf-v6-c-nav__link` |  Indicates the current page link. Can only occur once on page. |
+| `aria-haspopup="true"` | `.pf-v6-c-nav__link` | Declares that a nav item has a submenu. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-nav` | `<nav>` | Initiates a primary nav element. |
+| `.pf-v6-c-nav__subnav` | `<section>` | Initiates a subnav section. |
+| `.pf-v6-c-nav__list` | `<ul>` | Initiates nav list. |
+| `.pf-v6-c-nav__item` | `<li>` | Initiates nav list item. |
+| `.pf-v6-c-nav__link` | `<a>` | Initiates nav list link. |
+| `.pf-v6-c-nav__link-icon` | `<span>` | Initiates nav list link icon. |
+| `.pf-v6-c-nav__link-text` | `<span>` | Initiates nav list link text. |
+| `.pf-v6-c-nav__section` | `<section>` | Initiates a nav section element. |
+| `.pf-v6-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
+| `.pf-v6-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
+| `.pf-v6-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
+| `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
+| `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
+| `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
+| `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
+| `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
+| `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
+| `.pf-m-current` | `.pf-v6-c-nav__link` | Modifies for the current state. |
+| `.pf-m-hover` | `.pf-v6-c-nav__link` | Modifies for the hover state. |