Fixed alignment of checkboxes for optionList items (#2313)

Author: sarahill

UNRELEASED.md

@@ -17,6 +17,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Add vertical adjustment to `OptionList` control items ([#1310](https://github.com/Shopify/polaris-react/pull/1310))
 - Fixed `actionGroups` to only render `MenuActions` when actions are provided in the `Page` ([#2266](https://github.com/Shopify/polaris-react/pull/2266))
 - Fixed `PositionedOverlay` incorrectly calculating `Topbar.UserMenu` `Popover` width ([#1692](https://github.com/Shopify/polaris-react/pull/1692))
 - Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))

src/components/Choice/Choice.scss

@@ -4,7 +4,7 @@ $control-size: rem(16px);
 
 // Need to push the control down just a little to have it appear
 // vertically centered with the label.
-$control-vertical-adjustment: 2px;
+$control-vertical-adjustment: rem(2px);
 
 .Choice {
   display: inline-flex;

src/components/OptionList/components/Option/Option.scss

@@ -2,6 +2,7 @@
 
 $min-height: control-height();
 $control-size: rem(16px);
+$control-vertical-adjustment: rem(2px);
 
 .Option {
   @include unstyled-button;
@@ -32,7 +33,7 @@ $control-size: rem(16px);
 .Label,
 .SingleSelectOption {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
   padding: spacing(tight) spacing();
 }
@@ -43,6 +44,7 @@ $control-size: rem(16px);
   flex-shrink: 0;
   width: $control-size;
   height: $control-size;
+  margin-top: $control-vertical-adjustment;
   margin-right: spacing(tight);
 }