Skip to content

Commit

Permalink
feat(form-field): Add support for space-between
Browse files Browse the repository at this point in the history
This PR adds `mdc-form-field--space-between` class.
fixes: material-components#5747
This allows easily creating this layout:
![image](https://user-images.githubusercontent.com/1741838/77768710-23904a80-7043-11ea-9c44-8febdc8e0430.png)

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.

PiperOrigin-RevId: 304204642
  • Loading branch information
asyncLiz authored and aforemny committed Mar 5, 2021
1 parent 2e8946e commit 0f66503
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions packages/mdc-form-field/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,22 @@
}
}
}

.mdc-form-field--space-between {
@include feature-targeting-mixins.targets($feat-structure) {
justify-content: space-between;
}

// stylelint-disable-next-line selector-max-type
> label {
@include feature-targeting-mixins.targets($feat-structure) {
margin: 0;

@include rtl-mixins.rtl {
// RTL needed for specificity
margin: 0;
}
}
}
}
}

0 comments on commit 0f66503

Please sign in to comment.