diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
index 21b9cd4fc27..0ccfe58b09c 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -10,42 +10,53 @@ export enum ExpandableSectionVariant {
   truncate = 'truncate'
 }
 
+/** The main expandable section component. */
+
 export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
   className?: string;
-  /** Flag to indicate if the content is expanded */
-  isExpanded?: boolean;
-  /** Text that appears in the attached toggle */
-  toggleText?: string;
-  /** Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
-  toggleTextExpanded?: string;
-  /** Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
-  toggleTextCollapsed?: string;
-  /** React node that appears in the attached toggle in place of toggle text */
-  toggleContent?: React.ReactNode;
-  /** Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component. */
-  onToggle?: (isExpanded: boolean) => void;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Indicates the expandable section has a detached toggle */
-  isDetached?: boolean;
-  /** ID of the content of the expandable section */
+  /** Id of the content of the expandable section. When passing in the isDetached property, this
+   * property's value should match the contenId property of the expandable section toggle sub-component.
+   */
   contentId?: string;
-  /** Display size variant. Set to large for disclosure styling. */
+  /** Display size variant. Set to "large" for disclosure styling. */
   displaySize?: 'default' | 'large';
-  /** Flag to indicate the width of the component is limited. Set to true for disclosure styling. */
-  isWidthLimited?: boolean;
-  /** Flag to indicate if the content is indented */
+  /** Forces active state. */
+  isActive?: boolean;
+  /** Indicates the expandable section has a detached toggle. */
+  isDetached?: boolean;
+  /** Flag to indicate if the content is expanded. */
+  isExpanded?: boolean;
+  /** Flag to indicate if the content is indented. */
   isIndented?: boolean;
+  /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
+  isWidthLimited?: boolean;
+  /** Callback function to toggle the expandable section. Detached expandable sections should
+   * use the onToggle property of the expandable section toggle sub-component.
+   */
+  onToggle?: (isExpanded: boolean) => void;
+  /** React node that appears in the attached toggle in place of the toggleText property. */
+  toggleContent?: React.ReactNode;
+  /** Text that appears in the attached toggle. */
+  toggleText?: string;
+  /** Text that appears in the attached toggle when collapsed (will override toggleText if
+   * both are specified; used for uncontrolled expandable with dynamic toggle text).
+   */
+  toggleTextCollapsed?: string;
+  /** Text that appears in the attached toggle when expanded (will override toggleText if
+   * both are specified; used for uncontrolled expandable with dynamic toggle text).
+   */
+  toggleTextExpanded?: string;
+  /** @beta Truncates the expandable content to the specified number of lines when using the
+   * "truncate" variant.
+   */
+  truncateMaxLines?: number;
   /** @beta Determines the variant of the expandable section. When passing in "truncate" as the
    * variant, the expandable content will be truncated after 3 lines by default.
    */
   variant?: 'default' | 'truncate';
