New CycleSelectControl added

docs/manifest-devhub.json

@@ -839,6 +839,12 @@
 		"markdown_source": "../packages/components/src/menu-items-choice/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CycleSelectControl",
+		"slug": "cycle-select-control",
+		"markdown_source": "../packages/components/src/mobile/cycle-select-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "StepperControl",
 		"slug": "stepper-control",

packages/block-library/src/image/edit.native.js

@@ -16,10 +16,10 @@ import { isEmpty, map, get } from 'lodash';
  * WordPress dependencies
  */
 import {
+	CycleSelectControl,
 	Icon,
 	PanelBody,
 	PanelActions,
-	SelectControl,
 	TextControl,
 	ToggleControl,
 	ToolbarButton,
@@ -334,7 +334,7 @@ export class ImageEdit extends React.Component {
 					/>
 					{ // eslint-disable-next-line no-undef
 						image && __DEV__ &&
-						<SelectControl
+						<CycleSelectControl
 							icon={ 'editor-expand' }
 							label={ __( 'Size' ) }
 							value={ sizeSlug || DEFAULT_SIZE_SLUG }

packages/components/src/index.native.js

@@ -38,3 +38,4 @@ export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-l
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as StepperControl } from './mobile/stepper-control';
+export { default as CycleSelectControl } from './mobile/cycle-select-control';

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -18,6 +18,7 @@ import styles from './styles.scss';
 import Button from './button';
 import Cell from './cell';
 import CyclePickerCell from './cycle-picker-cell';
+import PickerCell from './picker-cell';
 import SwitchCell from './switch-cell';
 import RangeCell from './range-cell';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
@@ -148,6 +149,7 @@ ThemedBottomSheet.getWidth = getWidth;
 ThemedBottomSheet.Button = Button;
 ThemedBottomSheet.Cell = Cell;
 ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
+ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;
 ThemedBottomSheet.RangeCell = RangeCell;
 

packages/components/src/mobile/cycle-select-control/README.md

@@ -0,0 +1,4 @@
+CycleSelectControl
+===================
+
+`CycleSelectControl` is an experimental alternative to SelectControl for mobile. 

packages/components/src/mobile/cycle-select-control/index.native.js

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import CyclePickerCell from '../bottom-sheet/cycle-picker-cell';
+
+function CycleSelectControl( {
+	help,
+	instanceId,
+	label,
+	multiple = false,
+	onChange,
+	options = [],
+	className,
+	hideLabelFromVision,
+	...props
+} ) {
+	const id = `inspector-select-control-${ instanceId }`;
+
+	return (
+		<CyclePickerCell
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			id={ id }
+			help={ help }
+			className={ className }
+			onChangeValue={ onChange }
+			aria-describedby={ !! help ? `${ id }__help` : undefined }
+			multiple={ multiple }
+			options={ options }
+			{ ...props }
+		/>
+	);
+}
+
+export default CycleSelectControl;

packages/components/src/select-control/index.native.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import CyclePickerCell from '../mobile/bottom-sheet/cycle-picker-cell';
+import PickerCell from '../mobile/bottom-sheet/picker-cell';
 
 function SelectControl( {
 	help,
@@ -17,7 +17,7 @@ function SelectControl( {
 	const id = `inspector-select-control-${ instanceId }`;
 
 	return (
-		<CyclePickerCell
+		<PickerCell
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }