@patternfly/react-core 6.0.0-prerelease.13 → 6.0.0-prerelease.15

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-v5-c-login
+cssPrefix: pf-v6-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-v5-c-masthead
+cssPrefix: pf-v6-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent']
 ---
 

package/src/components/Menu/examples/Menu.md

@@ -2,7 +2,7 @@
 id: Menu
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu
+cssPrefix: pf-v6-c-menu
 propComponents:
   [
     'Menu',

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -2,7 +2,7 @@
 id: Menu toggle
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu-toggle
+cssPrefix: pf-v6-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---
 

package/src/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-v5-c-modal-box
+cssPrefix: pf-v6-c-modal-box
 propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
 ---

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -2,7 +2,7 @@
 id: Multiple file upload
 section: components
 subsection: file-upload
-cssPrefix: pf-v5-c-multiple-file-upload
+cssPrefix: pf-v6-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 ---

package/src/components/Nav/examples/Nav.md

@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-v5-c-nav
+cssPrefix: pf-v6-c-nav
 propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'NavExpandable']
 ouia: true
 ---

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -1,7 +1,7 @@
 ---
 id: Notification badge
 section: components
-cssPrefix: pf-v5-c-notification-badge
+cssPrefix: pf-v6-c-notification-badge
 propComponents: ['NotificationBadge']
 ---
 

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,7 @@
 ---
 id: Notification drawer
 section: components
-cssPrefix: pf-v5-c-notification-drawer
+cssPrefix: pf-v6-c-notification-drawer
 propComponents:
   [
     'NotificationDrawer',

package/src/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-v5-c-number-input
+cssPrefix: pf-v6-c-number-input
 propComponents: ['NumberInput']
 ---
 

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -1,7 +1,7 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-v5-c-overflow-menu
+cssPrefix: pf-v6-c-overflow-menu
 propComponents:
   [
     'OverflowMenu',

package/src/components/Page/examples/Page.md

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-v5-c-page
+cssPrefix: pf-v6-c-page
 propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
@@ -115,7 +115,7 @@ To add additional components and information to a group, you may use the followi
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v5-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v6-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 

package/src/components/Pagination/examples/Pagination.md

@@ -1,7 +1,7 @@
 ---
 id: Pagination
 section: components
-cssPrefix: null
+cssPrefix: pf-v6-c-pagination
 propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggleTemplateProps]
 ouia: true
 ---

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-v5-c-panel
+cssPrefix: pf-v6-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-v5-c-popover
+cssPrefix: pf-v6-c-popover
 propComponents: ['Popover']
 ---
 

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-v5-c-progress
+cssPrefix: pf-v6-c-progress
 propComponents: ['Progress']
 ---
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,7 +1,7 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-v5-c-progress-stepper
+cssPrefix: pf-v6-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-radio
+cssPrefix: pf-v6-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/examples/SearchInput.md

@@ -1,7 +1,7 @@
 ---
 id: 'Search input'
 section: components
-cssPrefix: 'pf-v5-c-search-input'
+cssPrefix: 'pf-v6-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 ---
 

package/src/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-select
+cssPrefix: pf-v6-c-select
 propComponents:
   ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
 ouia: true

package/src/components/Sidebar/examples/Sidebar.md

@@ -1,6 +1,6 @@
 ---
 id: Sidebar
-cssPrefix: pf-v5-c-sidebar
+cssPrefix: pf-v6-c-sidebar
 section: components
 propComponents: ['Sidebar', 'SidebarContent', 'SidebarPanel']
 ---
@@ -43,4 +43,4 @@ A `tabIndex` should be added to the `Sidebar` when there is scrollable content i
 
 ### Padding on content
 ```ts file="./SidebarPaddingContent.tsx"
-```
+```

package/src/components/SimpleList/examples/SimpleList.md

@@ -1,7 +1,7 @@
 ---
 id: Simple list
 section: components
-cssPrefix: pf-v5-c-simple-list
+cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
 

package/src/components/Skeleton/examples/Skeleton.md

@@ -1,7 +1,7 @@
 ---
 id: Skeleton
 section: components
-cssPrefix: pf-v5-c-skeleton
+cssPrefix: pf-v6-c-skeleton
 propComponents: ['Skeleton']
 ---
 

package/src/components/SkipToContent/examples/SkipToContent.md

@@ -1,7 +1,7 @@
 ---
 id: Skip to content
 section: components
-cssPrefix: pf-v5-c-skip-to-content
+cssPrefix: pf-v6-c-skip-to-content
 propComponents: ['SkipToContent']
 ---
 

package/src/components/Slider/examples/Slider.md

@@ -1,7 +1,7 @@
 ---
 id: Slider
 section: components
-cssPrefix: pf-v5-c-slider
+cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 

package/src/components/Spinner/examples/Spinner.md

@@ -1,7 +1,7 @@
 ---
 id: Spinner
 section: components
-cssPrefix: pf-v5-c-spinner
+cssPrefix: pf-v6-c-spinner
 propComponents: ['Spinner']
 ---
 

package/src/components/Switch/examples/Switch.md

@@ -1,7 +1,7 @@
 ---
 id: Switch
 section: components
-cssPrefix: pf-v5-c-switch
+cssPrefix: pf-v6-c-switch
 propComponents: ['Switch']
 ouia: true
 ---

package/src/components/Tabs/examples/Tabs.md

@@ -1,7 +1,7 @@
 ---
 id: Tabs
 section: components
-cssPrefix: pf-v5-c-tabs
+cssPrefix: pf-v6-c-tabs
 propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---

package/src/components/TextArea/examples/TextArea.md

@@ -2,7 +2,7 @@
 id: Text area
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextArea']
 ---
 

package/src/components/TextInput/examples/TextInput.md

@@ -2,7 +2,7 @@
 id: Text input
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-form-control
+cssPrefix: pf-v6-c-form-control
 propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Text input group
 section: components
-cssPrefix: pf-v5-c-text-input-group
+cssPrefix: pf-v6-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
 ---
 
@@ -10,19 +10,27 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
 
-### Basic
+### Basic text input group 
+
+A basic text input group updates its contents as users enter text.
 
 ```ts file="./TextInputGroupBasic.tsx"
 
 ```
 
-### Disabled
+### Disabled text input group
+
+To prevent users from making edits to a text input group, you can disable it using `isDisabled`.
 
 ```ts file="./TextInputGroupDisabled.tsx"
 
 ```
 
-### Utilities and icon
+### 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. 
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
 
@@ -36,7 +44,9 @@ You can add a validation status to a `<TextInputGroup>` by passing the `validate
 
 ```
 
-### Filters
+### 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.
 
 ```ts file="./TextInputGroupFilters.tsx"
 

package/src/components/Tile/examples/Tile.md

@@ -1,7 +1,7 @@
 ---
 id: Tile
 section: components
-cssPrefix: pf-v5-c-tile
+cssPrefix: pf-v6-c-tile
 propComponents: ['Tile']
 ---
 
@@ -45,4 +45,4 @@ To provide users with a large amount of context, subtext can be elongated to wra
 
 You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks.
 ```ts file="./TileWithExtraContent.tsx"
-```
+```

package/src/components/TimePicker/examples/TimePicker.md

@@ -2,7 +2,7 @@
 id: Time picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-time-picker
+cssPrefix: pf-v6-c-time-picker
 propComponents: ['TimePicker']
 ---
 

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-timestamp"
+    class="pf-v6-c-timestamp"
   >
     <time
-      class="pf-v5-c-timestamp__text"
+      class="pf-v6-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
       1/1/2022, 12:00:00 AM

package/src/components/Timestamp/examples/Timestamp.md

@@ -1,7 +1,7 @@
 ---
 id: Timestamp
 section: components
-cssPrefix: pf-v5-c-timestamp
+cssPrefix: pf-v6-c-timestamp
 propComponents: ['Timestamp', 'TimestampTooltip']
 ---
 

package/src/components/Title/examples/Title.md

@@ -1,7 +1,7 @@
 ---
 id: Title
 section: components
-cssPrefix: pf-v5-c-title
+cssPrefix: pf-v6-c-title
 propComponents: ['Title']
 ---
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Toggle group
 section: components
-cssPrefix: pf-v5-c-toggle-group
+cssPrefix: pf-v6-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
@@ -58,4 +58,4 @@ When space in a UI is limited, you can use a compact toggle group.
 To apply compact styling to a `<ToggleGroup>`, use `isCompact`.
 
 ```ts file="./ToggleGroupCompact.tsx"
-```
+```

package/src/components/Toolbar/examples/Toolbar.md

@@ -1,6 +1,6 @@
 ---
 id: Toolbar
-cssPrefix: pf-v5-c-toolbar
+cssPrefix: pf-v6-c-toolbar
 propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: components
 ---

package/src/components/Tooltip/examples/Tooltip.md

@@ -1,7 +1,7 @@
 ---
 id: Tooltip
 section: components
-cssPrefix: pf-v5-c-tooltip
+cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 

package/src/components/TreeView/examples/TreeView.md

@@ -1,7 +1,7 @@
 ---
 id: Tree view
 section: components
-cssPrefix: pf-v5-c-tree-view
+cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 

package/src/components/Truncate/examples/Truncate.md

@@ -1,6 +1,7 @@
 ---
 id: Truncate
 section: components
+cssPrefix: pf-v6-c-truncate
 propComponents: [Truncate]
 ---
 

package/src/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-v5-c-wizard
+cssPrefix: pf-v6-c-wizard
 propComponents:
   [
     'Wizard',

package/src/demos/ProgressDemo.md

@@ -3,6 +3,8 @@ id: Progress
 section: components
 ---
 
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Demos
 
 ### Basic
@@ -10,6 +12,7 @@ section: components
 ```js
 import React from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
@@ -31,7 +34,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />
@@ -71,7 +74,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+          <div className={accessibilityStyles.screenReader} aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />

package/src/demos/ProgressStepperDemo.md

@@ -3,6 +3,8 @@ id: Progress stepper
 section: components
 ---
 
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Demos
 
 ### Basic
@@ -10,6 +12,7 @@ section: components
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
   const [currentStep, setCurrentStep] = React.useState(0);
@@ -45,7 +48,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
           {steps[currentStep] && `On ${steps[currentStep].title}.`}
           {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
         </div>

package/src/deprecated/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
+cssPrefix: ['pf-v6-c-chip', 'pf-v6-c-chip-group']
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 deprecated: true

package/src/deprecated/components/DragDrop/Draggable.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
 // import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
-const cssDraggingBackgroundColor = { name: '--pf-v5-c-draggable--m-dragging--BackgroundColor' };
+const cssDraggingBackgroundColor = { name: `--${styles.draggable}--m-dragging--BackgroundColor` };
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */

package/src/deprecated/components/Modal/examples/Modal.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-v5-c-modal-box
+cssPrefix: pf-v6-c-modal-box
 propComponents: ['Modal']
 ouia: true
 deprecated: true

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-v5-c-wizard
+cssPrefix: pf-v6-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ouia: true