Reduce number of props by grouping styles props into separate config objects

[toystars]

As it is at the moment, the component is highly customisable, but with the way it is set up, adding more options to customise means more props which is becoming too overwhelming. For example:

   <MultiSelect
          hideTags
          items={items}
          uniqueKey="id"
          ref={(component) => { this.multiSelect = component }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Pick Items"
          searchInputPlaceholderText="Search Items..."
          altFontFamily="ProximaNova-Light"
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />

Above is the minimal customisation that can be done.

So the suggestion is to group all related style props into their own config prop object so there wouldn't be need to add more props to component when specific styling is needed. That would easily be added on the fly by user as it will be catered for by the application of such config props. Below is an example of what it might become:

   <MultiSelect
          hideTags
          items={items}
          uniqueKey="id"
          ref={(component) => { this.multiSelect = component }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Pick Items"
          searchInputPlaceholderText="Search Items..."
          tagItemStyle={{
             // style definition here
          }}
          selectedIconStyle={{
             // style definition here
          }}
          selectedItemStyle={{
             // style definition here
          }}
          itemStyle={{
             // style definition here
          }}
          searchInputStyle={{
              // style definition here
          }}
          submitButtonTextStyle={{
            // style definition here
          }}
          submitButtonText="Submit"
        />

The above example shows how flexible it would be customise lots of things without the need to update the component.

This would introduce a considerable amount of breaking changes and would see a major version bump.

[toystars]

Also to mitigate the issue described in #12, I am thinking the new implementation should pop up a modal. This would ensure the component has a container all to itself and would also prevent some other subtle issues

[prionkor]

This would introduce a considerable amount of breaking changes and would see a major version bump.

It woudn't,

• deprecate all the old style props.
• Introduce new style objects as props.
• Marge deprecated style props to style objects if they exists.

That way it will be full backward compatible.

[toystars]

@prionkor I didn't think of that initially. I believe @AugustoAleGon should have this in mind too

[AugustoAleGon]

@prionkor I agree with you. We can customize 100%. @toystars Let me see if I can check the old styles and work on the dependencies.

[vincentvella]

@AugustoAleGon @toystars Where are we on this? I really don't imagine we need to support full backward compatibility with these style props - I'd recommend doing a full version bump, tagging it and adding in the changelog what we've changed.

[14Deveshjoshi]

how we will give backgroundcolor to ta

[14Deveshjoshi]

tag