diff --git a/UNRELEASED.md b/UNRELEASED.md index d0a2fdda890..87c0cf221b7 100644 --- a/UNRELEASED.md +++ b/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)) diff --git a/src/components/Choice/Choice.scss b/src/components/Choice/Choice.scss index db4662cc590..af5694f2fb4 100644 --- a/src/components/Choice/Choice.scss +++ b/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; diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss index 2a0b30bafd4..1a458293608 100644 --- a/src/components/OptionList/components/Option/Option.scss +++ b/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); }