Added descriptions for all widget properties

src/calendar/CalendarCell.tsx

@@ -5,32 +5,26 @@ import { v } from '@dojo/framework/core/vdom';
 import { DNode } from '@dojo/framework/core/interfaces';
 import * as css from '../theme/default/calendar.m.css';
 
-/**
- * @type CalendarCellProperties
- *
- * Properties that can be set on a Calendar Date Cell
- *
- * @property callFocus        Used to immediately call focus on the cell
- * @property date             Integer date value
- * @property disabled         Boolean, whether the date is in the displayed month
- * @property focusable        Boolean, whether the date can receive tab focus
- * @property onClick          Callback function for the click event
- * @property onFocusCalled    Callback function when the cell receives focus
- * @property onKeyDown        Callback function for the key down event
- * @property outOfRange       Boolean, true if the date is outside the min/max
- * @property selected         True if the date is currently selected
- * @property today            True if the date the same as the current day
- */
 export interface CalendarCellProperties extends ThemedProperties {
+	/** Used to immediately call focus on the cell */
 	callFocus?: boolean;
+	/** The set date value */
 	date: number;
+	/** Whether the date is in the displayed month */
 	disabled?: boolean;
+	/** Whether the date can receive tab focus */
 	focusable?: boolean;
+	/** Handler for the click event */
 	onClick?(date: number, disabled: boolean): void;
+	/** Handler for when the cell receives focus */
 	onFocusCalled?(): void;
+	/** Handler for the key down event */
 	onKeyDown?(key: number, preventDefault: () => void): void;
+	/** if the date is outside the min/max */
 	outOfRange?: boolean;
+	/** if the date is currently selected */
 	selected?: boolean;
+	/** if the date the same as the current day */
 	today?: boolean;
 }
 

src/calendar/DatePicker.tsx

@@ -28,36 +28,30 @@ export enum Controls {
 	year = 'year'
 }
 
-/**
- * @type DatePickerProperties
- *
- * Properties that can be set on a Calendar component
- *
- * @property labelId              Set id to reference label containing current month and year
- * @property labels               Customize or internationalize accessible helper text
- * @property maxDate              Maximum date to be picked
- * @property minDate              Minimum date to be picked
- * @property month                Currently displayed month, zero-based
- * @property monthNames           Array of full and abbreviated month names
- * @property onPopupChange        Called when a user action occurs that triggers a change in the month or year popup state
- * @property onRequestMonthChange Called when a month should change; receives the zero-based month number
- * @property onRequestYearChange  Called when a year should change; receives the year as an integer
- * @property renderMonthLabel     Format the displayed current month and year
- * @property year                 Currently displayed year
- * @property yearRange            Number of years to display in a single page of the year popup
- */
 export interface DatePickerProperties extends ThemedProperties {
+	/** Id to reference label containing current month and year */
 	labelId?: string;
+	/** Customize or internationalize accessible helper text */
 	labels: typeof calendarBundle.messages;
+	/** Maximum date to be picked */
 	maxDate?: Date;
+	/** Minimum date to be picked */
 	minDate?: Date;
+	/** Currently displayed month (zero-based) */
 	month: number;
+	/** Array of full and abbreviated month names */
 	monthNames: { short: string; long: string }[];
+	/** Handles when a user action occurs that triggers a change in the month or year popup state */
 	onPopupChange?(open: boolean): void;
+	/** Handles when a month should change (month is zero-based) */
 	onRequestMonthChange?(month: number): void;
+	/** Handles when a year should change */
 	onRequestYearChange?(year: number): void;
+	/** Formats the displayed current month and year */
 	renderMonthLabel?(month: number, year: number): string;
+	/** Currently displayed year */
 	year: number;
+	/** Number of years to display in a single page of the year popup */
 	yearRange?: number;
 }
 

src/checkbox/index.tsx

