Skip to content

Commit

Permalink
[Page] Fixed first child Header row misalignment (Shopify#9874)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Fixes the 1.5px vertical misalignment of `Page` title and actions due to
line height mismatch inherited from the body, which is 20px
(`--p-font-line-height-2`).

<img width="975" alt="Screenshot 2023-08-05 at 5 42 05 PM"
src="https://github.com/Shopify/polaris/assets/18447883/5edd8bba-bdf0-47be-9027-d0e65b85f1fc">


### WHAT is this pull request doing?

This PR sets line-height to normal on the row container so that the 24px
(`--p-font-line-height-3`) set on the Title container is respected.


[Spinstance](https://admin.web.page-title-alignment.chloe-rice.us.spin.dev/store/shop1/orders/6)

| Before | After |
|--------|--------|
|<img width="1242" alt="Screenshot 2023-08-02 at 12 32 51 PM"
src="https://github.com/Shopify/polaris/assets/18447883/03363b55-a2da-4d40-b4b3-c316eda739ff">
|<img width="1247" alt="Screenshot 2023-08-02 at 12 30 22 PM"
src="https://github.com/Shopify/polaris/assets/18447883/0adfee5b-c05e-440b-bc14-ee079c5bdec0">
|

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
  • Loading branch information
chloerice authored Aug 8, 2023
1 parent b5c267b commit b2fd93a
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/slow-dingos-tap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Fixed `Page` first `Header` row misalignment
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ $action-menu-rollup-computed-width: 40px;
.Row {
display: flex;
justify-content: space-between;
line-height: normal;

&:first-child {
min-height: 36px;
Expand Down

0 comments on commit b2fd93a

Please sign in to comment.