@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

@@ -0,0 +1,258 @@
+## Examples
+
+### Default tabs
+
+A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
+
+You can adjust a tab in the following ways: 
+
+- To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
+- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. 
+- To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
+- To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
+
+Tabs can be styled as 'default' or 'boxed': 
+
+- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
+- Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
+
+
+import TabsDefault from "./TabsDefault.tsx?raw"
+
+<LiveExample src={TabsDefault} />
+
+### Boxed secondary tabs
+
+To change the background color of boxed tabs or the tab content, use the `variant` property. 
+
+Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
+
+
+import TabsBoxSecondary from "./TabsBoxSecondary.tsx?raw"
+
+<LiveExample src={TabsBoxSecondary} />
+
+### Vertical tabs
+
+Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
+
+To style tabs vertically, use the `isVertical` property. 
+
+
+import TabsVertical from "./TabsVertical.tsx?raw"
+
+<LiveExample src={TabsVertical} />
+
+### Vertical expandable tabs
+
+Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. 
+
+Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
+
+To flag vertical tabs when they're expanded, use the `isExpanded` property.
+
+
+import TabsVerticalExpandable from "./TabsVerticalExpandable.tsx?raw"
+
+<LiveExample src={TabsVerticalExpandable} />
+
+### Vertical expandable uncontrolled
+
+To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpanded` property.
+
+
+import TabsVerticalExpandableUncontrolled from "./TabsVerticalExpandableUncontrolled.tsx?raw"
+
+<LiveExample src={TabsVerticalExpandableUncontrolled} />
+
+### Default overflow tabs
+
+By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. 
+
+
+import TabsDefaultOverflow from "./TabsDefaultOverflow.tsx?raw"
+
+<LiveExample src={TabsDefaultOverflow} />
+
+### Horizontal overflow tabs
+
+Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. 
+
+To enable horizontal overflow, use the `isOverflowHorizontal` property.
+
+In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
+
+
+import TabsHorizontalOverflow from "./TabsHorizontalOverflow.tsx?raw"
+
+<LiveExample src={TabsHorizontalOverflow} />
+
+### With tooltip react ref
+
+When using a React ref to link a tooltip to a tab component via the `reference` property, you should avoid manually passing in a value of "off" to the `aria-live` property. Doing so may cause the tooltip to become less accessible to assistive technologies.
+
+The tooltip should also have the `id` property passed in. The value of `id` should be passed into the tab's `aria-describedby` property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
+
+
+import TabsTooltipReactRef from "./TabsTooltipReactRef.tsx?raw"
+
+<LiveExample src={TabsTooltipReactRef} />
+
+### Uncontrolled tabs
+
+To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. 
+
+
+
+import TabsUncontrolled from "./TabsUncontrolled.tsx?raw"
+
+<LiveExample src={TabsUncontrolled} />
+
+### With adjusted inset
+
+To adjust the inset of tabs and visually separate them more, use the `inset` property. You can set the inset to "insetNone", "insetSm", "insetMd", "insetLg", "insetXl", or "inset2xl" at "default", "sm", "md", "lg, "xl, and "2xl" breakpoints.
+
+
+import TabsInset from "./TabsInset.tsx?raw"
+
+<LiveExample src={TabsInset} />
+
+### With page insets
+
+To adjust the left padding of tabs, use the `usePageInsets` property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.
+
+
+import TabsPageInsets from "./TabsPageInsets.tsx?raw"
+
+<LiveExample src={TabsPageInsets} />
+
+### With icons and text
+
+You can render different content in the `title` property of a tab to add icons and text. 
+
+To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
+
+
+import TabsIconAndText from "./TabsIconAndText.tsx?raw"
+
+<LiveExample src={TabsIconAndText} />
+
+### Subtabs
+
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
+
+To apply subtab styling to tabs, use the `isSubtab` property. 
+
+
+import TabsSubtabs from "./TabsSubtabs.tsx?raw"
+
+<LiveExample src={TabsSubtabs} />
+
+### Filled tabs with icons
+
+To allow tabs to fill the available width of the page section, use the `isFilled` property. 
+
+
+import TabsFilledWithIcons from "./TabsFilledWithIcons.tsx?raw"
+
+<LiveExample src={TabsFilledWithIcons} />
+
+### Tabs linked to nav elements
+
+To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. 
+
+Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`. 
+
+
+import TabsNav from "./TabsNav.tsx?raw"
+
+<LiveExample src={TabsNav} />
+
+### Subtabs linked to nav elements
+
+Subtabs can also link to nav elements. 
+
+
+import TabsNavSubtab from "./TabsNavSubtab.tsx?raw"
+
+<LiveExample src={TabsNavSubtab} />
+
+### With separate content
+
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties 
+
+
+import TabsSeparateContent from "./TabsSeparateContent.tsx?raw"
+
+<LiveExample src={TabsSeparateContent} />
+
+### With tab content with body and padding
+
+To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property. 
+
+
+import TabsContentWithBodyPadding from "./TabsContentWithBodyPadding.tsx?raw"
+
+<LiveExample src={TabsContentWithBodyPadding} />
+
+### Children mounting on click
+
+To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property. 
+
+Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
+
+
+import TabsChildrenMounting from "./TabsChildrenMounting.tsx?raw"
+
+<LiveExample src={TabsChildrenMounting} />
+
+### Unmounting invisible children
+
+To unmount tab children (remove from the DOM) when they are no longer visible, use the `unmountOnExit` property.
+
+
+import TabsUnmountingInvisibleChildren from "./TabsUnmountingInvisibleChildren.tsx?raw"
+
+<LiveExample src={TabsUnmountingInvisibleChildren} />
+
+### Toggled tab content
+
+You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
+
+The tab its content should only be mounted when the tab is visible. 
+
+
+import TabsToggledSeparateContent from "./TabsToggledSeparateContent.tsx?raw"
+
+<LiveExample src={TabsToggledSeparateContent} />
+
+### Dynamic tabs
+
+To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
+
+
+import TabsDynamic from "./TabsDynamic.tsx?raw"
+
+<LiveExample src={TabsDynamic} />
+
+### With help action popover
+
+You may add a help action to a tab to provide users with additional context in a popover. 
+
+To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
+
+
+import TabsHelp from "./TabsHelp.tsx?raw"
+
+<LiveExample src={TabsHelp} />
+
+### With help and close actions
+
+To add multiple actions to a tab, create a `<TabAction>` component for each action. 
+
+The following example passes in both help popover and close actions.
+
+
+import TabsHelpAndClose from "./TabsHelpAndClose.tsx?raw"
+
+<LiveExample src={TabsHelpAndClose} />

