@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,135 @@
+## Examples
+
+### Toolbar items
+
+A toolbar can contain multiple toolbar items, like filters and buttons.
+
+Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the [examples with toggle groups and filters](/components/toolbar#examples-with-toggle-groups-and-filters).
+
+
+import ToolbarItems from "./ToolbarItems.tsx?raw"
+
+<LiveExample src={ToolbarItems} />
+
+### With adjusted inset
+
+To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
+
+
+import ToolbarInsets from "./ToolbarInsets.tsx?raw"
+
+<LiveExample src={ToolbarInsets} />
+
+### Sticky toolbar
+
+To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.
+
+In the following example, toggle the "is toolbar sticky" checkbox to see the difference between a sticky and non-sticky toolbar.
+
+
+import ToolbarSticky from "./ToolbarSticky.tsx?raw"
+
+<LiveExample src={ToolbarSticky} />
+
+### With groups of items
+
+You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.
+
+Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the [examples with toggle groups and filters](/components/toolbar#examples-with-toggle-groups-and-filters).
+
+
+import ToolbarGroups from "./ToolbarGroups.tsx?raw"
+
+<LiveExample src={ToolbarGroups} />
+
+### Background color variants
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+
+import ToolbarColorVariant from "./ToolbarColorVariant.tsx?raw"
+
+<LiveExample src={ToolbarColorVariant} />
+
+## Examples with toggle groups and filters
+
+The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
+
+### Component managed toggle groups
+
+A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.
+
+
+import ToolbarComponentManagedToggleGroups from "./ToolbarComponentManagedToggleGroups.tsx?raw"
+
+<LiveExample src={ToolbarComponentManagedToggleGroups} />
+
+### Consumer managed toggle groups
+
+To manually create the expanded state of the toggle group for smaller screen widths:
+
+1. Add a `toggleIsExpanded` callback to the toolbar
+2. Pass a boolean into the `isExpanded` property of the toolbar
+
+Note: The toggle group is aware of the consumer provided breakpoint, the expandable content is not. If the expandable content is expanded and the screen width surpasses that of the breakpoint, the expandable content is not aware of that and will remain open. Be sure to consider and handle this in your implementation.
+
+
+import ToolbarConsumerManagedToggleGroups from "./ToolbarConsumerManagedToggleGroups.tsx?raw"
+
+<LiveExample src={ToolbarConsumerManagedToggleGroups} />
+
+### With filters
+
+You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter labels and a "Clear all filters" button. Upon clearing the applied filters, the toolbar will return to its default height.
+
+The `<ToolbarFilter>` component expects applied filters and a delete label handler to be passed in as properties. Pass in a `deleteLabelGroup` property to close the entire label group. Once close, the rendering of labels will be handled responsively by the toolbar.
+
+
+import ToolbarWithFilters from "./ToolbarWithFilters.tsx?raw"
+
+<LiveExample src={ToolbarWithFilters} />
+
+### With custom label group content
+
+To customize the label groups generated by toolbar filters, use the `customLabelGroupContent` property on the `<Toolbar>`. This property will remove the default `clear all filters` button.
+
+
+import ToolbarCustomLabelGroupContent from "./ToolbarCustomLabelGroupContent.tsx?raw"
+
+<LiveExample src={ToolbarCustomLabelGroupContent} />
+
+### Stacked example
+
+When all of a toolbar's required elements cannot fit in a single line, you can split toolbar items into multiple rows.
+
+
+import ToolbarStacked from "./ToolbarStacked.tsx?raw"
+
+<LiveExample src={ToolbarStacked} />
+
+## Examples with spacers and wrapping
+You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
+
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+
+### Toolbar content wrapping
+The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap.
+
+
+import ToolbarContentWrap from "./ToolbarContentWrap.tsx?raw"
+
+<LiveExample src={ToolbarContentWrap} />
+
+### Toolbar group spacers
+
+
+import ToolbarGroupSpacers from "./ToolbarGroupSpacers.tsx?raw"
+
+<LiveExample src={ToolbarGroupSpacers} />
+
+### Toolbar item spacers
+
+
+import ToolbarItemSpacers from "./ToolbarItemSpacers.tsx?raw"
+
+<LiveExample src={ToolbarItemSpacers} />

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

@@ -0,0 +1,71 @@
+import "./Tooltip.css"
+
+## Examples
+
+### Top
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Right
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Bottom
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Left
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Left with top and bottom positions
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Bottom with left and right positions
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Left aligned text
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+## Documentation
+
+### Overview
+
+A tooltip is used to provide contextual information for another component on hover.  The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (`.pf-m-left`, `.pf-m-top`, etc.) is required on the tooltip component.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
+| `.pf-v6-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
+| `.pf-v6-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
+| `.pf-m-left{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
+| `.pf-m-right{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
+| `.pf-m-top{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
+| `.pf-m-bottom{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
+| `.pf-m-text-align-left` | `.pf-v6-c-tooltip__content` | Modifies tooltip content to text align left. |

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

@@ -0,0 +1,42 @@
+import './TooltipExamples.css';
+
+## Examples
+
+### Basic
+
+
+import TooltipBasic from "./TooltipBasic.tsx?raw"
+
+<LiveExample src={TooltipBasic} />
+
+### Tooltip react ref
+
+
+import TooltipReactRef from "./TooltipReactRef.tsx?raw"
+
+<LiveExample src={TooltipReactRef} />
+
+### Tooltip selector ref
+
+
+import TooltipSelectorRef from "./TooltipSelectorRef.tsx?raw"
+
+<LiveExample src={TooltipSelectorRef} />
+
+### On icon with dynamic content
+
+When the tooltip is used as a wrapper and its content will dynamically update, the `aria` prop should have a value of "none" passed in. This prevents assistive technologies from announcing the tooltip contents more than once. Additionally, the `aria-live` prop should have a value of "polite" passed in, in order for assistive technologies to announce when the tooltip contents gets updated.
+
+When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in.
+
+
+import TooltipIcon from "./TooltipIcon.tsx?raw"
+
+<LiveExample src={TooltipIcon} />
+
+### Options
+
+
+import TooltipOptions from "./TooltipOptions.tsx?raw"
+
+<LiveExample src={TooltipOptions} />

package/dist/docs/api/v6/components/tree-view/html

@@ -0,0 +1,118 @@
+## Examples
+
+### Single selectable
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Multiselectable
+
+A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, `aria-multiselectable="true"` must be passed to the root `ul[role="tree"]` element.
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### With search
+
+A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### With checkboxes
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### With icons
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### With badges
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With action item
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### With non-expandable top level nodes
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### With selectable, expandable nodes
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Guides
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Compact
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Compact, no background
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
+| `.pf-v6-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
+| `.pf-v6-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
+| `.pf-v6-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
+| `.pf-v6-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
+| `.pf-v6-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
+| `.pf-v6-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
+| `.pf-v6-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
+| `.pf-v6-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
+| `.pf-v6-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
+| `.pf-v6-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
+| `.pf-v6-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
+| `.pf-v6-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
+| `.pf-v6-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
+| `.pf-v6-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
+| `.pf-v6-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
+| `.pf-m-guides` | `.pf-v6-c-tree-view` | Modifies the tree view to the guides presentation. |
+| `.pf-m-compact` | `.pf-v6-c-tree-view` | Modifies the tree view to the compact presentation. |
+| `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
+| `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
+| `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
+| `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |

package/dist/docs/api/v6/components/tree-view/react

@@ -0,0 +1,107 @@
+## Examples
+
+### Single selectable
+
+
+import TreeViewSingleSelectable from "./TreeViewSingleSelectable.tsx?raw"
+
+<LiveExample src={TreeViewSingleSelectable} />
+
+### Multiselectable
+
+A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the `isMultiSelectable` property must be passed.
+
+
+import TreeViewMultiselectable from "./TreeViewMultiselectable.tsx?raw"
+
+<LiveExample src={TreeViewMultiselectable} />
+
+### With separate selection and expansion
+
+The `hasSelectableNodes` modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected without toggling its expansion.
+
+
+import TreeViewSelectionExpansion from "./TreeViewSelectionExpansion.tsx?raw"
+
+<LiveExample src={TreeViewSelectionExpansion} />
+
+### With search
+
+A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
+
+
+import TreeViewWithSearch from "./TreeViewWithSearch.tsx?raw"
+
+<LiveExample src={TreeViewWithSearch} />
+
+### With checkboxes
+
+
+import TreeViewWithCheckboxes from "./TreeViewWithCheckboxes.tsx?raw"
+
+<LiveExample src={TreeViewWithCheckboxes} />
+
+### With icons
+
+
+import TreeViewWithIcons from "./TreeViewWithIcons.tsx?raw"
+
+<LiveExample src={TreeViewWithIcons} />
+
+### With unique icon per item
+
+
+import TreeViewWithIconPerItem from "./TreeViewWithIconPerItem.tsx?raw"
+
+<LiveExample src={TreeViewWithIconPerItem} />
+
+### With badges
+
+
+import TreeViewWithBadges from "./TreeViewWithBadges.tsx?raw"
+
+<LiveExample src={TreeViewWithBadges} />
+
+### With custom badges
+
+
+import TreeViewWithCustomBadges from "./TreeViewWithCustomBadges.tsx?raw"
+
+<LiveExample src={TreeViewWithCustomBadges} />
+
+### With action items
+
+
+import TreeViewWithActionItems from "./TreeViewWithActionItems.tsx?raw"
+
+<LiveExample src={TreeViewWithActionItems} />
+
+### Guides
+
+
+import TreeViewGuides from "./TreeViewGuides.tsx?raw"
+
+<LiveExample src={TreeViewGuides} />
+
+### Compact
+
+
+import TreeViewCompact from "./TreeViewCompact.tsx?raw"
+
+<LiveExample src={TreeViewCompact} />
+
+### Compact, no background
+
+
+import TreeViewCompactNoBackground from "./TreeViewCompactNoBackground.tsx?raw"
+
+<LiveExample src={TreeViewCompactNoBackground} />
+
+### With memoization
+
+Turning on memoization with the `useMemo` property helps prevent unnecessary re-renders for large data sets. With this flag active, `activeItems` must pass in an array of nodes along the selected item's path to update properly.
+
+
+import TreeViewWithMemoization from "./TreeViewWithMemoization.tsx?raw"
+
+<LiveExample src={TreeViewWithMemoization} />

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

@@ -0,0 +1,38 @@
+import './Truncate.css'
+
+## Examples
+
+### Notes
+
+The truncate component contains two child elements, `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end`. If both `start` and `end` are present within `.pf-v6-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v6-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v6-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v6-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v6-c-truncate__end` element.
+
+### Default
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Middle
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Start
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. |
+| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
+| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. |

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

@@ -0,0 +1,47 @@
+import './TruncateExamples.css';
+
+## Examples
+
+### Default
+```js
+
+<div className="truncate-example-resize">
+  <Truncate
+    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+  />
+</div>
+```
+
+### Middle
+```js
+
+<div className="truncate-example-resize">
+  <Truncate
+    content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+    trailingNumChars={10}
+    position={'middle'}
+  />
+</div>
+```
+
+### Start
+```js
+
+<div className="truncate-example-resize">
+  <Truncate
+    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+    position={'start'}
+  />
+</div>
+```
+
+### Default with tooltip at the bottom
+```js
+
+<div className="truncate-example-resize">
+  <Truncate
+    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+    tooltipPosition={'bottom'}
+  />
+</div>
+```