Fix Custom select control component dropdown arrow spacing (WordPress…

…#22925)

* Add story for long option labels

* Fix to allow sufficient space for down arrow icon to the right of selected option text

* Update packages/components/src/custom-select-control/style.scss

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Update packages/components/src/custom-select-control/style.scss

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

packages/components/src/custom-select-control/stories/index.js

@@ -8,7 +8,7 @@ export default {
 	component: CustomSelectControl,
 };
 
-const options = [
+const defaultOptions = [
 	{
 		key: 'small',
 		name: 'Small',
@@ -31,5 +31,28 @@ const options = [
 	},
 ];
 export const _default = () => (
-	<CustomSelectControl label="Font size" options={ options } />
+	<CustomSelectControl label="Font size" options={ defaultOptions } />
+);
+
+const longLabelOptions = [
+	{
+		key: 'reallylonglabel1',
+		name: 'Really long labels are good for stress testing',
+	},
+	{
+		key: 'reallylonglabel2',
+		name: 'But they can take a long time to type.',
+	},
+	{
+		key: 'reallylonglabel3',
+		name:
+			'That really is ok though because you should stress test your UIs.',
+	},
+];
+
+export const longLabels = () => (
+	<CustomSelectControl
+		label="Testing long labels"
+		options={ longLabelOptions }
+	/>
 );

packages/components/src/custom-select-control/style.scss

@@ -16,6 +16,12 @@
 	position: relative;
 	text-align: left;
 
+	// For all button sizes allow sufficient space for the
+	// dropdown "arrow" icon to display.
+	&.components-custom-select-control__button {
+		padding-right: $icon-size;
+	}
+
 	&:focus:not(:disabled) {
 		border-color: $theme-color;
 		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;