[EmptyState] Remove legacy styles from empty state within page context

[szuchnik]

WHY are these changes introduced?

Empty state was not centering its components within page context, due to styles from before new design language still being applied. The repositioning of the image seems to be an echo of the time when EmptyState was laid out in two columns.

The image above is the previous state, below you can see how this component will look after the update.

Fixes #0000

WHAT is this pull request doing?

Remove condition applying styles from old design language and associated style rules. Add documentation for page context usecase.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 3 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/EmptyState/EmptyState.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/EmptyState/EmptyState.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/EmptyState/EmptyState.tsx

🧩 src/components/EmptyState/EmptyState.tsx (total: 0)

Files potentially affected (total: 0)

[kyledurand]

Overall I think these changes are good, but one important thing to note is that all empty states should be nested within cards if they're going onto a page. This is the new pattern after the new design language shipped.

I think the changes are worth making but I wouldn't include the story example because that's not a pattern we want to see start to emerge / deviate.

[szuchnik]

Overall I think these changes are good, but one important thing to note is that all empty states should be nested within cards if they're going onto a page. This is the new pattern after the new design language shipped.

I think the changes are worth making but I wouldn't include the story example because that's not a pattern we want to see start to emerge / deviate.

Example removed! The usage within page context is coming from outside of admin, hence the difference in design patterns :)

[kyledurand]

👏 Thanks @szuchnik !

[szuchnik]

/shipit

[github-actions]

size-limit report

Path	Size
cjs	141.85 KB (+0.01% 🔺)
esm	95.43 KB (-0.02% 🔽)
esnext	138.57 KB (-0.1% 🔽)
css	33.68 KB (-0.28% 🔽)

[szuchnik]

/shipit

[ghost]

🎉 Thanks for your contribution to Polaris React!