-  /** @beta Truncates the expandable content to the specified number of lines when using the
-   * "truncate" variant. */
-  truncateMaxLines?: number;
 }
 
 interface ExpandableSectionState {
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
index 15dc0478fa7..f9f94de0680 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
@@ -3,21 +3,27 @@ import styles from '@patternfly/react-styles/css/components/ExpandableSection/ex
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+/** Acts as the toggle sub-component when the main expandable section component has the isDetached
+ * property passed in. Allows for more custom control over the expandable section's toggle.
+ */
+
 export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the expandable toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable toggle. */
   className?: string;
-  /** Flag indicating if the expandable section is expanded. */
-  isExpanded?: boolean;
-  /** Callback function to toggle the expandable content. */
-  onToggle?: (isExpanded: boolean) => void;
-  /** ID of the toggle's respective expandable section content. */
+  /** Id of the toggle's respective expandable section content. The value passed into this
+   * property should match the contentId property of the main expandable section component.
+   */
   contentId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
   hasTruncatedContent?: boolean;
+  /** Flag indicating if the expandable section is expanded. */
+  isExpanded?: boolean;
+  /** Callback function to toggle the expandable content. */
+  onToggle?: (isExpanded: boolean) => void;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
diff --git a/packages/react-core/src/components/FileUpload/FileUpload.tsx b/packages/react-core/src/components/FileUpload/FileUpload.tsx
index 38badb8a32b..df2b34a5816 100644
--- a/packages/react-core/src/components/FileUpload/FileUpload.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUpload.tsx
@@ -8,22 +8,48 @@ interface DropzoneInputPropsWithRef extends DropzoneInputProps {
   ref: React.RefCallback<HTMLInputElement>; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions.
 }
 
+/** The main file upload component with drag and drop functionality built in by default. */
+
 export interface FileUploadProps
   extends Omit<
     FileUploadFieldProps,
     'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
   > {
-  /** Unique id for the TextArea, also used to generate ids for accessible labels. */
-  id: string;
-  /** What type of file. Determines what is is passed to `onChange` and expected by `value`
-   * (a string for 'text' and 'dataURL', or a File object otherwise. */
-  type?: 'text' | 'dataURL';
-  /** Value of the file's contents
-   * (string if text file, File object otherwise) */
-  value?: string | File;
+  /** Flag to allow editing of a text file's contents after it is selected from disk. */
+  allowEditingUploadedText?: boolean;
+  /** Aria-label for the text area. */
+  'aria-label'?: string;
+  /** Text for the browse button. */
+  browseButtonText?: string;
+  /** Additional children to render after (or instead of) the file preview. */
+  children?: React.ReactNode;
+  /** Additional classes added to the file upload container element. */
+  className?: string;
+  /** Text for the clear button. */
+  clearButtonText?: string;
   /** Value to be shown in the read-only filename field. */
   filename?: string;
-  /** @deprecated A callback for when the file contents change. Please instead use onFileInputChange, onTextChange, onDataChange, onClearClick individually.  */
+  /** Aria-label for the read-only filename field. */
+  filenameAriaLabel?: string;
+  /** Placeholder string to display in the empty filename field. */
+  filenamePlaceholder?: string;
+  /** Flag to hide the built-in preview of the file (where available). If true, you can use
+   * the children property to render an alternate preview.
+   */
+  hideDefaultPreview?: boolean;
+  /** Unique id for the text area. Also used to generate ids for accessible labels. */
+  id: string;
+  /** Flag to show if the field is disabled. */
+  isDisabled?: boolean;
+  /** Flag to show if a file is being loaded. */
+  isLoading?: boolean;
+  /** Flag to show if the field is read only. */
+  isReadOnly?: boolean;
+  /** Flag to show if the field is required. */
+  isRequired?: boolean;
+  /** @deprecated A callback for when the file contents changes. Please instead use
+   * onFileInputChange, onTextChange, onDataChange, and onClearClick individually.
+   */
   onChange?: (
     value: string | File,
     filename: string,
@@ -32,61 +58,42 @@ export interface FileUploadProps
       | React.DragEvent<HTMLElement> // User dragged/dropped a file
       | React.ChangeEvent<HTMLElement> // User typed in the TextArea
   ) => void;
+  /** Callback for clicking on the file upload field text area. By default, prevents a click
+   * in the text area from opening file dialog.
+   */
+  onClick?: (event: React.MouseEvent) => void;
   /** Change event emitted from the hidden \<input type="file" \> field associated with the component  */
   onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
-  /** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */
-  onClick?: (event: React.MouseEvent) => void;
-  /** Additional classes added to the FileUpload container element. */
-  className?: string;
-  /** Flag to show if the field is disabled. */
-  isDisabled?: boolean;
-  /** Flag to show if the field is read only. */
-  isReadOnly?: boolean;
-  /** Flag to show if a file is being loaded. */
-  isLoading?: boolean;
-  /** Aria-valuetext for the loading spinner */
+  /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
-  /** Flag to show if the field is required. */
-  isRequired?: boolean;
+  /** What type of file. Determines what is passed to the onChange property and what is
+   * expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise.
+   */
+  type?: 'text' | 'dataURL';
   /** Value to indicate if the field is modified to show that validation state.
    * If set to success, field will be modified to indicate valid state.
-   * If set to error,  field will be modified to indicate error state.
+   * If set to error, field will be modified to indicate error state.
    */
   validated?: 'success' | 'error' | 'default';
-  /** Aria-label for the TextArea. */
-  'aria-label'?: string;
-  /** Placeholder string to display in the empty filename field */
-  filenamePlaceholder?: string;
-  /** Aria-label for the read-only filename field */
-  filenameAriaLabel?: string;
-  /** Text for the Browse button */
-  browseButtonText?: string;
-  /** Text for the Clear button */
-  clearButtonText?: string;
-  /** Flag to hide the built-in preview of the file (where available).
-   * If true, you can use children to render an alternate preview. */
-  hideDefaultPreview?: boolean;
-  /** Flag to allow editing of a text file's contents after it is selected from disk */
-  allowEditingUploadedText?: boolean;
-  /** Additional children to render after (or instead of) the file preview. */
-  children?: React.ReactNode;
+  /** Value of the file's contents (string if text file, File object otherwise). */
+  value?: string | File;
 
   // Props available in FileUpload but not FileUploadField:
 
-  /** A callback for when a selected file starts loading */
-  onReadStarted?: (fileHandle: File) => void;
-  /** A callback for when a selected file finishes loading */
-  onReadFinished?: (fileHandle: File) => void;
-  /** A callback for when the FileReader API fails */
-  onReadFailed?: (error: DOMException, fileHandle: File) => void;
   /** Optional extra props to customize react-dropzone. */
   dropzoneProps?: DropzoneProps;
-  /** Clear button was clicked */
+  /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Text area text changed */
-  onTextChange?: (text: string) => void;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */
   onDataChange?: (data: string) => void;
+  /** A callback for when the FileReader API fails. */
+  onReadFailed?: (error: DOMException, fileHandle: File) => void;
+  /** A callback for when a selected file finishes loading. */
+  onReadFinished?: (fileHandle: File) => void;
+  /** A callback for when a selected file starts loading. */
+  onReadStarted?: (fileHandle: File) => void;
+  /** Text area text changed. */
+  onTextChange?: (text: string) => void;
 }
 
 export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
index b15133060f1..808dde920a6 100644
--- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
@@ -8,18 +8,46 @@ import { TextArea, TextAreResizeOrientation } from '../TextArea';
 import { Spinner, spinnerSize } from '../Spinner';
 import { fileReaderType } from '../../helpers/fileUtils';
 
+/** A more customizable file upload component for implementing custom logic. Drag and drop
+ * functionality is not built in by default.
+ */
+
 export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
-  /** Unique id for the TextArea, also used to generate ids for accessible labels */
-  id: string;
-  /** What type of file. Determines what is is expected by `value`
-   * (a string for 'text' and 'dataURL', or a File object otherwise). */
-  type?: 'text' | 'dataURL';
-  /** Value of the file's contents
-   * (string if text file, File object otherwise) */
-  value?: string | File;
+  /** Flag to allow editing of a text file's contents after it is selected from disk. */
+  allowEditingUploadedText?: boolean;
+  /** Aria-label for the text area. */
+  'aria-label'?: string;
+  /** Text for the browse button. */
+  browseButtonText?: string;
+  /** Additional children to render after (or instead of) the file preview. */
+  children?: React.ReactNode;
+  /** Additional classes added to the file upload field container element. */
+  className?: string;
+  /** Text for the clear button. */
+  clearButtonText?: string;
   /** Value to be shown in the read-only filename field. */
   filename?: string;
-  /** A callback for when the TextArea value changes. */
+  /** Aria-label for the read-only filename field. */
+  filenameAriaLabel?: string;
+  /** Placeholder string to display in the empty filename field. */
+  filenamePlaceholder?: string;
+  /** Flag to hide the built-in preview of the file (where available). If true, you can use
+   * the children property to render an alternate preview.
+   */
+  hideDefaultPreview?: boolean;
+  /** Unique id for the text area. Also used to generate ids for accessible labels. */
+  id: string;
+  /** Flag to disable the clear button. */
+  isClearButtonDisabled?: boolean;
+  /** Flag to show if the field is disabled. */
+  isDisabled?: boolean;
+  /** Flag to show if a file is being loaded. */
+  isLoading?: boolean;
+  /** Flag to show if the field is read only. */
+  isReadOnly?: boolean;
+  /** Flag to show if the field is required. */
+  isRequired?: boolean;
+  /** A callback for when the text area value changes. */
   onChange?: (
     value: string,
     filename: string,
@@ -27,60 +55,38 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
       | React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
       | React.MouseEvent<HTMLButtonElement, MouseEvent> // User clicked Clear button
   ) => void;
-  /** Additional classes added to the FileUploadField container element. */
-  className?: string;
-  /** Flag to show if the field is disabled. */
-  isDisabled?: boolean;
-  /** Flag to show if the field is read only. */
-  isReadOnly?: boolean;
-  /** Flag to show if a file is being loaded. */
-  isLoading?: boolean;
-  /** Aria-valuetext for the loading spinner */
+  /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
-  /** Flag to show if the field is required. */
-  isRequired?: boolean;
+  /** What type of file. Determines what is is expected by the value property (a string for
+   * 'text' and 'dataURL', or a File object otherwise).
+   */
+  type?: 'text' | 'dataURL';
   /** Value to indicate if the field is modified to show that validation state.
    * If set to success, field will be modified to indicate valid state.
    * If set to error,  field will be modified to indicate error state.
    */
   validated?: 'success' | 'error' | 'default';
-  /** Aria-label for the TextArea. */
-  'aria-label'?: string;
-  /** Placeholder string to display in the empty filename field */
-  filenamePlaceholder?: string;
-  /** Aria-label for the read-only filename field */
-  filenameAriaLabel?: string;
-  /** Text for the Browse button */
-  browseButtonText?: string;
-  /** Text for the Clear button */
-  clearButtonText?: string;
-  /** Flag to disable the Clear button */
-  isClearButtonDisabled?: boolean;
-  /** Flag to hide the built-in preview of the file (where available).
-   * If true, you can use children to render an alternate preview. */
-  hideDefaultPreview?: boolean;
-  /** Flag to allow editing of a text file's contents after it is selected from disk */
-  allowEditingUploadedText?: boolean;
-  /** Additional children to render after (or instead of) the file preview. */
-  children?: React.ReactNode;
+  /** Value of the file's contents (string if text file, File object otherwise). */
+  value?: string | File;
 
   // Props available in FileUploadField but not FileUpload:
 
-  /** A callback for when the Browse button is clicked. */
+  /** A reference object to attach to the file upload field container element. */
+  containerRef?: React.Ref<HTMLDivElement>;
+  /** Flag to show if a file is being dragged over the file upload field. */
+  isDragActive?: boolean;
+  /** A callback for when the browse button is clicked. */
   onBrowseButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** A callback for when the Clear button is clicked. */
+  /** A callback for when the clear button is clicked. */
   onClearButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** A callback from when the text area is clicked. Can also be set via the onClick property of FileUpload. */
+  /** Callback for when focus is lost on the text area field. */
+  onTextAreaBlur?: (event?: any) => void;
+  /** A callback for when the text area is clicked. Can also be set via the onClick property
+   * of the file upload component. */
   onTextAreaClick?: (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => void;
-  /** Flag to show if a file is being dragged over the field */
-  isDragActive?: boolean;
-  /** A reference object to attach to the FileUploadField container element. */
-  containerRef?: React.Ref<HTMLDivElement>;
-  /** Text area text changed */
+  /** Text area text changed. */
   onTextChange?: (text: string) => void;
-  /** Callback for when focus is lost on the text area field */
-  onTextAreaBlur?: (event?: any) => void;
-  /** Placeholder string to display in the empty text area field */
+  /** Placeholder string to display in the empty text area field. */
   textAreaPlaceholder?: string;
 }
 
diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
index 5c5e8553143..5f8d9b67bff 100644
--- a/packages/react-core/src/components/Modal/Modal.tsx
+++ b/packages/react-core/src/components/Modal/Modal.tsx
@@ -7,62 +7,71 @@ import { ModalContent } from './ModalContent';
 import { OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Content rendered inside the Modal. */
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
+  /** Content rendered inside the modal. */
   children: React.ReactNode;
-  /** Additional classes added to the Modal */
+  /** Additional classes added to the modal. */
   className?: string;
-  /** Flag to show the modal */
-  isOpen?: boolean;
-  /** Complex header (more than just text), supersedes title for header content */
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
   header?: React.ReactNode;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal header. */
   help?: React.ReactNode;
-  /** Simple text content of the Modal Header, also used for aria-label on the body */
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** A callback for when the close button is clicked. */
+  onClose?: () => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Alternate position of the modal. */
+  position?: 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
   title?: string;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Id to use for Modal Box label */
-  'aria-labelledby'?: string;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id to use for Modal Box descriptor */
-  'aria-describedby'?: string;
-  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
-  bodyAriaRole?: string;
-  /** Flag to show the close button in the header area of the modal */
-  showClose?: boolean;
-  /** Custom footer */
-  footer?: React.ReactNode;
-  /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
-  actions?: any;
-  /** A callback for when the close button is clicked */
-  onClose?: () => void;
-  /** Default width of the Modal. */
-  width?: number | string;
-  /** The parent container to append the modal to. Defaults to document.body */
-  appendTo?: HTMLElement | (() => HTMLElement);
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-  /** Description of the modal */
-  description?: React.ReactNode;
-  /** Variant of the modal */
+  /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
-  position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
-  positionOffset?: string;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper */
-  hasNoBodyWrapper?: boolean;
-  /** An ID to use for the ModalBox container */
-  id?: string;
-  /** Modal handles pressing of the Escape key and closes the modal. If you want to handle this yourself you can use this callback function */
-  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Default width of the modal. */
+  width?: number | string;
 }
 
 export enum ModalVariant {
diff --git a/packages/react-core/src/components/Modal/ModalBox.tsx b/packages/react-core/src/components/Modal/ModalBox.tsx
index da28a0d0d7c..e59a3b173bb 100644
--- a/packages/react-core/src/components/Modal/ModalBox.tsx
+++ b/packages/react-core/src/components/Modal/ModalBox.tsx
@@ -4,22 +4,22 @@ import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the ModalBox. */
+  /** Id to use for the modal box description. */
+  'aria-describedby': string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal box. */
   children: React.ReactNode;
-  /** Additional classes added to the ModalBox */
+  /** Additional classes added to the modal box. */
   className?: string;
-  /** Variant of the modal */
-  variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
+  /** Alternate position of the modal. */
   position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
-  /** Id to use for Modal Box label */
-  'aria-labelledby'?: string;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id to use for Modal Box description */
-  'aria-describedby': string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
 }
 
 export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
diff --git a/packages/react-core/src/components/Modal/ModalBoxBody.tsx b/packages/react-core/src/components/Modal/ModalBoxBody.tsx
index f1e404a5d2c..7d59486d287 100644
--- a/packages/react-core/src/components/Modal/ModalBoxBody.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxBody.tsx
@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxBodyProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the ModalBoxBody */
+  /** Content rendered inside the modal box body. */
   children?: React.ReactNode;
-  /** Additional classes added to the ModalBoxBody */
+  /** Additional classes added to the modal box body. */
   className?: string;
 }
 
