Add JSDoc annoatation to ll props that should be i18n'd (#1914)

Luke Bowerman · web-flow · commit 54a61a4fc744 · 2021-02-17T11:03:26.000-08:00
Also found a minor issue with `Badge`'s default value
diff --git a/config/i18nIgnoredProps.js b/config/i18nIgnoredProps.js
@@ -25,6 +25,7 @@
  */
 
 const ours = [
+  'align',
   'icon',
   'iconBefore',
   'iconAfter',
diff --git a/packages/components/src/Badge/Badge.tsx b/packages/components/src/Badge/Badge.tsx
@@ -53,9 +53,12 @@ type BadgeIntent =
 export interface BadgeProps
   extends SpaceProps,
     CompatibleHTMLProps<HTMLSpanElement> {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   children: ReactNode
   /**
-   *  @default `default`
+   * @default key
    **/
   intent?: BadgeIntent
 
diff --git a/packages/components/src/Chip/Chip.tsx b/packages/components/src/Chip/Chip.tsx
@@ -26,13 +26,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { reset } from '@looker/design-tokens'
-import React, {
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-  Ref,
-} from 'react'
+import React, { forwardRef, KeyboardEvent, MouseEvent, Ref } from 'react'
 import styled from 'styled-components'
 import {
   useClickable,
@@ -47,7 +41,9 @@ import { TruncateProps, truncate } from '../Text/truncate'
 export interface ChipProps
   extends GenericClickProps<HTMLSpanElement>,
     TruncateProps {
-  children: ReactNode
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   prefix?: string
   onDelete?: (
     e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>
diff --git a/packages/components/src/CopyToClipboard/CopyToClipboard.tsx b/packages/components/src/CopyToClipboard/CopyToClipboard.tsx
@@ -28,21 +28,22 @@ import React, { useRef, useState, FC, cloneElement } from 'react'
 import { ButtonOutline } from '../Button/ButtonOutline'
 
 /**
- * This component allows user to copy contents from the, passed in ref, to the clipboard.
  */
-
 export interface CopyToClipboardProps {
   /**
    * Content to be copied into the clipboard
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content: string
   /**
    * button's label | a JSX element to replace the button
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Copy to Clipboard'
    */
   children?: string | JSX.Element
   /**
    * button's successfully copied label | a JSX element to replace the button
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Copied'
    */
   success?: string | JSX.Element
diff --git a/packages/components/src/DataTable/Column/DataTableCell.tsx b/packages/components/src/DataTable/Column/DataTableCell.tsx
@@ -46,6 +46,9 @@ import { FocusableCell } from './FocusableCell'
 
 export interface DataTableCellProps
   extends CompatibleHTMLProps<HTMLTableDataCellElement> {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   description?: ReactNode
   focusVisible?: boolean
   indicator?: ReactNode
diff --git a/packages/components/src/DataTable/Item/DataTableAction.tsx b/packages/components/src/DataTable/Item/DataTableAction.tsx
@@ -30,7 +30,9 @@ import React, { ReactNode } from 'react'
 import { MenuItem } from '../../Menu'
 
 export interface DataTableActionProps extends CompatibleHTMLProps<HTMLElement> {
-  children?: ReactNode
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   detail?: ReactNode
   icon?: IconNames
   /**
diff --git a/packages/components/src/DataTable/Item/DataTableItem.tsx b/packages/components/src/DataTable/Item/DataTableItem.tsx
@@ -43,6 +43,7 @@ export interface DataTableItemProps
   /**
    *  Sets the tooltip text and a hidden text label for the actions button (accessible to assistive technology)
    *  If unprovided by the user, a default string will be used instead
+   * I18n recommended: content that is user visible should be treated for i18n
    *  @default 'Options'
    */
   actionsTooltip?: string
@@ -54,7 +55,9 @@ export interface DataTableItemProps
    * A boolean indicating whether this item is selectable or not (the item will appear greyed out if true)
    */
   disabled?: boolean
-
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   children: JSX.Element | JSX.Element[]
   /*
    * A ReactNode (IconButton) that will be placed as a primary action on the right side of the row
diff --git a/packages/components/src/DataTable/Item/DataTableRow.tsx b/packages/components/src/DataTable/Item/DataTableRow.tsx
@@ -46,6 +46,10 @@ import {
 export interface DataTableRowProps
   extends DataTableCheckboxProps,
     Omit<CompatibleHTMLProps<HTMLElement>, 'onChange' | 'checked'> {
+  /**
+   * Content displayed after selection checkbox (optional) and row cells.
+   * Used for DataTableActions
+   */
   secondary?: ReactNode
   hasCheckbox?: boolean
   /**
diff --git a/packages/components/src/DataTable/Table.tsx b/packages/components/src/DataTable/Table.tsx
@@ -41,6 +41,9 @@ import { edgeShadow } from './utils/edgeShadow'
 import { getNextFocus } from './getNextFocus'
 
 export interface TableProps extends DataTableProps {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   caption: string
   columnsVisible: string[]
 }
diff --git a/packages/components/src/Dialog/Confirm/ConfirmLayout.tsx b/packages/components/src/Dialog/Confirm/ConfirmLayout.tsx
@@ -31,11 +31,13 @@ import { DialogLayout } from '../Layout'
 interface ConfirmLayoutProps {
   /**
    * Header content
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title: string
 
   /**
    * Primary dialog content
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message: ReactElement | string
   /**
diff --git a/packages/components/src/Dialog/Confirm/ConfirmationDialog.tsx b/packages/components/src/Dialog/Confirm/ConfirmationDialog.tsx
@@ -36,6 +36,7 @@ export type ConfirmationCallback = (close: () => void) => void
 export interface ConfirmationProps extends DialogProps {
   /**
    * Cancel button text
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Cancel'
    */
   cancelLabel?: string
@@ -51,11 +52,15 @@ export interface ConfirmationProps extends DialogProps {
   cancelColor?: StatefulColor
   /**
    * Confirmation button text
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Confirm'
    */
   confirmLabel?: string
   /**
    * Additional information about the action requiring confirmation
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message: ReactElement | string
   /**
@@ -69,6 +74,8 @@ export interface ConfirmationProps extends DialogProps {
   onConfirm: ConfirmationCallback
   /**
    * Dialog title text
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title: string
 }
diff --git a/packages/components/src/Dialog/Dialog.tsx b/packages/components/src/Dialog/Dialog.tsx
@@ -39,6 +39,8 @@ export interface DialogProps extends Omit<UseDialogProps, 'content'> {
    * Prop is only marked optional to support legacy implementations.
    *
    * If `content` is not supplied `children` will used as the Dialog content instead
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content?: ReactNode
 }
diff --git a/packages/components/src/Form/Fields/Field.tsx b/packages/components/src/Form/Fields/Field.tsx
@@ -25,7 +25,7 @@
  */
 
 import { width, WidthProps } from '@looker/design-tokens'
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import styled, { css } from 'styled-components'
 import omit from 'lodash/omit'
 import pick from 'lodash/pick'
@@ -39,11 +39,6 @@ import { FieldBaseProps } from './FieldBase'
 import { RequiredStar } from './RequiredStar'
 
 export interface FieldProps extends FieldBaseProps, WidthProps {
-  /*
-   * optional extra description
-   */
-  description?: ReactNode
-
   /**
    * Id of the input element to match a label to.
    */
@@ -58,7 +53,6 @@ export interface FieldProps extends FieldBaseProps, WidthProps {
    * @default false
    */
   hideLabel?: boolean
-
   /**
    *
    */
diff --git a/packages/components/src/Form/Fields/FieldBase.tsx b/packages/components/src/Form/Fields/FieldBase.tsx
@@ -36,6 +36,7 @@ export interface FieldBaseProps {
   disabled?: boolean
   /**
    * Defines the label for the field.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   label?: string
   /**
@@ -44,14 +45,15 @@ export interface FieldBaseProps {
   required?: boolean
   /**
    * notes and details added to the top right corner of the field
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   detail?: ReactNode
   /**
    * notes and more info added to the bottom of the field
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   description?: ReactNode
   /**
-   *
    * Holds the type of validation (error, warning, etc.) and corresponding message.
    */
   validationMessage?: ValidationMessageProps
diff --git a/packages/components/src/Form/Fieldset/Fieldset.tsx b/packages/components/src/Form/Fieldset/Fieldset.tsx
@@ -68,7 +68,8 @@ export interface FieldsetProps
   wrap?: boolean
 
   /**
-   *  Displayed above the children of Fieldset
+   * Displayed above the children of Fieldset
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   legend?: ReactNode
   /*
@@ -134,7 +135,6 @@ const FieldsetLayout = forwardRef(
         gap={gap}
         ref={ref}
         role="group"
-        // eslint-disable-next-line i18next/no-literal-string
         align="start"
         flexWrap={wrap ? 'wrap' : undefined}
       >
diff --git a/packages/components/src/Form/ValidationMessage/ValidationMessage.tsx b/packages/components/src/Form/ValidationMessage/ValidationMessage.tsx
@@ -38,6 +38,7 @@ export interface ValidationMessageProps {
   type?: ValidationType
   /**
    * The validation message to render.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message?: string
 }
diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
@@ -63,6 +63,7 @@ export interface IconProps
    * Explicitly specify a title for the SVG rendered by the icon.
    * NOTE: If title is not specified `aria-hidden="true"` will be applied to hide the SVG from
    * screen-readers
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title?: string
 }
diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx
@@ -72,14 +72,17 @@ export interface ListItemProps
    * @private
    */
   density?: DensityRamp
-  /*
+  /**
    * optional extra description
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   description?: ReactNode
   /**
    * Detail element placed right of the item children. Prop value can take one of two forms:
    * 1. ReactNode
    * 2. Object with content and options properties
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   detail?: Detail
   /**
diff --git a/packages/components/src/Tooltip/types.ts b/packages/components/src/Tooltip/types.ts
@@ -52,6 +52,7 @@ export interface UseTooltipProps {
   /**
    * Content to display inside the tooltip. Can be a string or JSX.
    * If not defined, the Tooltip will not render.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content?: ReactNode
   /**
diff --git a/packages/components/src/Truncate/Truncate.tsx b/packages/components/src/Truncate/Truncate.tsx
@@ -23,14 +23,13 @@
  SOFTWARE.
 
  */
-import React, { FC, useState, useCallback, ReactNode } from 'react'
+import React, { FC, useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { width as widthHelper, WidthProps } from 'styled-system'
 import { useIsTruncated } from '../utils/useIsTruncated'
 import { useTooltip } from '../Tooltip'
 
 export interface TruncateProps extends WidthProps {
-  children: ReactNode
   className?: string
 }
 

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,9 @@ import { edgeShadow } from './utils/edgeShadow'`
`41`	`41`	`import { getNextFocus } from './getNextFocus'`
`42`	`42`
`43`	`43`	`export interface TableProps extends DataTableProps {`
	`44`	`+ /**`
	`45`	`+ * I18n recommended: content that is user visible should be treated for i18n`
	`46`	`+ */`
`44`	`47`	`caption: string`
`45`	`48`	`columnsVisible: string[]`
`46`	`49`	`}`