mathesar
mathesar copied to clipboard
Improve focus indicator of `InputGroup` component
The form-builder PR introduced the InputGroup
component, which helped make the input components more cleaner but lead to a stylistic regression.
Comments from @seancolsen on the PR:
I really like the changes that simplify
TextInput
to a single DOM element, and I want to make sure to keep those changes. There's also clearly value in keeping the "grouped input" functionality. But the changes in this PR lead to a minor stylistic regressions in my opinion.Examples:
Filter tables
Before After Add column
Before After I'd prefer that the focus indicator encompass the entire group, like it did before.
I'd like to keep the changes that add a grey background to the group items as it helps to distinguish the label from the input.
In Storybook, I see that
InputGroup
is also intended to handle the use case of multiple inputs grouped together, in which case the focus indicators would need to be separate. But this use-case seems quite esoteric to me. I can't recall ever having seen a UI like that. I'd suggest we abandon any attempts to support it.
Proposed solution
- We need to analyze if it's worth it to bind focus indicator between the InputGroup component and the slotted input components.
- Bootstrap's InputGroup was the main inspiration for this component. We can further analyze the need to group multiple inputs together instead of just text with input.
Based on the analysis, we'd like to perform necessary improvements on the component.
Blocked by https://github.com/centerofci/mathesar/pull/915
I splintered off some of the content that was originally in the body of this ticket and put it into #1042
This issue has not been updated in 90 days and is being marked as stale.
This ticket is no longer required since our UX no longer contains such scenarios where InputGroup
is used for the label and the component.
InputGroup
now only groups inputs together, so focus is retained for each of the inputs independently.