Polaris-react: [Card] Misalignment between title and action button

[jim-chou-shopify]

Issue summary

Title of Card appears to be misaligned when Button is a child of Card.Header.

<Card.Header title="Title">
 <Button>
</Card.Header>

Expected behavior

Expect title and button to appear aligned.

Actual behavior

Reduced test case

https://codesandbox.io/s/zwoxr5l0xl

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: @shopify/polaris: 3.6.0
• Browser: Chrome
• Device: Laptop
• Operating System: Mac

[dpersing]

@ry5n and @sarahill, this issue appears to be closely aligned (pun intended) with #977.

[chloerice]

@ry5n and @sarahill, this issue appears to be closely aligned (pun intended) with #977.

I'm not sure in this case that there's anything the component should do here. Since the header accepts a React node, I think it's up to the consumer to space/align the children they provide as they see fit, because the header can't anticipate what its children will be.

[ry5n]

I’m kind of surprised that Card.Header takes a title prop at all, since I assumed it was an escape hatch for taking control of the header layout. I would have expected I’d need to include my own Heading, which would let me control its alignment with any actions. However, even if I don’t pass a title, Card.Header renders its markup anyway (A Stack with an empty Heading).

This is maybe where we can improve things.

[chloerice]

^ This

[probot-shopify[bot]]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[meandillar]

I'm having the same problem when using SkeletonDisplayText component for the title while loading.

For anyone else wanting a quick fix:

.Polaris-Card__Header .Polaris-Stack {
  align-items: center;
}