Migrating to 3.0: Icon Buttons have extra padding on right side

[cmslewis]

Environment

• Package version(s): @blueprintjs/core 3.2.0
• Browser and OS versions: Max OS X Sierra, Chrome 68.0.3440.84

Steps to reproduce

Buttons with an icon but no text have extra right padding in Blueprint 3.X (and maybe in 2.X too, since that's when the SVG icon refactor occurred?).

Actual behavior

From the Button docs:

Expected behavior

Possible solution

Given that:

• We'd need to detect when .bp3-button-text is :empty in order to remove the margin-right from the preceding svg element, and
• CSS selectors don't let you peek ahead like that,

It follows that:

• A pure CSS solution here would presumably require us to either (1) add a new bp3-button-empty CSS class to the root button element, or (2) move the margin-right on the svg to a margin-left on bp3-button-text, then do this:

  .bp3-icon + .bp3-button-text {
      margin: 7px; // or whatever SCSS variable math yields this value
  }
  
  .bp3-button-text:empty {
      margin-left: 0;
  }

I propose (2).

[giladgray]

oops this is a regression from fixing #2727