@@ -12,29 +12,43 @@ import * as css from '../theme/default/checkbox.m.css';
 export interface CheckboxProperties extends ThemedProperties, FocusProperties {
 	/** Custom aria attributes */
 	aria?: { [key: string]: string | null };
-	/**  Checked/unchecked property of the radio */
+	/**  Checked/unchecked property of the control */
 	checked?: boolean;
+	/** Set the disabled property of the control */
 	disabled?: boolean;
+	/** Adds a <label> element with the supplied text */
 	label?: string;
+	/** Adds the label element after (true) or before (false) */
 	labelAfter?: boolean;
+	/** Hides the label from view while still remaining accessible for screen readers */
 	labelHidden?: boolean;
 	/** The type of user interface to show for this Checkbox */
 	mode?: Mode;
+	/** The name of the checkbox */
 	name?: string;
-	/** Label to show in the "off" positin of a toggle */
+	/** Label to show in the "off" position of a toggle */
 	offLabel?: DNode;
+	/** Handler for when the element is blurred */
 	onBlur?(): void;
+	/** Handler for when the element is focused */
 	onFocus?(): void;
-	/** Label to show in the "on" positin of a toggle */
+	/** Label to show in the "on" position of a toggle */
 	onLabel?: DNode;
+	/** Handler for when the pointer moves out of the element */
 	onOut?(): void;
+	/** Handler for when the pointer moves over the element */
 	onOver?(): void;
+	/** Handler for when the value of the widget changes */
 	onValue?(checked: boolean): void;
+	/** Makes the checkbox readonly (it may be focused but not changed) */
 	readOnly?: boolean;
+	/** Sets the checkbox input as required to complete the form */
 	required?: boolean;
+	/** Toggles the invalid/valid states of the Checkbox affecting how it is displayed */
 	valid?: boolean;
 	/** The current value */
 	value?: string;
+	/** The id used for the form input element */
 	widgetId?: string;
 }
 

src/chip/index.tsx

