Skip to content

Commit

Permalink
[Frame] Only add rounded styles when topBar exists (#11925)
Browse files Browse the repository at this point in the history
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1598

### WHAT is this pull request doing?

Only applies rounded frame styles when the `Frame` component has a
`topBar` prop

### How to 🎩

For `WithoutATopBar`, make sure
[story](https://5d559397bae39100201eedc1-agsvebvhin.chromatic.com/?path=/story/all-components-frame--without-a-top-bar)
is the same with feature flag on and off

https://admin.web.web-81d9.sophie-schneider.us.spin.dev/store/shop1

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
  • Loading branch information
sophschneider authored Apr 23, 2024
1 parent 4365c83 commit 364ada5
Show file tree
Hide file tree
Showing 4 changed files with 421 additions and 97 deletions.
5 changes: 5 additions & 0 deletions .changeset/mean-kangaroos-move.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Updated Frame to only apply rounded Frame when passed a `topBar`
14 changes: 0 additions & 14 deletions polaris-react/src/components/AppProvider/AppProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,6 @@ export class AppProvider extends Component<AppProviderProps, State> {
const {i18n, linkComponent} = this.props;

this.setRootAttributes();
/* Temporary for dynamicTopBarAndReframe feature. Remove when feature flag is removed. */
this.setBodyStyles();

if (i18n === prevI18n && linkComponent === prevLinkComponent) {
return;
Expand All @@ -152,20 +150,8 @@ export class AppProvider extends Component<AppProviderProps, State> {
}

setBodyStyles = () => {
const {features} = this.props;

document.body.style.backgroundColor = 'var(--p-color-bg)';
document.body.style.color = 'var(--p-color-text)';

/* Temporary for dynamicTopBarAndReframe feature.
* Remove when feature flag is removed and apply
* styles directly to body in the global stylesheet.
*/
if (features?.dynamicTopBarAndReframe) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
};

setRootAttributes = () => {
Expand Down
Loading

0 comments on commit 364ada5

Please sign in to comment.