From 6a30654c92661e45091a2018ed5d028d0d012a68 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Jan 2020 10:49:55 -0500
Subject: [PATCH 1/3] Components: FontSizePicker: Adjust Select Button sizing

This update enhances `CustomSelectControl` to accept props to modify it's
internal `Button` component (`Object`). Since `FontSizePicker` uses
`CustomSelectControl`, this update allows us to specify the `isSmall`
property for the `Button`. By doing so, it fixes the alignment of the Select
with the other form control elements.
---
 packages/components/src/custom-select-control/README.md | 6 ++++++
 packages/components/src/custom-select-control/index.js  | 5 ++++-
 packages/components/src/font-size-picker/index.js       | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 62dc6920b49a2..4c345b8152d62 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -102,6 +102,12 @@ Function called with the control's internal state changes. The `selectedItem` pr
 - Type: `Function`
 - Required: No
 
+#### selectButtonProps
+
+Props to pass to the internally rendered `Button` component.
+- Type: `Object`
+- Required: No
+
 #### value
 
 Can be used to externally control the value of the control, like in the `MyControlledCustomSelectControl` example above.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index b6570ec4ae7b9..b00a1fff026cf 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -55,6 +55,7 @@ export default function CustomSelectControl( {
 	label,
 	options: items,
 	onChange: onSelectedItemChange,
+	selectButtonProps = {},
 	value: _selectedItem,
 } ) {
 	const {
@@ -73,6 +74,7 @@ export default function CustomSelectControl( {
 		selectedItem: _selectedItem,
 		stateReducer,
 	} );
+
 	const menuProps = getMenuProps( {
 		className: 'components-custom-select-control__menu',
 	} );
@@ -99,10 +101,11 @@ export default function CustomSelectControl( {
 			</label>
 			<Button
 				{ ...getToggleButtonProps( {
+					...selectButtonProps,
 					// This is needed because some speech recognition software don't support `aria-labelledby`.
 					'aria-label': label,
 					'aria-labelledby': undefined,
-					className: 'components-custom-select-control__button',
+					className: classnames( 'components-custom-select-control__button', selectButtonProps.className ),
 				} ) }
 			>
 				{ itemToString( selectedItem ) }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index ed5691d8336b3..be73241d3648d 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -101,6 +101,7 @@ export default function FontSizePicker( {
 			<div className="components-font-size-picker__controls">
 				{ fontSizes.length > 0 && (
 					<CustomSelectControl
+						selectButtonProps={ { isSmall: true } }
 						className={ 'components-font-size-picker__select' }
 						label={ __( 'Preset Size' ) }
 						options={ options }

From f55084f3ce0af84db056513293aef45aad20b91d Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 13 Jan 2020 10:12:07 -0500
Subject: [PATCH 2/3] Remove buttonProps. Add isSmall as default for
 CustomSelectControl.

---
 .../components/src/custom-select-control/README.md   | 12 ++++++------
 .../components/src/custom-select-control/index.js    |  6 +++---
 packages/components/src/font-size-picker/index.js    |  1 -
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 4c345b8152d62..e900fd9603d3b 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -84,6 +84,12 @@ Used to visually hide the label. It will always be visible to screen readers.
 - Type: `Boolean`
 - Required: No
 
+#### isSmall
+
+Renders the Select in a smaller size.
+- Type: `Boolean`
+- Required: No
+
 #### label
 
 The label for the control.
@@ -102,12 +108,6 @@ Function called with the control's internal state changes. The `selectedItem` pr
 - Type: `Function`
 - Required: No
 
-#### selectButtonProps
-
-Props to pass to the internally rendered `Button` component.
-- Type: `Object`
-- Required: No
-
 #### value
 
 Can be used to externally control the value of the control, like in the `MyControlledCustomSelectControl` example above.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index b00a1fff026cf..ec30acc741629 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -55,7 +55,7 @@ export default function CustomSelectControl( {
 	label,
 	options: items,
 	onChange: onSelectedItemChange,
-	selectButtonProps = {},
+	isSmall = true,
 	value: _selectedItem,
 } ) {
 	const {
@@ -101,11 +101,11 @@ export default function CustomSelectControl( {
 			</label>
 			<Button
 				{ ...getToggleButtonProps( {
-					...selectButtonProps,
 					// This is needed because some speech recognition software don't support `aria-labelledby`.
 					'aria-label': label,
 					'aria-labelledby': undefined,
-					className: classnames( 'components-custom-select-control__button', selectButtonProps.className ),
+					className: 'components-custom-select-control__button',
+					isSmall,
 				} ) }
 			>
 				{ itemToString( selectedItem ) }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index be73241d3648d..ed5691d8336b3 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -101,7 +101,6 @@ export default function FontSizePicker( {
 			<div className="components-font-size-picker__controls">
 				{ fontSizes.length > 0 && (
 					<CustomSelectControl
-						selectButtonProps={ { isSmall: true } }
 						className={ 'components-font-size-picker__select' }
 						label={ __( 'Preset Size' ) }
 						options={ options }

From 67f13d2bd4ad12f209912e29fdd4392753972a18 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 29 Jan 2020 10:28:12 +0100
Subject: [PATCH 3/3] Fix unit tests and remove isSmall prop

---
 .../src/custom-select-control/README.md           |  6 ------
 .../components/src/custom-select-control/index.js | 15 +++++++--------
 storybook/test/__snapshots__/index.js.snap        |  8 ++++----
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index e900fd9603d3b..62dc6920b49a2 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -84,12 +84,6 @@ Used to visually hide the label. It will always be visible to screen readers.
 - Type: `Boolean`
 - Required: No
 
-#### isSmall
-
-Renders the Select in a smaller size.
-- Type: `Boolean`
-- Required: No
-
 #### label
 
 The label for the control.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index ec30acc741629..370ea443230e9 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -29,9 +29,9 @@ const stateReducer = (
 			return {
 				selectedItem:
 					items[
-						selectedItem ?
-							Math.min( items.indexOf( selectedItem ) + 1, items.length - 1 ) :
-							0
+						selectedItem
+							? Math.min( items.indexOf( selectedItem ) + 1, items.length - 1 )
+							: 0
 					],
 			};
 		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
@@ -40,9 +40,9 @@ const stateReducer = (
 			return {
 				selectedItem:
 					items[
-						selectedItem ?
-							Math.max( items.indexOf( selectedItem ) - 1, 0 ) :
-							items.length - 1
+						selectedItem
+							? Math.max( items.indexOf( selectedItem ) - 1, 0 )
+							: items.length - 1
 					],
 			};
 		default:
@@ -55,7 +55,6 @@ export default function CustomSelectControl( {
 	label,
 	options: items,
 	onChange: onSelectedItemChange,
-	isSmall = true,
 	value: _selectedItem,
 } ) {
 	const {
@@ -105,7 +104,7 @@ export default function CustomSelectControl( {
 					'aria-label': label,
 					'aria-labelledby': undefined,
 					className: 'components-custom-select-control__button',
-					isSmall,
+					isSmall: true,
 				} ) }
 			>
 				{ itemToString( selectedItem ) }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index 4444eef553967..c5e1e1ac918fc 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -2554,7 +2554,7 @@ exports[`Storyshots Components/CustomSelectControl Default 1`] = `
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-label="Font Size"
-    className="components-button components-custom-select-control__button"
+    className="components-button components-custom-select-control__button is-small"
     id="downshift-null-toggle-button"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -3092,7 +3092,7 @@ exports[`Storyshots Components/FontSizePicker Default 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -3180,7 +3180,7 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -3312,7 +3312,7 @@ exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}