@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,73 @@
+## Examples
+
+### Controlled
+
+
+import CheckboxControlled from "./CheckboxControlled.tsx?raw"
+
+<LiveExample src={CheckboxControlled} />
+
+### Uncontrolled
+
+
+import CheckboxUncontrolled from "./CheckboxUncontrolled.tsx?raw"
+
+<LiveExample src={CheckboxUncontrolled} />
+
+### Reversed
+
+
+import CheckboxReversed from "./CheckboxReversed.tsx?raw"
+
+<LiveExample src={CheckboxReversed} />
+
+### Label wraps
+
+You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
+
+
+import CheckboxLabelWraps from "./CheckboxLabelWraps.tsx?raw"
+
+<LiveExample src={CheckboxLabelWraps} />
+
+### Disabled
+
+
+import CheckboxDisabled from "./CheckboxDisabled.tsx?raw"
+
+<LiveExample src={CheckboxDisabled} />
+
+### Checkbox with description
+
+
+import CheckboxWithDescription from "./CheckboxWithDescription.tsx?raw"
+
+<LiveExample src={CheckboxWithDescription} />
+
+### Checkbox with body
+
+
+import CheckboxWithBody from "./CheckboxWithBody.tsx?raw"
+
+<LiveExample src={CheckboxWithBody} />
+
+### Checkbox with description and body
+
+
+import CheckboxWithDescriptionBody from "./CheckboxWithDescriptionBody.tsx?raw"
+
+<LiveExample src={CheckboxWithDescriptionBody} />
+
+### Standalone input
+
+
+import CheckboxStandaloneInput from "./CheckboxStandaloneInput.tsx?raw"
+
+<LiveExample src={CheckboxStandaloneInput} />
+
+### Required input
+
+
+import CheckboxRequired from "./CheckboxRequired.tsx?raw"
+
+<LiveExample src={CheckboxRequired} />

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

@@ -0,0 +1,33 @@
+## Examples
+
+### Chip variants
+
+Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.
+
+
+import ChipDefault from "./ChipDefault.tsx?raw"
+
+<LiveExample src={ChipDefault} />
+
+### Chip groups
+
+A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of `numChips` is exceeded, additional chips will be hidden using an overflow chip.
+
+
+import ChipGroupInline from "./ChipGroupInline.tsx?raw"
+
+<LiveExample src={ChipGroupInline} />
+
+### Chip groups with categories
+
+
+import ChipGroupWithCategories from "./ChipGroupWithCategories.tsx?raw"
+
+<LiveExample src={ChipGroupWithCategories} />
+
+### Chip groups with removable categories
+
+
+import ChipGroupRemovableCategories from "./ChipGroupRemovableCategories.tsx?raw"
+
+<LiveExample src={ChipGroupRemovableCategories} />

package/dist/docs/api/v6/components/clipboard-copy/html

@@ -0,0 +1,81 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Expandable
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Inline compact
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Inline compact code
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Inline compact with additional action
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Inline compact in sentence
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Inline compact with truncation
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
+| `aria-label="[input label text]"` | `.pf-v6-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
+| `aria-controls="[id of expandable element]"` | `.pf-v6-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
+| `hidden` | `.pf-v6-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `aria-labelledby="[id of button] [id of input label]"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
+| `.pf-v6-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
+| `.pf-v6-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
+| `.pf-v6-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
+| `.pf-v6-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** |
+| `.pf-v6-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** |
+| `.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
+| `.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
+| `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
+| `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
+| `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |

package/dist/docs/api/v6/components/clipboard-copy/react

