[EuiFormRow] Add isDisabled prop

[j-m]

This maybe a little outside your intended use-case or design, but I use EuiFormRow like so:

<EuiFormRow label="Some description:">
  <>
   {status=== NOT_STARTED && (
     <EuiText>
        You don't have permission to...
      </EuiText>
   )}

    {status=== IN_PROGRESS && (
      <EuiLoadingContent
        role="progressbar"
        aria-label="loading something"
        lines={1}
      />
    )}

    {status === ERROR && (
      <>
        <SomeInlineErrorComponent error={someError} />
        <EuiButton onClick={() => retry()}>Retry</EuiButton>
      </>
    )}

    {status === SUCCESS && (
      <EuiSelect
        ...
      />
    )}
  </>
</EuiFormRow>

Currently, the label is clickable in all circumstances. However, the label should only be clickable when EuiSelect is rendered, i.e. when there's an input to actually focus on. As EUI cannot easily determine if the child is selectable, it'd make sense to add the prop isLabelDisabled. If the label is disabled then it'd just render a normal EuiFormLabel, with no for attribute.

I have swapped to using EuiFormLabel a rendering a EuiFormRow only for the success state, but then I end up with poor spacing so have to also conditionally render an EuiSpacer.

[cchaos]

Yeah, there's a lot of problems with the way EuiFormRow works right now without any real connection between it and the form input. The idea is to update the form input control components themselves to accept label, errors and other form row options directly. Here's an example PR the basic text input. #3837

In the short term, I'd say that EuiFormRow should just accept a general isDisabled prop and disable all the necessary bits.

[babs20]

I would be happy to work on this issue. I just want to make sure I understand the intended behavior for the prop before I dive in. Basically, when the prop is true do we not render the input field entirely or just disable it from being focused?

[myasonik]

We still want to render the input, but add the disabled prop to those child <input /> elements

[j-m]

To elaborate the issue, here is a codepen of the above code with each variation.
(The "dont have permission to fetch" variation made no sense as I wouldn't've displayed the row at all, but I realised I forgot to add the "don't have permission to edit" variation).

I love the UX of labels focusing their inputs, but it doesn't make sense to any scenario other than enabled.

The existing PR was correct in that disabled form row's should disable their inputs (this is not my goal but is definitely relevant and is not a breaking change as disabled doesnt currently exist for form row) but it should also make the label appear like regular text.

And just to clarify & backtrack on my statement in the issue

If the label is disabled then it'd just render a normal EuiFormLabel, with no for attribute

The for attribute should still be present, but we should simply change the appearance to mimic a label without a for i.e., set cursor: default