common setup guide (atlassian#995)

maximmig · Dec 10, 2018 · 61ea21a · 61ea21a
1 parent cd71d9c
commit 61ea21a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
@@ -33,6 +33,12 @@ All features need to have a clear and generally applicable keyboard interaction
 
 <!-- ## Bug
 
+## Common issues setup guide
+
+We have created a common setup issues guide to help you troubleshoot common setup problems:
+
+https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/common-setup-issues.md
+
 ## Check your console
 
 In development builds we log warnings to the console for common setup issues. Please have a look to see if it can give you information in overcoming your issue
@@ -49,7 +55,7 @@ In development builds we log warnings to the console for common setup issues. Pl
 
 <!--
   Take a look at your package.json
-  Ensure that it satifies our peer dependency version - see our package.json. (Currently it is "^16.3.1")
+  Ensure that it satisfies our peer dependency version - see our package.json. (Currently it is "^16.3.1")
 -->
 
 ### What version of `react-beautiful-dnd` are you running?

diff --git a/docs/guides/common-setup-issues.md b/docs/guides/common-setup-issues.md
@@ -0,0 +1,25 @@
+# Common setup issues
+
+This is a little guide to help you with some common setup issues
+
+## Check your `console`
+
+For detectable setup issues we try to log information in the `console` for `development` builds of `react-beautiful-dnd`. If things are not working, first thing to do is check your `console`.
+
+## No duplicate ids
+
+`draggableId` and `droppableId` values must be unique for the whole `DragDropContext` and not just a list.
+
+More information: [identifiers guide](/docs/guides/identifiers.md)
+
+## No margin collapsing between `Draggables`
+
+This can happen if you have a `margin-top` as well as a `margin-bottom` on a `Draggable`.
+
+[More information](https://github.com/atlassian/react-beautiful-dnd#unsupported-margin-setups)
+
+## Avoid empty lists
+
+We recommend you set a `min-height` or `min-width` on a `Droppable` to ensure that there is a visible drop target when a list is empty
+
+We go over this in our [Get started with `react-beautiful-dnd` course](https://egghead.io/lessons/react-move-items-between-columns-with-react-beautiful-dnd-using-ondragend)