Updating documentation for modifier

MIGRATION_GUIDE_MODIFIERS.md

@@ -5,7 +5,7 @@
 To use modifiers, you must use angle-bracket syntax
 
 ### New Root component
-1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier 
+1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier
 any element. You no longer need to tell `sortable-group` about the models, so the `each`
 uses the models directly.
 

README.md

@@ -12,8 +12,11 @@ Sortable UI primitives for Ember.
 
 [Check out the demo](https://adopted-ember-addons.github.io/ember-sortable/demo/)
 
+
 ## Migration
-If you are migrating from `1.x.x` to `2.x.x`. Please read this [migration guide](/MIGRATION_GUIDE_V2.md).
+We're working on migrating ember-sortable to a modifier on `master` and will release it as `3.x.x`. If you are going to migrate from `2.x.x` to `3.x.x`. Please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
+
+If you are migrating from `1.x.x` to `2.x.x`. Please read this [migration guide](/legacy_resources/MIGRATION_GUIDE_V2.md).
 
 ## Requirements
 
@@ -31,23 +34,6 @@ $ ember install ember-sortable
 
 ## Usage
 
-### component 
-```hbs
-{{! app/templates/my-route.hbs }}
-
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
-  {{#each group.model as |modelItem|}}
-    {{#group.item model=modelItem as |item|}}
-      {{modelItem.name}}
-      {{#item.handle}}
-        <span class="handle">&varr;</span>
-      {{/item.handle}}
-    {{/group.item}}
-  {{/each}}
-{{/sortable-group}}
-```
-
-### modifier 
 ```hbs
 {{! app/templates/my-route.hbs }}
 
@@ -111,7 +97,7 @@ export default Ember.Route.extend({
 });
 ```
 
-The modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.
+You can also reorder a groupModel via currying of `action` or `fn` helper.
 
 ```hbs
 {{! app/templates/my-route.hbs }}
@@ -126,15 +112,10 @@ The modifier version does not support `groupModel`, use the currying of `action`
 </ol>
 ```
 
-
 ### Changing sort direction
 
 To change sort direction, define `direction` on `sortable-group` (default is `y`):
 
-component
-```hbs
-{{#sortable-group direction="x" onChange=(action "reorderItems") as |group|}}
-```
 modifier
 ```hbs
 <ol {{sortable-group direction="x" onChange=(action "reorderItems")}>
@@ -149,10 +130,6 @@ In `x` case: elements before current one jump to the left, and elements after cu
 
 To change this property, define `spacing` on `sortable-item` (default is `0`):
 
-component
-```hbs
-{{#sortable-item spacing=15}}
-```
 modifier
 ```hbs
 <li {{sortable-item spacing=15}}>
@@ -164,10 +141,6 @@ modifier
 If specified, sorting will not start until after mouse is dragged beyond distance.
 Can be used to allow for clicks on elements within a handle.
 
-component
-```hbs
-{{#sortable-item distance=30}}
-```
 modifier
 ```hbs
 <li {{sortable-item distance=30}}>
@@ -244,20 +217,6 @@ export default Ember.Route.extend({
 });
 ```
 
-component
-```hbs
-  {{#sortable-item
-    onDragStart=(action "dragStarted")
-    onDragStop=(action "dragStopped")
-    model=modelItem
-    as |item|
-  }}
-    {{modelItem.name}}
-    {{#item.handle}}
-      <span class="handle">&varr;</span>
-    {{/item.handle}}
-  {{/sortable-item}}
-```
 modifier
 ```hbs
   <li {{#sortable-item
@@ -271,7 +230,7 @@ modifier
   </li>
 ```
 
-### Multiple Ember-Sortables renders simultaneously (Modifier version) 
+### Multiple Ember-Sortables renders simultaneously (Modifier version)
 
 The modifier version uses a service behind the scenes for communication between the group and the items and to maintain state. It does this seemlessly when the elements are rendered on the screen. However, if there are two sortables rendered at the same time, either in the same component or different components, the state management does not know which items belong to which group.
 
@@ -324,13 +283,9 @@ The `sortable-group` has support for the following accessibility functionality:
 
 ##### Semantic HTML
 
-component
-- `sortable-group`
-  an ordered list, `ol`, by default.
-- `sortable-item`
-  a list item, `li`, by default.
-
-The modifier version can be attached to to any element that makes sense, 
+For best practices, you want to use the modifiers along with semantic html, e.g
+- `sortable-group` with `ol`
+- `sortable-item` with `li`
 
 ##### Keyboard Navigation
 There are 4 modes during keyboard navigation: