feat(ui-simple-select,ui-select): add layout prop to Select and SimpleSelect

INSTUI-4482

Author: ToMESSKa

packages/ui-select/src/Select/index.tsx

@@ -694,6 +694,7 @@ class Select extends Component<SelectProps> {
       onBlur,
       onInputChange,
       onRequestHideOptions,
+      layout,
       ...rest
     } = this.props
 
@@ -749,6 +750,7 @@ class Select extends Component<SelectProps> {
           : interaction,
       isRequired,
       shouldNotWrap,
+      layout,
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput: this.handleRenderBeforeInput(),
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button

packages/ui-select/src/Select/props.ts

@@ -256,6 +256,14 @@ type PropsFromTextInput = {
    * when available space is exceeded.
    */
   shouldNotWrap?: boolean
+
+  /**
+   * In `stacked` mode the input is below the label.
+   *
+   * In `inline` mode the input is to the right/left (depending on text direction) of the label,
+   * and the layout will look like `stacked` for small screens.
+   */
+  layout?: 'stacked' | 'inline'
 }
 
 // These props are directly passed to Popover
@@ -328,7 +336,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
   shouldNotWrap: PropTypes.bool,
-  scrollToHighlightedOption: PropTypes.bool
+  scrollToHighlightedOption: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -365,7 +374,8 @@ const allowedProps: AllowedPropKeys = [
   'renderAfterInput',
   'children',
   'shouldNotWrap',
-  'scrollToHighlightedOption'
+  'scrollToHighlightedOption',
+  'layout'
 ]
 
 export type { SelectProps, SelectOwnProps, SelectStyle }

packages/ui-simple-select/src/SimpleSelect/index.tsx

@@ -503,6 +503,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
       onShowOptions,
       onHideOptions,
       children,
+      layout,
       ...rest
     } = this.props
 
@@ -538,6 +539,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         onRequestHighlightOption={this.handleHighlightOption}
         onRequestSelectOption={this.handleSelectOption}
         isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
+        layout={layout}
         {...passthroughProps(rest)}
       >
         {this.renderChildren()}

packages/ui-simple-select/src/SimpleSelect/props.ts

@@ -232,6 +232,14 @@ type PropsPassedToSelect = {
    * If the selected `SimpleSelect.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
    */
   isOptionContentAppliedToInput?: boolean
+
+  /**
+   * In `stacked` mode the input is below the label.
+   *
+   * In `inline` mode the input is to the right/left (depending on text direction) of the label,
+   * and the layout will look like `stacked` for small screens.
+   */
+  layout?: 'stacked' | 'inline'
 }
 
 type PropKeys = keyof SimpleSelectOwnProps
@@ -248,6 +256,7 @@ type SimpleSelectProps = PickPropsWithExceptions<
   | 'onRequestSelectOption'
   | 'inputValue'
   | 'isShowingOptions'
+  | 'layout'
 > &
   SimpleSelectOwnProps &
   OtherHTMLAttributes<
@@ -294,7 +303,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
-  isOptionContentAppliedToInput: PropTypes.bool
+  isOptionContentAppliedToInput: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -326,7 +336,8 @@ const allowedProps: AllowedPropKeys = [
   'renderEmptyOption',
   'renderBeforeInput',
   'renderAfterInput',
-  'children'
+  'children',
+  'layout'
 ]
 
 export type { SimpleSelectProps, SimpleSelectState }