diff --git a/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx
index c190648b086..4b999560442 100644
--- a/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx
@@ -4,9 +4,9 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { OUIAProps } from '../../helpers';
 
 export interface ModalBoxCloseButtonProps extends OUIAProps {
-  /** Additional classes added to the close button */
+  /** Additional classes added to the close button. */
   className?: string;
-  /** A callback for when the close button is clicked */
+  /** A callback for when the close button is clicked. */
   onClose?: () => void;
 }
 
diff --git a/packages/react-core/src/components/Modal/ModalBoxDescription.tsx b/packages/react-core/src/components/Modal/ModalBoxDescription.tsx
index 9e3a02e44b4..1ce6385e88c 100644
--- a/packages/react-core/src/components/Modal/ModalBoxDescription.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxDescription.tsx
@@ -3,11 +3,11 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxDescriptionProps {
-  /** Content rendered inside the description */
+  /** Content rendered inside the description. */
   children?: React.ReactNode;
-  /** Additional classes added to the description */
+  /** Additional classes added to the description. */
   className?: string;
-  /** ID of the description */
+  /** Id of the description. */
   id?: string;
 }
 
diff --git a/packages/react-core/src/components/Modal/ModalBoxFooter.tsx b/packages/react-core/src/components/Modal/ModalBoxFooter.tsx
index 4f9c41f17a2..bf0724ecf2a 100644
--- a/packages/react-core/src/components/Modal/ModalBoxFooter.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxFooter.tsx
@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxFooterProps {
-  /** Content rendered inside the Footer */
+  /** Content rendered inside the modal box footer. */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer */
+  /** Additional classes added to the modal box footer. */
   className?: string;
 }
 
