Create `Divider` component

[kamleshchandnani]

We have implemented Divider in two places now:

• Cards
• ActionList

This seems to increase the need for Divider as a generic component. So we shall create this as a component sooner rather than later

[abhieshekumar]

folks will want to pick it up -

• as an exercise, tried out a dummy divider component (I know there is a whole process that happens before 🙈).
• uses Transient props, which prevents props from getting added to final HTML #714

Please let me know how to proceed? @kamleshchandnani @divyanshu013

[divyanshu013]

For this component, you can go through the existing components (some are listed in the OP) and first list down the usecases and a proposed API here.

Once we've the possible usecases and an API we can proceed to the implementation (this will help minimizing code changes later).

[abhieshekumar]

got it. thanks @divyanshu013, not quiet sure what you mean by listed in the OP, can you please share?

[divyanshu013]

I meant the ones listed in the parent comment here

[abhieshekumar]

@divyanshu013 Please check this document

[divyanshu013]

Thanks for the doc. The design research is currently pending on this from our design team (current draft is here).

Since this is pending a thorough design research we would like to currently scope the usecases only to what we've in the code i.e. the components like bottom sheet, cards, action list, etc. Things such as orientation, type, alignment etc should be skipped for now.

As next steps you can scope out the doc and propose an API that works only for our existing components (so you'll have to get rid of things which don't have a usecase in existing components - keeping things simpler).

After that perhaps draft out a PR that refactors one component to use this simple Divider component. We can review that and if it looks good you can refactor other components too.

[abhieshekumar]

Hi @divyanshu013 , looked through the usage of Divider component within our codebase. Listing them down in this document. Please check.

If it looks good will start by refactoring one component for review.

[divyanshu013]

Seems good overall. One comment on the doc: this should be a div / View because hr should be used to separate mostly paragraph level elements.

[abhieshekumar]

@divyanshu013 please check this https://github.com/razorpay/blade/pull/1258

[divyanshu013]

Approach seems good, need to do for all other components which are using divider

[abhieshekumar]

@divyanshu013

• refactored other components. Please check
• wanted to confirm, do we also need to add test cases and stories for this current divider?

[anuraghazra]

Done in #1258