feat(form-field): Add support for space-between

[Misiu]

This PR adds mdc-form-field--space-between class.
fixes: #5747
This allows easily creating this layout:

https://jsfiddle.net/Misiu/quzgcsev/25/
Sample code:

<div class="mdc-form-field mdc-form-field--space-between" id="form1">
  <div class="mdc-switch" id="switch1">
    <div class="mdc-switch__track"></div>
    <div class="mdc-switch__thumb-underlay">
      <div class="mdc-switch__thumb"></div>
      <input type="checkbox" id="basic-switch1" class="mdc-switch__native-control" role="switch" aria-checked="false">
    </div>
  </div>
  <label for="basic-switch1">off/on</label>
</div>

I've added support for mdc-form-field--align-end, but I'm not sure how support for RTL languages should look.

Also, this is my first PR in this repo, so sorry for any mistakes.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[Misiu]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[asyncLiz]

Nice work! We'll pull it in to do some more testing, but this looks good to me :)

[Misiu]

@asyncLiz thanks for the help and for the tips!
If this gets merged then I'll take a look at Web Component next 🙂

[asyncLiz]

One final round of reviews to go, getting close :)

[Misiu]

@asyncLiz ok, I think it is ready.
I had to change the order in
@include rtl-mixins.reflexive-property(margin, auto, initial);
but I think it works ok now: https://jsfiddle.net/Misiu/u247sya5/3/

Waiting for your review :)

[Misiu]

done :)

[Misiu]

@asyncLiz I wasn't aware IE11 is supported :/
It's in the repo (https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md) but I didn't look. Sorry about that.

[asyncLiz]

No worries! That's my fault for suggesting the initial without realizing it. Thanks for sticking with this 🙂

[Misiu]

Glad I could help 🙂

[asyncLiz]

Hm our bots are going a little bit crazy. Everything worked, except copybara created a new PR at #5759 and merged that instead of this one... 🤦‍♀️

Not entirely sure how that happened, but the change is in master now. I'll close this and comment on the other PR to refer to this one for the history.

[asyncLiz]

For MWC, feel free to go ahead and open a PR to get the process started. Hopefully it'll be a little smoother.

[Misiu]

@asyncLiz I've tried adding this to MWC, but I got stuck on setup. I work on Windows 10 machine and I can't run any npm scripts. The issue was reported here: material-components/material-web#459.
Could you take a look at it? Thanks 🙂

[asyncLiz]

Sure thing, should be a trivial thing to add

[Misiu]

@asyncLiz thank you.
What I had in mind was that bug (material-components/material-web#459), but I'm glad this feature got added.
As I wrote before I'm a windows user and because of that bug I can't even start dev environment to contribute.

[asyncLiz]

No worries. I went ahead and implemented it because I knew I'd need to do some work anyway to get screenshot tests up to date. It'd also have been faster than the windows bug, which was lower priority 😊