diff --git a/packages/react-core/src/components/Modal/ModalBoxHeader.tsx b/packages/react-core/src/components/Modal/ModalBoxHeader.tsx
index e9670519bb5..2db0a126d4c 100644
--- a/packages/react-core/src/components/Modal/ModalBoxHeader.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxHeader.tsx
@@ -3,11 +3,11 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxHeaderProps {
-  /** Content rendered inside the Header */
+  /** Content rendered inside the modal box header. */
   children?: React.ReactNode;
-  /** Additional classes added to the button */
+  /** Additional classes added to the modal box header. */
   className?: string;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal box header. */
   help?: React.ReactNode;
 }
 
diff --git a/packages/react-core/src/components/Modal/ModalBoxTitle.tsx b/packages/react-core/src/components/Modal/ModalBoxTitle.tsx
index dc821d291b0..7200b4c2de0 100644
--- a/packages/react-core/src/components/Modal/ModalBoxTitle.tsx
+++ b/packages/react-core/src/components/Modal/ModalBoxTitle.tsx
@@ -15,18 +15,17 @@ export const isVariantIcon = (icon: any): icon is string =>
   ['success', 'danger', 'warning', 'info', 'default'].includes(icon as string);
 
 export interface ModalBoxTitleProps {
-  /** Content rendered inside the modal box header title. */
+  /** Additional classes added to the modal box title. */
+  className?: string;
+  /** Id of the modal box title. */
+  id: string;
+  /** Content rendered inside the modal box title. */
   title: React.ReactNode;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title. When the predefined alert types
+   * are used the default styling will be automatically applied. */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Additional classes added to the modal box header title. */
-  className?: string;
-  /** id of the modal box header title. */
-  id: string;
 }
 
 export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index e1b6a8d89c0..b6f7b46baeb 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -15,62 +15,70 @@ import { ModalBoxHeader } from './ModalBoxHeader';
 import { ModalBoxTitle, isVariantIcon } from './ModalBoxTitle';
 
 export interface ModalContentProps extends OUIAProps {
-  /** Content rendered inside the Modal. */
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string | null;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
+  /** Id of the modal box container. */
+  boxId: string;
+  /** Content rendered inside the modal. */
   children: React.ReactNode;
-  /** Additional classes added to the button */
+  /** Additional classes added to the modal box. */
   className?: string;
-  /** Variant of the modal */
-  variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
-  position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
-  positionOffset?: string;
-  /** Flag to show the modal */
-  isOpen?: boolean;
-  /** Complex header (more than just text), supersedes title for header content */
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Id of the modal box description. */
+  descriptorId: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
   header?: React.ReactNode;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal header. */
   help?: React.ReactNode;
-  /** Description of the modal */
-  description?: React.ReactNode;
-  /** Simple text content of the Modal Header, also used for aria-label on the body */
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Id of the modal box title. */
+  labelId: string;
+  /** A callback for when the close button is clicked. */
+  onClose?: () => void;
+  /** Alternate position of the modal. */
+  position?: 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
   title?: string;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Id of Modal Box label */
-  'aria-labelledby'?: string | null;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id of Modal Box description */
-  'aria-describedby'?: string;
-  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
-  bodyAriaRole?: string;
-  /** Flag to show the close button in the header area of the modal */
-  showClose?: boolean;
-  /** Default width of the content. */
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
   width?: number | string;
-  /** Custom footer */
-  footer?: React.ReactNode;
-  /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
-  actions?: any;
-  /** A callback for when the close button is clicked */
-  onClose?: () => void;
-  /** Id of the ModalBox container */
-  boxId: string;
-  /** Id of the ModalBox title */
-  labelId: string;
-  /** Id of the ModalBoxBody */
-  descriptorId: string;
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper */
-  hasNoBodyWrapper?: boolean;
 }
 
 export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index 2d77b78757f..a2172d04dab 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -2,7 +2,7 @@
 id: Modal
 section: components
 cssPrefix: pf-c-modal-box
