Block Editor: LinkControl: Align documentation with current behavior (#…

…19736)

* LinkControl: Remove nonexistent className prop from documentation

* LinkControl: Consistently reference value as optional prop

* LinkControl: Remove "Event Handlers" documentation section

These are props as well, and shouldn't be referenced as though they weren't

* LinkControl: Document onChange as always receiving item

packages/block-editor/src/components/link-control/README.md

@@ -2,15 +2,10 @@
 
 ## Props
 
-### className
-
-- Type: `String`
-- Required: Yes
-
 ### value
 
 - Type: `Object`
-- Required: Yes
+- Required: No
 
 ### settings
 
@@ -28,8 +23,6 @@
 
 An array of settings objects. Each object will used to render a `ToggleControl` for that setting.
 
-## Event handlers
-
 ### onClose
 
 - Type: `Function`
@@ -41,14 +34,12 @@ An array of settings objects. Each object will used to render a `ToggleControl`
 - Required: No
 
 Use this callback to take an action after a user set or updated a link.
-The function callback will receive the selected item, or Null.
+The function callback will receive the selected item.
 
-```es6
+```jsx
 <LinkControl
-	onLinkChange={ ( item ) => {
-		item
-			? console.log( `The item selected has the ${ item.id } id.` )
-			: console.warn( 'No Item selected.' );
+	onChange={ ( item ) => {
+		console.log( `The item selected has the ${ item.id } id.` );
 	}
 /> 
 ```

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should display with required props 1`] = `"<div class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset has-icon\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div>"`;
+exports[`Basic rendering should render 1`] = `"<div class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset has-icon\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div>"`;

packages/block-editor/src/components/link-control/test/index.js

@@ -51,20 +51,15 @@ afterEach( () => {
 } );
 
 describe( 'Basic rendering', () => {
-	it( 'should display with required props', () => {
+	it( 'should render', () => {
 		act( () => {
-			render(
-				<LinkControl
-				/>, container
-			);
+			render( <LinkControl />, container );
 		} );
 
 		// Search Input UI
 		const searchInput = container.querySelector( 'input[aria-label="URL"]' );
 
-		// expect( searchInputLabel ).not.toBeNull();
 		expect( searchInput ).not.toBeNull();
-
 		expect( container.innerHTML ).toMatchSnapshot();
 	} );
 } );
@@ -465,7 +460,7 @@ describe( 'Selecting links', () => {
 			} ], // url
 		] )( 'should display a current selected link UI when a %s suggestion for the search "%s" is clicked', async ( type, searchTerm, selectedLink ) => {
 			const LinkControlConsumer = () => {
-				const [ link, setLink ] = useState( null );
+				const [ link, setLink ] = useState();
 
 				return (
 					<LinkControl
@@ -524,7 +519,7 @@ describe( 'Selecting links', () => {
 			} ], // url
 		] )( 'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard', async ( type, searchTerm, selectedLink ) => {
 			const LinkControlConsumer = () => {
-				const [ link, setLink ] = useState( null );
+				const [ link, setLink ] = useState();
 
 				return (
 					<LinkControl