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

[ToMESSKa]

…eSelect

INSTUI-4482

ISUUE:

• Select and SimpleSelect do not have a layout prop, so the label in SimpleSelect cannot be placed to the right/left of the input field

TEST PLAN:

• check the examples in Select and SimpleSelect by adding the layout='inline' prop
• the label should be placed to the right/left of the input field (depending on text direction) the same way as for example in TextInput

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-24 15:14 UTC

[Copilot]

Pull Request Overview

This PR introduces a new layout prop to both Select and SimpleSelect components, allowing labels to be rendered inline (beside the input) or stacked (above/below the input).

• Add layout?: 'stacked' | 'inline' to props definitions, prop-types, and allowed props lists
• Wire the new layout prop through component rendering
• No behavioral changes beyond exposing layout choice

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/ui-simple-select/src/SimpleSelect/props.ts	Define and document new layout prop
packages/ui-simple-select/src/SimpleSelect/index.tsx	Destructure and forward layout to underlying Select
packages/ui-select/src/Select/props.ts	Define and document new layout prop
packages/ui-select/src/Select/index.tsx	Destructure and forward layout into TextInput props

Comments suppressed due to low confidence (3)

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

• Consider adding unit tests for the new layout prop to ensure that stacked and inline modes render correctly in SimpleSelect.

layout?: 'stacked' | 'inline'

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

• Consider adding unit tests for the new layout prop to ensure that stacked and inline modes render correctly in Select.

layout?: 'stacked' | 'inline'

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

• Add a default value for the layout prop (e.g., layout: 'stacked') in defaultProps so consumers get a consistent default layout without needing to pass it explicitly.

static defaultProps = {

[matyasf]

see my comment

[matyasf]

better text suggestion (use the same for SimpleSelect too):

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

[ToMESSKa]

@matyasf thanks, I added this to both.