@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/DataList/DataList.tsx

@@ -25,7 +25,7 @@ export interface SelectableRowObject {
   onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
 }
 
-export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'onDragStart' | 'ref'> {
+export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
   /** Additional classes added to the DataList list */
@@ -34,14 +34,6 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   'aria-label': string;
   /** Optional callback to make DataList selectable, fired when DataListItem selected */
   onSelectDataListItem?: (id: string) => void;
-  /** @deprecated Optional callback to make DataList draggable, fired when dragging ends */
-  onDragFinish?: (newItemOrder: string[]) => void;
-  /** @deprecated Optional informational callback for dragging, fired when dragging starts */
-  onDragStart?: (id: string) => void;
-  /** @deprecated Optional informational callback for dragging, fired when an item moves */
-  onDragMove?: (oldIndex: number, newIndex: number) => void;
-  /** @deprecated Optional informational callback for dragging, fired when dragging is cancelled */
-  onDragCancel?: () => void;
   /** Id of DataList item currently selected */
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
@@ -50,47 +42,22 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Determines which wrapping modifier to apply to the DataList */
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
-  /** @deprecated Order of items in a draggable DataList */
-  itemOrder?: string[];
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   selectableRow?: SelectableRowObject;
 }
 
-interface DataListState {
-  draggedItemId: string;
-  draggingToItemIndex: number;
-  dragging: boolean;
-  tempItemOrder: string[];
-}
-
 interface DataListContextProps {
   isSelectable: boolean;
   selectedDataListItemId: string;
   updateSelectedDataListItem: (id: string) => void;
   selectableRow?: SelectableRowObject;
-  isDraggable: boolean;
-  dragStart: (e: React.DragEvent) => void;
-  dragEnd: (e: React.DragEvent) => void;
-  drop: (e: React.DragEvent) => void;
-  dragKeyHandler: (e: React.KeyboardEvent) => void;
 }
 
 export const DataListContext = React.createContext<Partial<DataListContextProps>>({
   isSelectable: false
 });
 
-const moveItem = (arr: string[], i1: string, toIndex: number) => {
-  const fromIndex = arr.indexOf(i1);
-  if (fromIndex === toIndex) {
-    return arr;
-  }
-  const temp = arr.splice(fromIndex, 1);
-  arr.splice(toIndex, 0, temp[0]);
-
-  return arr;
-};
-
-export class DataList extends React.Component<DataListProps, DataListState> {
+export class DataList extends React.Component<DataListProps> {
   static displayName = 'DataList';
   static defaultProps: PickOptional<DataListProps> = {
     children: null,
@@ -100,207 +67,14 @@ export class DataList extends React.Component<DataListProps, DataListState> {
     gridBreakpoint: 'md',
     wrapModifier: null
   };
-  dragFinished: boolean = false;
-  html5DragDrop: boolean = false;
-  arrayCopy: React.ReactElement[] = React.Children.toArray(this.props.children) as React.ReactElement[];
   ref = React.createRef<HTMLUListElement>();
 
-  state: DataListState = {
-    tempItemOrder: [],
-    draggedItemId: null,
-    draggingToItemIndex: null,
-    dragging: false
-  };
-
   constructor(props: DataListProps) {
     super(props);
-
-    this.html5DragDrop = Boolean(props.onDragFinish || props.onDragStart || props.onDragMove || props.onDragCancel);
-    if (this.html5DragDrop) {
-      // eslint-disable-next-line no-console
-      console.warn("DataList's onDrag API is deprecated. Use DragDrop instead.");
-    }
-  }
-
-  componentDidUpdate(oldProps: DataListProps) {
-    if (this.dragFinished) {
-      this.dragFinished = false;
-
-      this.setState({
-        tempItemOrder: [...this.props.itemOrder],
-        draggedItemId: null,
-        dragging: false
-      });
-    }
-    if (oldProps.itemOrder !== this.props.itemOrder) {
-      this.move(this.props.itemOrder);
-    }
   }
 
   getIndex = (id: string) => Array.from(this.ref.current.children).findIndex(item => item.id === id);
 
-  move = (itemOrder: string[]) => {
-    const ulNode = this.ref.current;
-    const nodes = Array.from(ulNode.children);
-    if (nodes.map(node => node.id).every((id, i) => id === itemOrder[i])) {
-      return;
-    }
-    while (ulNode.firstChild) {
-      ulNode.removeChild(ulNode.lastChild);
-    }
-
-    itemOrder.forEach(id => {
-      ulNode.appendChild(nodes.find(n => n.id === id));
-    });
-  };
-
-  dragStart0 = (el: HTMLElement) => {
-    const { onDragStart } = this.props;
-    const draggedItemId = el.id;
-
-    el.classList.add(styles.modifiers.ghostRow);
-    el.setAttribute('aria-pressed', 'true');
-    this.setState({
-      draggedItemId,
-      dragging: true
-    });
-    onDragStart && onDragStart(draggedItemId);
-  };
-
-  dragStart = (evt: React.DragEvent) => {
-    evt.dataTransfer.effectAllowed = 'move';
-    evt.dataTransfer.setData('text/plain', evt.currentTarget.id);
-    this.dragStart0(evt.currentTarget as HTMLElement);
-  };
-
-  onDragCancel = () => {
-    this.move(this.props.itemOrder);
-    Array.from(this.ref.current.children).forEach(el => {
-      el.classList.remove(styles.modifiers.ghostRow);
-      el.classList.remove(styles.modifiers.dragOver);
-      el.setAttribute('aria-pressed', 'false');
-    });
-    this.setState({
-      draggedItemId: null,
-      draggingToItemIndex: null,
-      dragging: false
-    });
-
-    if (this.props.onDragCancel) {
-      this.props.onDragCancel();
-    }
-  };
-
-  dragLeave = (evt: React.DragEvent) => {
-    // This event false fires when we call `this.move()`, so double check we're out of zone
-    if (!this.isValidDrop(evt)) {
-      this.move(this.props.itemOrder);
-      this.setState({
-        draggingToItemIndex: null
-      });
-    }
-  };
-
-  dragEnd0 = (el: HTMLElement) => {
-    el.classList.remove(styles.modifiers.ghostRow);
-    el.classList.remove(styles.modifiers.dragOver);
-    el.setAttribute('aria-pressed', 'false');
-    this.setState({
-      draggedItemId: null,
-      draggingToItemIndex: null,
-      dragging: false
-    });
-  };
-
-  dragEnd = (evt: React.DragEvent) => {
-    this.dragEnd0(evt.target as HTMLElement);
-  };
-
-  isValidDrop = (evt: React.DragEvent) => {
-    const ulRect = this.ref.current.getBoundingClientRect();
-    return (
-      evt.clientX > ulRect.x &&
-      evt.clientX < ulRect.x + ulRect.width &&
-      evt.clientY > ulRect.y &&
-      evt.clientY < ulRect.y + ulRect.height
-    );
-  };
-
-  drop = (evt: React.DragEvent) => {
-    if (this.isValidDrop(evt)) {
-      this.props.onDragFinish(this.state.tempItemOrder);
-    } else {
-      this.onDragCancel();
-    }
-  };
-
-  dragOver0 = (id: string) => {
-    const draggingToItemIndex = Array.from(this.ref.current.children).findIndex(item => item.id === id);
-    if (draggingToItemIndex !== this.state.draggingToItemIndex) {
-      const tempItemOrder = moveItem([...this.props.itemOrder], this.state.draggedItemId, draggingToItemIndex);
-      this.move(tempItemOrder);
-
-      this.setState({
-        draggingToItemIndex,
-        tempItemOrder
-      });
-    }
-  };
-
-  dragOver = (evt: React.DragEvent): string | null => {
-    evt.preventDefault();
-
-    const curListItem = (evt.target as HTMLElement).closest('li');
-    if (!curListItem || !this.ref.current.contains(curListItem) || curListItem.id === this.state.draggedItemId) {
-      // We're going nowhere, don't bother calling `dragOver0`
-      return null;
-    } else {
-      this.dragOver0(curListItem.id);
-    }
-  };
-
-  handleDragButtonKeys = (evt: React.KeyboardEvent) => {
-    const { dragging } = this.state;
-    if (![' ', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown'].includes(evt.key) || !this.html5DragDrop) {
-      if (dragging) {
-        evt.preventDefault();
-      }
-      return;
-    }
-    evt.preventDefault();
-
-    const dragItem = (evt.target as Element).closest('li');
-
-    if (evt.key === ' ' || (evt.key === 'Enter' && !dragging)) {
-      this.dragStart0(dragItem);
-    } else if (dragging) {
-      if (evt.key === 'Escape' || evt.key === 'Enter') {
-        this.setState({
-          dragging: false
-        });
-        this.dragFinished = true;
-        if (evt.key === 'Enter') {
-          this.dragEnd0(dragItem);
-          this.props.onDragFinish(this.state.tempItemOrder);
-        } else {
-          this.onDragCancel();
-        }
-      } else if (evt.key === 'ArrowUp') {
-        const nextSelection = dragItem.previousSibling as HTMLElement;
-        if (nextSelection) {
-          this.dragOver0(nextSelection.id);
-          (dragItem.querySelector(`.${styles.dataListItemDraggableButton}`) as HTMLElement).focus();
-        }
-      } else if (evt.key === 'ArrowDown') {
-        const nextSelection = dragItem.nextSibling as HTMLElement;
-        if (nextSelection) {
-          this.dragOver0(nextSelection.id);
-          (dragItem.querySelector(`.${styles.dataListItemDraggableButton}`) as HTMLElement).focus();
-        }
-      }
-    }
-  };
-
   render() {
     const {
       className,
@@ -309,42 +83,23 @@ export class DataList extends React.Component<DataListProps, DataListState> {
       selectedDataListItemId,
       isCompact,
       wrapModifier,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      onDragStart,
-      onDragMove,
-      onDragCancel,
-      onDragFinish,
       gridBreakpoint,
-      itemOrder,
       selectableRow,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const { dragging } = this.state;
     const isSelectable = onSelectDataListItem !== undefined;
 
     const updateSelectedDataListItem = (id: string) => {
       onSelectDataListItem(id);
     };
 
-    const dragProps = this.html5DragDrop && {
-      onDragOver: this.dragOver,
-      onDrop: this.dragOver,
-      onDragLeave: this.dragLeave
-    };
-
     return (
       <DataListContext.Provider
         value={{
           isSelectable,
           selectedDataListItemId,
           updateSelectedDataListItem,
-          selectableRow,
-          isDraggable: this.html5DragDrop,
-          dragStart: this.dragStart,
-          dragEnd: this.dragEnd,
-          drop: this.drop,
-          dragKeyHandler: this.handleDragButtonKeys
+          selectableRow
         }}
       >
         <ul
@@ -353,12 +108,10 @@ export class DataList extends React.Component<DataListProps, DataListState> {
             isCompact && styles.modifiers.compact,
             gridBreakpointClasses[gridBreakpoint],
             wrapModifier && styles.modifiers[wrapModifier],
-            dragging && styles.modifiers.dragOver,
             className
           )}
           style={props.style}
           {...props}
-          {...dragProps}
           ref={this.ref}
         >
           {children}

package/src/components/DataList/DataListDragButton.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
-import { DataListContext } from './DataList';
 
 export interface DataListDragButtonProps extends React.HTMLProps<HTMLButtonElement> {
   /** Additional classes added to the drag button */
@@ -18,20 +17,15 @@ export const DataListDragButton: React.FunctionComponent<DataListDragButtonProps
   isDisabled = false,
   ...props
 }: DataListDragButtonProps) => (
-  <DataListContext.Consumer>
-    {({ dragKeyHandler }) => (
-      <button
-        className={css(styles.dataListItemDraggableButton, isDisabled && styles.modifiers.disabled, className)}
-        onKeyDown={dragKeyHandler}
-        type="button"
-        disabled={isDisabled}
-        {...props}
-      >
-        <span className={css(styles.dataListItemDraggableIcon)}>
-          <GripVerticalIcon />
-        </span>
-      </button>
-    )}
-  </DataListContext.Consumer>
+  <button
+    className={css(styles.dataListItemDraggableButton, isDisabled && styles.modifiers.disabled, className)}
+    type="button"
+    disabled={isDisabled}
+    {...props}
+  >
+    <span className={css(styles.dataListItemDraggableIcon)}>
+      <GripVerticalIcon />
+    </span>
+  </button>
 );
 DataListDragButton.displayName = 'DataListDragButton';

package/src/components/DataList/DataListItem.tsx

@@ -3,7 +3,6 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { DataListContext } from './DataList';
 import { KeyTypes } from '../../helpers/constants';
-import { DataListDragButton, DataListDragButtonProps } from './DataListDragButton';
 
 export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'children' | 'ref'> {
   /** Flag to show if the expanded content of the DataList item is visible */
@@ -25,25 +24,6 @@ export interface DataListItemChildProps {
   rowid: string;
 }
 
-function findDataListDragButton(node: React.ReactNode): React.ReactElement<DataListDragButtonProps> | null {
-  if (!React.isValidElement(node)) {
-    return null;
-  }
-  if (node.type === DataListDragButton) {
-    return node as React.ReactElement<DataListDragButtonProps>;
-  }
-  if (node.props.children) {
-    for (const child of React.Children.toArray(node.props.children)) {
-      const button = findDataListDragButton(child);
-      if (button) {
-        return button;
-      }
-    }
-  }
-
-  return null;
-}
-
 export class DataListItem extends React.Component<DataListItemProps> {
   static displayName = 'DataListItem';
   static defaultProps: DataListItemProps = {
@@ -65,16 +45,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
     } = this.props;
     return (
       <DataListContext.Consumer>
-        {({
-          isSelectable,
-          selectedDataListItemId,
-          updateSelectedDataListItem,
-          selectableRow,
-          isDraggable,
-          dragStart,
-          dragEnd,
-          drop
-        }) => {
+        {({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow }) => {
           const selectDataListItem = (event: React.MouseEvent) => {
             let target: any = event.target;
             while (event.currentTarget !== target) {
@@ -98,17 +69,6 @@ export class DataListItem extends React.Component<DataListItemProps> {
             }
           };
 
-          // We made the DataListDragButton determine if the entire item is draggable instead of
-          // DataListItem like we should have.
-          // Recursively search children for the DataListDragButton and see if it's disabled...
-          const dragButton = findDataListDragButton(children);
-          const dragProps = isDraggable && {
-            draggable: dragButton ? !dragButton.props.isDisabled : true,
-            onDrop: drop,
-            onDragEnd: dragEnd,
-            onDragStart: dragStart
-          };
-
           const isSelected = selectedDataListItemId === id;
 
           const selectableInputAriaProps = selectableInputAriaLabel
@@ -129,7 +89,6 @@ export class DataListItem extends React.Component<DataListItemProps> {
               {...(isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown })}
               {...(isSelectable && isSelected && { 'aria-selected': true })}
               {...props}
-              {...dragProps}
             >
               {selectableRow && (
                 <input

package/src/components/DatePicker/DatePicker.tsx

@@ -223,7 +223,7 @@ const DatePickerBase = (
         }
         showClose={false}
         isVisible={popoverOpen}
-        shouldClose={(_1, _2, event) => {
+        shouldClose={(_1, event) => {
           event = event as KeyboardEvent;
           if (event.key === KeyTypes.Escape && selectOpen) {
             event.stopPropagation();

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

@@ -7,43 +7,47 @@ exports[`disabled date picker 1`] = `
     style="--pf-c-date-picker__input--c-form-control--width-chars: 10;"
   >
     <div
-      class="pf-c-date-picker__input"
+      style="display: contents;"
     >
       <div
-        class="pf-c-input-group"
+        class="pf-c-date-picker__input"
       >
-        <input
-          aria-invalid="false"
-          aria-label="disabled date picker"
-          class="pf-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value="2020-11-20"
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-c-button pf-m-control"
-          disabled=""
-          type="button"
+        <div
+          class="pf-c-input-group"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
+          <input
+            aria-invalid="false"
+            aria-label="disabled date picker"
+            class="pf-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value="2020-11-20"
+          />
+          <button
+            aria-label="Toggle date picker"
+            class="pf-c-button pf-m-control"
+            disabled=""
+            type="button"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>

package/src/components/DescriptionList/DescriptionList.tsx

@@ -31,7 +31,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
   /** Sets the display size of the descriptions in the description list.*/
-  displaySize?: 'lg' | '2xl';
+  displaySize?: 'default' | 'lg' | '2xl';
   /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
@@ -90,7 +90,7 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isCompact,
   isFluid,
   isFillColumns,
-  displaySize,
+  displaySize = 'default',
   columnModifier,
   autoFitMinModifier,
   termWidth,

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -85,9 +85,9 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListColumnFill.tsx'
 ```
 
-### Display size
+### Large display size
 
-```ts file='./DescriptionListWithDisplaySize.tsx'
+```ts file='./DescriptionListWithLargeDisplaySize.tsx'
 ```
 
 ## Responsive column definitions
@@ -135,9 +135,9 @@ A [card component](/components/card) can be used in place of a description list
 ```ts file='./DescriptionListWithCard.tsx'
 ```
 
-### Description list with display size and card
+### Description list with large display size and card
 
-```ts file='./DescriptionListDisplaySizeAndCard.tsx'
+```ts file='./DescriptionListWithLargeDisplaySizeAndCard.tsx'
 ```
 
 ### Display size with card, three column on large breakpoint

package/src/components/DescriptionList/examples/{DescriptionListWithDisplaySize.tsx → DescriptionListWithLargeDisplaySize.tsx}

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const DescriptionListWithDisplaySize: React.FunctionComponent = () => {
+export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false);
   const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
 

package/src/components/DescriptionList/examples/{DescriptionListDisplaySizeAndCard.tsx → DescriptionListWithLargeDisplaySizeAndCard.tsx}

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const DescriptionListDisplaySizeAndCard: React.FunctionComponent = () => {
+export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false);
   const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
 

package/src/components/Divider/Divider.tsx

@@ -14,8 +14,6 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The component type to use */
   component?: 'hr' | 'li' | 'div';
-  /** @deprecated Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) */
-  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
@@ -39,7 +37,6 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
 export const Divider: React.FunctionComponent<DividerProps> = ({
   className,
   component = DividerVariant.hr,
-  isVertical = false,
   inset,
   orientation,
   ...props
@@ -50,7 +47,6 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
     <Component
       className={css(
         styles.divider,
-        isVertical && styles.modifiers.vertical,
         formatBreakpointMods(inset, styles),
         formatBreakpointMods(orientation, styles),
         className

package/src/components/Dropdown/Dropdown.tsx

@@ -2,13 +2,9 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
 import { DropdownWithContext } from './DropdownWithContext';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { OUIAProps, useOUIAId } from '../../helpers';
 
-export interface DropdownProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    React.HTMLProps<HTMLDivElement>,
-    OUIAProps {
+export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Anything which can be rendered in a dropdown */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown */

package/src/components/Dropdown/DropdownItem.tsx

@@ -27,8 +27,6 @@ export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabI
   isAriaDisabled?: boolean;
   /** Render dropdown item as non-interactive item */
   isPlainText?: boolean;
-  /** @deprecated Forces display of the hover state of the element */
-  isHovered?: boolean;
   /** Default hyperlink location */
   href?: string;
   /** Tooltip to display when hovered over the item */