Added documentation

packages/eslint-plugin/CHANGELOG.md

@@ -11,6 +11,7 @@
 - New Rule: [`@wordpress/dependency-group`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/dependency-group.md)
 - New Rule: [`@wordpress/valid-sprintf`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/valid-sprintf.md)
 - New Rule: [`@wordpress/gutenberg-phase`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/gutenberg-phase.md)
+- New Rule: [`@wordpress/no-base-control-with-label-without-id`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md)
 
 ## 1.0.0 (2018-12-12)
 

packages/eslint-plugin/README.md

@@ -53,6 +53,7 @@ Rule|Description
 [gutenberg-phase](docs/rules/gutenberg-phase.md)|Governs the use of the `process.env.GUTENBERG_PHASE` constant
 [no-unused-vars-before-return](/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)|Disallow assigning variable values if unused before a return
 [valid-sprintf](/packages/eslint-plugin/docs/rules/valid-sprintf.md)|Disallow assigning variable values if unused before a return
+[no-base-control-with-label-without-id](/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md)| Disallow the usage of BaseControl component with a label prop set but omitting the id property.
 
 ### Legacy
 

packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md

@@ -0,0 +1,45 @@
+# Disallow the usage of BaseControl component with a label prop set but omitting the id property (no-base-control-with-label-without-id)
+
+Base control component ideally should be used together with components providing user input. The label the BaseControl component receives, should be associated with some component providing user via an id attribute.
+If a label is provided but the id is omitted it means that the developer missed the id prop or that BaseControl is not a good fit for the use case and a div together with a span can provide the same functionality.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+	<BaseControl
+		label="ok"
+	>
+		<b>Child</b>
+	</BaseControl>
+```
+
+
+```jsx
+	<BaseControl label="ok" />
+```
+
+Examples of **correct** code for this rule:
+
+
+```jsx
+	<BaseControl />
+```
+
+```jsx
+	<BaseControl
+		id="my-id"
+	>
+		<b>Child</b>
+	</BaseControl>
+```
+
+```jsx
+	<BaseControl
+		label="ok"
+		id="my-id"
+	>
+		<b>Child</b>
+	</BaseControl>
+```

packages/eslint-plugin/rules/__tests__/no-base-control-with-label-without-id.js

@@ -24,9 +24,7 @@ ruleTester.run( 'no-base-control-with-label-without-id', rule, {
 			/>`,
 		},
 		{
-			code: `
-			<BaseControl
-			/>`,
+			code: `<BaseControl />`,
 		},
 		{
 			code: `