637 - create details expandable component

[pmpc94]

Issue

• Create "Details Expandable" component #637

Dependencies

• None

Decisions

• Create a Details Expandable component that can be expandable
• Allow field customization according to any design by the use of slots

Screenshots

Screen.Recording.2023-11-03.at.09.30.59.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ripe-components-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 6, 2023 11:08am

[joao-conde]

Not very familiar with components and I would like @3rdvision to take a look.

[3rdvision]

Thanks for contributing to ripe-components-vue, even after vue3 deprecation and this is mostly collecting dust after new products, there's still a lot of work history just sitting around here 😞

It might be frustrating to go full solo dive into old conventions and quality code standards especially when adding an organism component.

Have you considered extending/reusing the form component and section expandable instead of creating this one? We try to avoid duplicated component code as much as possible.

@NFSS10 can you check this one out since you were the one that wrote most of form.vue code?

[pmpc94]

@3rdvision very good points, perhaps I should have poked someone beforehand to discuss some important topics about this library 😅

regarding your questions, yes I have considered reusing the Form and Section components but it would still require some changes because they are not really the same comparing with the new design. To avoid modifying these components I decided to create a new one but we could still try to reuse them if you think is the best idea.

[NFSS10]

Let's avoid adding slots until it's strictly necessary. The reason is because as this is a public package, when we do changes like these we "are writing a contract" and committing to it so let's avoid doing those kind of commitments until it's really needed

[pmpc94]

the reason I added a slot here is to give the user an option to customize the input style if needed. What's your suggestion instead?

[NFSS10]

Don't directly pass text to a slot, wrap it in a div.

If you want to only change the values use a prop instead. For example, if you only want to change the text in the header, instead of passing text via a slot, create a prop that allows to change the header text.

If it's a field that is dynamically generated, make the prop that allows to generate that dynamic structure accept some kind of field that would change the header. For example, in this case I think it would be to also allow some kind of field to data that would handle that change.
Check other components for reference. For example: https://github.com/ripe-tech/ripe-components-vue/blob/master/vue/components/ui/atoms/dropdown/dropdown.vue

[pmpc94]

what if we want to change only certain inputs and not all?

[NFSS10]

@3rdvision very good points, perhaps I should have pinned someone before to discuss some important topics about this library 😅

regarding your questions, yes I have considered reusing the Form and Section components but it would still require some changes because they are not really the same comparing with the new design. To avoid modifying these components I decided to create a new one but we could try to reuse them if you think is the best idea.

The style shouldn't be a factor when deciding to use a component or not, the components are bland on purpose and you can style them however you want.

Only when you need structural changes is when you should consider expanding the component or maybe, if needed, create a new one.

Also, doesn't ripe-pulse already have this kind of behaviour? If yes see how it's being done and replicate it. I may be wrong though 😅

[pmpc94]

@NFSS10 thanks for your inputs. Nope, afaik pulse doesn't have this kind of behaviour as of now.

I will change to use the Section Expandable component, which is a fairly straightforward change.

The way the form component is done would raise a lot of complexity when building the object to build the desired component. Considering the following example:

We would need to create so many arrays just to pass 1 input per column in the first row. Then another column just for the second row. Four columns for the 3rd row etc...

And then what if we have this:

We would need to create multiples arrays with multiple columns whereas in the current component we just pass one object with the fields we want to render and then allow its customization whenever the user wants it via slots

[NFSS10]

@NFSS10 thanks for your inputs. Nope, afaik pulse doesn't have this kind of behaviour as of now.

I will change to use the Section Expandable component, which is a fairly straightforward change.

The way the form component is done would raise a lot of complexity when building the object to build the desired component. Considering the following example:

We would need to create so many arrays just to pass 1 input per column in the first row. Then another column just for the second row. Four columns for the 3rd row etc...

And then what if we have this:

We would need to create multiples arrays with multiple columns whereas in the current component we just pass one object with the fields we want to render and then allow its customization whenever the user wants it via slots

If you think the form's complexity is going to affect very negatively and be too over-engineered for the feature then I would recommend to just create the specific forms and inputs combinations in ripe-pulse and use section-expandable for the expandable behaviour.

It will probably be a lot more simple and cleaner doing that way. Creating another component will be redundant for the context of ripe-components-vue

[pmpc94]

@NFSS10 hmmm that makes sense as well, thanks for your feedback. @joao-conde what do you think? Personally I like this idea to not create just "another" component in this library but to adapt it to Pulse's needs instead

[joao-conde]

All valid points, seems good to me, I agree with Nuno