@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,97 @@
+## Examples
+
+By default, the `appendTo` prop of the popover will append to the document body in order to avoid the popover content not being fully visible. Another option is to increase the z-index of the element the popover is appended to to be higher than the z-index of the element that is hiding the popover.
+
+### Basic
+
+
+import PopoverBasic from "./PopoverBasic.tsx?raw"
+
+<LiveExample src={PopoverBasic} />
+
+### Hoverable
+
+
+import PopoverHover from "./PopoverHover.tsx?raw"
+
+<LiveExample src={PopoverHover} />
+
+### Close popover from content (controlled)
+
+
+import PopoverCloseControlled from "./PopoverCloseControlled.tsx?raw"
+
+<LiveExample src={PopoverCloseControlled} />
+
+### Close popover from content (uncontrolled)
+
+Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.
+
+
+import PopoverCloseUncontrolled from "./PopoverCloseUncontrolled.tsx?raw"
+
+<LiveExample src={PopoverCloseUncontrolled} />
+
+### Without header/footer/close and no padding
+
+
+import PopoverWithoutHeaderFooterCloseNoPadding from "./PopoverWithoutHeaderFooterCloseNoPadding.tsx?raw"
+
+<LiveExample src={PopoverWithoutHeaderFooterCloseNoPadding} />
+
+### Width auto
+
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
+
+import PopoverWidthAuto from "./PopoverWidthAuto.tsx?raw"
+
+<LiveExample src={PopoverWidthAuto} />
+
+### Popover react ref
+
+
+import PopoverReactRef from "./PopoverReactRef.tsx?raw"
+
+<LiveExample src={PopoverReactRef} />
+
+### Popover selector ref
+
+
+import PopoverSelectorRef from "./PopoverSelectorRef.tsx?raw"
+
+<LiveExample src={PopoverSelectorRef} />
+
+### Advanced
+
+
+import PopoverAdvanced from "./PopoverAdvanced.tsx?raw"
+
+<LiveExample src={PopoverAdvanced} />
+
+### Popover with icon in the title
+
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
+
+import PopoverWithIconInTheTitle from "./PopoverWithIconInTheTitle.tsx?raw"
+
+<LiveExample src={PopoverWithIconInTheTitle} />
+
+### Alert popover
+
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
+
+import PopoverAlert from "./PopoverAlert.tsx?raw"
+
+<LiveExample src={PopoverAlert} />
+
+### Custom focus
+
+Use the `elementToFocus` property to customize which element inside the Popover receives focus when opened.
+
+
+import PopoverCustomFocus from "./PopoverCustomFocus.tsx?raw"
+
+<LiveExample src={PopoverCustomFocus} />

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