package/dist/docs/api/v6/components/text-area/react

@@ -0,0 +1,71 @@
+## Examples
+
+### Basic
+
+
+import TextAreaBasic from "./TextAreaBasic.tsx?raw"
+
+<LiveExample src={TextAreaBasic} />
+
+### Invalid
+
+
+import TextAreaInvalid from "./TextAreaInvalid.tsx?raw"
+
+<LiveExample src={TextAreaInvalid} />
+
+### Validated
+
+
+import TextAreaValidated from "./TextAreaValidated.tsx?raw"
+
+<LiveExample src={TextAreaValidated} />
+
+### Vertically resizable
+
+
+import TextAreaVerticallyResizable from "./TextAreaVerticallyResizable.tsx?raw"
+
+<LiveExample src={TextAreaVerticallyResizable} />
+
+### Horizontally resizable
+
+
+import TextAreaHorizontallyResizable from "./TextAreaHorizontallyResizable.tsx?raw"
+
+<LiveExample src={TextAreaHorizontallyResizable} />
+
+### Not resizable
+
+
+import TextAreaResizableNone from "./TextAreaResizableNone.tsx?raw"
+
+<LiveExample src={TextAreaResizableNone} />
+
+### Uncontrolled
+
+
+import TextAreaUncontrolled from "./TextAreaUncontrolled.tsx?raw"
+
+<LiveExample src={TextAreaUncontrolled} />
+
+### Disabled
+
+
+import TextAreaDisabled from "./TextAreaDisabled.tsx?raw"
+
+<LiveExample src={TextAreaDisabled} />
+
+### Read only
+
+
+import TextAreaReadOnly from "./TextAreaReadOnly.tsx?raw"
+
+<LiveExample src={TextAreaReadOnly} />
+
+### Auto resizing
+
+
+import TextAreaAutoResizing from "./TextAreaAutoResizing.tsx?raw"
+
+<LiveExample src={TextAreaAutoResizing} />

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

@@ -0,0 +1,57 @@
+## Examples
+
+### Basic
+
+
+import TextInputBasic from "./TextInputBasic.tsx?raw"
+
+<LiveExample src={TextInputBasic} />
+
+### Disabled
+
+
+import TextInputDisabled from "./TextInputDisabled.tsx?raw"
+
+<LiveExample src={TextInputDisabled} />
+
+### Truncated at start
+
+
+import TextInputStartTruncated from "./TextInputStartTruncated.tsx?raw"
+
+<LiveExample src={TextInputStartTruncated} />
+
+### Read only
+
+
+import TextInputReadOnly from "./TextInputReadOnly.tsx?raw"
+
+<LiveExample src={TextInputReadOnly} />
+
+### Invalid
+
+
+import TextInputInvalid from "./TextInputInvalid.tsx?raw"
+
+<LiveExample src={TextInputInvalid} />
+
+### Select text using ref
+
+
+import TextInputSelectUsingRef from "./TextInputSelectUsingRef.tsx?raw"
+
+<LiveExample src={TextInputSelectUsingRef} />
+
+### Custom icon
+
+
+import TextInputCustomIcon from "./TextInputCustomIcon.tsx?raw"
+
+<LiveExample src={TextInputCustomIcon} />
+
+### Custom icon and invalid
+
+
+import TextInputCustomIconInvalid from "./TextInputCustomIconInvalid.tsx?raw"
+
+<LiveExample src={TextInputCustomIconInvalid} />

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

