Stop extending WidgetProperties and remove documentation references

src/widget-core/README.md

@@ -120,12 +120,12 @@ r.mount({ domNode: root });
 
 We have created a widget used to project our `VNode`s into the DOM, however, widgets can be composed of other widgets and `properties` which are used to determine if a widget needs to be re-rendered.
 
-Properties are available on the widget instance, defined by an interface and passed as a [`generic`](https://www.typescriptlang.org/docs/handbook/generics.html) to the `WidgetBase` class when creating your custom widget. The properties interface should extend the base `WidgetProperties` provided from `@dojo/framework/widget-core/interfaces`:
+Properties are available on the widget instance, defined by an interface and passed as a [`generic`](https://www.typescriptlang.org/docs/handbook/generics.html) to the `WidgetBase` class when creating your custom widget.
 
 <!--READMEONLY-->
 
 ```ts
-interface MyProperties extends WidgetProperties {
+interface MyProperties {
 	name: string;
 }
 
@@ -138,6 +138,8 @@ class Hello extends WidgetBase<MyProperties> {
 }
 ```
 
+**Note:** By default widgets have a `key: string | number` property, when using a custom property interface the default property is still available, there is no need to extend `WidgetProperties`.
+
 <!--widget-core-readme-02-->
 
 [![Edit widget-core-readme-02](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9ynz3wkqn4)<!--READMEONLY-->
@@ -936,7 +938,7 @@ class MyClass extends WidgetBase {
 The `afterRender` lifecycle hook receives the returned `DNode`s from a widget's `render` call so that the nodes can be decorated, manipulated or swapped completely.
 
 ```ts
-class MyBaseClass extends WidgetBase<WidgetProperties> {
+class MyBaseClass extends WidgetBase {
 	@afterRender()
 	myAfterRender(result: DNode): DNode {
 		// do something with the result
@@ -1054,7 +1056,7 @@ constructor() {
 Widget meta is used to access additional information about the widget, usually information only available through the rendered DOM element - for example, the dimensions of an HTML node. You can access and respond to metadata during a widget's render operation.
 
 ```typescript
-class TestWidget extends WidgetBase<WidgetProperties> {
+class TestWidget extends WidgetBase {
 	render() {
 		const dimensions = this.meta(Dimensions).get('root');
 
@@ -1246,7 +1248,7 @@ The `Focus` meta determines whether a given node is focused or contains document
 An example usage that opens a tooltip if the trigger is focused might look like this:
 
 ```typescript
-class MyWidget extends WidgetBase<WidgetProperties> {
+class MyWidget extends WidgetBase {
 	// ...
 	render() {
 		// run your meta
@@ -1268,7 +1270,7 @@ class MyWidget extends WidgetBase<WidgetProperties> {
 The `Focus` meta also provides a `set` method to call focus on a given node. This is most relevant when it is necessary to shift focus in response to a user action, e.g. when opening a modal or navigating to a new page. You can use it like this:
 
 ```typescript
-class MyWidget extends WidgetBase<WidgetProperties> {
+class MyWidget extends WidgetBase {
 	// ...
 	render() {
 		// run your meta
@@ -1305,7 +1307,7 @@ function isSmallHeightPredicate(contentRect: ContentRect) {
 	return contentRect.height < 300;
 }
 
-class TestWidget extends WidgetBase<WidgetProperties> {
+class TestWidget extends WidgetBase {
 	render() {
 		const { isMediumWidth, isSmallHeight } = this.meta(Resize).get('root', {
 			isMediumWidth: isMediumWidthPredicate,
@@ -1345,7 +1347,7 @@ class HtmlMeta extends MetaBase {
 And you can use it like:
 
 ```typescript
-class MyWidget extends WidgetBase<WidgetProperties> {
+class MyWidget extends WidgetBase {
 	// ...
 	render() {
 		// run your meta

src/widget-core/mixins/I18n.ts

@@ -4,7 +4,7 @@ import Map from '../../shim/Map';
 import { isVNode, decorate } from './../d';
 import { afterRender } from './../decorators/afterRender';
 import { inject } from './../decorators/inject';
-import { Constructor, DNode, WidgetProperties, VNodeProperties } from './../interfaces';
+import { Constructor, DNode, VNodeProperties } from './../interfaces';
 import { Injector } from './../Injector';
 import { Registry } from './../Registry';
 import { WidgetBase } from './../WidgetBase';
@@ -26,7 +26,7 @@ export interface LocaleData {
 	rtl?: boolean;
 }
 
-export interface I18nProperties extends LocaleData, WidgetProperties {
+export interface I18nProperties extends LocaleData {
 	/**
 	 * An optional override for the bundle passed to the `localizeBundle`. If the override contains a `messages` object,
 	 * then it will completely replace the underlying bundle. Otherwise, a new bundle will be created with the additional

src/widget-core/mixins/Themed.ts

@@ -1,4 +1,4 @@
-import { Constructor, WidgetProperties, SupportedClassName } from './../interfaces';
+import { Constructor, SupportedClassName } from './../interfaces';
 import { Registry } from './../Registry';
 import { Injector } from './../Injector';
 import { inject } from './../decorators/inject';
@@ -33,7 +33,7 @@ export interface Classes {
 /**
  * Properties required for the Themed mixin
  */
-export interface ThemedProperties<T = ClassNames> extends WidgetProperties {
+export interface ThemedProperties<T = ClassNames> {
 	theme?: Theme;
 	classes?: Classes;
 	extraClasses?: { [P in keyof T]?: string };

tests/widget-core/unit/d.ts

@@ -1,15 +1,15 @@
 const { assert } = intern.getPlugin('chai');
 const { registerSuite } = intern.getPlugin('jsdom');
 import { assign } from '../../../src/shim/object';
-import { DNode, VNode, WNode, WidgetProperties } from '../../../src/widget-core/interfaces';
+import { DNode, VNode, WNode } from '../../../src/widget-core/interfaces';
 import { WidgetBase } from '../../../src/widget-core/WidgetBase';
 import { dom, v, w, decorate, WNODE, VNODE, isWNode, isVNode } from '../../../src/widget-core/d';
 
-interface ChildProperties extends WidgetProperties {
+interface ChildProperties {
 	myChildProperty: string;
 }
 
-interface TestProperties extends WidgetProperties {
+interface TestProperties {
 	required: boolean;
 }
 

tests/widget-core/unit/tsxIntegration.tsx

@@ -2,14 +2,14 @@ const { registerSuite } = intern.getInterface('object');
 const { assert } = intern.getPlugin('chai');
 import { WidgetBase } from '../../../src/widget-core/WidgetBase';
 import { Registry } from '../../../src/widget-core/Registry';
-import { WidgetProperties, WNode } from '../../../src/widget-core/interfaces';
+import { WNode } from '../../../src/widget-core/interfaces';
 import { tsx, fromRegistry } from '../../../src/widget-core/tsx';
 
 const registry = new Registry();
 
 registerSuite('tsx integration', {
 	'can use tsx'() {
-		interface FooProperties extends WidgetProperties {
+		interface FooProperties {
 			hello: string;
 		}
 		class Foo extends WidgetBase<FooProperties> {