@@ -0,0 +1,87 @@
+## Examples
+
+### Basic
+
+
+import ClipboardCopyBasic from "./ClipboardCopyBasic.tsx?raw"
+
+<LiveExample src={ClipboardCopyBasic} />
+
+### Read Only
+
+
+import ClipboardCopyReadOnly from "./ClipboardCopyReadOnly.tsx?raw"
+
+<LiveExample src={ClipboardCopyReadOnly} />
+
+### Expanded
+
+
+import ClipboardCopyExpanded from "./ClipboardCopyExpanded.tsx?raw"
+
+<LiveExample src={ClipboardCopyExpanded} />
+
+### Read only expanded
+
+
+import ClipboardCopyReadOnlyExpanded from "./ClipboardCopyReadOnlyExpanded.tsx?raw"
+
+<LiveExample src={ClipboardCopyReadOnlyExpanded} />
+
+### Read only expanded by default
+
+
+import ClipboardCopyReadOnlyExpandedByDefault from "./ClipboardCopyReadOnlyExpandedByDefault.tsx?raw"
+
+<LiveExample src={ClipboardCopyReadOnlyExpandedByDefault} />
+
+### Expanded with array
+
+
+import ClipboardCopyExpandedWithArray from "./ClipboardCopyExpandedWithArray.tsx?raw"
+
+<LiveExample src={ClipboardCopyExpandedWithArray} />
+
+### JSON object (wrap code with pre)
+
+
+import ClipboardCopyJSONObject from "./ClipboardCopyJSONObject.tsx?raw"
+
+<LiveExample src={ClipboardCopyJSONObject} />
+
+### Inline compact
+
+
+import ClipboardCopyInlineCompact from "./ClipboardCopyInlineCompact.tsx?raw"
+
+<LiveExample src={ClipboardCopyInlineCompact} />
+
+### Inline compact code
+
+
+import ClipboardCopyInlineCompactCode from "./ClipboardCopyInlineCompactCode.tsx?raw"
+
+<LiveExample src={ClipboardCopyInlineCompactCode} />
+
+### Inline compact with additional action
+
+
+import ClipboardCopyInlineCompactWithAdditionalAction from "./ClipboardCopyInlineCompactWithAdditionalAction.tsx?raw"
+
+<LiveExample src={ClipboardCopyInlineCompactWithAdditionalAction} />
+
+### Inline compact in sentence
+
+
+import ClipboardCopyInlineCompactInSentence from "./ClipboardCopyInlineCompactInSentence.tsx?raw"
+
+<LiveExample src={ClipboardCopyInlineCompactInSentence} />
+
+### Inline compact with truncation
+
+You can control the truncation for an `inline-compact` variant by passing the `truncation` property. The following example shows the different ways to use the property: passing a boolean will apply default truncation, while passing an object of `TruncateProps` offers more fine-tuned control over the truncation behavior.
+
+
+import ClipboardCopyInlineCompactTruncation from "./ClipboardCopyInlineCompactTruncation.tsx?raw"
+
+<LiveExample src={ClipboardCopyInlineCompactTruncation} />

package/dist/docs/api/v6/components/code-block/html

