IOS-9146: BottomSheet actions #299

WanaldinoTelefonica · 2023-08-17T08:59:40Z

🎟️ Jira ticket

IOS-9146

🥅 What's the goal?

We need to include a new type of sheet: Actions
This new category means renaming the current "Actions" to "Action List".
We also took the opportunity to include a small restyling in this component (for better visualization you can see these updates marked in red in the specifications within anatomy and text) but they are the following:
- Title -> text-preset-5
- Subtitle -> text-preset-3
- Draggable area height -> 32px
- The padding between the text content and the interactive content becomes 8px.
- Action height in Action list type -> 72px

🚧 How do we do it?

Rename action into actionlist for all models
Create a new model for new actions
Update some styles

🧪 How can I verify this?

🏑 AppCenter build

https://install.appcenter.ms/orgs/tuenti-organization/apps/mistica-swiftui-ios/distribution_groups/public/releases/26

amegias · 2023-08-18T08:58:22Z

MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogSheetViewController.swift

+                    ActionItem(
+                        id: UUID().uuidString,
+                        style: .primary,
+                        title: "Primary Button"
+                    )


I would add a secondary and a link actions to have a complete example. WDYT?

Ok. I'll add it for a better testing

amegias · 2023-08-18T08:59:17Z

Sources/Mistica/Components/Sheet/Model/SheetConfiguration.swift

        case .singleSelection:
            return false
+        case .actionList:
+            return false
        case .actions:
            return false


maybe we can merge those cases which return false like:
case .a, .b, ...:
return false

amegias · 2023-08-18T09:03:22Z

Tests/MisticaTests/UI/SheetTests.swift