@@ -0,0 +1,159 @@
+import './TextInputGroup.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Disabled
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Plain
+
+The following example shows a `TextInputGroup` with the `.pf-m-plain` class applied. A plain `TextInputGroup` must only be used when contained in an ancestor that has its own border or background color styling. <br/> <br/>
+For the purposes of this example, the `TextInputGroup` is contained in a wrapper with dashed border styling to show where the component is.
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Utilities and icon with placeholder text
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### With validation
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Filters
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Filters expanded
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Autocomplete last option hint
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Search input group
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Search input group, no match
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Search input group, match with result count
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Search input group, match with navigable options
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Search input group, expandable
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Search input group, with submit button
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Search input group, advanced search
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Search input group, advanced search expanded
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Search input group, autocomplete
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Search input group, autocomplete last option hint
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Search input group, advanced search expanded with autocomplete
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-text-input-group` | `<div>` | Creates a text input group. *Required* |
+| `.pf-v6-c-text-input-group__main` | `<div>` | Creates a wrapper for the main content. *Required* |
+| `.pf-v6-c-text-input-group__text` | `<span>` | Creates the text container. *Required*|
+| `.pf-v6-c-text-input-group__icon` | `<span>` | Creates a container for an icon. |
+| `.pf-v6-c-text-input-group__text-input` | `<input>` | Creates a text input. *Required* |
+| `.pf-v6-c-text-input-group__utilities` | `<div>` | Creates text input utilities container. |
+| `.pf-v6-c-text-input-group__group` | `<div>` | Creates text input prev/next nav group. |
+| `.pf-m-plain` | `.pf-v6-c-text-input-group` | Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling. |
+| `.pf-m-disabled` | `.pf-v6-c-text-input-group` | Applies disabled styling. The `<input>` should also be `disabled`. |
+| `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
+| `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
+| `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
+| `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
+| `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
+| `.pf-m-hint` | `.pf-v6-c-text-input-group__text-input` | Applies styling when hints are included in the container. |

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

@@ -0,0 +1,48 @@
+## Examples
+
+### Basic text input group 
+
+A basic text input group updates its contents as users enter text.
+
+
+import TextInputGroupBasic from "./TextInputGroupBasic.tsx?raw"
+
+<LiveExample src={TextInputGroupBasic} />
+
+### Disabled text input group
+
+To prevent users from making edits to a text input group, you can disable it using `isDisabled`.
+
+
+import TextInputGroupDisabled from "./TextInputGroupDisabled.tsx?raw"
+
+<LiveExample src={TextInputGroupDisabled} />
+
+### With icon and utilities
+
+To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `icon` within `<TextInputGroupMain>`.
+
+You can also add additional actions or utilities via `<TextInputGroupUtilities>`. The following example includes a clear button that allows users to remove their previous input. 
+
+
+import TextInputGroupUtilitiesAndIcon from "./TextInputGroupUtilitiesAndIcon.tsx?raw"
+
+<LiveExample src={TextInputGroupUtilitiesAndIcon} />
+
+### With validation
+
+You can add a validation status to a `<TextInputGroup>` by passing the `validated` property with a value of either "success", "warning", or "error".
+
+
+import TextInputGroupWithStatus from "./TextInputGroupWithStatus.tsx?raw"
+
+<LiveExample src={TextInputGroupWithStatus} />
+
+### With filters
+
+When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `<LabelGroup>` to `<TextInputGroupMain>`, with all of the labels that a user has selected. Users can interact with these labels as needed.
+
+
+import TextInputGroupFilters from "./TextInputGroupFilters.tsx?raw"
+
+<LiveExample src={TextInputGroupFilters} />

package/dist/docs/api/v6/components/tile/html-deprecated

@@ -0,0 +1,56 @@
+import './Tile.css'
+
+## Examples
+
+### Basic tiles
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Stacked tiles
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Stacked tiles large
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Extra content
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+## Documentation
+
+### Overview
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `.pf-v6-c-tile` | Inserts the tile into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="-1"` | `.pf-v6-c-tile` | Removes the tile from keyboard focus when it is disabled. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tile` | `<div>` | Initiates a tile. **Required**  |
+| `.pf-v6-c-tile__header` | `<div>` | Initiates the tile header. |
+| `.pf-v6-c-tile__title` | `<div>` | Initiates the tile title. |
+| `.pf-v6-c-tile__icon` | `<div>` | Initiates the tile icon or image. |
+| `.pf-v6-c-tile__body` | `<div>` | Initiates the tile body. |
+| `.pf-m-selected` | `.pf-v6-c-tile` | Modifies the tile for the selected state. |
+| `.pf-m-disabled` | `.pf-v6-c-tile` | Modifies the tile for the disabled state. |
+| `.pf-m-stacked` | `.pf-v6-c-tile__header` | Modifies the tile header to be stacked vertically. |
+| `.pf-m-display-lg` | `.pf-v6-c-tile` | Modifies the tile to have large display styling. |