feat(progress)!: alter visual expression of Progress component

[HaakonSvane]

• switch internal Progress component workings to sub-dir structure and context for passing information
• remove title prop on Progress
• adjust description on Progress.Item to accept either a string or a method that takes in relevant arguments
• remove internal console error on failed tasks
• rework the Progress Screen in MAD Chronicles
• update UI of the Progress and Progress Item components

closes #679

[changeset-bot]

🦋 Changeset detected

Latest commit: cc8d463

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@equinor/mad-components	Minor
@equinor/mad-chronicles	Patch
@equinor/mad-auth	Patch
@equinor/mad-core	Patch
@equinor/mad-dfw	Patch
@equinor/react-native-mad-tag-ocr	Patch
@equinor/react-native-skia-draw	Patch
@equinor/mad-toast	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Jonas-Omdal]

Minor thing:
Pressing the simulation buttons in the upload simulator affects the progress item above.

[Jonas-Omdal]

The CircularProgress is bigger in size compared to the other status icons. Is this intended?

[Jonas-Omdal]

A bit cramped between the "show more" button and the description on smaler devices

[Jonas-Omdal]

The "Show more" button is not aligned with the title. Also, would it be better if the description reached the end of the show more button?

[Jonas-Omdal]

Tested on web, iPhone, and iPad. Found a few visual issues, but the code looks clean and well implemented! ✨😎

[HaakonSvane]

@Jonas-Omdal I fixed the alignment issue and the spacing between the show more button and the description on smaller devices.

Regarding the size of the indicator, these have the same size in terms of total space, but are slightly different in apparent height since the circular progress stretches out completely in its container while the icons have some padding applied to them from the icon library. If I change these, the UI would stutter a little bit when they change since the total size of the icon would change based on its content. I suggest we keep it like this to avoid this, but I am open to change it if you don't like it.

The issue regarding the failed task opening again when pressing the simulator button is something I believe has existed before this PR as well, its just that we have never shown a failed progress item with tasks on the screen like this before. I think it has to do with the logic that determines that the task should open. I can fix it as part of this PR if you see it fit, or we can create a new issue. Completely up to you 💯

[Jonas-Omdal]

@Jonas-Omdal I fixed the alignment issue and the spacing between the show more button and the description on smaller devices.

Regarding the size of the indicator, these have the same size in terms of total space, but are slightly different in apparent height since the circular progress stretches out completely in its container while the icons have some padding applied to them from the icon library. If I change these, the UI would stutter a little bit when they change since the total size of the icon would change based on its content. I suggest we keep it like this to avoid this, but I am open to change it if you don't like it.

The issue regarding the failed task opening again when pressing the simulator button is something I believe has existed before this PR as well, its just that we have never shown a failed progress item with tasks on the screen like this before. I think it has to do with the logic that determines that the task should open. I can fix it as part of this PR if you see it fit, or we can create a new issue. Completely up to you 💯

Nice! Let’s keep the indicator size as it is 😁 The layout of the progress screen have been quite adjusted now. There might have been a similar issue like this before, however we now have 3 progress task items. The first progress task is shown is an example of how this component is suppose to look like. This is also shown outside of simulator area. Pressing simulator buttons should not affect this. Would be nice if you could address it in this issue.

[HaakonSvane]

@Jonas-Omdal Will do!

[HaakonSvane]

@Jonas-Omdal Works now

[Jonas-Omdal]

The alignment issue does not seem to be fixed.

Without using the description prop on the Progress.Item it looks fine.

But if i add a description it seems like the show more / less button is aligned with the description text instead of the title.

Skjermopptak.2024-11-22.kl.14.09.10.mov

[Jonas-Omdal]

Clean stuff. Work great now! 😎