@patternfly/react-core 4.243.0 → 4.244.0

package/src/components/Popover/Popover.tsx

@@ -34,51 +34,63 @@ 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;
-  /** 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'
@@ -97,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.
@@ -157,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
@@ -177,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 = {

package/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> = ({

package/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> = ({

package/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;

package/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> = ({