@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,84 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Standalone icon sizes
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Body sizes
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Heading sizes
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Status colors
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Sizing content within the icon container
+
+Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Inline
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### In progress
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+## Documentation
+
+### Overview
+
+The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
+
+Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required**  |
+| `.pf-v6-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
+| `.pf-v6-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
+| `.pf-m-inline` | `.pf-v6-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content`, `pf-v6-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
+| `.pf-m-in-progress` | `.pf-v6-c-icon` | Shows the progress element in place of the icon content.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-v6-c-icon__content` | Modifies the icon content to use a status color.  |

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

@@ -0,0 +1,76 @@
+## Examples
+
+### Basic
+
+
+import IconBasic from "./IconBasic.tsx?raw"
+
+<LiveExample src={IconBasic} />
+
+### Standalone icon sizes
+
+These are the standard options for sizing icons.
+
+
+import StandaloneIconSizes from "./StandaloneIconSizes.tsx?raw"
+
+<LiveExample src={StandaloneIconSizes} />
+
+### Body sizes
+
+These size options are meant to make icons match the size of body text.
+
+
+import BodyIconSizes from "./BodyIconSizes.tsx?raw"
+
+<LiveExample src={BodyIconSizes} />
+
+### Heading sizes
+
+These size options are meant to make icons match the size of heading text.
+
+
+import HeadingIconSizes from "./HeadingIconSizes.tsx?raw"
+
+<LiveExample src={HeadingIconSizes} />
+
+### Status colors
+
+The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.
+
+
+import IconStatus from "./IconStatus.tsx?raw"
+
+<LiveExample src={IconStatus} />
+
+### Sizing an icon within the icon container
+
+Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.
+
+
+import IconContentSizes from "./IconContentSizes.tsx?raw"
+
+<LiveExample src={IconContentSizes} />
+
+### Inline
+
+
+import IconInline from "./IconInline.tsx?raw"
+
+<LiveExample src={IconInline} />
+
+### In progress
+
+Passing the `isInProgress` property will swap the icon to a progress icon. By default this progress icon will be a `Spinner` but may be customized or overriden using the `progressIcon` property.
+
+
+import IconProgress from "./IconProgress.tsx?raw"
+
+<LiveExample src={IconProgress} />
+
+### Custom in progress icon
+
+
+import IconCustomProgress from "./IconCustomProgress.tsx?raw"
+
+<LiveExample src={IconCustomProgress} />

package/dist/docs/api/v6/components/inline-edit/html

@@ -0,0 +1,135 @@
+## Introduction
+
+**Inline edit** is a utilitarian component that has two core elements, `.pf-v6-c-inline-edit__value` and `.pf-v6-c-inline-edit__input` and is based on a simple concept. When **value** is visible, **input** is hidden, and vice versa.
+
+### Generic groups
+
+`.pf-v6-c-inline-edit__group`s provide basic layout support and have several available modifiers (`.pf-m-action-group`, `.pf-m-icon-group`).
+
+### Actions
+
+**Actions** (`.pf-v6-c-inline-edit__action`) are hidden by default and exposed when a region of `.pf-v6-c-inline-edit` becomes active. The default visibility of an **action** or **action group** can be inversed by adding `.pf-m-enable-editable`. `.pf-m-enable-editable` flags an element or group of elements as the controlling agents for enabling editable content and therefore is visible by default and hidden when inline editing is enabled.
+
+## Examples
+
+Inline edit **toggle** can be placed anywhere within `.pf-v6-c-inline-edit`. It initiates the editability of elements. When an element becomes editable, **toggle** is hidden.
+
+### Inline edit toggle
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+Inline edit **value** can be placed anywhere within `.pf-v6-c-inline-edit`. It is visible by default and hidden when inline edit becomes **editable**.
+
+### Inline edit value
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+Inline edit **action-group** contains save and cancel actions and is only visible when inline edit is **editable**.
+
+### Inline edit action group
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Inline edit action group icon buttons
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Single inline edit (default)
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Single inline edit (active)
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Free form edit
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Single inline edit with label (default)
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### State valid
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### State invalid
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Inline edit table row
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+## Documentation
+
+### Accessibility
+
+All accessibility requirements for inputs apply to elements within inline edit.
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
+| `aria-label="descriptive text"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
+| `contenteditable="true"` | `.pf-v6-c-inline-edit__editable-text` | Ensures the text node is editable. |
+| `role="textbox"` | `.pf-v6-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
+| `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
+| `.pf-v6-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
+| `.pf-v6-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
+| `.pf-v6-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
+| `.pf-v6-c-inline-edit__label` | `*` | Initiates an inline edit label. |
+| `.pf-v6-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
+| `.pf-m-inline-editable` | `.pf-v6-c-inline-edit`, `.pf-v6-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
+| `.pf-m-action-group` | `.pf-v6-c-inline-edit__group` | Modifies group for action group. |
+| `.pf-m-icon-group` | `.pf-v6-c-inline-edit__group` | Modifies an action group item spacing. |
+| `.pf-m-column` | `.pf-v6-c-inline-edit__group` | Modifies an action group flex direction. |
+| `.pf-m-footer` | `.pf-v6-c-inline-edit__group` | Modifies an inline edit group margin-top. |
+| `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
+| `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. |
+| `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. |
+
+```
+-->
+```

package/dist/docs/api/v6/components/input-group/html

@@ -0,0 +1,34 @@
+### Overview
+
+Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.
+
+## Examples
+
+### Variations
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+## Documentation
+
+### Accessibility
+
+When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-describedby` | `.pf-v6-c-form-control` |  When using `.pf-v6-c-input-group__text` or `.pf-v6-c-input-group__action` make use of this on the input field. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-input-group` | `<div>` |  Initiates the input group. **Required** |
+| `.pf-v6-c-input-group__item` | `<div>` |  Initiates the input group item. |
+| `.pf-v6-c-input-group__text` | `<span>` |  Initiates input group text. This should be used within `.pf-v6-c-input-group__item` to contain text. |
+| `.pf-m-plain` | `.pf-v6-c-input-group__item` | Removes the border from the input group element. |
+| `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
+| `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
+| `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |

package/dist/docs/api/v6/components/input-group/react

@@ -0,0 +1,36 @@
+## Examples
+
+### Basic
+
+
+import InputGroupBasic from "./InputGroupBasic.tsx?raw"
+
+<LiveExample src={InputGroupBasic} />
+
+### With textarea
+
+
+import InputGroupWithTextarea from "./InputGroupWithTextarea.tsx?raw"
+
+<LiveExample src={InputGroupWithTextarea} />
+
+### With dropdown
+
+
+import InputGroupWithDropdown from "./InputGroupWithDropdown.tsx?raw"
+
+<LiveExample src={InputGroupWithDropdown} />
+
+### With popover
+
+using `appendTo` with ref to the `InputGroup` for the Popover so that the popover width will depend on the whole input group
+```ts file ='./InputGroupWithPopover.tsx'
+
+```
+
+### With multiple group siblings
+
+
+import InputGroupWithSiblings from "./InputGroupWithSiblings.tsx?raw"
+
+<LiveExample src={InputGroupWithSiblings} />

package/dist/docs/api/v6/components/jump-links/html

@@ -0,0 +1,110 @@
+## Examples
+
+### Horizontal default
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Horizontal with centered list
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Horizontal with label
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Vertical default
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Vertical with label
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Vertical with inactive subsections
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Vertical with active subsections
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Expandable
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Expanded
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Expandable (responsive)
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Expandable (responsive) with no label
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+## Documentation
+
+### Overview
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label` | `.pf-v6-c-jump-links` | Provides an accessible name for the jump links. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-jump-links` | `<div>` | Initiates the jump links container. |
+| `.pf-v6-c-jump-links__header` | `<div>` | Initiates the jump links header. |
+| `.pf-v6-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
+| `.pf-v6-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
+| `.pf-v6-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
+| `.pf-v6-c-jump-links__label` | `<div>` | Initiates the jump links label. |
+| `.pf-v6-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
+| `.pf-v6-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
+| `.pf-v6-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
+| `.pf-v6-c-jump-links__link` | `<button>` | Initiates the jump links link. |
+| `.pf-v6-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
+| `.pf-m-vertical` | `.pf-v6-c-jump-links` | Modifies the jump links component to be vertical. |
+| `.pf-m-center` | `.pf-v6-c-jump-links` | Modifies the jump links component to center its list and label. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-expanded` | `.pf-v6-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
+| `.pf-m-current` | `.pf-v6-c-jump-links__item`| Modifies the jump links item to be current. |