search

SAP / cloud-sdk-ios-fiori

SwiftUI implementation of the SAP Fiori for iOS Design Language.
https://sap.github.io/cloud-sdk-ios-fiori
Apache License 2.0
109 stars 57 forks source link

feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-2702]Illustrated Message Enhancement #772

Closed xiaoqinggrace closed 2 months ago

billzhou0223 commented 2 months ago

@JuliaSchnSAP Can you help do a review given your experiences for this component?

JuliaSchnSAP commented 2 months ago

In the mixed layout without setting any of the other parameters, the text is center-aligned if only a title is shown but it is left-aligned if there is also a description

image image

xiaoqinggrace commented 2 months ago

@JuliaSchnSAP In the two use cases of mixed mode shown in the screenshot, the title and description are all leading alignment. It is the the default setting. I could not find the center alignment case in this setting.

JuliaSchnSAP commented 2 months ago

When the layout axis is unset, the button is full width by default, but when it is set to a vertical layout the button has a fixed size by default. Was this part of the design spec?

Old version of code - unset layout axis image

PR - unset layout axis image

PR - vertical layout image

JuliaSchnSAP commented 2 months ago

@JuliaSchnSAP In the two use cases of mixed mode shown in the screenshot, the title and description are all leading alignment. It is the the default setting. I could not find the center alignment case in this setting.

I think the text is being centered even though you didn't intend to do so. I actually noticed the description also has a center alignment if the view's width is large enough. It might be because the outermost VStack doesn't have an alignment set so it defaults to center alignment. Here is another screenshot of the mixed layout with a larger width:

image

xiaoqinggrace commented 2 months ago

As for the vertical style case, the fixed width button is by default when the .vertical style applied. It is the new update in the current spec. As for the mix style case, the leading alignment is by default for the title and description in its container. In most cases, the image will be shown on the left, the title and description are leading aligned. The illustrated message view is central aligned in the container. The last screenshot is the special case for the mix style.