Skip to content

[Frame] Only add rounded styles when topBar exists #11925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 23, 2024
Merged

[Frame] Only add rounded styles when topBar exists #11925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f3acc67
Only add Frame styles when TopBar is present
sophschneider Apr 22, 2024
8f9865d
Add Frame stories
sophschneider Apr 22, 2024
56a9abb
Modified changeset message
sophschneider Apr 22, 2024
6dd9b0f
Update document check in setBodyStyles
sophschneider Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mean-kangaroos-move.md
View file
Open in desktop
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
View file
Open in desktop
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();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving changes from https://github.com/Shopify/polaris/pull/11846/files#diff-a7232fda7d9031ace7080a5155b4ddb352a1c6fdd5b75d0361a22b747f80be54 to Frame so I can conditionally apply based on the topBar prop.


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