Input Group - Iteration of the fields, or new component?

[turolopezsanabria]

Hello, we need to be able to group inputs, within a single Field.

This is an old request from JM long ago for MA.
The need arrived again, now for dates in IJ.

> Label
> Input + Input
> Help and validation Texts

Please see image attached:

All the values of the fields should be available for the elements of the group
There should be no space between the elements
It has to be possible to group the different input and select current sizes

Q: Should this be a new component "input group"?

[andresin87]

At the moment there is an AtomInput defined component which has the "type" prop used as the input native behavior. The defined possible types are:

// type prop
const TYPES = { 
  DATE: 'date',
  MASK: 'mask',
  NUMBER: 'number',
  PASSWORD: 'password',
  SUI_PASSWORD: 'sui-password',
  TEXT: 'text',
  TEL: 'tel',
  EMAIL: 'email'
}
// as inputTypes

It distinguish between

• type=password: <Password/>
• type=mask:<Mask />
• type=any other: <Input type={type} /> *default

We need to provide a way to visually group the inputs in order to create an element which groups them with its inner logic mask or type. The main goal is to tackle the behavior needed in the existent @s-ui/react-atom-input package using the compound-component pattern and also define new types which extends the possible logics.

<AtomInputGroup>
  <AtomInput type="month"/>
  <AtomInput type="year"/>
</AtomInputGroup>

<AtomInputGroup>
  <AtomInput type="number"/>
  <AtomInput type="number"/>
</AtomInputGroup>

The CSS rules which wraps the input elements with borders might be re-written to make them invisible with a more restrictive rule. A CSS rule that wraps the inner declared inputs creates the visually border wrapper.

It can be interesting (nice to have) also to provide an onChange handler that gets all inner input values setted on a context.

[andresin87]

We (@tonyghiani and @andresin87) have been creating a mock with the desired workaround and have some challenges we need to discuss after it becomes possible. This actual status adds a class molecule-fieldGroup-item to each inner elements of the fieldGroup. To become possible we need to discuss some other extra topics.

• Styles as a prop of some components
• Classname as a prop of some components

finally the FieldGroup might be declared as a molecule under a new package @s-ui/react-molecule-field-group

[andresin87]

Finally we decided not to tackle the className and style possibility of change. After an internal discussion we are going to only attend the style modification of the components we want to be able to be setted inside the fieldGroup (initially atomInput)

.react-moleculeFieldGroup {
  display: flex;
  flex-wrap: nowrap;
  align-content: space-around;
  // add the borders like a field
  border: $b-token solid $c-token;
  .react-atomInput,
  .react-[many others] {
    // remove its borders.
  }
}

[andresin87]

beta demo

[andresin87]

After a long time, we stop then PoC due to the limitations of existant status. We cannot customize the with f the inputs in all cases because the unique width customization we have is the charSize prop, but its is ignored in input types diferent than text, search, tel, url, email, and password.

Classnames are not an option too because it is closed to