zendeskgarden · jzempel · Dec 17, 2020 · Dec 15, 2020 · Dec 15, 2020 · Dec 16, 2020
@@ -14,9 +14,9 @@ import { ChromeContext } from '../utils/useChromeContext';
 import { StyledChrome } from '../styled';
 
 interface IChromeProps extends HTMLAttributes<HTMLDivElement> {
-  /** Apply a custom hue to chrome navigation */
+  /** Applies a custom hue to the chrome navigation */
   hue?: string;
-  /** Prevent fixed positioning from being applied to the <html> element */
+  /** Prevents fixed positioning from being applied to the `<html>` element */
   isFluid?: boolean;
 }
 

@@ -11,9 +11,7 @@ import { StyledBody } from '../../styled';
 import { BodyContext } from '../../utils/useBodyContext';
 
 interface IBodyProps {
-  /**
-   * Prepare the body content height to allow space for a footer component
-   **/
+  /** Adjusts the body content height to allow space for a footer component */
   hasFooter?: boolean;
 }
 

@@ -19,6 +19,7 @@ interface IHeadItemProps
   extends IStyledBaseHeaderItemProps,
     IStyledLogoHeaderItemProps,
     HTMLAttributes<HTMLElement> {
+  /** Applies header logo styles to the item */
   hasLogo?: boolean;
 }
 

@@ -12,9 +12,7 @@ import { NavContext } from '../../utils/useNavContext';
 import { StyledNav } from '../../styled';
 
 interface INavProps extends HTMLAttributes<HTMLElement> {
-  /**
-   * Expand navigation area to include item text
-   **/
+  /** Expands the nav area to display the item text */
   isExpanded?: boolean;
 }
 

@@ -13,21 +13,13 @@ import { useNavContext } from '../../utils/useNavContext';
 import { useChromeContext } from '../../utils/useChromeContext';
 
 interface INavItemProps extends HTMLAttributes<any> {
-  /**
-   * Applies product-specific color palette
-   **/
+  /** Applies a product-specific color palette */
   product?: PRODUCT;
-  /**
-   * Indicate which item is current in the nav
-   **/
+  /** Indicates that the item is current in the nav */
   isCurrent?: boolean;
-  /**
-   * Indicate that the item contains a product logo
-   */
+  /** Indicates that the item contains a product logo */
   hasLogo?: boolean;
-  /**
-   * Indicate that the item contains the company brandmark
-   */
+  /** Indicates that the item contains the company brandmark */
   hasBrandmark?: boolean;
 }
 

@@ -18,8 +18,15 @@ import {
 
 export interface ICollapsibleSubNavItemProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  /** Sets the item's section header */
   header?: React.ReactNode;
+  /** Reveals the item's section */
   isExpanded?: boolean;
+  /**
+   * Handles changes in the item's expansion state
+   *
+   * @param {boolean} isExpanded An item's expansion state
+   */
   onChange?: (isExpanded: boolean) => void;
 }
 

@@ -11,6 +11,7 @@ import { StyledSubNavItem } from '../../styled';
 import { useChromeContext } from '../../utils/useChromeContext';
 
 interface ISubNavItemProps {
+  /** Indicates that the item is current in the subnav */
   isCurrent?: boolean;
 }
 

@@ -15,17 +15,11 @@ import {
 const COMPONENT_ID = 'chrome.base_header_item';
 
 export interface IStyledBaseHeaderItemProps {
-  /**
-   * Horizontally maximize a flex item in the header to take as much space as possible (i.e. breadcrumb container)
-   **/
+  /** Maximizes the width of a flex item in the header */
   maxX?: boolean;
-  /**
-   * Vertically maximize the height for a header item (i.e. contains a search input)
-   **/
+  /** Maximizes the height of the item (i.e. contains a search input) */
   maxY?: boolean;
-  /**
-   * Round the border radius for a header item (i.e. user icon)
-   **/
+  /** Rounds the border radius of the item */
   isRound?: boolean;
 }
 

@@ -13,7 +13,7 @@ import { getNavItemHeight } from '../nav/StyledBaseNavItem';
 const COMPONENT_ID = 'chrome.header';
 
 export interface IStyledHeaderProps {
-  /** Display logo for standlone usage  */
+  /** Displays logo for standlone usage  */
   isStandalone?: boolean;
 }
 

@@ -11,9 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'chrome.header_item_text';
 
 export interface IStyledHeaderItemTextProps {
-  /**
-   * Clip text (but leave accessible to screenreaders) for an icon-only header item
-   **/
+  /** Hides item text. Text remains accessible to screen readers. */
   isClipped?: boolean;
 }
 

@@ -21,9 +21,7 @@ import { getNavWidth } from '../nav/StyledNav';
 const COMPONENT_ID = 'chrome.header_item';
 
 export interface IStyledLogoHeaderItemProps {
-  /**
-   * Applies product-specific color palette
-   **/
+  /** Applies a brand color to the product logo */
   product?: PRODUCT;
 }
 

@@ -18,10 +18,9 @@ import { getNavWidth } from './StyledNav';
 const COMPONENT_ID = 'chrome.nav_item_text';
 
 export interface IStyledNavItemTextProps {
-  /**
-   * Wrap overflow text instead of truncating long strings with an ellipsis
-   **/
+  /** Wraps overflow item text instead of truncating long strings with an ellipsis **/
   isWrapped?: boolean;
+  /** Reveals item text */
   isExpanded?: boolean;
 }
 

@@ -18,8 +18,8 @@ const COMPONENT_ID = 'chrome.subnav_item_text';
 
 export interface IStyledSubNavItemTextProps {
   /**
-   * Wrap overflow text instead of truncating long strings with an ellipsis
-   * (use in conjunction with max-width styling applied to the `SubNav` container)
+   * Wraps overflow item text instead of truncating long strings with an ellipsis.
+   * Use when `max-width` styling is applied to the subnav container.
    **/
   isWrapped?: boolean;
 }