Fix readonly input groups

[cchaos]

While working on #2049, I noticed that we don't currently account for the readonly state when using prepend/append.

This PR, passes the readOnly to the EuiFormControlLayout and applies the correct styling. This means also having to explicitly state and use it as a prop for EuiFieldNumber, EuiFieldText, and EuiSelect. These are also the only ones that currently support prepend/append.

Before

After

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[ryankeairns]

👍 LGTM. I did find a misspell on a comment and maybe change the cursor on hovering the prepend, but not a show stopper:

[chandlerprall]

jenkins test this

[chandlerprall]

Code changes LGTM

[cchaos]

maybe change the cursor on hovering the prepend

I think that is a different concern which involves: "How do we handle form rows with readOnly inputs" since there is no readOnly for form labels.

The lines below show how the example is created which is just passing a EuiFormLabel as the prepend node, so EuiFormControlLayout doesn't actually have any knowledge of what type of node is being passed. We'd need to add a readOnly or otherwise disabled prop to EuiFormLabel.

eui/src-docs/src/views/form_controls/form_control_layout.js

Lines 95 to 97 in 57a866e

	<EuiFormControlLayout
	readOnly
	prepend={<EuiFormLabel htmlFor="textField19">Read only</EuiFormLabel>}>

I'll leave that for another day 😉