@@ -12,7 +12,7 @@ export interface ChipProperties {
 	label: string;
 	/** Renders a close icon, ignored if `onClose` is not provided */
 	closeRenderer?(): RenderResult;
-	/** A callback when the close icon is clicked, if `closeRenderer is not provided a default X icon will be used */
+	/** A callback when the close icon is clicked, if `closeRenderer` is not provided a default X icon will be used */
 	onClose?(): void;
 	/** An optional callback for the the widget is clicked */
 	onClick?(): void;

src/combobox/index.tsx

@@ -46,12 +46,15 @@ export interface ComboboxProperties extends ThemedProperties, FocusProperties, I
 	onFocus?(): void;
 	/** Called when menu visibility changes */
 	onMenuChange?(open: boolean): void;
+	/** Called when the pointer moves out of the element */
 	onOut?(): void;
+	/** Called when the pointer moves over the element */
 	onOver?(): void;
 	/** Called when results are shown; should be used to set `results` */
 	onRequestResults?(): void;
 	/** Called when result is selected */
 	onResultSelect?(result: any): void;
+	/** Called when the validation state changes */
 	onValidate?: (valid: boolean | undefined, message: string) => void;
 	/** Called when the value changes */
 	onValue?(value: string): void;

src/global-event/index.tsx

@@ -9,7 +9,9 @@ export interface ListenerObject {
 }
 
 export interface GlobalEventProperties extends Partial<RegisteredListeners> {
+	/** The global window object */
 	window?: ListenerObject;
+	/** The document for this context */
 	document?: ListenerObject;
 }
 

src/grid/Body.tsx

@@ -15,15 +15,25 @@ import { diffProperty } from '@dojo/framework/core/decorators/diffProperty';
 import { auto, reference } from '@dojo/framework/core/diff';
 
 export interface BodyProperties<S> {
+	/** The total number of rows */
 	totalRows?: number;
+	/** The number of elements to a page */
 	pageSize: number;
+	/** A list of paginated grids */
 	pages: GridPages<S>;
+	/** The height (in pixels) */
 	height: number;
+	/** Configuration for grid columns (id, title, properties, and custom renderer) */
 	columnConfig: ColumnConfig[];
+	/** Custom renderer for the placeholder row used while data is loaded */
 	placeholderRowRenderer?: (index: number) => DNode;
+	/** Used to fetch additional pages of information */
 	fetcher: (page: number, pageSize: number) => void;
+	/** Called when a cell is updated */
 	updater: (page: number, rowNumber: number, columnId: string, value: string) => void;
+	/** Called when the page changes */
 	pageChange: (page: number) => void;
+	/** Handler for scroll events */
 	onScroll: (value: number) => void;
 }
 

src/grid/Cell.tsx

@@ -13,9 +13,13 @@ import * as fixedCss from './styles/cell.m.css';
 import * as css from '../theme/default/grid-cell.m.css';
 
 export interface CellProperties extends FocusProperties {
+	/** The display value (or widget) of the cell */
 	value: string | DNode;
+	/** If the cell's value may be updated */
 	editable?: boolean;
+	/** The underlying string value of the cell (used by the editor) */
 	rawValue: string;
+	/** Called when the Cell's value is saved by the editor */
 	updater: (value: any) => void;
 }
 

src/grid/Footer.tsx

@@ -6,8 +6,11 @@ import { DNode } from '@dojo/framework/core/interfaces';
 import * as css from '../theme/default/grid-footer.m.css';
 
 export interface FooterProperties {
+	/** The total number of rows */
 	total?: number;
+	/** The current page */
 	page: number;
+	/** The number of rows per page */
 	pageSize: number;
 }
 

src/grid/Header.tsx

@@ -23,14 +23,21 @@ export interface FilterRenderer {
 }
 
 export interface HeaderProperties {
+	/** Configuration for grid columns (id, title, properties, and custom renderer) */
 	columnConfig: ColumnConfig[];
+	/** Handles changing the sort order of a column */
 	sorter: (columnId: string, direction: 'asc' | 'desc') => void;
+	/** Handles filtering rows based on a given column */
 	filterer: (columnId: string, value: any) => void;
+	/** Applied filters */
 	filter?: {
 		[index: string]: string;
 	};
+	/** Applied sort options */
 	sort?: SortOptions;
+	/** Custom column renderer for displaying sort options */
 	sortRenderer?: SortRenderer;
+	/** Custom renderer displaying applied filters */
 	filterRenderer?: FilterRenderer;
 }
 

src/grid/Row.tsx

@@ -9,9 +9,13 @@ import * as fixedCss from './styles/row.m.css';
 import * as css from '../theme/default/grid-row.m.css';
 
 export interface RowProperties {
+	/** identifier for the row */
 	id: number;
+	/** A list of values indexed on the column id */
 	item: { [index: string]: any };
+	/** Configuration for grid columns (id, title, properties, and custom renderer)  */
 	columnConfig: ColumnConfig[];
+	/** Handles updating the value of a cell */
 	updater: (rowNumber: number, columnId: string, value: any) => void;
 }
 

src/helper-text/index.tsx

@@ -5,7 +5,9 @@ import { v } from '@dojo/framework/core/vdom';
 import { VNode } from '@dojo/framework/core/interfaces';
 
 export interface HelperTextProperties extends ThemedProperties {
+	/** The supplied helper text */
 	text?: string;
+	/** If `HelperText` indicates a valid condition */
 	valid?: boolean;
 }
 

src/label/index.tsx

@@ -9,23 +9,23 @@ import * as baseCss from '../common/styles/base.m.css';
 export interface LabelProperties extends ThemedProperties {
 	/** Custom aria attributes */
 	aria?: { [key: string]: string | null };
-	/**  */
+	/** If the label should be disabled */
 	disabled?: boolean;
-	/**  */
+	/** If the label is focused */
 	focused?: boolean;
 	/** ID to explicitly associate the label with an input element */
 	forId?: string;
-	/**  */
+	/** If the label should be invisible (it will remain accessible to screen readers) */
 	hidden?: boolean;
-	/**  */
+	/** If the label is read only */
 	readOnly?: boolean;
-	/**  */
+	/** If the label is required */
 	required?: boolean;
-	/**  */
+	/** If the label should use the secondary styling */
 	secondary?: boolean;
-	/**  */
+	/** If the label is valid */
 	valid?: boolean;
-	/**  */
+	/** ID of the underlying label element */
 	widgetId?: string;
 }
 

src/listbox/ListboxOption.tsx

@@ -6,14 +6,21 @@ import { WidgetBase } from '@dojo/framework/core/WidgetBase';
 import * as css from '../theme/default/listbox.m.css';
 
 export interface ListboxOptionProperties extends ThemedProperties {
-	active?: boolean;
+	/** Specific theme used for ListboxOption */
 	css?: (string | null)[];
+	/** If the widget is disabled */
 	disabled?: boolean;
+	/** The id to apply to this widget top level for a11y */
 	id: string;
+	/** The index of this ListboxOption */
 	index: number;
+	/** The label displayed for this ListboxOption */
 	label: DNode;
+	/** The associated value supplied to `onClick` */
 	option: any;
+	/** if this option is selected */
 	selected?: boolean;
+	/** Handler for when this is clicked */
 	onClick?(option: any, index: number, key?: string | number): void;
 }
 

src/listbox/index.tsx

@@ -38,10 +38,11 @@ export interface ListboxProperties extends ThemedProperties, FocusProperties {
 	getOptionLabel?(option: any, index: number): DNode;
 	/** Function that accepts option data and returns a boolean for selected/unselected */
 	getOptionSelected?(option: any, index: number): boolean;
-	/** Adds currect semantics for a multiselect listbox */
+	/** Adds current semantics for a multiselect listbox */
 	multiselect?: boolean;
 	/** Called with the index of the new requested active descendant */
 	onActiveIndexChange?(index: number): void;
+	/** Called on a keyboard event */
 	onKeyDown?(event: KeyboardEvent): void;
 	/** Called with the option data of the new requested selected item */
 	onOptionSelect?(option: any, index: number): void;

src/menu/ListBoxItem.tsx

@@ -19,7 +19,7 @@ export interface ListBoxItemProperties {
 	onActive(dimensions: DimensionResults): void;
 	/** When set to true, the item will set `scrollIntoView` on it's root dom node */
 	scrollIntoView?: boolean;
-	/** Prpoperty to set the disabled state of the item */
+	/** Property to set the disabled state of the item */
 	disabled?: boolean;
 	/** The id to apply to this widget top level for a11y */
 	id: string;

src/menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export interface MenuItemProperties {
 	onActive(dimensions: DimensionResults): void;
 	/** When set to true, the item will set `scrollIntoView` on it's root dom node */
 	scrollIntoView?: boolean;
-	/** Prpoperty to set the disabled state of the item */
+	/** Property to set the disabled state of the item */
 	disabled?: boolean;
 	/** The id to apply to this widget top level for a11y */
 	id: string;

src/popup/index.tsx

@@ -9,11 +9,11 @@ import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
 export type PopupPosition = 'above' | 'below';
 
 export interface PopupProperties {
-	/** if the popup wrapper should match the trigger width, defaults to true */
+	/** If the popup wrapper should match the trigger width (defaults to true) */
 	matchWidth?: boolean;
-	/** where the popup should render relative to the trigger, defaults to below */
+	/** Where the popup should render relative to the trigger (defaults to "below") */
 	position?: PopupPosition;
-	/** if the underlay should be visible, defaults to false */
+	/** If the underlay should be visible (defaults to false) */
 	underlayVisible?: boolean;
 }