@@ -0,0 +1,181 @@
+## Examples
+
+### Simple
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Small
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Large
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Outside
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Inside
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Success
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Warning
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Failure
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Inside success
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Inside warning
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Outside failure
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Outside static width measure
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### On single line
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Without measure
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Failure without measure
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Finite step
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Truncate description
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Helper text
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Non-percentage progress
+
+If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.
+
+### Progress step instruction
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+## Documentation
+
+### Overview
+
+### Accessibility
+
+If this component is describing the loading progress of a particular region of a page, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="progressbar"` | `.pf-v6-c-progress__bar` |  This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps. |
+| `aria-valuenow=""` | `.pf-v6-c-progress__bar` |  This value needs to be updated as progress continues. |
+| `aria-valuemin="0"` | `.pf-v6-c-progress__bar` |  The minimum value for the progress bar. |
+| `aria-valuemax="100"` | `.pf-v6-c-progress__bar` |  The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
+| `aria-label="[id of .pf-v6-c-progress__description]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
+| `aria-labelledby="[id element that labels the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
+| `aria-describedby="[id of element that describes the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible description for the progress component. |
+| `aria-valuetext="[loading state]"` | `.pf-v6-c-progress__bar` |  Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used. |
+| `aria-hidden="true"` | `.pf-v6-c-progress__status` |  Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-v6-c-progress__bar` element. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-progress` | `<div>` |  Initiates a progress component. |
+| `.pf-v6-c-progress__description` | `<div>` |  The description for a progress bar. |
+| `.pf-v6-c-progress__status` | `<div>` |  Displays the % of progress and status icons. |
+| `.pf-v6-c-progress__measure` | `<span>` |  Displays the % complete. |
+| `.pf-v6-c-progress__status-icon` | `<span>` |  Displays the status icon. (optional) |
+| `.pf-v6-c-progress__bar` | `<div>` |  Displays across the entire width and represents the completed state. |
+| `.pf-v6-c-progress__indicator` | `<div>` |  Displays with the `.pf-v6-c-progress__bar` to indicate the progress so far. |
+| `.pf-v6-c-progress__helper-text` | `<div>` |  Displays additional text below the progress bar. (optional) |
+| `.pf-m-lg` | `.pf-v6-c-progress` |  Modifies the progress bar to be larger. |
+| `.pf-m-sm` | `.pf-v6-c-progress` |  Modifies the progress bar to be smaller. |
+| `.pf-m-inside` | `.pf-v6-c-progress` |  Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.|
+| `.pf-m-outside` | `.pf-v6-c-progress` |  Shows the measure and status icon to the right of the progress bar. |
+| `.pf-m-singleline` | `.pf-v6-c-progress` | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`|
+| `.pf-m-success` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a success state. |
+| `.pf-m-warning` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a warning state. |
+| `.pf-m-danger` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a danger (failure) state. |
+| `.pf-m-truncate` | `.pf-v6-c-progress__description` | Modifies the description to display a single line and truncate any overflow text with ellipses. |
+| `.pf-m-static-width` | `.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-v6-c-progress__measure--m-static-width--MinWidth`. |

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

@@ -0,0 +1,109 @@
+## Examples
+### Basic
+
+import ProgressBasic from "./ProgressBasic.tsx?raw"
+
+<LiveExample src={ProgressBasic} />
+
+### Small
+
+import ProgressSmall from "./ProgressSmall.tsx?raw"
+
+<LiveExample src={ProgressSmall} />
+
+### Large
+
+import ProgressLarge from "./ProgressLarge.tsx?raw"
+
+<LiveExample src={ProgressLarge} />
+
+### Outside
+
+import ProgressOutside from "./ProgressOutside.tsx?raw"
+
+<LiveExample src={ProgressOutside} />
+
+### Inside
+
+import ProgressInside from "./ProgressInside.tsx?raw"
+
+<LiveExample src={ProgressInside} />
+
+### Success
+
+import ProgressSuccess from "./ProgressSuccess.tsx?raw"
+
+<LiveExample src={ProgressSuccess} />
+
+### Failure
+
+import ProgressFailure from "./ProgressFailure.tsx?raw"
+
+<LiveExample src={ProgressFailure} />
+
+### Warning
+
+import ProgressWarning from "./ProgressWarning.tsx?raw"
+
+<LiveExample src={ProgressWarning} />
+
+### Inside success
+
+import ProgressInsideSuccess from "./ProgressInsideSuccess.tsx?raw"
+
+<LiveExample src={ProgressInsideSuccess} />
+
+### Outside failure
+
+import ProgressOutsideFailure from "./ProgressOutsideFailure.tsx?raw"
+
+<LiveExample src={ProgressOutsideFailure} />
+
+### Single line
+
+import ProgressSingleLine from "./ProgressSingleLine.tsx?raw"
+
+<LiveExample src={ProgressSingleLine} />
+
+### Without measure
+
+import ProgressWithoutMeasure from "./ProgressWithoutMeasure.tsx?raw"
+
+<LiveExample src={ProgressWithoutMeasure} />
+
+### Failure without measure
+
+import ProgressFailureWithoutMeasure from "./ProgressFailureWithoutMeasure.tsx?raw"
+
+<LiveExample src={ProgressFailureWithoutMeasure} />
+
+
+### Finite step
+
+import ProgressFiniteStep from "./ProgressFiniteStep.tsx?raw"
+
+<LiveExample src={ProgressFiniteStep} />
+
+### Progress with step instructions
+
+import ProgressStepInstruction from "./ProgressStepInstruction.tsx?raw"
+
+<LiveExample src={ProgressStepInstruction} />
+
+### Truncate title
+
+import ProgressTruncateTitle from "./ProgressTruncateTitle.tsx?raw"
+
+<LiveExample src={ProgressTruncateTitle} />
+
+### Title outside of progress bar
+
+import ProgressTitleOutsideOfProgressBar from "./ProgressTitleOutsideOfProgressBar.tsx?raw"
+
+<LiveExample src={ProgressTitleOutsideOfProgressBar} />
+
+### Helper text
+
+import ProgressHelperText from "./ProgressHelperText.tsx?raw"
+
+<LiveExample src={ProgressHelperText} />

package/dist/docs/api/v6/components/progress-stepper/html

@@ -0,0 +1,147 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Basic with descriptions
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Vertical, horizontal responsive
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Center aligned with descriptions
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Center aligned, vertical
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Vertical with descriptions
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Compact
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Compact, vertical
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Compact, vertical responsive
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Compact, vertical, centered
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Compact, centered
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Basic with an issue
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Basic with a failure
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Basic with Patternfly icons
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### With help text
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+## Documentation
+
+### Overview
+
+The progress stepper is intended to show progress through a finite number of discrete steps.
+
+Add a modifier class to the progress stepper to change the orientation or alignment: `.pf-m-center`, `.pf-m-vertical`, or `.pf-m-compact`.
+
+Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-info`, `.pf-m-custom`, and `.pf-m-in-progress-alt` to change their color. Use modifiers `.pf-m-pending` and `.pf-m-current` to indicate progress through the steps.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[State of the step]"` | `.pf-v6-c-progress-stepper__step` |  Provides an accessible label for the step. |
+| `aria-hidden="true"` | `.pf-v6-c-progress-stepper__step-icon <i>` |  Hides icon for assistive technologies. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-progress-stepper` | `<ol>` | Applies default progress stepper styling. **Required** |
+| `.pf-v6-c-progress-stepper__step` | `<li>` | Defines each step of the progress stepper. **Required** |
+| `.progress-stepper__step-connector` | `<div>` | Creates the connecting line between steps **Required** |
+| `.progress-stepper__step-icon` | `<span>` | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
+| `.progress-stepper__step-main` | `<div>` | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required** |
+| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
+| `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
+| `.pf-m-center`| `.pf-v6-c-progress-stepper` | Modifies to center each step. |
+| `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-compact`| `.pf-v6-c-progress-stepper` | Modifies for compact styling. |
+| `.pf-m-success`| `.pf-v6-c-progress-stepper__step` | Modifies for success styling. |
+| `.pf-m-warning`| `.pf-v6-c-progress-stepper__step` | Modifies for warning styling. |
+| `.pf-m-danger`| `.pf-v6-c-progress-stepper__step` | Modifies for danger styling. |
+| `.pf-m-info`| `.pf-v6-c-progress-stepper__step` | Modifies for info styling. |
+| `.pf-m-custom`| `.pf-v6-c-progress-stepper__step` | Modifies for custom styling. |
+| `.pf-m-current`| `.pf-v6-c-progress-stepper__step` | Modifies styling for the current step. |
+| `.pf-m-pending`| `.pf-v6-c-progress-stepper__step` | Modifies styling for pending steps. |
+| `.pf-m-help-text`| `.pf-v6-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |

package/dist/docs/api/v6/components/progress-stepper/react

@@ -0,0 +1,63 @@
+## Examples
+
+Progress steppers have default icons associated with the `variant` property, and may be overriden and customized using the `icon` property.
+
+### Basic
+
+
+import ProgressStepperBasic from "./ProgressStepperBasic.tsx?raw"
+
+<LiveExample src={ProgressStepperBasic} />
+
+### With step descriptions
+
+
+import ProgressStepperBasicWithDescription from "./ProgressStepperBasicWithDescription.tsx?raw"
+
+<LiveExample src={ProgressStepperBasicWithDescription} />
+
+### With alignment
+
+
+import ProgressStepperBasicWithAlignment from "./ProgressStepperBasicWithAlignment.tsx?raw"
+
+<LiveExample src={ProgressStepperBasicWithAlignment} />
+
+### Compact
+
+Compact progress steppers will only display the current step's `title`, and will not display any steps' `description` texts.
+
+
+import ProgressStepperCompact from "./ProgressStepperCompact.tsx?raw"
+
+<LiveExample src={ProgressStepperCompact} />
+
+### With an issue
+
+
+import ProgressStepperBasicIssue from "./ProgressStepperBasicIssue.tsx?raw"
+
+<LiveExample src={ProgressStepperBasicIssue} />
+
+### With a failure
+
+
+import ProgressStepperBasicFailure from "./ProgressStepperBasicFailure.tsx?raw"
+
+<LiveExample src={ProgressStepperBasicFailure} />
+
+### With custom icons
+
+
+import ProgressStepperCustomIcons from "./ProgressStepperCustomIcons.tsx?raw"
+
+<LiveExample src={ProgressStepperCustomIcons} />
+
+### With help popover
+
+To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
+
+
+import ProgressStepperHelpPopover from "./ProgressStepperHelpPopover.tsx?raw"
+
+<LiveExample src={ProgressStepperHelpPopover} />

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

@@ -0,0 +1,91 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Checked
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Label wrapping input
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Reversed
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Disabled
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### With description
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With body
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### With description and body
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Standalone input
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+## Documentation
+
+### Overview
+
+The Radio component is provided for use cases outside of forms. If it is used without label text ensure some sort of label for assistive technologies. (for example: `aria-label`)
+
+If you extend this component or modify the styles of this component, then make sure any hover styles defined are applied to the clickable elements, like `<input>` or `<label>` since hover styles are used to convey the clickable target area of an element. To maximize the target area, use the example html where the `<label>` is the wrapping element.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `disabled` | `<input type="radio">` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
+| `aria-describedby` | `.pf-v6-c-radio__input` |  When using `.pf-v6-c-radio__description` make use of this on the input. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-radio` | `<div>`, `<label>` |  Initiates the radio component. **Required**  |
+| `.pf-v6-c-radio__input` | `<input type="radio">` |  Initiates a radio input. **Required**  |
+| `.pf-v6-c-radio__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-v6-c-radio__description` | `<span>` | Initiates a radio description. |
+| `.pf-v6-c-radio__body` | `<span>` | Initiates a radio body. |
+| `.pf-m-standalone` | `.pf-v6-c-radio` |  Modifies the radio component for use with a standalone `<input type="radio">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-v6-c-radio__label` |  Modifies the radio component for the disabled state. **Required when input is disabled** |