Skip to content

Commit db951f8

Browse files
authored
[Page] Fix subtitle not displaying if it's the only prop set (#7577)
<!-- ☝️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 - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? If a <Page> component only has subtitle has a property, the `hasHeaderContent` check will return false and no header will be rendered. This is especially valuable for Shopify Apps, where we will use the page component to wrap our page, but will not make use of the `title` props of the page, and instead leverage app-bridge's [`TitleBar`](https://shopify.dev/apps/tools/app-bridge/actions/titlebar) ### WHAT is this pull request doing? - Add a check for the existence of `subtitle` for defining `hasHeaderContent` in `Page.tsx` - Amend the unit test to reflect that the subtitle should render, even if it's the only prop ### 🎩 checklist - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 3652eb9 commit db951f8

File tree

3 files changed

+7
-1
lines changed

3 files changed

+7
-1
lines changed

.changeset/curvy-cats-burn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Page component: display subtitle even when it's the only header prop set

polaris-react/src/components/Page/Page.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export function Page({
3333

3434
const hasHeaderContent =
3535
(rest.title != null && rest.title !== '') ||
36+
(rest.subtitle != null && rest.subtitle !== '') ||
3637
rest.primaryAction != null ||
3738
(rest.secondaryActions != null &&
3839
((isInterface(rest.secondaryActions) &&

polaris-react/src/components/Page/tests/Page.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('<Page />', () => {
5858
describe('subtitle', () => {
5959
it('gets passed into the <Header />', () => {
6060
const subtitle = 'Subtitle';
61-
const page = mountWithApp(<Page {...mockProps} subtitle={subtitle} />);
61+
const page = mountWithApp(<Page subtitle={subtitle} />);
6262
expect(page).toContainReactComponent(Header, {
6363
subtitle,
6464
});

0 commit comments

Comments
 (0)