mdButton: layout-align replaces space with dash which breaks styles

[epelc]

Actual Behavior:

• What is the issue? * Since 1.1.4 using layout-align="center center" on an md-button changes the attribute into layout-align="center-center" which breaks(doesn't match) the normal css selector for [layout-align="center center"].
• What is the expected behavior? md-button should not replace the space with a dash/hyphen.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:https://codepen.io/anon/pen/yXBaJP
• Details:
  Inspect to see that the layout-align attribute(not class) on the button replaces the space with a dash. It is not supposed to do this and it doesn't do this on other elements.
  

Also in a local project

This doesn't look very important because it still semi works. But it completely breaks your alignment if you have an image inside of a button and it may break other use cases. Example: profile picture in a toolbar is an image inside of a button to go to your profile page.

Notice it is not vertically centered due to this bug.

AngularJS Versions: *

• AngularJS Version: 1.5.5(or 1.5.x)
• AngularJS Material Version: 1.1.4(note it isn't broken in 1.1.3)

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 58
• OS: * macOS 10.12.5
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[hugocalheira]

I'm having this same problem.

I did not compare the versions of angular material 1.1.3 and 1.1.4, but I noticed that in the line indicated in the link below, the hyphen is added where it should be a space.

material/src/core/services/layout/layout.js

Line 437 in f4b19fe

value = $mdUtil.supplant("{main}-{cross}",axis);

By changing the JS file (test-only), the problem was resolved.

I think it should be just like this:
value = $mdUtil.supplant("{main} {cross}",axis);

But I can not tell you what other functionality to change that could affect.

[Splaktar]

@hugocalheira I don't think that line is the culprit of the regression here since it was changed 2 years ago, well before 1.1.4.

It looks like there was another change in 1.1.4 that triggered this. Can anyone track that down? Perhaps in mdButton?

@epelc the styles seem to be applied to the classes and not via the attributes in your CodePen. So there doesn't appear to be an issue with the layouts. I don't see any styles that are applied via [layout-align="center center"]. Is that something that you are doing in your project's custom CSS? Do you have a CodePen that demonstrates the layout breaking like in your screenshot?

[hugocalheira]

@Splaktar, it's true. I was just telling that could be anything related in this process, not necessarly this, but a start point.