From bc3115c58ebc787dba221aaba1faf4a9df19cc83 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 13 Sep 2022 15:34:44 -0400
Subject: [PATCH 1/3] docs - add sub component descriptions

---
 .../src/components/CodeEditor/CodeEditor.tsx                | 2 ++
 .../src/components/CodeEditor/CodeEditorControl.tsx         | 4 ++++
 packages/react-core/src/components/Alert/Alert.tsx          | 4 ++++
 .../src/components/Alert/AlertActionCloseButton.tsx         | 4 ++++
 .../react-core/src/components/Alert/AlertActionLink.tsx     | 4 ++++
 .../src/components/CalendarMonth/CalendarMonth.tsx          | 6 ++++++
 .../react-core/src/components/DatePicker/DatePicker.tsx     | 6 ++++++
 packages/react-core/src/components/Popover/Popover.tsx      | 3 +++
 8 files changed, 33 insertions(+)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 61e2fae2fcf..7dbd376c6bc 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -109,6 +109,8 @@ export enum Language {
   yaml = 'yaml'
 }
 
+/** The main code editor component. */
+
 export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** additional classes added to the code editor */
   className?: string;
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
index 7fd97eb18a8..59cc2370a98 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
@@ -2,6 +2,10 @@ import * as React from 'react';
 import { Button, ButtonProps, PopoverPosition, Tooltip } from '@patternfly/react-core';
 import { CodeEditorContext } from './CodeEditorUtils';
 
