[ButtonStateRole] Add New Role to Support Action Highlighting

[Jianhaos]

Hi,

According to Apple's design guidelines for Alerts, the action on the trailing side can/shall be highlighted. Currently, this can be done in vanilla SwiftUI by applying the .keyboardShortcut(.defaultAction) modifier to a Button:

actions: {
    Button("Secondary") {}
    Button("Primary") {}.keyboardShortcut(.defaultAction)
}

which is not supported in swift-navigation yet. Therefore, I propose a new ButtonStateRole, something like primary or highlight that indicates the preferred action on the trailing side. This is different from the cancel role because that is placed on the leading side.

[mbrandonw]

Hi @Jianhaos, I think this would be a good addition if you are interested in exploring it! I think we could follow a similar lead to how TextState supports a subset of modifiers. However, since keyboardShortcut returns some View (rather than Button), there will need to be some type erasure, but it shouldn't be too big of a deal. Want to try it out?

[Jianhaos]

Sounds good. I'll see if I can put something together.

[Jianhaos]

Hi @mbrandonw, as you mentioned earlier, keyboardShortcut returns some View which means we can't apply the view modifier in the initializer of Button. Does that mean we have to create a new type to return the modified view, like this?

Click to expand

@available(iOS 15, macOS 12, tvOS 15, watchOS 8, *)
public struct ModifiableButton<Action, Label>: View where Label : View {
  var state: ButtonState<Action>
  var action: @MainActor () -> Void
  
  public init(_ button: ButtonState<Action>, action: @escaping (Action?) -> Void) {
    self.state = button
    self.action = { button.withAction(action) }
  }
  
  public init(
    _ button: ButtonState<Action>,
    action: @escaping @Sendable (Action?) async -> Void
  ) {
    self.state = button
    self.action = { Task { await button.withAction(action) } }
  }

  public var body: some View {
    state.modifiers.reduce(AnyView(button)) { view, modifier in
      switch modifier {
      case let .keyboardShortcut(shortcut):
        return AnyView(view.keyboardShortcut(shortcut.toSwiftUI))
      }
    }
  }
  
  @ViewBuilder
  var button: some View {
    Button(
      role: state.role.map(ButtonRole.init),
      action: action
    ) {
      Text(state.label)
    }
  }
}

Did I miss anything?