-propComponents: ['Modal', 'ModalBox', 'ModalBoxBody', 'ModalBoxCloseButton', 'ModalBoxFooter', 'ModalContent']
+propComponents: ['Modal']
 ouia: true
 ---
 
@@ -94,5 +94,3 @@ If the content that you're passing to the modal is likely to overflow the modal
 
 ```ts file="ModalWithOverflowingContent.tsx"
 ```
-
-
diff --git a/packages/react-core/src/components/Pagination/Navigation.tsx b/packages/react-core/src/components/Pagination/Navigation.tsx
index 9abd2508fe4..68d8cfcd3a9 100644
--- a/packages/react-core/src/components/Pagination/Navigation.tsx
+++ b/packages/react-core/src/components/Pagination/Navigation.tsx
@@ -11,52 +11,52 @@ import { pluralize, PickOptional } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
-  /** Additional classes for the container */
+  /** Additional classes for the pagination navigation container. */
   className?: string;
-  /** Flag indicating if the pagination is disabled */
-  isDisabled?: boolean;
-  /** Flag indicating if the pagination is compact */
+  /** Accessible label for the input displaying the current page. */
+  currPage?: string;
+  /** The number of first page where pagination starts. */
+  firstPage?: number;
+  /** Flag indicating if the pagination is compact. */
   isCompact?: boolean;
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
   /** Total number of items. */
   itemCount?: number;
