Skip to content

Commit

Permalink
Merge pull request #707 from kiwicom/706-illustration-does-not-respec…
Browse files Browse the repository at this point in the history 
…t-frame-alignment

Illustration does not respect frame alignment
  • Loading branch information
@PavelHolec
PavelHolec authored Oct 25, 2023
2 parents eab119f + d07625e commit 0e566e3
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 25 deletions.
Binary file modified Snapshots/iPad/IllustrationTests/testIllustrations.1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified Snapshots/iPhone/IllustrationTests/testIllustrations.1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 15 additions & 15 deletions Sources/OrbitIllustrations/Components/Illustration.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ public struct Illustration: View {
public var body: some View {
if name.isEmpty == false {
switch layout {
case .frame(let maxHeight, let alignment):
case .frame(let height, let alignment):
resizeableImage
.frame(maxHeight: maxHeight)
.frame(height: height)
.frame(maxWidth: idealSize.horizontal == true ? nil : .infinity, alignment: .init(alignment))
.fixedSize(horizontal: false, vertical: true)
case .resizeable:
Expand Down Expand Up @@ -82,12 +82,12 @@ public extension Illustration {
/// Illustration layout specifies how the illustration is resized and (optionally) horizontally aligned.
enum Layout {

/// Default maximal illustration height using frame layout.
public static let maxHeight: CGFloat = 200
/// Default illustration height when using frame layout.
public static let height: CGFloat = 200

/// Positions illustration, first scaled to fit the optional maxHeight, in a horizontally expanding frame with specified alignment.
/// Positions illustration, first scaled to fit the height, in a horizontally expanding frame with specified alignment.
case frame(
maxHeight: CGFloat = maxHeight,
height: CGFloat = height,
alignment: HorizontalAlignment = .center
)
/// Applies `resizable` and `scaledToFit` modifiers to allow free resizing.
Expand Down Expand Up @@ -125,7 +125,7 @@ struct IllustrationPreviews: PreviewProvider {
}

static var customResource: some View {
Illustration("WomanWithPhone", bundle: .orbit, layout: .intrinsic)
Illustration("WomanWithPhone", bundle: .orbitIllustrations, layout: .intrinsic)
.previewDisplayName()
}

Expand All @@ -148,22 +148,22 @@ struct IllustrationPreviews: PreviewProvider {
.border(.cloudNormal)
}

Card("MaxHeight = 80", showBorder: false) {
Card("Height = 80", showBorder: false) {
VStack {
Text("Frame - Center (default)")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80))
Illustration(.womanWithPhone, layout: .frame(height: 80))
.border(.cloudNormal)
}

VStack {
Text("Frame - Leading")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80, alignment: .leading))
Illustration(.womanWithPhone, layout: .frame(height: 80, alignment: .leading))
.border(.cloudNormal)
}

VStack {
Text("Frame - Trailing")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80, alignment: .trailing))
Illustration(.womanWithPhone, layout: .frame(height: 80, alignment: .trailing))
.border(.cloudNormal)
}

Expand All @@ -175,17 +175,17 @@ struct IllustrationPreviews: PreviewProvider {
}
}

Card("MaxHeight = 30", showBorder: false) {
Card("Height = 30", showBorder: false) {
HStack {
VStack(alignment: .leading) {
Text("Leading")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30, alignment: .leading))
Illustration(.womanWithPhone, layout: .frame(height: 30, alignment: .leading))
.border(.cloudNormal)
}

VStack(alignment: .leading) {
Text("Center")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30))
Illustration(.womanWithPhone, layout: .frame(height: 30))
.border(.cloudNormal)
}

Expand All @@ -198,7 +198,7 @@ struct IllustrationPreviews: PreviewProvider {

VStack(alignment: .leading) {
Text("Trailing")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30, alignment: .trailing))
Illustration(.womanWithPhone, layout: .frame(height: 30, alignment: .trailing))
.border(.cloudNormal)
}
}
Expand Down
2 changes: 1 addition & 1 deletion Sources/OrbitIllustrations/Extensions/Dialog+Illustration.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ public extension Dialog {
@ButtonStackBuilder buttons: () -> Buttons
) where Illustration == OrbitIllustrations.Illustration {
self.init(title, description: description, content: content, buttons: buttons) {
Illustration(illustration, layout: .frame(maxHeight: 120, alignment: .leading))
Illustration(illustration, layout: .frame(height: 120, alignment: .leading))
}
}
}
2 changes: 1 addition & 1 deletion Sources/OrbitIllustrations/Extensions/EmptyState+Illustration.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ public extension EmptyState {
@ButtonStackBuilder buttons: () -> Buttons
) where Illustration == OrbitIllustrations.Illustration {
self.init(title, description: description, content: content, buttons: buttons) {
Illustration(illustration, layout: .frame(maxHeight: 160))
Illustration(illustration, layout: .frame(height: 160))
}
}

Expand Down
16 changes: 8 additions & 8 deletions Sources/OrbitStorybook/Detail/Items/StorybookIllustration.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,22 @@ struct StorybookIllustration {
.border(.cloudNormal)
}

Card("MaxHeight = 80", showBorder: false) {
Card("height = 80", showBorder: false) {
VStack {
Text("Frame - Center (default)")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80))
Illustration(.womanWithPhone, layout: .frame(height: 80))
.border(.cloudNormal)
}

VStack {
Text("Frame - Leading")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80, alignment: .leading))
Illustration(.womanWithPhone, layout: .frame(height: 80, alignment: .leading))
.border(.cloudNormal)
}

VStack {
Text("Frame - Trailing")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 80, alignment: .trailing))
Illustration(.womanWithPhone, layout: .frame(height: 80, alignment: .trailing))
.border(.cloudNormal)
}

Expand All @@ -38,17 +38,17 @@ struct StorybookIllustration {
}
}

Card("MaxHeight = 30", showBorder: false) {
Card("height = 30", showBorder: false) {
HStack {
VStack(alignment: .leading) {
Text("Leading")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30, alignment: .leading))
Illustration(.womanWithPhone, layout: .frame(height: 30, alignment: .leading))
.border(.cloudNormal)
}

VStack(alignment: .leading) {
Text("Center")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30))
Illustration(.womanWithPhone, layout: .frame(height: 30))
.border(.cloudNormal)
}

Expand All @@ -61,7 +61,7 @@ struct StorybookIllustration {

VStack(alignment: .leading) {
Text("Trailing")
Illustration(.womanWithPhone, layout: .frame(maxHeight: 30, alignment: .trailing))
Illustration(.womanWithPhone, layout: .frame(height: 30, alignment: .trailing))
.border(.cloudNormal)
}
}
Expand Down

0 comments on commit 0e566e3

Please sign in to comment.