WrappingHStack icon indicating copy to clipboard operation
WrappingHStack copied to clipboard

Doesn't respect `Group` view

Open au5ton opened this issue 2 years ago • 1 comments

Describe the bug WrappingHStack treats the Group view as one view instead of its children.

To Reproduce Steps to reproduce the behavior:

  • Note: In the code below, .padding(...) is used because of:
    • #17
// Code to reproduce bug
WrappingHStack {
  Group {
    Text("\(Image(systemName: "bag"))  Limit 1")
      .padding(.top, 5)
      .border(.red)
    Text("\(Image(systemName: "gearshape.2"))  Automatically used")
      .padding(.top, 5)
      .border(.red)
    Text("\(Image(systemName: "exclamationmark.circle"))  Sold out")
      .foregroundColor(Color.red)
      .padding(.top, 5)
      .border(.red)
  }
  .font(.system(size: 14, weight: .semibold))
  .foregroundColor(.secondary)
  .lineLimit(1)
  .border(.blue)
}

Spacer()

// Workaround (not bugged)
WrappingHStack(alignment: .trailing) {
  Text("\(Image(systemName: "bag"))  Limit 1")
    .padding(.top, 5)
    .border(.red)
  Text("\(Image(systemName: "gearshape.2"))  Automatically used")
    .padding(.top, 5)
    .border(.red)
  Text("\(Image(systemName: "exclamationmark.circle"))  Sold out")
    .foregroundColor(Color.red)
    .padding(.top, 5)
    .border(.red)
}
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.secondary)
.lineLimit(1)
.border(.blue)

Expected behavior WrappingHStack would treat individual Text views as separate elements and provide spacing between them.

Screenshots Screenshot of code above:

Simulator Screen Shot - iPhone SE (2nd generation) - 2022-05-19 at 17 16 11 copy

Context:

  • WrappingHStack version: 2.2.1
  • Model: iPhone SE (2020) (simulator)
  • OS: iOS15.2

Additional context

I understand that is a very quirky and specific edge case, but I thought I should report it just in case. I really wish Apple provided a native view for this. Coming from a web background, it seems really odd that iOS doesn't have something as comprehensive as CSS's flexbox.

Thank you for making this project! This package is such a lifesaver.

au5ton avatar May 19 '22 22:05 au5ton