feat: [IOBP-236] ListItemSwitch extension with loading state and badge

[Hantex9]

Short description

This PR adds three more props to ListItemSwitch component:

• isLoading: while true it shows an activity indicator
• badgeText: A text to show inside a badge instead of the switch. If it is not null, you have to provide also a badgeVariant
• badgeVariant: It indicates the badge variant to show;

List of changes proposed in this pull request

• Added three new props, the badgeText and badgeVariant are conditional properties;
• Changed the position of the right component and aligned to the title;
• Added more examples about ListItemSwitch inside example app;

How to test

Open the example app, navigate through List items section and check the new examples:

Preview

listitemswitch.mov

[CrisTofani]

@dmnplb I have doubt about this implementation: the badge version of the list item should be explicit of this specific list item or be took apart as a scoped component?

[Hantex9]

@dmnplb I have doubt about this implementation: the badge version of the list item should be explicit of this specific list item or be took apart as a scoped component?

For any doubts about this component, this is the figma where this component is used. I think that is overkill to create another component only to handle a badge on the right side and it will have negative effect on the DX side

[CrisTofani]

@dmnplb I have doubt about this implementation: the badge version of the list item should be explicit of this specific list item or be took apart as a scoped component?

For any doubts about this component, this is the figma where this component is used. I think that is overkill to create another component only to handle a badge on the right side and it will have negative effect on the DX

Looking to the figma you linked it could even be represented by another component (eg: A standard ListItem with a badge on the right) it doesn't look to be exclusively a ListItemSwitch with the badge rendered conditionally to the Switch element.

I would prefer to keep the ListItemSwitch closed to it's purpose

[dmnplb]

Looking to the figma you linked it could even be represented by another component (eg: A standard ListItem with a badge on the right) it doesn't look to be exclusively a ListItemSwitch with the badge rendered conditionally to the Switch element.

Unfortunately, we can't use this approach because a simple ListItem does not look like a ListItemSwitch without a badge. It has different styles for title and description. In this particular case, we want to have consistent styles between the different cases when we compose them on a single page.

So for me, extending the ListItemSwitch may be a viable option. Fortunately, we don't have to manage the pressed behavior for the entire block like other Selection components.

[CrisTofani]

lgtm

[dmnplb]

I'll approve it when the components are located in the right section of the example playground (under Selection, instead of List Items)

[Hantex9]

I'll approve it when the components are located in the right section of the example playground (under Selection, instead of List Items)

The suggested hint is already addressed into commit 71b2183 on Friday, please take a look at it

[dmnplb]

@Hantex9 My bad, I forgot to pull the latest updates 😅