Improve SimpleFormIterator UI

[fzaninotto]

• Remove line index by default
• Use the same type of button for all actions
• Show row actions only on hover (except on Mobile)
• Add a fullWidth prop to push actions to the row end
• Emphasize the inline layout in the documentation
• Fix label position
• Fix layout for nested ArrayInput
• Fix tests
• Add more stories

Before

After

The docs introduce this component with a nicer screenshot:

[fzaninotto]

The rationale for separating the remove button from the others in the first place was that it's destructive. Maybe we should keep that. Let me think again about the best compromise.

Back to WIP.

[slax57]

Very nice so far!! 😍

[slax57]

The rationale for separating the remove button from the others in the first place was that it's destructive. Maybe we should keep that. Let me think again about the best compromise.

Back to WIP.

The different colors still make it clear enough, imho

[WiXSL]

Woow this is great!

[fzaninotto]

OK, I've made up my mind, this is back to RFR!

[WiXSL]

Looking at the ArrayInput stories, specially Nested Inline, the inputs look to dense.
And the separation line between items gets too close to the inputs

[fzaninotto]

Looking at the ArrayInput stories, specially Nested Inline, the inputs look to dense.
And the separation line between items gets too close to the inputs

This story shows the "densest" density we can get. I still think it's not dense enough ;)

You can see the default density in the Basic story, and I don't think there is a density problem there. On the contrary, I find it barely usable because everything is so far from everything.

As for the separator line, I'm not 100% satisfied with the result either, but the alternatives I tested were worse.