Merge pull request #1399 from vtex/feature/select-for-mobile

Feature/select for mobile

Author: guilhermebruzzi

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [9.145.0] - 2021-07-12
+
+### Added
+
+- **EXPERIMENTAL_Select** `searchable` option so it can be better used on mobile.
+
 ## [9.144.0] - 2021-06-29
 
 ### Added

manifest.json

@@ -2,7 +2,7 @@
   "vendor": "vtex",
   "name": "styleguide",
   "title": "VTEX Styleguide",
-  "version": "9.144.0",
+  "version": "9.145.0",
   "description": "The VTEX Styleguide components for the Render framework",
   "builders": {
     "react": "3.x"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/styleguide",
-  "version": "9.144.0",
+  "version": "9.145.0",
   "scripts": {
     "lint": "eslint react --ext js,jsx,ts,tsx",
     "test": "node config/test.js",

react/components/EXPERIMENTAL_Select/README.md

@@ -272,6 +272,33 @@ const options = [
 </div>
 ```
 
+Without search input (good for mobile experience)
+
+```js
+const options = [
+  {
+    value: 'first-option',
+    label: 'First Option',
+  },
+  {
+    value: 'second-option',
+    label: 'Second Option',
+  },
+]
+
+;<div>
+  <Select
+    label="Label"
+    options={options}
+    multi={false}
+    searchable={false}
+    onChange={values => {
+      console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
+    }}
+  />
+</div>
+```
+
 Loading state
 
 ```js

react/components/EXPERIMENTAL_Select/index.js

@@ -41,6 +41,7 @@ class Select extends Component {
       formatCreateLabel,
       label,
       loading,
+      searchable,
       multi,
       noOptionsMessage,
       onChange,
@@ -80,6 +81,7 @@ class Select extends Component {
       isClearable: clearable,
       isDisabled: disabled,
       isLoading: loading,
+      isSearchable: searchable,
       isMulti: multi,
       noOptionsMessage,
       inputId: this.inputId,
@@ -204,6 +206,7 @@ class Select extends Component {
 
 Select.defaultProps = {
   multi: true,
+  searchable: true,
   placeholder: 'Select...',
   size: 'regular',
   clearable: true,
@@ -255,6 +258,8 @@ Select.propTypes = {
   loading: PropTypes.bool,
   /** Text to display when loading options */
   loadingMessage: PropTypes.string,
+  /** Support disabling search input and only allow select to change values. */
+  searchable: PropTypes.bool,
   /** Support multiple selected options. */
   multi: PropTypes.bool,
   /** Text to display when there are no options. ({inputValue}) => string | null */