chore(chrome): update prop descriptions (#954)

Co-authored-by: Jonathan Zempel <jzempel@gmail.com>
zendeskgarden · Dec 17, 2020 · 3c34e23 · 3c34e23
1 parent c2ad53a
commit 3c34e23
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 40 deletions.
diff --git a/packages/chrome/src/elements/Chrome.tsx b/packages/chrome/src/elements/Chrome.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/elements/body/Body.tsx b/packages/chrome/src/elements/body/Body.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/elements/header/HeaderItem.tsx b/packages/chrome/src/elements/header/HeaderItem.tsx
@@ -19,6 +19,7 @@ interface IHeadItemProps
   extends IStyledBaseHeaderItemProps,
     IStyledLogoHeaderItemProps,
     HTMLAttributes<HTMLElement> {
+  /** Applies header logo styles to the item */
   hasLogo?: boolean;
 }
 

diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/elements/nav/NavItem.tsx b/packages/chrome/src/elements/nav/NavItem.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx b/packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/elements/subnav/SubNavItem.tsx b/packages/chrome/src/elements/subnav/SubNavItem.tsx
@@ -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;
 }
 

diff --git a/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts b/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts
@@ -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;
 }
 

diff --git a/packages/chrome/src/styled/header/StyledHeader.ts b/packages/chrome/src/styled/header/StyledHeader.ts
@@ -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;
 }
 

diff --git a/packages/chrome/src/styled/header/StyledHeaderItemText.ts b/packages/chrome/src/styled/header/StyledHeaderItemText.ts
@@ -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;
 }
 

diff --git a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts
@@ -22,8 +22,10 @@ const COMPONENT_ID = 'chrome.header_item';
 
 export interface IStyledLogoHeaderItemProps {
   /**
-   * Applies product-specific color palette
-   **/
+   * Applies a
+   * [brand color](https://garden.zendesk.com/design/color#brand-colors)
+   * to the product logo
+   */
   product?: PRODUCT;
 }
 

diff --git a/packages/chrome/src/styled/nav/StyledNavItemText.ts b/packages/chrome/src/styled/nav/StyledNavItemText.ts
@@ -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;
 }
 

diff --git a/packages/chrome/src/styled/subnav/StyledSubNavItemText.ts b/packages/chrome/src/styled/subnav/StyledSubNavItemText.ts
@@ -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;
 }