-  /** The number of the last page */
+  /** The number of the last page. */
   lastPage?: number;
-  /** The number of first page where pagination starts */
-  firstPage?: number;
-  /** The title of a page displayed beside the page number */
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** The number of the current page. */
+  page: React.ReactText;
+  /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
-  /** The title of a page displayed beside the page number (the plural form) */
+  /** The title of a page displayed beside the page number (the plural form). */
   pagesTitlePlural?: string;
-  /** Accessible label for the button which moves to the last page */
-  toLastPage?: string;
-  /** Accessible label for the button which moves to the previous page */
-  toPreviousPage?: string;
-  /** Accessible label for the button which moves to the next page */
-  toNextPage?: string;
-  /** Accessible label for the button which moves to the first page */
-  toFirstPage?: string;
-  /** Accessible label for the input displaying the current page */
-  currPage?: string;
-  /** Accessible label for the pagination component */
+  /** Accessible label for the pagination component. */
   paginationTitle?: string;
-  /** Accessible label for the English word "of" */
-  ofWord?: string;
-  /** The number of the current page */
-  page: React.ReactText;
   /** Number of items per page. */
   perPage?: number;
-  /** Function called when page is changed */
-  onSetPage: OnSetPage;
-  /** Function called when user clicks to navigate to next page */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to previous page */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to first page */
+  /** Accessible label for the button which moves to the first page. */
+  toFirstPage?: string;
+  /** Accessible label for the button which moves to the last page. */
+  toLastPage?: string;
+  /** Accessible label for the button which moves to the next page. */
+  toNextPage?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPage?: string;
+  /** Function called when user clicks to navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to last page */
+  /** Function called when user clicks to navigate to last page. */
   onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user inputs page number */
+  /** Function called when user clicks to navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks to navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user inputs page number. */
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when page is changed. */
+  onSetPage: OnSetPage;
 }
 
 export interface NavigationState {
diff --git a/packages/react-core/src/components/Pagination/OptionsToggle.tsx b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
index 43c02e56f1a..4d26714132f 100644
--- a/packages/react-core/src/components/Pagination/OptionsToggle.tsx
+++ b/packages/react-core/src/components/Pagination/OptionsToggle.tsx
@@ -7,40 +7,41 @@ import { ToggleTemplateProps } from './ToggleTemplate';
 import { DropdownToggle } from '../Dropdown';
 
 export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
-  /** The type or title of the items being paginated */
-  itemsTitle?: string;
-  /** Accessible label for the options toggle */
-  optionsToggle?: string;
-  /** The title of the pagination options menu */
-  itemsPerPageTitle?: string;
-  /** The first index of the items being paginated */
+  /** The first index of the items being paginated. */
   firstIndex?: number;
-  /** The last index of the items being paginated */
-  lastIndex?: number;
-  /** The total number of items being paginated */
+  /** Flag indicating if the options menu is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the options menu dropdown is open or not. */
+  isOpen?: boolean;
+  /** The total number of items being paginated. */
   itemCount?: number;
-  /** Id added to the title of the pagination options menu */
-  widgetId?: string;
-  /** showToggle */
-  showToggle?: boolean;
-  /** Event function that fires when user clicks the options menu toggle */
+  /** The title of the pagination options menu. */
+  itemsPerPageTitle?: string;
+  /** The type or title of the items being paginated. */
+  itemsTitle?: string;
+  /** The last index of the items being paginated. */
+  lastIndex?: number;
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Callback for toggle open on keyboard entry. */
+  onEnter?: () => void;
+  /** Event function that fires when user clicks the options menu toggle. */
   onToggle?: (isOpen: boolean) => void;
-  /** Flag indicating if the options menu dropdown is open or not */
-  isOpen?: boolean;
-  /** Flag indicating if the options menu is disabled */
-  isDisabled?: boolean;
+  /** Accessible label for the options toggle. */
+  optionsToggle?: string;
   /** */
   parentRef?: HTMLElement;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
-  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
-  /** Callback for toggle open on keyboard entry */
-  onEnter?: () => void;
-  /** Label for the English word "of" */
-  ofWord?: string;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+  /** Component to be used for wrapping the toggle contents. Use "button" when you want
    * all of the toggle text to be clickable.
    */
   perPageComponent?: 'div' | 'button';
+  /** Flag for indicating whether the toggle should be shown. */
+  showToggle?: boolean;
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, and/or itemsTitle props. */
+  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  /** Id added to the title of the pagination options menu. */
+  widgetId?: string;
 }
 
 let toggleId = 0;
diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index ef7ff8e3c18..38e753cdbfb 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -11,8 +11,8 @@ import widthChars from '@patternfly/react-tokens/dist/esm/c_pagination__nav_page
 import { PickOptional } from '../../helpers';
 
 export enum PaginationVariant {
-  top = 'top',
-  bottom = 'bottom'
+  bottom = 'bottom',
+  top = 'top'
 }
 
 const defaultPerPageOptions = [
@@ -34,40 +34,48 @@ const defaultPerPageOptions = [
   }
 ];
 
+/** Properties to customize the content and behavior of the pagination dropdown options. These
+ * properties should be passed into the pagination component's perPageOptions property.
+ */
+
 export interface PerPageOptions {
-  /** option title */
+  /** The text title of the option, which is rendered inside the pagination dropdown menu. */
   title?: string;
-  /** option value */
+  /** The value of the option, which determines how many items are displayed per page. */
   value?: number;
 }
 
+/** Properties to customize various pagination titles. The following properties should be
+ * passed into the pagination component's title property.
+ */
+
 export interface PaginationTitles {
-  /** The title of a page displayed beside the page number */
-  page?: string;
-  /** The title of a page displayed beside the page number (plural form) */
-  pages?: string;
-  /** The type or title of the items being paginated */
+  /** Accessible label for the input displaying the current page. */
+  currPage?: string;
+  /** The type or title of the items being paginated. */
   items?: string;
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPage?: string;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Accessible label for the options toggle. */
+  optionsToggle?: string;
+  /** The title of a page displayed beside the page number. */
+  page?: string;
+  /** The title of a page displayed beside the page number (plural form). */
+  pages?: string;
+  /** Accessible label for the pagination component. */
+  paginationTitle?: string;
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** Accessible label for the button which moves to the first page */
+  /** Accessible label for the button which moves to the first page. */
   toFirstPage?: string;
-  /** Accessible label for the button which moves to the previous page */
-  toPreviousPage?: string;
-  /** Accessible label for the button which moves to the last page */
+  /** Accessible label for the button which moves to the last page. */
   toLastPage?: string;
-  /** Accessible label for the button which moves to the next page */
+  /** Accessible label for the button which moves to the next page. */
   toNextPage?: string;
-  /** Accessible label for the options toggle */
-  optionsToggle?: string;
-  /** Accessible label for the input displaying the current page */
-  currPage?: string;
-  /** Accessible label for the pagination component */
-  paginationTitle?: string;
-  /** Accessible label for the English word "of" */
-  ofWord?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPage?: string;
 }
 
 export type OnSetPage = (
@@ -86,65 +94,71 @@ export type OnPerPageSelect = (
   endIdx?: number
 ) => void;
 
+/** The main pagination component. */
+
 export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** What should be rendered inside */
+  /** What should be rendered inside the pagination. */
   children?: React.ReactNode;
-  /** Additional classes for the container. */
+  /** Additional classes for the pagination container. */
   className?: string;
-  /** Total number of items. */
-  itemCount?: number;
-  /** Position where pagination is rendered. */
-  variant?: 'top' | 'bottom' | PaginationVariant;
-  /** Flag indicating if pagination is disabled */
-  isDisabled?: boolean;
-  /** Flag indicating if pagination is compact */
+  /** Indicate whether to show last full page of results when user selects perPage value
+   * greater than remaining rows.
+   */
+  defaultToFullPage?: boolean;
+  /** Direction of dropdown context menu. */
+  dropDirection?: 'up' | 'down';
+  /** Page to start at. */
+  firstPage?: number;
+  /** Flag indicating if pagination is compact. */
   isCompact?: boolean;
-  /** Flag indicating if pagination should not be sticky on mobile */
+  /** Flag indicating if pagination is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
-  /** Flag indicating if pagination should stick to its position (based on variant) */
+  /** Flag indicating if pagination should stick to its position (based on variant). */
   isSticky?: boolean;
+  /** Total number of items. */
+  itemCount?: number;
+  /** Last index of items on current page. */
+  itemsEnd?: number;
+  /** First index of items on current page. */
+  itemsStart?: number;
+  /** Start index of rows to display, used in place of providing page. */
+  offset?: number;
+  /** Current page number. */
+  page?: number;
   /** Number of items per page. */
   perPage?: number;
-  /** Array of the number of items per page  options. */
+  /** Component to be used for wrapping the toggle contents. Use "button" when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
+  /** Array of the number of items per page options. */
   perPageOptions?: PerPageOptions[];
-  /** Indicate whether to show last full page of results when user selects perPage value greater than remaining rows */
-  defaultToFullPage?: boolean;
-  /** Page we start at. */
-  firstPage?: number;
-  /** Current page number. */
-  page?: number;
-  /** Start index of rows to display, used in place of providing page */
-  offset?: number;
-  /** First index of items on current page. */
-  itemsStart?: number;
-  /** Last index of items on current page. */
-  itemsEnd?: number;
-  /** ID to ideintify widget on page. */
-  widgetId?: string;
-  /** Direction of dropdown context menu. */
-  dropDirection?: 'up' | 'down';
-  /** Object with titles to display in pagination. */
-  titles?: PaginationTitles;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, ofWord props. */
-  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
-  /** Function called when user sets page. */
-  onSetPage?: OnSetPage;
   /** Function called when user clicks on navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to previous page. */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to next page. */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user clicks on navigate to last page. */
   onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks on navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
-   * all of the toggle text to be clickable.
+  /** Function called when user clicks on navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user sets page. */
+  onSetPage?: OnSetPage;
+  /** Object with titles to display in pagination. */
+  titles?: PaginationTitles;
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, itemsTitle, and/or ofWord props.
    */
-  perPageComponent?: 'div' | 'button';
+  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  /** Position where pagination is rendered. */
+  variant?: 'top' | 'bottom' | PaginationVariant;
+  /** Id to ideintify widget on page. */
+  widgetId?: string;
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index 2f5d977c909..93aa76d1e38 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -8,43 +8,47 @@ import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
-  /** Custom class name added to the pagination options menu */
+  /** Custom class name added to the pagination options menu. */
   className?: string;
-  /** Id added to the title of the Pagination options menu */
+  /** Id added to the title of the pagination options menu. */
   widgetId?: string;
-  /** Flag indicating if pagination options menu is disabled */
+  /** Flag indicating if pagination options menu is disabled. */
   isDisabled?: boolean;
-  /** Menu will open up or open down from the options menu toggle */
+  /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
-  /** Array of titles and values which will be the options on the options menu dropdown */
+  /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPageTitle?: string;
-  /** Current page number */
+  /** Current page number. */
   page?: number;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** The type or title of the items being paginated */
+  /** The type or title of the items being paginated. */
   itemsTitle?: string;
-  /** Accessible label for the options toggle */
+  /** Accessible label for the options toggle. */
   optionsToggle?: string;
-  /** The total number of items being paginated */
+  /** The total number of items being paginated. */
   itemCount?: number;
-  /** The first index of the items being paginated */
+  /** The first index of the items being paginated. */
   firstIndex?: number;
-  /** The last index of the items being paginated */
+  /** The last index of the items being paginated. */
   lastIndex?: number;
-  /** Flag to show last full page of results if perPage selected > remaining rows */
+  /** Flag to indicate whether to show last full page of results when user selects perPage
+   * value that is greater than remaining rows.
+   */
   defaultToFullPage?: boolean;
-  /** The number of items to be displayed per page */
+  /** The number of items to be displayed per page. */
   perPage?: number;
-  /** The number of the last page */
+  /** The number of the last page. */
   lastPage?: number;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, and/or itemsTitle props.
+   */
   toggleTemplate: ((props: ToggleTemplateProps) => React.ReactElement) | string;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Label for the English word "of" */
+  /** Label for the English word "of". */
   ofWord?: string;
   /** Component to be used for wrapping the toggle contents. Use 'button' when you want
    * all of the toggle text to be clickable.
diff --git a/packages/react-core/src/components/Pagination/ToggleTemplate.tsx b/packages/react-core/src/components/Pagination/ToggleTemplate.tsx
index f82fa3df460..71267b1055d 100644
--- a/packages/react-core/src/components/Pagination/ToggleTemplate.tsx
+++ b/packages/react-core/src/components/Pagination/ToggleTemplate.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+/** Allows more customization of the pagination dropdown toggle. The following properties
+ * should be passed into the pagination component's toggleTemplate property.
+ */
+
 export interface ToggleTemplateProps {
   /** The first index of the items being paginated */
   firstIndex?: number;