+/** Allows customizing the code editor controls by passing this sub-component into the
+ * code editor's customControl property.
+ */
+
 export interface CodeEditorControlProps extends Omit<ButtonProps, 'onClick'> {
   /** icon rendered inside the code editor control */
   icon: React.ReactNode;
diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx
index 182758f1c82..d3f59bffadd 100644
--- a/packages/react-core/src/components/Alert/Alert.tsx
+++ b/packages/react-core/src/components/Alert/Alert.tsx
@@ -18,6 +18,10 @@ export enum AlertVariant {
   default = 'default'
 }
 
+/** Acts as the main component for an alert. Can also act as a wrapper around text
+ * in order to provide a description for the alert.
+ */
+
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'>, OUIAProps {
   /** Adds alert variant styles  */
   variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
diff --git a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
index 21d54532724..ba7e143dacd 100644
--- a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
+++ b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
@@ -3,6 +3,10 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { AlertContext } from './AlertContext';
 
+/** Renders a close button for a dismissable alert when this sub-component is passed into
+ * the alert's actionClose property.
+ */
+
 export interface AlertActionCloseButtonProps extends ButtonProps {
   /** Additional classes added to the AlertActionCloseButton */
   className?: string;
diff --git a/packages/react-core/src/components/Alert/AlertActionLink.tsx b/packages/react-core/src/components/Alert/AlertActionLink.tsx
index a8ce38bf5e7..f07fc99f63c 100644
--- a/packages/react-core/src/components/Alert/AlertActionLink.tsx
+++ b/packages/react-core/src/components/Alert/AlertActionLink.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 
+/** Renders buttons styled as links beneath the alert title and description when this sub-component
+ * is passed into the alert's actionLinks property.
+ */
+
 export interface AlertActionLinkProps extends ButtonProps {
   /** Content rendered inside the AlertLinkAction  */
   children?: string;
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index c58b388a95a..b623cdb271a 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -19,6 +19,10 @@ export enum Weekday {
   Saturday
 }
 
+/** Properties that allow customizing the calendar formatting and aria-labels. The following properties
+ * should be passed into the main component.
+ */
+
 export interface CalendarFormat {
   /** How to format months in Select */
   monthFormat?: (date: Date) => React.ReactNode;
@@ -107,6 +111,8 @@ export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
 
 const today = new Date();
 
+/** The main calendar month component. */
+
 export const CalendarMonth = ({
   date: dateProp,
   locale = undefined,
diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
index 6d840a96057..604e097ac11 100644
--- a/packages/react-core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -10,6 +10,8 @@ import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 
+/** The main date picker component. */
+
 export interface DatePickerProps
   extends CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
@@ -52,6 +54,10 @@ export interface DatePickerProps
   inputProps?: TextInputProps;
 }
 
+/** Allows finer control over the calendar's open state when a React ref is passed into the
+ * date picker component. Accessed via ref.current[property], e.g. ref.current.toggleCalendar().
+ */
+
 export interface DatePickerRef {
   /** Sets the calendar open status */
   setCalendarOpen: (isOpen: boolean) => void;
diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
index b0485696b78..7d34d6fd7d3 100644
--- a/packages/react-core/src/components/Popover/Popover.tsx
+++ b/packages/react-core/src/components/Popover/Popover.tsx
@@ -34,6 +34,9 @@ export enum PopoverPosition {
   rightEnd = 'right-end'
 }
 
+/** The main popover component. The following properties can also be passed into another component
+ * that has a property specifically for passing in popover properties.
+ */
 export interface PopoverProps {
   /** Accessible label, required when header is not present */
   'aria-label'?: string;

From 1d7398784ad4d0f75081b48681c90e8a2bd2ea09 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 15 Sep 2022 14:16:42 -0400
Subject: [PATCH 2/3] Reordered props

---
 .../src/components/CodeEditor/CodeEditor.tsx  | 154 ++++++++---------
 .../CodeEditor/CodeEditorControl.tsx          |  30 ++--
 .../react-core/src/components/Alert/Alert.tsx |  74 ++++----
 .../Alert/AlertActionCloseButton.tsx          |  10 +-
 .../src/components/Alert/AlertActionLink.tsx  |   4 +-
 .../src/components/Alert/AlertIcon.tsx        |   8 +-
 .../Alert/AlertToggleExpandButton.tsx         |  10 +-
 .../CalendarMonth/CalendarMonth.tsx           |  58 ++++---
 .../src/components/DatePicker/DatePicker.tsx  |  75 +++++----
 .../src/components/Popover/Popover.tsx        | 159 ++++++++++--------
 10 files changed, 305 insertions(+), 277 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 7dbd376c6bc..ff4dbeb36ef 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -112,69 +112,90 @@ export enum Language {
 /** The main code editor component. */
 
 export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** additional classes added to the code editor */
+  /** Additional classes added to the code editor. */
   className?: string;
-  /** code displayed in code editor */
+  /** Code displayed in code editor. */
   code?: string;
-  /** language displayed in the editor */
-  language?: Language;
-  /** Flag indicating the editor is styled using monaco's dark theme */
-  isDarkTheme?: boolean;
-  /** Width of code editor. Defaults to 100% */
-  width?: string;
-  /** Flag indicating the editor is displaying line numbers */
-  isLineNumbersVisible?: boolean;
-  /** Flag indicating the editor is read only */
-  isReadOnly?: boolean;
-  /** Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height to the height of the content. */
-  height?: string | 'sizeToFit';
-  /** Function which fires each time the code changes in the code editor */
-  onCodeChange?: (value: string) => void;
-  /** Function which fires each time the content of the code editor is manually changed. Does not fire when a file is uploaded. */
-  onChange?: ChangeHandler;
-  /** The loading screen before the editor will be loaded. Defaults 'loading...' */
-  loading?: React.ReactNode;
-  /** Content to display in space of the code editor when there is no code to display */
+  /** Accessible label for the copy button. */
+  copyButtonAriaLabel?: string;
+  /** Text to display in the tooltip on the copy button after code is copied to clipboard. */
+  copyButtonSuccessTooltipText?: string;
+  /** Text to display in the tooltip on the copy button before code is copied. */
+  copyButtonToolTipText?: string;
+  /** A single node or array of nodes - ideally the code editor controls component - to display
+   * above code editor.
+   */
+  customControls?: React.ReactNode | React.ReactNode[];
+  /** Accessible label for the download button. */
+  downloadButtonAriaLabel?: string;
+  /** Text to display in the tooltip on the download button. */
+  downloadButtonToolTipText?: string;
+  /** Name of the file if user downloads code to local file. */
+  downloadFileName?: string;
+  /** Content to display in space of the code editor when there is no code to display. */
   emptyState?: React.ReactNode;
-  /** Override default empty state title text */
-  emptyStateTitle?: React.ReactNode;
-  /** Override default empty state body text */
+  /** Override default empty state body text. */
   emptyStateBody?: React.ReactNode;
-  /** Override default empty state title text */
+  /** Override default empty state button text. */
   emptyStateButton?: React.ReactNode;
-  /** Override default empty state body text */
+  /** Override default empty state link text. */
   emptyStateLink?: React.ReactNode;
-  /** Name of the file if user downloads code to local file */
-  downloadFileName?: string;
-  /** Flag to add upload button to code editor actions. Also makes the code editor accept a file using drag and drop */
-  isUploadEnabled?: boolean;
-  /** Flag to add download button to code editor actions */
-  isDownloadEnabled?: boolean;
-  /** Flag to add copy button to code editor actions */
+  /** Override default empty state title text. */
+  emptyStateTitle?: React.ReactNode;
+  /** Editor header main content title. */
+  headerMainContent?: string;
+  /** Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height
+   * to the height of the content.
+   */
+  height?: string | 'sizeToFit';
+  /** Flag to add copy button to code editor actions. */
   isCopyEnabled?: boolean;
-  /** Flag to include a label indicating the currently configured editor language */
+  /** Flag indicating the editor is styled using monaco's dark theme. */
+  isDarkTheme?: boolean;
+  /** Flag to add download button to code editor actions. */
+  isDownloadEnabled?: boolean;
+  /** Flag to include a label indicating the currently configured editor language. */
   isLanguageLabelVisible?: boolean;
-  /** Accessible label for the copy button */
-  copyButtonAriaLabel?: string;
-  /** Text to display in the tooltip on the copy button before text is copied */
-  copyButtonToolTipText?: string;
-  /** Text to display in the tooltip on the copy button after code copied to clipboard */
-  copyButtonSuccessTooltipText?: string;
-  /** Accessible label for the upload button */
-  uploadButtonAriaLabel?: string;
-  /** Text to display in the tooltip on the upload button */
-  uploadButtonToolTipText?: string;
-  /** Accessible label for the download button */
-  downloadButtonAriaLabel?: string;
-  /** Text to display in the tooltip on the download button */
-  downloadButtonToolTipText?: string;
-  /** The delay before tooltip fades after code copied */
+  /** Flag indicating the editor is displaying line numbers. */
+  isLineNumbersVisible?: boolean;
+  /** Flag to add the minimap to the code editor. */
+  isMinimapVisible?: boolean;
+  /** Flag indicating the editor is read only. */
+  isReadOnly?: boolean;
+  /** Flag to add upload button to code editor actions. Also makes the code editor accept a
+   * file using drag and drop. */
+  isUploadEnabled?: boolean;
+  /** Language displayed in the editor. */
+  language?: Language;
+  /** The loading screen before the editor will be loaded. Defaults to 'loading...'. */
+  loading?: React.ReactNode;
+  /** Function which fires each time the content of the code editor is manually changed. Does
+   * not fire when a file is uploaded.
+   */
+  onChange?: ChangeHandler;
+  /** Function which fires each time the code changes in the code editor. */
+  onCodeChange?: (value: string) => void;
+  /** Callback which fires after the code editor is mounted containing a reference to the
+   * monaco editor and the monaco instance.
+   */
+  onEditorDidMount?: EditorDidMount;
+  /** Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}. */
+  options?: editor.IStandaloneEditorConstructionOptions;
+  /** Refer to Monaco interface {monaco.editor.IEditorOverrideServices}. */
+  overrideServices?: editor.IEditorOverrideServices;
+  /** Text to show in the button to open the shortcut popover. */
+  shortcutsPopoverButtonText: string;
+  /** Properties for the shortcut popover. */
+  shortcutsPopoverProps?: PopoverProps;
+  /** Flag to show the editor. */
+  showEditor?: boolean;
+  /** The delay before tooltip fades after code copied. */
   toolTipCopyExitDelay: number;
-  /** The entry and exit delay for all tooltips */
+  /** The entry and exit delay for all tooltips. */
   toolTipDelay: number;
-  /** The max width of the tooltips on all button */
+  /** The max width of the tooltips on all button. */
   toolTipMaxWidth: string;
-  /** The position of tooltips on all buttons */
+  /** The position of tooltips on all buttons. */
   toolTipPosition?:
     | TooltipPosition
     | 'auto'
@@ -190,29 +211,12 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** A single node or array of nodes - ideally CodeEditorControls - to display above code editor */
-  customControls?: React.ReactNode | React.ReactNode[];
-  /** Callback which fires after the code editor is mounted containing
-   * a reference to the monaco editor and the monaco instance */
-  onEditorDidMount?: EditorDidMount;
-  /** Flag to add the minimap to the code editor */
-  isMinimapVisible?: boolean;
-  /** Editor header main content title */
-  headerMainContent?: string;
-  /** Text to show in the button to open the shortcut popover */
-  shortcutsPopoverButtonText: string;
-  /** Properties for the shortcut popover */
-  shortcutsPopoverProps?: PopoverProps;
-  /** Flag to show the editor */
-  showEditor?: boolean;
-  /**
-   * Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.
-   */
-  options?: editor.IStandaloneEditorConstructionOptions;
-  /**
-   * Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.
-   */
-  overrideServices?: editor.IEditorOverrideServices;
+  /** Accessible label for the upload button. */
+  uploadButtonAriaLabel?: string;
+  /** Text to display in the tooltip on the upload button. */
+  uploadButtonToolTipText?: string;
+  /** Width of code editor. Defaults to 100%. */
+  width?: string;
 }
 
 interface CodeEditorState {
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
index 59cc2370a98..5b8298a3416 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
@@ -7,14 +7,18 @@ import { CodeEditorContext } from './CodeEditorUtils';
  */
 
 export interface CodeEditorControlProps extends Omit<ButtonProps, 'onClick'> {
-  /** icon rendered inside the code editor control */
-  icon: React.ReactNode;
-  /** additional classes added to the Code editor control */
-  className?: string;
-  /** accessible label for the code editor control */
+  /** Accessible label for the code editor control. */
   'aria-label'?: string;
-  /** Text to display in the tooltip*/
-  toolTipText: React.ReactNode;
+  /** Additional classes added to the code editor control. */
+  className?: string;
+  /** Delay in ms before the tooltip appears. */
+  entryDelay?: number;
+  /** Delay in ms before the tooltip disappears. */
+  exitDelay?: number;
+  /** Icon rendered inside the code editor control. */
+  icon: React.ReactNode;
+  /** Maximum width of the tooltip (default 150px). */
+  maxWidth?: string;
   /** Copy button popover position. */
   position?:
     | PopoverPosition
@@ -31,15 +35,11 @@ export interface CodeEditorControlProps extends Omit<ButtonProps, 'onClick'> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** Maximum width of the tooltip (default 150px). */
-  maxWidth?: string;
-  /** Delay in ms before the tooltip disappears. */
-  exitDelay?: number;
-  /** Delay in ms before the tooltip appears. */
-  entryDelay?: number;
-  /** Event handler for the click of the button */
+  /** Text to display in the tooltip. */
+  toolTipText: React.ReactNode;
+  /** Event handler for the click of the button. */
   onClick: (code: string, event?: any) => void;
-  /** Flag indicating that the button is visible above the code editor */
+  /** Flag indicating that the button is visible above the code editor. */
   isVisible?: boolean;
 }
 
diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx
index d3f59bffadd..e08810bad48 100644
--- a/packages/react-core/src/components/Alert/Alert.tsx
+++ b/packages/react-core/src/components/Alert/Alert.tsx
@@ -23,39 +23,47 @@ export enum AlertVariant {
  */
 
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'>, OUIAProps {
-  /** Adds alert variant styles  */
-  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
-  /** Flag to indicate if the alert is inline */
-  isInline?: boolean;
-  /** Flag to indicate if the alert is plain */
-  isPlain?: boolean;
-  /** Title of the alert  */
-  title: React.ReactNode;
-  /** Sets the heading level to use for the alert title. Default is h4. */
-  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** Close button; use the alertActionCloseButton component  */
+  /** Close button; use the alert action close button component.  */
   actionClose?: React.ReactNode;
-  /** Action links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment */
+  /** Action links; use a single alert action link component or multiple wrapped in an array
+   * or React.Fragment.
+   */
   actionLinks?: React.ReactNode;
-  /** Content rendered inside the alert */
+  /** Adds accessible text to the alert. */
+  'aria-label'?: string;
+  /** Content rendered inside the alert. */
   children?: React.ReactNode;
-  /** Additional classes added to the alert  */
+  /** Additional classes to add to the alert.  */
   className?: string;
-  /** Adds accessible text to the alert */
-  'aria-label'?: string;
-  /** Variant label text for screen readers */
-  variantLabel?: string;
-  /** Flag to indicate if the alert is in a live region */
+  /** Set a custom icon to the alert. If not set the icon is set according to the variant. */
+  customIcon?: React.ReactNode;
+  /** Uniquely identifies the alert. */
+  id?: string;
+  /** Flag indicating that the alert is expandable. */
+  isExpandable?: boolean;
+  /** Flag to indicate if the alert is inline. */
+  isInline?: boolean;
+  /** Flag to indicate if the alert is in a live region. */
   isLiveRegion?: boolean;
-  /** If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds. */
+  /** Flag to indicate if the alert is plain. */
+  isPlain?: boolean;
+  /** Function to be executed on alert timeout. Relevant when the timeout prop is set. */
+  onTimeout?: () => void;
+  /** If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will
+   * be dismissed after that amount of time in milliseconds.
+   */
   timeout?: number | boolean;
-  /** If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert */
+  /** If the user hovers over the alert and `timeout` expires, this is how long to wait
+   * before finally dismissing the alert.
+   */
   timeoutAnimation?: number;
-  /** Function to be executed on alert timeout. Relevant when the timeout prop is set */
-  onTimeout?: () => void;
-  /** Truncate title to number of lines */
-  truncateTitle?: number;
-  /** Position of the tooltip which is displayed if text is truncated */
+  /** Title of the alert.  */
+  title: React.ReactNode;
+  /** Sets the heading level to use for the alert title. Default is h4. */
+  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Adds accessible text to the alert toggle. */
+  toggleAriaLabel?: string;
+  /** Position of the tooltip which is displayed if text is truncated. */
   tooltipPosition?:
     | TooltipPosition
     | 'auto'
@@ -71,14 +79,12 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** Set a custom icon to the alert. If not set the icon is set according to the variant */
-  customIcon?: React.ReactNode;
-  /** Flag indicating that the alert is expandable */
-  isExpandable?: boolean;
-  /** Adds accessible text to the alert Toggle */
-  toggleAriaLabel?: string;
-  /** Uniquely identifies the alert */
-  id?: string;
+  /** Truncate title to number of lines. */
+  truncateTitle?: number;
+  /** Adds alert variant styles.  */
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  /** Variant label text for screen readers. */
+  variantLabel?: string;
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
diff --git a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
index ba7e143dacd..f7a1f36c8fc 100644
--- a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
+++ b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
@@ -8,13 +8,13 @@ import { AlertContext } from './AlertContext';
  */
 
 export interface AlertActionCloseButtonProps extends ButtonProps {
-  /** Additional classes added to the AlertActionCloseButton */
+  /** Accessible label for the close button */
+  'aria-label'?: string;
+  /** Additional classes added to the alert action close button. */
   className?: string;
-  /** A callback for when the close button is clicked */
+  /** A callback for when the close button is clicked. */
   onClose?: () => void;
-  /** Aria Label for the Close button */
-  'aria-label'?: string;
-  /** Variant Label for the Close button */
+  /** Variant Label for the close button. */
   variantLabel?: string;
 }
 
diff --git a/packages/react-core/src/components/Alert/AlertActionLink.tsx b/packages/react-core/src/components/Alert/AlertActionLink.tsx
index f07fc99f63c..f4a54d124f0 100644
--- a/packages/react-core/src/components/Alert/AlertActionLink.tsx
+++ b/packages/react-core/src/components/Alert/AlertActionLink.tsx
@@ -6,9 +6,9 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
  */
 
 export interface AlertActionLinkProps extends ButtonProps {
-  /** Content rendered inside the AlertLinkAction  */
+  /** Content rendered inside the alert action link.  */
   children?: string;
-  /** Additional classes added to the AlertActionLink  */
+  /** Additional classes added to the alert action link.  */
   className?: string;
 }
 
diff --git a/packages/react-core/src/components/Alert/AlertIcon.tsx b/packages/react-core/src/components/Alert/AlertIcon.tsx
index eb8e1e04cf3..4562b3aea2c 100644
--- a/packages/react-core/src/components/Alert/AlertIcon.tsx
+++ b/packages/react-core/src/components/Alert/AlertIcon.tsx
@@ -16,12 +16,12 @@ export const variantIcons = {
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
-  /** variant */
-  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
-  /** className */
+  /** Additional class names added to the alert icon. */
   className?: string;
-  /** A custom icon. If not set the icon is set according to the variant */
+  /** A custom icon. If not set the icon is set according to the variant. */
   customIcon?: React.ReactNode;
+  /** Variant of the alert icon. */
+  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
 }
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {
diff --git a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx b/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
index 842d0fdfb27..58d321a4a09 100644
--- a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
+++ b/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
@@ -6,13 +6,13 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 export interface AlertToggleExpandButtonProps extends ButtonProps {
-  /** Aria label for the toggle button */
+  /** Accessible label for the toggle button. */
   'aria-label'?: string;
-  /** A callback for when the toggle button is clicked */
-  onToggleExpand?: () => void;
-  /** Flag to indicate if the content is expanded */
+  /** Flag to indicate if the content is expanded. */
   isExpanded?: boolean;
-  /** Variant label for the toggle button */
+  /** A callback for when the toggle button is clicked. */
+  onToggleExpand?: () => void;
+  /** Variant label for the toggle button. */
   variantLabel?: string;
 }
 
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index b623cdb271a..d2e791efbfa 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -24,48 +24,50 @@ export enum Weekday {
  */
 
 export interface CalendarFormat {
-  /** How to format months in Select */
-  monthFormat?: (date: Date) => React.ReactNode;
-  /** How to format week days in header */
-  weekdayFormat?: (date: Date) => React.ReactNode;
-  /** How to format days in header for screen readers */
-  longWeekdayFormat?: (date: Date) => React.ReactNode;
-  /** How to format days in buttons in table cells */
+  /** Accessible label for the date cells. */
+  cellAriaLabel?: (date: Date) => string;
+  /** How to format days in buttons in table cells. */
   dayFormat?: (date: Date) => React.ReactNode;
-  /** If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation */
+  /** If using the default formatters which locale to use. Undefined defaults to current locale.
+   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
+   */
   locale?: string;
-  /** Day of week that starts the week. 0 is Sunday, 6 is Saturday. */
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
-  /** Which date to start range styles from */
-  rangeStart?: Date;
-  /** Aria-label for the previous month button */
+  /** How to format days in header for screen readers. */
+  longWeekdayFormat?: (date: Date) => React.ReactNode;
+  /** How to format months in month select. */
+  monthFormat?: (date: Date) => React.ReactNode;
+  /** Accessible label for the previous month button. */
   prevMonthAriaLabel?: string;
-  /** Aria-label for the next month button */
+  /** Accessible label for the next month button. */
   nextMonthAriaLabel?: string;
-  /** Aria-label for the year input */
+  /** Which date to start range styles from. */
+  rangeStart?: Date;
+  /** How to format week days in header. */
+  weekdayFormat?: (date: Date) => React.ReactNode;
+  /** Day of week that starts the week. 0 is Sunday, 6 is Saturday. */
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
+  /** Accessible label for the year input. */
   yearInputAriaLabel?: string;
-  /** Aria-label for the date cells */
-  cellAriaLabel?: (date: Date) => string;
 }
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Month/year to base other dates around */
-  date?: Date;
-  /** Callback when date is selected */
-  onChange?: (date: Date) => void;
-  /** Functions that returns if a date is valid and selectable */
-  validators?: ((date: Date) => boolean)[];
-  /** Classname to add to outer div */
+  /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
-  /** @hide Internal prop to allow pressing escape in select menu to not close popover */
-  onSelectToggle?: (open: boolean) => void;
-  /** Flag to set browser focus on the passed date **/
+  /** Month/year to base other dates around. */
+  date?: Date;
+  /** Flag to set browser focus on the passed date. **/
   isDateFocused?: boolean;
-  /** Callback when month or year is changed */
+  /** Callback when date is selected. */
+  onChange?: (date: Date) => void;
+  /** Callback when month or year is changed. */
   onMonthChange?: (
     newDate?: Date,
     event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
   ) => void;
+  /** @hide Internal prop to allow pressing escape in select menu to not close popover. */
+  onSelectToggle?: (open: boolean) => void;
+  /** Functions that returns if a date is valid and selectable. */
+  validators?: ((date: Date) => boolean)[];
 }
 
 // Must be numeric given current header design
diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
index 604e097ac11..95338fbf143 100644
--- a/packages/react-core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -15,43 +15,43 @@ import { KeyTypes } from '../../helpers';
 export interface DatePickerProps
   extends CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
-  /** Additional classes added to the date time picker. */
-  className?: string;
-  /** Accessible label for the date picker */
-  'aria-label'?: string;
-  /** How to format the date in the TextInput */
-  dateFormat?: (date: Date) => string;
-  /** How to format the date in the TextInput */
-  dateParse?: (value: string) => Date;
-  /** Flag indicating the date picker is disabled*/
-  isDisabled?: boolean;
-  /** String to display in the empty date picker field as a hint for the expected date format */
-  placeholder?: string;
-  /** Value of TextInput */
-  value?: string;
-  /** Error message to display when the TextInput cannot be parsed. */
-  invalidFormatText?: string;
-  /** Callback called every time the input value changes */
-  onChange?: (value: string, date?: Date) => void;
-  /** Callback called every time the input loses focus */
-  onBlur?: (value: string, date?: Date) => void;
-  /** Text for label */
-  helperText?: React.ReactNode;
-  /** Aria label for the button to open the date picker */
-  buttonAriaLabel?: string;
   /** The container to append the menu to. Defaults to 'parent'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
-   * menuAppendTo={() => document.body}
+   * menuAppendTo={() => document.body};
    * menuAppendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
-  /** Props to pass to the Popover */
+  /** Accessible label for the date picker. */
+  'aria-label'?: string;
+  /** Accessible label for the button to open the date picker. */
+  buttonAriaLabel?: string;
+  /** Additional classes added to the date picker. */
+  className?: string;
+  /** How to format the date in the text input. */
+  dateFormat?: (date: Date) => string;
+  /** How to format the date in the text input. */
+  dateParse?: (value: string) => Date;
+  /** Helper text to display alongside the date picker. */
+  helperText?: React.ReactNode;
+  /** Additional props for the text input. */
+  inputProps?: TextInputProps;
+  /** Flag indicating the date picker is disabled. */
+  isDisabled?: boolean;
+  /** Error message to display when the text input cannot be parsed. */
+  invalidFormatText?: string;
+  /** Callback called every time the text input loses focus. */
+  onBlur?: (value: string, date?: Date) => void;
+  /** Callback called every time the text input value changes. */
+  onChange?: (value: string, date?: Date) => void;
+  /** String to display in the empty text input as a hint for the expected date format. */
+  placeholder?: string;
+  /** Props to pass to the popover that contains the calendar month component. */
   popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;
-  /** Functions that returns an error message if a date is invalid */
+  /** Functions that returns an error message if a date is invalid. */
   validators?: ((date: Date) => string)[];
-  /** Additional props for input field */
-  inputProps?: TextInputProps;
+  /** Value of the text input. */
+  value?: string;
 }
 
 /** Allows finer control over the calendar's open state when a React ref is passed into the
@@ -59,15 +59,18 @@ export interface DatePickerProps
  */
 
 export interface DatePickerRef {
-  /** Sets the calendar open status */
+  /** Current calendar open status. */
+  isCalendarOpen: boolean;
+  /** Sets the calendar open status. */
   setCalendarOpen: (isOpen: boolean) => void;
-  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status.
-   * If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter.
-   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the
-   * correct control appropriately. */
+  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply
+   * toggle its open status.
+   * If the isOpen parameter is passed, that will set the calendar open status to the value
+   * of the isOpen parameter.
+   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers
+   * onEscapePress event to toggle the correct control appropriately.
+   */
   toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
-  /** Current calendar open status */
-  isCalendarOpen: boolean;
 }
 
 export const yyyyMMddFormat = (date: Date) =>
diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
index 7d34d6fd7d3..e8d6c607014 100644
--- a/packages/react-core/src/components/Popover/Popover.tsx
+++ b/packages/react-core/src/components/Popover/Popover.tsx
@@ -37,51 +37,60 @@ export enum PopoverPosition {
 /** The main popover component. The following properties can also be passed into another component
  * that has a property specifically for passing in popover properties.
  */
+
 export interface PopoverProps {
-  /** Accessible label, required when header is not present */
-  'aria-label'?: string;
-  /** The element to append the popover to, defaults to body */
+  /** @beta Text announced by screen reader when alert severity variant is set to indicate
+   * severity level.
+   */
+  alertSeverityScreenReaderText?: string;
+  /** @beta Severity variants for an alert popover. This modifies the color of the header to
+   * match the severity.
+   */
+  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
+  /** The duration of the CSS fade transition animation. */
+  animationDuration?: number;
+  /** The element to append the popover to. Defaults to "document.body". */
   appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement);
+  /** Accessible label for the popover, required when header is not present. */
+  'aria-label'?: string;
   /**
-   * Body content
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Body content of the popover. If you want to close the popover after an action within the
+   * body content, you can use the isVisible prop for manual control, or you can provide a
+   * function which will receive a callback as an argument to hide the popover, i.e.
+   * bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);
+  /** @deprecated - no longer used. if you want to constrain the popper to a specific element
+   * use the appendTo prop instead.
+   */
+  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
   /**
-   * The reference element to which the Popover is relatively placed to.
-   * If you cannot wrap the reference with the Popover, you can use the reference prop instead.
+   * The reference element to which the popover is relatively placed to. If you cannot wrap
+   * the reference with the Popover, you can use the reference prop instead.
    * Usage: <Popover><Button>Reference</Button></Popover>
    */
   children?: ReactElement<any>;
-  /**
-   * The reference element to which the Popover is relatively placed to.
-   * If you can wrap the reference with the Popover, you can use the children prop instead.
-   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
-   */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
-  /** Popover additional class */
+  /** Additional classes added to the popover. */
   className?: string;
-  /** Aria label for the Close button */
+  /** Accessible label for the close button. */
   closeBtnAriaLabel?: string;
-  /** Whether to show the close button */
-  showClose?: boolean;
-  /** Distance of the popover to its target, defaults to 25 */
+  /** Distance of the popover to its target. Defaults to 25. */
   distance?: number;
   /**
    * If true, tries to keep the popover in view by flipping it if necessary.
-   * If the position is set to 'auto', this prop is ignored
+   * If the position is set to 'auto', this prop is ignored.
    */
   enableFlip?: boolean;
   /**
    * The desired position to flip the popover to if the initial position is not possible.
-   * By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space.
-   * You can also pass an array of positions that determines the flip order. It should contain the initial position
-   * followed by alternative positions if that position is unavailable.
-   * Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to
-   * ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no
-   * space to the right, so it finally shows the popover on the left.
+   * By setting this prop to 'flip' it attempts to flip the popover to the opposite side if
+   * there is no space.
+   * You can also pass an array of positions that determines the flip order. It should contain
+   * the initial position followed by alternative positions if that position is unavailable.
+   * Example: Initial position is 'top'. Button with popover is in the top right corner.
+   * 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it
+   * checks if right is available. There's also no space to the right, so it finally shows the
+   * popover on the left.
    */
   flipBehavior?:
     | 'flip'
@@ -100,40 +109,46 @@ export interface PopoverProps {
         | 'right-end'
       )[];
   /**
-   * Footer content
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Footer content of the popover. If you want to close the popover after an action within the
+   * footer content, you can use the isVisible prop for manual control, or you can provide a
+   * function which will receive a callback as an argument to hide the popover, i.e.
+   * footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   footerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
+  /** Removes fixed-width and allows width to be defined by contents. */
+  hasAutoWidth?: boolean;
+  /** Allows content to touch edges of popover container. */
+  hasNoPadding?: boolean;
+  /** Sets the heading level to use for the popover header. Defaults to h6. */
+  headerComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
-   * Simple header content to be placed within a title.
-   * If you want to close the popover after an action within the bodyContent, you can use the isVisible prop for manual control,
-   * or you can provide a function which will receive a callback as an argument to hide the popover
-   * i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
+   * Simple header content to be placed within a title. If you want to close the popover after
+   * an action within the header content, you can use the isVisible prop for manual control,
+   * or you can provide a function which will receive a callback as an argument to hide the
+   * popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   headerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
-  /** Sets the heading level to use for the popover header. Default is h6. */
-  headerComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** @beta Icon to be displayed in the popover header **/
+  /** @beta Icon to be displayed in the popover header. **/
   headerIcon?: React.ReactNode;
-  /** @beta Severity variants for an alert popover. This modifies the color of the header to match the severity. */
-  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
-  /** @beta Text announced by screen reader when alert severity variant is set to indicate severity level */
-  alertSeverityScreenReaderText?: string;
-  /** Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user) */
+  /** Hides the popover when a click occurs outside (only works if isVisible is not controlled
+   * by the user).
+   */
   hideOnOutsideClick?: boolean;
+  /** Id used as part of the various popover elements (popover-${id}-header/body/footer). */
+  id?: string;
   /**
    * True to show the popover programmatically. Used in conjunction with the shouldClose prop.
-   * By default, the popover child element handles click events automatically. If you want to control this programmatically,
-   * the popover will not auto-close if the Close button is clicked, ESC key is used, or if a click occurs outside the popover.
-   * Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.
+   * By default, the popover child element handles click events automatically. If you want to
+   * control this programmatically, the popover will not auto-close if the close button is
+   * clicked, the escape key is used, or if a click occurs outside the popover. Instead, the
+   * consumer is responsible for closing the popover themselves by adding a callback listener
+   * for the shouldClose prop.
    */
   isVisible?: boolean;
-  /** Minimum width of the popover (default 6.25rem) */
-  minWidth?: string;
-  /** Maximum width of the popover (default 18.75rem) */
+  /** Maximum width of the popover (default 18.75rem). */
   maxWidth?: string;
+  /** Minimum width of the popover (default 6.25rem). */
+  minWidth?: string;
   /**
    * Lifecycle function invoked when the popover has fully transitioned out.
    * Note: The tip argument is no longer passed and has been deprecated.
@@ -160,9 +175,9 @@ export interface PopoverProps {
    */
   onShown?: (tip?: TippyInstance) => void;
   /**
-   * Popover position. Note: With 'enableFlip' set to true,
-   * it will change the position if there is not enough space for the starting position.
-   * The behavior of where it flips to can be controlled through the flipBehavior prop.
+   * Popover position. Note: With the enableFlip property set to true, it will change the
+   * position if there is not enough space for the starting position. The behavior of where it
+   * flips to can be controlled through the flipBehavior property.
    */
   position?:
     | PopoverPosition
@@ -180,34 +195,32 @@ export interface PopoverProps {
     | 'right-start'
     | 'right-end';
   /**
-   * Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is
-   * clicked, Enter key was used on it, or the ESC key is used.
+   * The reference element to which the popover is relatively placed to. If you can wrap the
+   * reference with the popover, you can use the children prop instead.
+   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
+   */
+  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
+  /**
+   * Callback function that is only invoked when isVisible is also controlled. Called when the
+   * popover close button is clicked, the enter key was used on it, or the escape key is used.
    * Note: The tip argument is no longer passed and has been deprecated.
    */
   shouldClose?: (tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
   /**
-   * Callback function that is only invoked when isVisible is also controlled. Called when the Enter key is
-   * used on the focused trigger
+   * Callback function that is only invoked when isVisible is also controlled. Called when the
+   * enter key is used on the focused trigger.
    */
   shouldOpen?: (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
-  /** z-index of the popover */
-  zIndex?: number;
-  /** CSS fade transition animation duration */
-  animationDuration?: number;
-  /** id used as part of the various popover elements (popover-${id}-header/body/footer) */
-  id?: string;
-  /** Whether to trap focus in the popover */
-  withFocusTrap?: boolean;
-  /** Removes fixed-width and allows width to be defined by contents */
-  hasAutoWidth?: boolean;
-  /** Allows content to touch edges of popover container */
-  hasNoPadding?: boolean;
-  /** @deprecated - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead */
-  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
-  /** @deprecated - no longer used */
+  /** Flag indicating whether the close button should be shown. */
+  showClose?: boolean;
+  /** @deprecated - no longer used. */
   tippyProps?: Partial<TippyProps>;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
+  /** Whether to trap focus in the popover. */
+  withFocusTrap?: boolean;
+  /** The z-index of the popover. */
+  zIndex?: number;
 }
 
 const alertStyle = {

From a1b4f115526c4a3bf75b624bae9372bf7ee5da38 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 21 Sep 2022 13:40:23 -0400
Subject: [PATCH 3/3] Updated component descriptions per feedback

---
 packages/react-core/src/components/Alert/Alert.tsx            | 4 +---
 .../react-core/src/components/CalendarMonth/CalendarMonth.tsx | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx
index e08810bad48..674a8540da9 100644
--- a/packages/react-core/src/components/Alert/Alert.tsx
+++ b/packages/react-core/src/components/Alert/Alert.tsx
@@ -18,9 +18,7 @@ export enum AlertVariant {
   default = 'default'
 }
 
-/** Acts as the main component for an alert. Can also act as a wrapper around text
- * in order to provide a description for the alert.
- */
+/** The main alert component. */
 
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'>, OUIAProps {
   /** Close button; use the alert action close button component.  */
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index d2e791efbfa..82186d297d9 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -19,8 +19,8 @@ export enum Weekday {
   Saturday
 }
 
-/** Properties that allow customizing the calendar formatting and aria-labels. The following properties
- * should be passed into the main component.
+/** Additional properties that extend from and can be passed to the main component. These
+ * properties allow customizing the calendar formatting and aria-labels.
  */
 
 export interface CalendarFormat {