@@ -0,0 +1,36 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Expandable
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Expandable expanded
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-code-block` | `<div>` | Initiates the code block component. **Required** |
+| `.pf-v6-c-code-block__header` | `<div>` | Initiates the code block header. |
+| `.pf-v6-c-code-block__actions` | `<div>` | Initiates the code block actions. |
+| `.pf-v6-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
+| `.pf-v6-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
+| `.pf-v6-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
+| `.pf-v6-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |

package/dist/docs/api/v6/components/code-block/react

@@ -0,0 +1,19 @@
+**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
+
+Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.
+
+## Examples
+
+### Basic
+
+
+import CodeBlockBasic from "./CodeBlockBasic.tsx?raw"
+
+<LiveExample src={CodeBlockBasic} />
+
+### Expandable
+
+
+import CodeBlockExpandable from "./CodeBlockExpandable.tsx?raw"
+
+<LiveExample src={CodeBlockExpandable} />

package/dist/docs/api/v6/components/code-editor/html

@@ -0,0 +1,75 @@
+import './CodeEditor.css';
+
+## Examples
+
+### Default
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Read-only
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Without actions
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Drag file and hover over component
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### With optional header content and keyboard shortcuts
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### With optional code editor container
+
+This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With full height modifier
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+## Documentation
+
+### Usage
+
+| Class                                      | Applied to | Outcome                                                                                       |
+| ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
+| `.pf-v6-c-code-editor`                     | `<div>`    | Initiates the code editor component. **Required**                                             |
+| `.pf-v6-c-code-editor__header`             | `<div>`    | Initiates the code editor header used for the controls and tab elements. **Required**         |
+| `.pf-v6-c-code-editor__header-content`     | `<div>`    | Initiates the code editor header content used for the controls and tab elements. **Required** |
+| `.pf-v6-c-code-editor__main`               | `<div>`    | Initiates the main container for a code editor e.g. Monaco **Required**                       |
+| `.pf-v6-c-code-editor__code`               | `<div>`    | Initiates the container for code without a JS code editor. Comes with PatternFly styling.     |
+| `.pf-v6-c-code-editor__controls`           | `<div>`    | Initiates the code editor controls.                                                           |
+| `.pf-v6-c-code-editor__header-main`        | `<div>`    | Initiates the code editor header content area.                                                |
+| `.pf-v6-c-code-editor__keyboard-shortcuts` | `<div>`    | Initiates the code editor header keyboard shortcuts area.                                     |
+| `.pf-v6-c-code-editor__tab`                | `<div>`    | Initiates the code editor tab.                                                                |
+| `.pf-v6-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                           |
+| `.pf-v6-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                           |
+| `.pf-v6-c-code-editor__upload`             | `<div>`    | Initiates the code editor upload border.                                                      |
+| `.pf-v6-c-code-editor__container`             | `<div>`    | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state.                                                      |
+| `.pf-m-full-height`             | `.pf-v6-c-code-editor`    | Modifies for full-height style.                                                   |

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

@@ -0,0 +1,55 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Plain HTML in content wrapper
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Long-form/editorial content
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Long-form/editorial content in content wrapper
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+## Documentation
+
+### Overview
+
+When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v6-c-content` as container. It can handle almost any HTML tag:
+
+* `<p>` paragraphs
+* `<ul>` `<ol>` `<dl>` lists
+* `<h1>` to `<h6>` headings
+* `<blockquote>` quotes
+* `<em>` and `<strong>`
+
+This `pf-v6-c-content` class can be used in any context where you just want to (or can only) write some text.
+
+This component is an exception to the variable system since we style type selectors.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
+| `.pf-m-visited` | `.pf-v6-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
+| `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
+| `.pf-m-editorial` | `.pf-v6-c-content*` | Applies long-form, editorial content styles to a block of content or individual content elements. |
+| `.pf-m-page-title` | `.pf-v6-c-content--[h1, h2, h3, h4, h5, h6]`, `.pf-v6-c-content [h1, h2, h3, h4, h5, h6]` | Applies page title styles. **Note:** `.pf-m-page-title` should only apply to the heading that serves as the title for the current page. |

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

@@ -0,0 +1,74 @@
+The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).
+
+You cannot nest other components within `<Content>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Content>` component's properties to achieve the same results.
+
+For example, to create a level 1 heading, you should pass `component="h1"` to `<Content>`, instead of nesting a `<Title>` component within `<Content>`. Similarly, when you need to add a divider to a page, you should utilize the `hr` property of `<Content>` (which is styled as a divider), rather than using a separate `<Divider>` component.
+
+## Examples
+
+HTML elements wrapped by `<Content>` are styled by the content component.
+
+### Content as a wrapper
+
+
+import ContentWrapper from "./ContentWrapper.tsx?raw"
+
+<LiveExample src={ContentWrapper} />
+
+### Headings
+
+
+import ContentHeadings from "./ContentHeadings.tsx?raw"
+
+<LiveExample src={ContentHeadings} />
+
+### Body
+
+
+import ContentBody from "./ContentBody.tsx?raw"
+
+<LiveExample src={ContentBody} />
+
+### Unordered list
+
+
+import ContentUnorderedList from "./ContentUnorderedList.tsx?raw"
+
+<LiveExample src={ContentUnorderedList} />
+
+### Ordered list
+
+
+import ContentOrderedList from "./ContentOrderedList.tsx?raw"
+
+<LiveExample src={ContentOrderedList} />
+
+### Plain list
+
+
+import ContentPlainList from "./ContentPlainList.tsx?raw"
+
+<LiveExample src={ContentPlainList} />
+
+### Description list
+
+
+import ContentDescriptionList from "./ContentDescriptionList.tsx?raw"
+
+<LiveExample src={ContentDescriptionList} />
+
+### Link and visited link
+
+
+import ContentVisited from "./ContentVisited.tsx?raw"
+
+<LiveExample src={ContentVisited} />
+
+### Editorial content
+
+Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use `isEditorial`.
+
+
+import ContentEditorial from "./ContentEditorial.tsx?raw"
+
+<LiveExample src={ContentEditorial} />