switch out order of rendering, refactor css

[FranDias]

@benbriggs

Pros

• DOM rendering matches visual representation which also fixed tabIndex order
• Removed absolute positioning, content now manages its own space
• Removed the li from the button so that we can have granular control over the child elements (with something like flexbox)
• Reduced css selectors that people will have to ⚔ with down the road.

Con

Will break current implementations (probably)…but not that badly. Just if people were depending on the li or not including our CSS (because they wanted buttons at the top). But this will allow for granular control from each supplied button so in the long run, I think it's a win.

Consideration

• I considered adding a prop that removes buttons below from tabIndex but ultimately decided against it for two reasons:
  1. Would have to clone each element, adding the prop (if the child element takes it)
  2. I'm not sure the option would be used with regard for all people using this.
• Adding a prop for buttons at the top or the bottom. Happy to put it in if there's demand but I don't think there should be. If someone wants buttons at the top they can use the following css (doesn't change tab order):

.draft-extend {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.DraftEditor-root {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

.draft-extend-controls {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

[benbriggs]

looks good, i think i'll put this on a new minor version. it shouldn't cause too many problems but it can't hurt. thanks!

[benbriggs]

nit: i happen to like trailing commas but i didn't do it elsewhere in this project

[FranDias]

oops, left over from some other work. 1241543