docs(Alert, calendar month, code editor, date picker) - add sub component descriptions

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -109,70 +109,93 @@ 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 */
+  /** 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'
@@ -188,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 {

packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx

@@ -2,15 +2,23 @@ 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;
-  /** 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
@@ -27,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;
 }
 

packages/react-core/src/components/Alert/Alert.tsx

@@ -18,40 +18,50 @@ export enum AlertVariant {
   default = 'default'
 }
 
+/** The main alert component. */
+
 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'
@@ -67,14 +77,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> = ({

packages/react-core/src/components/Alert/AlertActionCloseButton.tsx

@@ -3,14 +3,18 @@ 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 */
+  /** 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;
 }
 

packages/react-core/src/components/Alert/AlertActionLink.tsx

@@ -1,10 +1,14 @@
 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  */
+  /** 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;
 }
 

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) => {