SkeletonPage Header content is not laid out as expected

[peterlazzarino]

Issue summary

When using SkeletonPage, the primaryAction and secondaryActions are not laid out in a way that's consistent with the Page component on a large screen.

Expected behavior

The SkeletonPage component should approximate the layout and content that will be displayed once loading is complete.

Page Header with one secondaryAction and primaryAction on desktop

Actual behavior

SkeletonPage Header with one secondaryAction and primaryAction on desktop

• secondaryAction displays on second row

• images illustrating that the primaryAction doesn't fit within the parent and results in content that is not vertically aligned as it is with Page

Steps to reproduce the problem

See difference in code sandbox below.

Reduced test case

Skeleton Page
Page

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 8.2.2
• Browser: Chrome
• Device: M1 Mac
• Operating System: OSX

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

[kyledurand]

The secondaryActions prop was deprecated and removed in v9: #4742

For now I'd recommend removing the prop on your loading page since it's not very useful.

I'm going to leave this issue open and add to it. The title / primary action don't collapse elegantly: