@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

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

@@ -6,11 +6,6 @@ exports[`Progress measure location inside 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="inside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="inside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -43,11 +38,6 @@ exports[`Progress measure location inside and small should render large 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="large-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="large-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -80,15 +70,6 @@ exports[`Progress measure location none 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="none-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="none-progress-description"
-    />
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__status"
-    />
     <div
       aria-valuemax="100"
       aria-valuemin="0"
@@ -115,11 +96,6 @@ exports[`Progress measure location outside 1`] = `
     class="pf-c-progress pf-m-outside pf-m-singleline"
     id="outside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="outside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -156,11 +132,6 @@ exports[`Progress measure location top 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="top-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="top-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -197,11 +168,6 @@ exports[`Progress size lg 1`] = `
     class="pf-c-progress pf-m-lg pf-m-singleline"
     id="lg-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lg-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -238,11 +204,6 @@ exports[`Progress size md 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="md-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="md-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -279,11 +240,6 @@ exports[`Progress size sm 1`] = `
     class="pf-c-progress pf-m-sm pf-m-singleline"
     id="sm-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="sm-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -320,11 +276,6 @@ exports[`Progress variant danger 1`] = `
     class="pf-c-progress pf-m-danger pf-m-singleline"
     id="danger-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="danger-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -378,11 +329,6 @@ exports[`Progress variant success 1`] = `
     class="pf-c-progress pf-m-success pf-m-singleline"
     id="success-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="success-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -436,11 +382,6 @@ exports[`Progress variant warning 1`] = `
     class="pf-c-progress pf-m-warning pf-m-singleline"
     id="warning-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="warning-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -494,11 +435,6 @@ exports[`Progress with aria-valuetext 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-aria-valuetext"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-aria-valuetext-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -536,11 +472,6 @@ exports[`Simple progress 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-simple-example"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-simple-example-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -577,11 +508,6 @@ exports[`additional label 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="additional-label"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="additional-label-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -618,11 +544,6 @@ exports[`no value specified 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="no-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="no-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -659,11 +580,6 @@ exports[`value higher than maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="higher-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="higher-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -700,11 +616,6 @@ exports[`value lower than minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="lower-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lower-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -741,11 +652,6 @@ exports[`value scaled between minValue and maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-range-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-range-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -782,11 +688,6 @@ exports[`value scaled with maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -823,11 +724,6 @@ exports[`value scaled with minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"

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

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

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

@@ -1,6 +1,7 @@
 ---
 id: Select
 section: components
+subsection: menus
 cssPrefix: pf-c-select
 propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectOptionObject', 'SelectViewMoreObject']
 ouia: true

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

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

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

@@ -1,6 +1,7 @@
 ---
 id: Text input
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['TextInput']
 ---

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

@@ -1,6 +1,7 @@
 ---
 id: Time picker
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-time-picker
 propComponents: ['TimePicker']
 beta: true

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

@@ -11,7 +11,15 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownToggleCheckbox,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 ## Examples
 
@@ -20,26 +28,31 @@ import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownLis
 Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarItems.tsx"
+
 ```
 
 ### Adjusting item spacers
 
 ```ts file="./ToolbarSpacers.tsx"
+
 ```
 
 ### Adjusting item widths
 
 ```ts file="./ToolbarWidths.tsx"
+
 ```
 
 ### Adjusting toolbar inset
 
 ```ts file="./ToolbarInsets.tsx"
+
 ```
 
 ### Sticky
 
 ```ts file="./ToolbarSticky.tsx"
+
 ```
 
 ### Groups
@@ -47,6 +60,7 @@ Toolbar items are individual components that can be placed inside of a toolbar.
 Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
 
 ```ts file="./ToolbarGroups.tsx"
+
 ```
 
 ## Examples with toggle groups and filters
@@ -56,6 +70,7 @@ A toggle group can be used when you want to collapse a set of items into an over
 ### Component managed toggle groups
 
 ```ts file="./ToolbarComponentManagedToggleGroups.tsx"
+
 ```
 
 ### Consumer managed toggle groups
@@ -68,6 +83,7 @@ If the consumer would prefer to manage the expanded state of the toggle group fo
 - Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.
 
 ```ts file="./ToolbarConsumerManagedToggleGroups.tsx"
+
 ```
 
 ### With filters
@@ -76,6 +92,7 @@ The ToolbarFilter component expects a consumer managed list of applied filters a
 When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.
 
 ```ts file="./ToolbarWithFilters.tsx"
+
 ```
 
 ### With custom chip group content
@@ -83,6 +100,7 @@ When filters are applied, the toolbar will expand in height to make space for a
 The chip groups generated by toolbar filters may be further customized through the `customChipGroupContent` property, which will append to the filter chip groups. This property will remove the default `Clear all filters` button.
 
 ```ts file="./ToolbarCustomChipGroupContent.tsx"
+
 ```
 
 ### Stacked example
@@ -90,4 +108,5 @@ The chip groups generated by toolbar filters may be further customized through t
 There may be situations where all of the required elements simply cannot fit in a single line.
 
 ```ts file="./ToolbarStacked.tsx"
+
 ```

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -8,9 +8,8 @@ import {
   SelectVariant,
   Pagination,
   Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
   DropdownItem,
+  DropdownList,
   Divider,
   MenuToggle,
   OverflowMenu,
@@ -23,7 +22,12 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownItem as DropdownItemNext, DropdownList } from '@patternfly/react-core/next';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -65,7 +69,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setResourceIsExpanded(false);
   };
 
-  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent>| undefined) => {
+  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
     setResourceSelected(event?.target);
     setResourceIsExpanded(false);
   };
@@ -101,34 +105,34 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItemNext key="link">Link</DropdownItemNext>,
-    <DropdownItemNext key="action" component="button">
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
       Action
-    </DropdownItemNext>,
-    <DropdownItemNext key="disabled link" isDisabled>
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItemNext>,
-    <DropdownItemNext key="disabled action" isDisabled component="button">
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItemNext>,
+    </DropdownItem>,
     <Divider key="separator" />,
-    <DropdownItemNext key="separated link">Separated Link</DropdownItemNext>,
-    <DropdownItemNext key="separated action" component="button">
+    <DropdownItem key="separated link">Separated Link</DropdownItem>,
+    <DropdownItem key="separated action" component="button">
       Separated Action
-    </DropdownItemNext>
+    </DropdownItem>
   ];
 
   const splitButtonDropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const toggleGroupItems = (
@@ -192,23 +196,23 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                 </OverflowMenuGroup>
               </OverflowMenuContent>
               <OverflowMenuControl hasAdditionalOptions>
-              <DropdownNext
-                   onSelect={onResourceSelectDropdown}
-                   toggle={toggleRef => (
-                     <MenuToggle
-                       ref={toggleRef}
-                       aria-label="Kebab overflow menu"
-                       variant="plain"
-                       onClick={onKebabToggle}
-                       isExpanded={kebabIsOpen}
-                     >
-                       <EllipsisVIcon />
-                     </MenuToggle>
-                   )}
-                   isOpen={kebabIsOpen}
-                 >
-                   <DropdownList>{dropdownItems}</DropdownList>
-                 </DropdownNext>
+                <Dropdown
+                  onSelect={onResourceSelectDropdown}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      aria-label="Kebab overflow menu"
+                      variant="plain"
+                      onClick={onKebabToggle}
+                      isExpanded={kebabIsOpen}
+                    >
+                      <EllipsisVIcon />
+                    </MenuToggle>
+                  )}
+                  isOpen={kebabIsOpen}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
               </OverflowMenuControl>
             </OverflowMenu>
           </ToolbarItem>
@@ -222,7 +226,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       <Toolbar>
         <ToolbarContent>
           <ToolbarItem variant="bulk-select">
-            <Dropdown
+            <DropdownDeprecated
               onSelect={onSplitButtonSelect}
               toggle={
                 <DropdownToggle

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -8,18 +8,14 @@ import {
   ToolbarGroup,
   SelectOptionObject
 } from '@patternfly/react-core';
+import { Button, Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import {
-  Button,
-  Select,
-  SelectOption,
-  SelectVariant,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   DropdownPosition,
-  KebabToggle,
-  SearchInput
-} from '@patternfly/react-core';
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -45,11 +41,11 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     selection: string | SelectOptionObject
   ) => {
     const checked = (event.target as HTMLInputElement).checked;
-    setFilters(prev => {
+    setFilters((prev) => {
       const prevSelections = prev[type];
       return {
         ...prev,
-        [type]: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
       };
     });
   };
@@ -121,7 +117,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.status}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -158,21 +154,21 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
   );
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const toolbarItems = (
@@ -198,7 +194,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>
-        <Dropdown
+        <DropdownDeprecated
           toggle={<KebabToggle onToggle={onKebabToggle} />}
           isOpen={kebabIsOpen}
           isPlain