CustomSelectControl: Make chevron consistent with SelectControl (#40049)

* Set up story for comparison testing * CustomSelectControl: Adjust chevron * Update changelog * Revert "Set up story for comparison testing" This reverts commit d42f575.
WordPress · Apr 6, 2022 · 9805977 · 9805977
1 parent 0c6b3b9
commit 9805977
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Bug Fix
 
 -   Use `Object.assign` instead of `{ ...spread }` syntax to avoid errors in the code generated by TypeScript ([#39932](https://github.com/WordPress/gutenberg/pull/39932)).
+-   `CustomSelectControl`: Make chevron consistent with `SelectControl` ([#40049](https://github.com/WordPress/gutenberg/pull/40049)).
 
 ## 19.7.0 (2022-03-23)
 

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -154,7 +154,13 @@ export default function CustomSelectControl( {
 				{ itemToString( selectedItem ) }
 				<Icon
 					icon={ chevronDown }
-					className="components-custom-select-control__button-icon"
+					className={ classnames(
+						'components-custom-select-control__button-icon',
+						{
+							'is-next-36px-default-size': __next36pxDefaultSize,
+						}
+					) }
+					size={ 18 }
 				/>
 			</Button>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }

diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
@@ -41,8 +41,12 @@
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: 0;
+		right: $grid-unit-10;
 		top: 0;
+
+		&:not(.is-next-36px-default-size) {
+			right: $grid-unit-05;
+		}
 	}
 }