+
+    // MARK: Actions
+
+    func testAction() {


I would replace this test with:

Test with all actions (primary, secondary and link [no matter if it has or not chevron since it belongs to the link component])

Test with min actions (primary)

more realistic, wdyt?

amegias · 2023-08-18T09:04:41Z

Tests/MisticaTests/UI/SheetTests.swift

+    // MARK: Actions
+
+    func testAction() {
+        assertSnapshotForAllBrandsAndStyles(


do we need to test it in all of our brands? I would avoid it since it generates a lot of snapshots and only the palette changes :/ (which is not a good place to test it IMO)

amegias · 2023-08-18T09:06:16Z

Tests/MisticaTests/UI/SheetTests.swift

@@ -189,26 +189,40 @@ final class SheetTests: XCTestCase {

    // MARK: Action list type

-    func testActionWithoutUrls() {
+    func testActionListWithoutUrls() {
        assertSnapshotForAllBrandsAndStyles(


as I commented below, I think we don't need to test it in every brand. We can save a lot of snapshots which tests other system (color palettes). WDYT?

This is just a rename of an old test to match with the correct naming

github-actions · 2023-08-18T09:29:02Z

Screenshot tests report

✔️ All passing

DavidMarinCalleja · 2023-08-18T09:41:48Z

Tests/MisticaTests/UI/__Snapshots__/SheetTests/testSingleAction.1.png

there are two weird vertical lines around the button. Is it expected?

Yes as it comes from the Button component that shows like that. Maybe is something only happens on screenshots

yes, it's something weird that @idenjoe already faced 🤔

I have created a new JIRA task for this.

DavidMarinCalleja · 2023-08-18T09:56:09Z

Tests/MisticaTests/UI/__Snapshots__/SheetTests/testActions.1.png

these files also have a vertical line around the buttons

DavidMarinCalleja

check why there are some vertical lines that appear in some screenshots:

yceballost · 2023-08-22T21:41:12Z

Missing designers in this PR! And please, generate a new version for Mística Catalog for test the new component

AnaMontes11 · 2023-08-30T12:49:06Z

Tests/MisticaTests/UI/SheetTests.swift

+                id: UUID().uuidString,
+                style: .link,
+                title: "Link action",
+                rightImage: .chevron


By default, the chevron wouldn't be displayed on the sheet link, as the sheet typically performs actions. Following the guideline of "if it's an action, it doesn't have a chevron; if it's navigation, it has a chevron," the chevron on the sheet will be used only on rare occasions.

This file only for test purpose. Link button can be configured with or without chevron. By default Link style on buttons don't show any chevron. Check those links: Default right image, Default link style and Default link inverse style

AnaMontes11

Nice job!

Already handled in an other task

# [26.0.0](v25.4.0...v26.0.0) (2023-08-31) ### Bug Fixes * **BottomSheet:** Changed SVG coder ([#296](#296)) ([4480d47](4480d47)) * **Checkbox:** set color for filling and rounded border ([#297](#297)) ([076343d](076343d)) * IOS-9146: BottomSheet actions (#299) ([e380ecc](e380ecc)), closes [#299](#299) ### Features * **BottomSheet:** Added SVG image format support. ([#293](#293)) ([fe71624](fe71624)) * **Button:** iOS-9080 button chevron ([977b1d9](977b1d9)) ### BREAKING CHANGES * Action type has been renamed as ActionList. To use the previous actions(items: [ActionItem]) rename the case in your project as actionList(items: [ActionListItem]). Also ActionItem has been renamed as ActionListItem.

tuentisre · 2023-08-31T11:24:29Z

🎉 This PR is included in version 26.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

WanaldinoTelefonica self-assigned this Aug 17, 2023

WanaldinoTelefonica added 4 commits August 18, 2023 10:44

feat(BottomSheet): Rename Action into ActionList

56ef693

feat(BottomSheet): Add button actions

12c89a2

feat(BottomSheet): Update styling

b490aeb

feat(BottomSheet): Update tests

847decc

WanaldinoTelefonica force-pushed the IOS-9146-BottomSheet-actions branch from 73eb260 to 847decc Compare August 18, 2023 08:48

WanaldinoTelefonica requested review from DavidMarinCalleja and amegias August 18, 2023 08:49

amegias reviewed Aug 18, 2023

View reviewed changes

feat(BottomSheet): Added more actions on catalog

502e486

amegias approved these changes Aug 18, 2023

View reviewed changes

IOS-9146: Merge cases for informative types

6b2fac7

IOS-9146: Update tests

515c972

WanaldinoTelefonica force-pushed the IOS-9146-BottomSheet-actions branch from dacf632 to 515c972 Compare August 18, 2023 09:39

DavidMarinCalleja reviewed Aug 18, 2023

View reviewed changes

DavidMarinCalleja previously requested changes Aug 18, 2023

View reviewed changes

WanaldinoTelefonica requested review from a team and AnaMontes11 and removed request for a team August 29, 2023 08:36

AnaMontes11 requested changes Aug 30, 2023

View reviewed changes

WanaldinoTelefonica and others added 2 commits August 30, 2023 16:03

IOS-9146: Add more catalog options

59d79ba

Run swiftformat

8dce393

AnaMontes11 approved these changes Aug 31, 2023

View reviewed changes

WanaldinoTelefonica merged commit e380ecc into main Aug 31, 2023
1 check passed

WanaldinoTelefonica deleted the IOS-9146-BottomSheet-actions branch August 31, 2023 11:21

tuentisre added the released label Aug 31, 2023

yceballost restored the IOS-9146-BottomSheet-actions branch October 25, 2023 09:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IOS-9146: BottomSheet actions #299

IOS-9146: BottomSheet actions #299

WanaldinoTelefonica commented Aug 17, 2023 •

edited

Loading

amegias Aug 18, 2023

WanaldinoTelefonica Aug 18, 2023

amegias Aug 18, 2023

amegias Aug 18, 2023

amegias Aug 18, 2023

amegias Aug 18, 2023

WanaldinoTelefonica Aug 18, 2023

github-actions bot commented Aug 18, 2023 •

edited

Loading

DavidMarinCalleja Aug 18, 2023

WanaldinoTelefonica Aug 18, 2023

amegias Aug 18, 2023

WanaldinoTelefonica Aug 30, 2023

DavidMarinCalleja Aug 18, 2023

DavidMarinCalleja left a comment

yceballost commented Aug 22, 2023

AnaMontes11 Aug 30, 2023

WanaldinoTelefonica Aug 30, 2023

AnaMontes11 left a comment

tuentisre commented Aug 31, 2023

IOS-9146: BottomSheet actions #299

IOS-9146: BottomSheet actions #299

Conversation

WanaldinoTelefonica commented Aug 17, 2023 • edited Loading

🎟️ Jira ticket

🥅 What's the goal?

🚧 How do we do it?

🧪 How can I verify this?

🏑 AppCenter build

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DavidMarinCalleja left a comment

Choose a reason for hiding this comment

yceballost commented Aug 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AnaMontes11 left a comment

Choose a reason for hiding this comment

tuentisre commented Aug 31, 2023

WanaldinoTelefonica commented Aug 17, 2023 •

edited

Loading

github-actions bot commented Aug 18, 2023 •

edited

Loading