docs(SearchInput, Slider, Treeview) - add subcomponent descriptions

packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -8,44 +8,45 @@ import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
 export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Additional classes added to the Advanced search menu */
+  /** Delimiter in the query string for pairing attributes with search values.
+   * Required whenever attributes are passed as props.
+   */
+  advancedSearchDelimiter?: string;
+  /** Array of attribute values used for dynamically generated advanced search. */
+  attributes?: string[] | SearchAttribute[];
+  /** Additional classes added to the advanced search menu. */
   className?: string;
-  /** Value of the search input */
-  value?: string;
-  /** Ref of the div wrapping the whole search input **/
-  parentRef?: React.RefObject<any>;
-  /** Ref of the input element within the search input**/
-  parentInputRef?: React.RefObject<any>;
-  /** Function which builds an attribute-value map by parsing the value in the search input */
+  /* Additional elements added after the attributes in the form.
+   * The new form elements can be wrapped in a form group component for automatic formatting. */
+  formAdditionalItems?: React.ReactNode;
+  /** Function which builds an attribute-value map by parsing the value in the search input. */
   getAttrValueMap?: () => { [key: string]: string };
-  /** A callback for when the search button clicked changes */
+  /** Attribute label for strings unassociated with one of the provided listed attributes. */
+  hasWordsAttrLabel?: React.ReactNode;
+  /** Flag for toggling the open/close state of the advanced search menu. */
+  isSearchMenuOpen?: boolean;
+  /** A callback for when the input value changes. */
+  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  /** A callback for when the user clicks the clear button. */
+  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the search button is clicked. */
   onSearch?: (
     value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
     attrValueMap: { [key: string]: string }
   ) => void;
-  /** A callback for when the user clicks the clear button */
-  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** A callback for when the input value changes */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Function called to toggle the advanced search menu */
+  /** A callback for when the open advanced search button is clicked. */
   onToggleAdvancedMenu?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Flag for toggling the open/close state of the advanced search menu */
-  isSearchMenuOpen?: boolean;
-  /** Label for the buttons which reset the advanced search form and clear the search input */
+  /** Ref of the input element within the search input. */
+  parentInputRef?: React.RefObject<any>;
+  /** Ref of the div wrapping the whole search input. */
+  parentRef?: React.RefObject<any>;
+  /** Label for the button which resets the advanced search form and clears the search input. */
   resetButtonLabel?: string;
-  /** Label for the buttons which called the onSearch event handler */
+  /** Label for the button which calls the onSearch event handler. */
   submitSearchButtonLabel?: string;
-  /** Array of attribute values used for dynamically generated advanced search */
-  attributes?: string[] | SearchAttribute[];
-  /* Additional elements added after the attributes in the form.
-   * The new form elements can be wrapped in a FormGroup component for automatic formatting */
-  formAdditionalItems?: React.ReactNode;
-  /** Attribute label for strings unassociated with one of the provided listed attributes */
-  hasWordsAttrLabel?: React.ReactNode;
-  /** Delimiter in the query string for pairing attributes with search values.
-   * Required whenever attributes are passed as props */
-  advancedSearchDelimiter?: string;
+  /** Value of the search input. */
+  value?: string;
 }
 
 export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps> = ({

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

@@ -13,94 +13,108 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
 import { InputGroup } from '../InputGroup';
 import { Popper } from '../../helpers';
 
+/** Properties for adding search attributes to an advanced search input. These properties must
+ * be passed in as an object within an array to the search input component's attribute properrty.
+ */
+
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
-   * It should have no spaces and be unique for every attribute */
+   * It should have no spaces and be unique for every attribute.
+   */
   attr: string;
-  /** The search attribute's display name. It is used to label the field in the advanced search menu */
+  /** The search attribute's display name. It is used to label the field in the advanced
+   * search menu.
+   */
   display: React.ReactNode;
 }
 
+/** Properties for creating an expandable search input. These properties should be passed into
+ * the search input component's expandableInput property.
+ */
+
 export interface ExpandableInput {
-  /** Flag to indicate if the search input is expanded */
+  /** Flag to indicate if the search input is expanded. */
   isExpanded: boolean;
-  /** Callback function to toggle the expandable search input */
+  /** Callback function to toggle the expandable search input. */
   onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** An accessible label for the expandable search input toggle */
+  /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
 
+/** The main search input component. */
+
 export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {
-  /** Additional classes added to the banner */
-  className?: string;
-  /** Value of the search input */
-  value?: string;
-  /** Flag indicating if search input is disabled */
-  isDisabled?: boolean;
-  /** An accessible label for the search input */
+  /** Delimiter in the query string for pairing attributes with search values.
+   * Required whenever attributes are passed as props.
+   */
+  advancedSearchDelimiter?: string;
+  /** The container to append the menu to.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** An accessible label for the search input. */
   'aria-label'?: string;
-  /** placeholder text of the search input */
-  placeholder?: string;
-  /** @hide A reference object to attach to the input box */
+  /** Array of attribute values used for dynamically generated advanced search. */
+  attributes?: string[] | SearchAttribute[];
+  /** Additional classes added to the search input. */
+  className?: string;
+  /** Object that makes the search input expandable/collapsible. */
+  expandableInput?: ExpandableInput;
+  /* Additional elements added after the attributes in the form.
+   * The new form elements can be wrapped in a form group component for automatic formatting. */
+  formAdditionalItems?: React.ReactNode;
+  /** Attribute label for strings unassociated with one of the provided listed attributes. */
+  hasWordsAttrLabel?: React.ReactNode;
+  /** A suggestion for autocompleting. */
+  hint?: string;
+  /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
-  /** A callback for when the input value changes */
+  /** A flag for controlling the open state of a custom advanced search implementation. */
+  isAdvancedSearchOpen?: boolean;
+  /** Flag indicating if search input is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the next navigation button is disabled. */
+  isNextNavigationButtonDisabled?: boolean;
+  /** Flag indicating if the previous navigation button is disabled. */
+  isPreviousNavigationButtonDisabled?: boolean;
+  /** Accessible label for the button to navigate to next result. */
+  nextNavigationButtonAriaLabel?: string;
+  /** A callback for when the input value changes. */
   onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** A suggestion for autocompleting */
-  hint?: string;
-  /** Object that makes the search input expandable/collapsible */
-  expandableInput?: ExpandableInput;
-  /** A callback for when the search button clicked changes */
+  /** A callback for when the user clicks the clear button. */
+  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the user clicks to navigate to next result. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the user clicks to navigate to previous result. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the search button is clicked. */
   onSearch?: (
     value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
     attrValueMap: { [key: string]: string }
   ) => void;
-  /** A callback for when the user clicks the clear button */
-  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Label for the buttons which reset the advanced search form and clear the search input */
-  resetButtonLabel?: string;
-  /** Label for the buttons which called the onSearch event handler */
-  submitSearchButtonLabel?: string;
-  /** A callback for when the open advanced search button is clicked */
+  /** A callback for when the open advanced search button is clicked. */
   onToggleAdvancedSearch?: (event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void;
-  /** A flag for controlling the open state of a custom advanced search implementation */
-  isAdvancedSearchOpen?: boolean;
-  /** Label for the button which opens the advanced search form menu */
+  /** Accessible label for the button which opens the advanced search form menu. */
   openMenuButtonAriaLabel?: string;
-  /** Label for the button to navigate to previous result  */
+  /** Placeholder text of the search input. */
+  placeholder?: string;
+  /** Accessible label for the button to navigate to previous result. */
   previousNavigationButtonAriaLabel?: string;
-  /** Flag indicating if the previous navigation button is disabled */
-  isPreviousNavigationButtonDisabled?: boolean;
-  /** Label for the button to navigate to next result */
-  nextNavigationButtonAriaLabel?: string;
-  /** Flag indicating if the next navigation button is disabled */
-  isNextNavigationButtonDisabled?: boolean;
-  /** Function called when user clicks to navigate to next result */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Function called when user clicks to navigate to previous result */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** The number of search results returned. Either a total number of results,
-   * or a string representing the current result over the total number of results. i.e. "1 / 5" */
-  resultsCount?: number | string;
-  /** Array of attribute values used for dynamically generated advanced search */
-  attributes?: string[] | SearchAttribute[];
-  /* Additional elements added after the attributes in the form.
-   * The new form elements can be wrapped in a FormGroup component for automatic formatting */
-  formAdditionalItems?: React.ReactNode;
-  /** Attribute label for strings unassociated with one of the provided listed attributes */
-  hasWordsAttrLabel?: React.ReactNode;
-  /** Delimiter in the query string for pairing attributes with search values.
-   * Required whenever attributes are passed as props */
-  advancedSearchDelimiter?: string;
-  /** The container to append the menu to.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Label for the button which resets the advanced search form and clears the search input. */
+  resetButtonLabel?: string;
+  /** The number of search results returned. Either a total number of results,
+   * or a string representing the current result over the total number of results. i.e. "1 / 5". */
+  resultsCount?: number | string;
+  /** Label for the button which calls the onSearch event handler. */
+  submitSearchButtonLabel?: string;
+  /** Value of the search input. */
+  value?: string;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({

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

@@ -7,64 +7,70 @@ import { InputGroup, InputGroupText } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
+/** Properties for creating custom steps in a slider. These properties should be passed in as
+ * an object within an array to the slider component's customSteps property.
+ */
 export interface SliderStepObject {
-  /** Value of the step. This value is a percentage of the slider where the  tick is drawn. */
-  value: number;
-  /** The display label for the step value. This is also used for the aria-valuetext */
-  label: string;
-  /** Flag to hide the label */
+  /** Flag to hide the label. */
   isLabelHidden?: boolean;
+  /** The display label for the step value. This is also used for the aria-valuetext attribute. */
+  label: string;
+  /** Value of the step. This value is a percentage of the slider where the tick is drawn. */
+  value: number;
 }
 
+/** The main slider component. */
 export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Additional classes added to the spinner. */
-  className?: string;
-  /** Current value  */
-  value?: number;
-  /** Flag indicating if the slider is is discrete for custom steps.  This will cause the slider to snap to the closest value. */
+  /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
+   * to snap to the closest value.
+   */
   areCustomStepsContinuous?: boolean;
-  /** Adds disabled styling and disables the slider and the input component is present */
-  isDisabled?: boolean;
-  /** The step interval*/
-  step?: number;
-  /** Minimum permitted value */
-  min?: number;
-  /** The maximum permitted value */
-  max?: number;
-  /** Flag to indicate if boundaries should be shown for slider that does not have custom steps */
-  showBoundaries?: boolean;
-  /** Flag to indicate if ticks should be shown for slider that does not have custom steps  */
-  showTicks?: boolean;
+  /** One or more id's to use for the slider thumb's accessible description. */
+  'aria-describedby'?: string;
+  /** One or more id's to use for the slider thumb's accessible label. */
+  'aria-labelledby'?: string;
+  /** Additional classes added to the slider. */
+  className?: string;
   /** Array of custom slider step objects (value and label of each step) for the slider. */
   customSteps?: SliderStepObject[];
-  /** Flag to show value input field */
-  isInputVisible?: boolean;
-  /** Value displayed in the input field */
-  inputValue?: number;
-  /** Aria label for the input field */
-  inputAriaLabel?: string;
-  /* Aria label for the thumb */
-  thumbAriaLabel?: string;
-  /* Adds a tooltip over the thumb containing the current value */
+  /* Adds a tooltip over the slider thumb containing the current value. */
   hasTooltipOverThumb?: boolean;
-  /** Label that is place after the input field */
+  /** Accessible label for the input field. */
+  inputAriaLabel?: string;
+  /** Text label that is place after the input field. */
   inputLabel?: string | number;
-  /** Position of the input */
+  /** Position of the input. */
   inputPosition?: 'aboveThumb' | 'right';
-  /** Value change callback. This is called when the slider value changes */
+  /** Value displayed in the input field. */
+  inputValue?: number;
+  /** Adds disabled styling, and disables the slider and the input component if present. */
+  isDisabled?: boolean;
+  /** Flag to show value input field. */
+  isInputVisible?: boolean;
+  /** Actions placed to the left of the slider. */
+  leftActions?: React.ReactNode;
+  /** The maximum permitted value. */
+  max?: number;
+  /** The minimum permitted value. */
+  min?: number;
+  /** Value change callback. This is called when the slider value changes. */
   onChange?: (
     value: number,
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
   ) => void;
-  /** Actions placed to the left of the slider */
-  leftActions?: React.ReactNode;
-  /** Actions placed to the right of the slider */
+  /** Actions placed to the right of the slider. */
   rightActions?: React.ReactNode;
-  /** One or more id's to use for the slider thumb description */
-  'aria-describedby'?: string;
-  /** One or more id's to use for the slider thumb label */
-  'aria-labelledby'?: string;
+  /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */
+  showBoundaries?: boolean;
+  /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */
+  showTicks?: boolean;
+  /** The step interval. */
+  step?: number;
+  /* Accessible label for the slider thumb. */
+  thumbAriaLabel?: string;
+  /** Current value of the slider.  */
+  value?: number;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;

packages/react-core/src/components/Slider/SliderStep.tsx

@@ -3,18 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
-  /** Additional classes added to the slider steps. */
+  /** Additional classes added to the slider step. */
   className?: string;
-  /** Step value **/
-  value?: number;
-  /** Step label **/
-  label?: string;
-  /** Flag indicating that the tick should be hidden */
-  isTickHidden?: boolean;
-  /** Flag indicating that the label should be hidden */
-  isLabelHidden?: boolean;
-  /** Flag indicating the step is active */
+  /** Flag indicating the step is active. */
   isActive?: boolean;
+  /** Flag indicating that the label should be hidden. */
+  isLabelHidden?: boolean;
+  /** Flag indicating that the tick should be hidden. */
+  isTickHidden?: boolean;
+  /** Step label. **/
+  label?: string;
+  /** Step value. **/
+  value?: number;
 }
 
 export const SliderStep: React.FunctionComponent<SliderStepProps> = ({