Documentations: Add createSlotFill to the Slot & Fill Readme

components/slot-fill/README.md

@@ -42,13 +42,48 @@ Any Fill will automatically occupy this Slot space, even if rendered elsewhere i
 
 You can either use the Fill component directly, or a wrapper component type as in the above example to abstract the slot name from consumer awareness.
 
+There is also `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
+
+```jsx
+const Toolbar = createSlotFill( 'Toolbar' );
+
+const MyToolbarItem = () => (
+	<Toolbar>
+		My item
+	</Toolbar>
+);
+
+const MyToolbar = () => (
+	<div className="toolbar">
+		<Toolbar.Slot />
+	</div>
+); 
+```
+
 ## Props
 
 The `SlotFillProvider` component does not accept any props.
 
 Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given `name` will render the `children` of any associated `Fill`s.
 
-`Slot` also accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
+`Slot` accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
 
  - By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
  - If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
+
+`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+
+_Example_:
+```jsx
+const Toolbar = ( { isMobile } ) => (
+	<div className="toolbar">
+		<Slot name="Toolbar">
+			{ ( fills ) => {
+				return isMobile && fills.length > 3 ?
+					<div className="toolbar__mobile-long">{ fills }</div> :
+					fills;
+			} }	
+		</Slot>
+	</div>
+);
+```