Skip to content

[Frame] Fix min-height for iOS browsers (#8590) #8596

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

Jump to bottom
Merged
merged 1 commit into from
Apr 12, 2023
Merged

[Frame] Fix min-height for iOS browsers (#8590) #8596

merged 1 commit into from
Apr 12, 2023

Conversation

@brendanrygus
Copy link
Contributor

@brendanrygus brendanrygus commented Mar 8, 2023 •
edited
Loading

WHY are these changes introduced?

Fixes #8590
Prevent Frame component from unnecessarily overflowing the viewport height in mobile browsers.

The current behaviour introduces bugs in apps embedded in Shopify, as the app iframe is loaded into an incorrectly sized container. Context:

WHAT is this pull request doing?

Updates the Frame component to fill only the available viewport height for mobile browsers with dynamic browser chrome, using the 100svh (small viewport height) dynamic viewport units.

  • The Frame's minimum height will no longer overflow the page by including the browser chrome in the 100vh min-height. It will adjust it's minimum height based on the dynamic size of the usable viewport space.
  • For desktop browsers without dynamic chrome, the min-height should behave the same as today.
  • For older browsers where dynamic viewport units are not yet supported, we will fallback to the existing 100vh.

See Codesandbox examples:

Expand iOS screenshots

Before
Bottom content is cut off:
Before the fix is applied, the footer is entirely outside of the viewport

Bottom content is visible only on scroll:
Before the fix is applied, the page must be scrolled to see content outside of the viewport

After
After the fix is applied, all content is viewable in the mobile viewport

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Tophatted using Web and SFN app on mobile Spin.

🎩 checklist

  • Chrome latest
  • FF latest
  • Safari latest
  • Edge
  • iPhone (5/SE/X) (10+) Safari Mobile
  • iPad (10+) Safari Mobile
  • Android device (5.x) Chrome Will need assistance with this one
  • Tested for accessibility
  • Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide

@brendanrygus brendanrygus force-pushed the fix/frame-ios-height branch from 6749033 to a2cff7d Compare March 8, 2023 17:12
@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 239.32 KB (0%)
polaris-react-esm 156.45 KB (0%)
polaris-react-esnext 218.65 KB (+0.01% 🔺)
polaris-react-css 47.23 KB (+0.02% 🔺)

@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 8, 2023

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2023

🫰✨ Thanks @brendanrygus! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230308211022
yarn add @shopify/polaris@0.0.0-snapshot-release-20230308211022

@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 8, 2023

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2023

🫰✨ Thanks @brendanrygus! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230308213241
yarn add @shopify/polaris@0.0.0-snapshot-release-20230308213241

@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 8, 2023 •
edited
Loading

Branch with the snapshot package for testing:
https://admin.web.fbs-4e68.brendan-rygus.us.spin.dev/store/shop1/apps/shopify-fulfillment-dev-local/inventory/add_products

@brendanrygus brendanrygus force-pushed the fix/frame-ios-height branch from 01761ad to 691b4fb Compare March 23, 2023 22:25
@brendanrygus brendanrygus self-assigned this Mar 23, 2023
@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 23, 2023

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

🫰✨ Thanks @brendanrygus! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230323224927
yarn add @shopify/polaris@0.0.0-snapshot-release-20230323224927

@brendanrygus brendanrygus changed the title [WIP][Frame] Fix min-height for iOS browsers (#8590) [Frame] Fix min-height for iOS browsers (#8590) Mar 24, 2023
@brendanrygus brendanrygus marked this pull request as ready for review March 24, 2023 16:22
@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 24, 2023

@angeloocana When you have some time, could you test this branch on your Android Chrome?
https://admin.web.fbs-4e68.brendan-rygus.us.spin.dev/store/shop1/apps/shopify-fulfillment-dev-local/inventory/add_products

@brendanrygus
Copy link
Contributor Author

brendanrygus commented Mar 24, 2023 •
edited
Loading

Confirmed that this Polaris branch fixes our issue in SFN fullscreen flows. The red debug border traces the size of the app frame, which was previously overflowing the viewport:

Expand SFN iOS screenshots ![Add Products](https://user-images.githubusercontent.com/428636/227584409-a61e91b1-db43-4d31-8414-cdf0eea32e22.png)

Create Transfer

@brendanrygus brendanrygus requested a review from chloerice March 24, 2023 16:28
chloerice
chloerice approved these changes Apr 4, 2023
View reviewed changes
Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

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

Tophat looks great on iPad :shipit:

@chloerice chloerice requested a review from a team April 4, 2023 21:53
chloerice
chloerice reviewed Apr 4, 2023
View reviewed changes
polaris-react/src/components/Frame/Frame.scss
Comment on lines 7 to +8
min-height: 100vh;
min-height: 100svh; // For mobile browsers, fill the screen taking into account dynamic browser chrome

This comment was marked as resolved.

Sign in to view

Copy link
Member

@chloerice chloerice Apr 4, 2023

Choose a reason for hiding this comment

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

(Ah ignore me, dvh is too unstable)

@chloerice chloerice requested a review from a team April 5, 2023 01:21
@brendanrygus brendanrygus force-pushed the fix/frame-ios-height branch from 691b4fb to fec1a12 Compare April 6, 2023 15:14
@brendanrygus
Copy link
Contributor Author

brendanrygus commented Apr 6, 2023

Looks like CI is acting up - failing the size limit and migrator CSS checks after changing one line (and no migration comments).

@sam-b-rose sam-b-rose force-pushed the fix/frame-ios-height branch from fec1a12 to 3e5847a Compare April 6, 2023 18:56
@chloerice
Copy link
Member

chloerice commented Apr 7, 2023

Looks like CI is acting up - failing the size limit and migrator CSS checks after changing one line (and no migration comments).

Yeah the check is really flaky right now, so we've made it not required. You can ship :shipit:

@brendanrygus brendanrygus merged commit 421bb49 into main Apr 12, 2023
@brendanrygus brendanrygus deleted the fix/frame-ios-height branch April 12, 2023 14:44
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Apr 12, 2023
Merged
chloerice pushed a commit that referenced this pull request Apr 17, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8929)
5a04ca1 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.0.0

### Major Changes

- [#8919](#8919)
[`7349d4108`](7349d41)
Thanks [@skparkk](https://github.com/skparkk)! - Added new keyboard
major + minor icons

### Minor Changes

- [#8924](#8924)
[`4880e3ed7`](4880e3e)
Thanks [@Tal87](https://github.com/tal87)! - Added PersonalizedTextMajor
icon


- [#8861](#8861)
[`2bc90503d`](2bc9050)
Thanks [@AlejandroE](https://github.com/AlejandroE)! - Added
ExploreImagesMajor

## @shopify/stylelint-polaris@10.0.0

### Major Changes

- [#8973](#8973)
[`f1a3ad756`](f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [#8455](#8455)
[`80eb3ac55`](80eb3ac)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

### Minor Changes

- [#8968](#8968)
[`dbe68efb4`](dbe68ef)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
`custom-property-disallowed-list` rule

## @shopify/polaris@10.44.0

### Minor Changes

- [#8936](#8936)
[`a2c9b1d24`](a2c9b1d)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed Inline to
HorizontalStack


- [#8773](#8773)
[`e8c5a2243`](e8c5a22)
Thanks [@stefanlegg](https://github.com/stefanlegg)! - - Added an
optional `onSpinnerChange` prop to`TextField`
    -   Added an optional `largeStep` prop to `TextField`
- Added `TextField` `Spinner` keypress interactions for Home, End, Page
Up, Page Down


- [#8876](#8876)
[`090d09683`](090d096)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [#8973](#8973)
[`f1a3ad756`](f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [#8937](#8937)
[`fcc543928`](fcc5439)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed `Columns`
to `HorizontalGrid`


- [#8938](#8938)
[`289dce569`](289dce5)
Thanks [@alex-page](https://github.com/alex-page)! - Remove deprecation
from `Grid` component


- [#8935](#8935)
[`7f3053342`](7f30533)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [#8596](#8596)
[`421bb49dc`](421bb49)
Thanks [@brendanrygus](https://github.com/brendanrygus)! - [Frame] Fix
minimum height overflowing in iOS Webkit browsers


- [#8953](#8953)
[`500eed660`](500eed6)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - - Added
`customActivator` prop to `TopBar.UserMenu`
- Added support for setting a `ReactNode` on `ActionList` `Section`
`title`

### Patch Changes

- [#8842](#8842)
[`bd64fa583`](bd64fa5)
Thanks [@martenbjork](https://github.com/martenbjork)! - Removed the
Exiting animation state from Popovers, causing them to close immediately
instead of after a 100ms delay.


- [#8913](#8913)
[`261355f07`](261355f)
Thanks [@mrcthms](https://github.com/mrcthms)! - Tweaked the vertical
alignment of elements within the `AlphaFilters` component


- [#8954](#8954)
[`f9366c22d`](f9366c2)
Thanks [@laurkim](https://github.com/laurkim)! - Updated custom property
names to align with new component names for `HorizontalGrid`,
`HorizontalStack`, and `VerticalStack`


- [#8912](#8912)
[`1cc47495a`](1cc4749)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `BulkActions`
to include wrapping tooltip on Popover activator

- Updated dependencies
\[[`4880e3ed7`](4880e3e),
[`7349d4108`](7349d41),
[`2bc90503d`](2bc9050)]:
    -   @shopify/polaris-icons@7.0.0

## @shopify/polaris-cli@0.1.28

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.17.2

## @shopify/polaris-codemods@0.0.3

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](f1a3ad7),
[`80eb3ac55`](80eb3ac),
[`dbe68efb4`](dbe68ef)]:
    -   @shopify/stylelint-polaris@10.0.0

## @shopify/polaris-migrator@0.17.2

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](f1a3ad7),
[`80eb3ac55`](80eb3ac),
[`dbe68efb4`](dbe68ef)]:
    -   @shopify/stylelint-polaris@10.0.0

## polaris.shopify.com@0.49.0

### Minor Changes

- [#8876](#8876)
[`090d09683`](090d096)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [#8973](#8973)
[`f1a3ad756`](f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [#8967](#8967)
[`45d978e7b`](45d978e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a version
matchup table to `stylelint-polaris` documentation


- [#8986](#8986)
[`f70f586ee`](f70f586)
Thanks [@laurkim](https://github.com/laurkim)! - Added documentation for
the `react-rename-component` codemod


- [#8935](#8935)
[`7f3053342`](7f30533)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [#8920](#8920)
[`2bad4e305`](2bad4e3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added copy button
to markdown headings with ids

### Patch Changes

- [#8915](#8915)
[`c8a130caf`](c8a130c)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added
scroll-margin-top to anchor links to prevent top bar overlay


- [#8455](#8455)
[`80eb3ac55`](80eb3ac)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

- Updated dependencies
\[[`a2c9b1d24`](a2c9b1d),
[`e8c5a2243`](e8c5a22),
[`090d09683`](090d096),
[`bd64fa583`](bd64fa5),
[`f1a3ad756`](f1a3ad7),
[`261355f07`](261355f),
[`fcc543928`](fcc5439),
[`4880e3ed7`](4880e3e),
[`7349d4108`](7349d41),
[`2bc90503d`](2bc9050),
[`f9366c22d`](f9366c2),
[`289dce569`](289dce5),
[`7f3053342`](7f30533),
[`421bb49dc`](421bb49),
[`500eed660`](500eed6),
[`1cc47495a`](1cc4749)]:
    -   @shopify/polaris@10.44.0
    -   @shopify/polaris-icons@7.0.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@brendanrygus @juzser
[Frame] Fix min-height for iOS browsers (Shopify#8590) (Shopify#8596)
33afde8 
### WHY are these changes introduced?

Fixes Shopify#8590
Prevent Frame component from unnecessarily overflowing the viewport
height in mobile browsers.

The current behaviour introduces bugs in apps embedded in Shopify, as
the app iframe is loaded into an incorrectly sized container. Context:
* [Avoid 100vh in mobile
web](https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html)
* [Bug ticket in
SFN](https://github.com/orgs/Shopify/projects/6278?pane=issue&itemId=21574945)

### WHAT is this pull request doing?
Updates the `Frame` component to fill only the available viewport height
for mobile browsers with dynamic browser chrome, using the `100svh`
[(small viewport height) dynamic viewport
units](https://www.w3.org/TR/css-values-4/#small-viewport-percentage-units).

* The `Frame`'s minimum height will no longer overflow the page by
including the browser chrome in the `100vh` min-height. It will adjust
it's minimum height based on the dynamic size of the usable viewport
space.
* For desktop browsers without dynamic chrome, the min-height should
behave the same as today.
* For older browsers where dynamic viewport units are not yet supported,
we will fallback to the existing `100vh`.

See Codesandbox examples: 
* Before: https://codesandbox.io/s/gttibh
* After:
https://codesandbox.io/s/polaris-frame-ios-bottomnav-fixed-v00uld?file=/src/index.tsx

<details>
  <summary>Expand iOS screenshots</summary>

**Before**
Bottom content is cut off:
<img
src="https://user-images.githubusercontent.com/428636/227580669-94931ee1-0ad4-4588-9bcd-3f9a435403b7.png"
alt="Before the fix is applied, the footer is entirely outside of the
viewport">

Bottom content is visible only on scroll:
<img
src="https://user-images.githubusercontent.com/428636/227580671-00dda482-07d2-4de4-a11b-9bb9cc39e26a.png"
alt="Before the fix is applied, the page must be scrolled to see content
outside of the viewport">

**After**
<img
src="https://user-images.githubusercontent.com/428636/227580478-fa2ca550-9391-436d-ab77-39b01a635c13.png"
alt="After the fix is applied, all content is viewable in the mobile
viewport">
</details>


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

Tophatted using Web and [SFN app on mobile
Spin](https://admin.web.fbs-4e68.brendan-rygus.us.spin.dev/store/shop1/apps/shopify-fulfillment-dev-local/inventory/add_products).

### 🎩 checklist

- [x] Chrome latest
- [x] FF latest
- [x] Safari latest
- [x] Edge
- [x] iPhone (5/SE/X) (10+) Safari Mobile
- [x] iPad (10+) Safari Mobile
- [ ] Android device (5.x) Chrome **_Will need assistance with this
one_**
- [ ] ~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~
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8929)
8b84ba9 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.0.0

### Major Changes

- [Shopify#8919](Shopify#8919)
[`7349d4108`](Shopify@7349d41)
Thanks [@skparkk](https://github.com/skparkk)! - Added new keyboard
major + minor icons

### Minor Changes

- [Shopify#8924](Shopify#8924)
[`4880e3ed7`](Shopify@4880e3e)
Thanks [@Tal87](https://github.com/tal87)! - Added PersonalizedTextMajor
icon


- [Shopify#8861](Shopify#8861)
[`2bc90503d`](Shopify@2bc9050)
Thanks [@AlejandroE](https://github.com/AlejandroE)! - Added
ExploreImagesMajor

## @shopify/stylelint-polaris@10.0.0

### Major Changes

- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8455](Shopify#8455)
[`80eb3ac55`](Shopify@80eb3ac)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

### Minor Changes

- [Shopify#8968](Shopify#8968)
[`dbe68efb4`](Shopify@dbe68ef)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
`custom-property-disallowed-list` rule

## @shopify/polaris@10.44.0

### Minor Changes

- [Shopify#8936](Shopify#8936)
[`a2c9b1d24`](Shopify@a2c9b1d)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed Inline to
HorizontalStack


- [Shopify#8773](Shopify#8773)
[`e8c5a2243`](Shopify@e8c5a22)
Thanks [@stefanlegg](https://github.com/stefanlegg)! - - Added an
optional `onSpinnerChange` prop to`TextField`
    -   Added an optional `largeStep` prop to `TextField`
- Added `TextField` `Spinner` keypress interactions for Home, End, Page
Up, Page Down


- [Shopify#8876](Shopify#8876)
[`090d09683`](Shopify@090d096)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8937](Shopify#8937)
[`fcc543928`](Shopify@fcc5439)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed `Columns`
to `HorizontalGrid`


- [Shopify#8938](Shopify#8938)
[`289dce569`](Shopify@289dce5)
Thanks [@alex-page](https://github.com/alex-page)! - Remove deprecation
from `Grid` component


- [Shopify#8935](Shopify#8935)
[`7f3053342`](Shopify@7f30533)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [Shopify#8596](Shopify#8596)
[`421bb49dc`](Shopify@421bb49)
Thanks [@brendanrygus](https://github.com/brendanrygus)! - [Frame] Fix
minimum height overflowing in iOS Webkit browsers


- [Shopify#8953](Shopify#8953)
[`500eed660`](Shopify@500eed6)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - - Added
`customActivator` prop to `TopBar.UserMenu`
- Added support for setting a `ReactNode` on `ActionList` `Section`
`title`

### Patch Changes

- [Shopify#8842](Shopify#8842)
[`bd64fa583`](Shopify@bd64fa5)
Thanks [@martenbjork](https://github.com/martenbjork)! - Removed the
Exiting animation state from Popovers, causing them to close immediately
instead of after a 100ms delay.


- [Shopify#8913](Shopify#8913)
[`261355f07`](Shopify@261355f)
Thanks [@mrcthms](https://github.com/mrcthms)! - Tweaked the vertical
alignment of elements within the `AlphaFilters` component


- [Shopify#8954](Shopify#8954)
[`f9366c22d`](Shopify@f9366c2)
Thanks [@laurkim](https://github.com/laurkim)! - Updated custom property
names to align with new component names for `HorizontalGrid`,
`HorizontalStack`, and `VerticalStack`


- [Shopify#8912](Shopify#8912)
[`1cc47495a`](Shopify@1cc4749)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `BulkActions`
to include wrapping tooltip on Popover activator

- Updated dependencies
\[[`4880e3ed7`](Shopify@4880e3e),
[`7349d4108`](Shopify@7349d41),
[`2bc90503d`](Shopify@2bc9050)]:
    -   @shopify/polaris-icons@7.0.0

## @shopify/polaris-cli@0.1.28

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.17.2

## @shopify/polaris-codemods@0.0.3

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](Shopify@f1a3ad7),
[`80eb3ac55`](Shopify@80eb3ac),
[`dbe68efb4`](Shopify@dbe68ef)]:
    -   @shopify/stylelint-polaris@10.0.0

## @shopify/polaris-migrator@0.17.2

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](Shopify@f1a3ad7),
[`80eb3ac55`](Shopify@80eb3ac),
[`dbe68efb4`](Shopify@dbe68ef)]:
    -   @shopify/stylelint-polaris@10.0.0

## polaris.shopify.com@0.49.0

### Minor Changes

- [Shopify#8876](Shopify#8876)
[`090d09683`](Shopify@090d096)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@f1a3ad7)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8967](Shopify#8967)
[`45d978e7b`](Shopify@45d978e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a version
matchup table to `stylelint-polaris` documentation


- [Shopify#8986](Shopify#8986)
[`f70f586ee`](Shopify@f70f586)
Thanks [@laurkim](https://github.com/laurkim)! - Added documentation for
the `react-rename-component` codemod


- [Shopify#8935](Shopify#8935)
[`7f3053342`](Shopify@7f30533)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [Shopify#8920](Shopify#8920)
[`2bad4e305`](Shopify@2bad4e3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added copy button
to markdown headings with ids

### Patch Changes

- [Shopify#8915](Shopify#8915)
[`c8a130caf`](Shopify@c8a130c)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added
scroll-margin-top to anchor links to prevent top bar overlay


- [Shopify#8455](Shopify#8455)
[`80eb3ac55`](Shopify@80eb3ac)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

- Updated dependencies
\[[`a2c9b1d24`](Shopify@a2c9b1d),
[`e8c5a2243`](Shopify@e8c5a22),
[`090d09683`](Shopify@090d096),
[`bd64fa583`](Shopify@bd64fa5),
[`f1a3ad756`](Shopify@f1a3ad7),
[`261355f07`](Shopify@261355f),
[`fcc543928`](Shopify@fcc5439),
[`4880e3ed7`](Shopify@4880e3e),
[`7349d4108`](Shopify@7349d41),
[`2bc90503d`](Shopify@2bc9050),
[`f9366c22d`](Shopify@f9366c2),
[`289dce569`](Shopify@289dce5),
[`7f3053342`](Shopify@7f30533),
[`421bb49dc`](Shopify@421bb49),
[`500eed660`](Shopify@500eed6),
[`1cc47495a`](Shopify@1cc4749)]:
    -   @shopify/polaris@10.44.0
    -   @shopify/polaris-icons@7.0.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@chloerice chloerice added 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 5, 2023
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@brendanrygus
[Frame] Fix min-height for iOS browsers (Shopify#8590) (Shopify#8596)
bc813c0 
### WHY are these changes introduced?

Fixes Shopify#8590
Prevent Frame component from unnecessarily overflowing the viewport
height in mobile browsers.

The current behaviour introduces bugs in apps embedded in Shopify, as
the app iframe is loaded into an incorrectly sized container. Context:
* [Avoid 100vh in mobile
web](https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html)
* [Bug ticket in
SFN](https://github.com/orgs/Shopify/projects/6278?pane=issue&itemId=21574945)

### WHAT is this pull request doing?
Updates the `Frame` component to fill only the available viewport height
for mobile browsers with dynamic browser chrome, using the `100svh`
[(small viewport height) dynamic viewport
units](https://www.w3.org/TR/css-values-4/#small-viewport-percentage-units).

* The `Frame`'s minimum height will no longer overflow the page by
including the browser chrome in the `100vh` min-height. It will adjust
it's minimum height based on the dynamic size of the usable viewport
space.
* For desktop browsers without dynamic chrome, the min-height should
behave the same as today.
* For older browsers where dynamic viewport units are not yet supported,
we will fallback to the existing `100vh`.

See Codesandbox examples: 
* Before: https://codesandbox.io/s/gttibh
* After:
https://codesandbox.io/s/polaris-frame-ios-bottomnav-fixed-v00uld?file=/src/index.tsx

<details>
  <summary>Expand iOS screenshots</summary>

**Before**
Bottom content is cut off:
<img
src="https://user-images.githubusercontent.com/428636/227580669-94931ee1-0ad4-4588-9bcd-3f9a435403b7.png"
alt="Before the fix is applied, the footer is entirely outside of the
viewport">

Bottom content is visible only on scroll:
<img
src="https://user-images.githubusercontent.com/428636/227580671-00dda482-07d2-4de4-a11b-9bb9cc39e26a.png"
alt="Before the fix is applied, the page must be scrolled to see content
outside of the viewport">

**After**
<img
src="https://user-images.githubusercontent.com/428636/227580478-fa2ca550-9391-436d-ab77-39b01a635c13.png"
alt="After the fix is applied, all content is viewable in the mobile
viewport">
</details>


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

Tophatted using Web and [SFN app on mobile
Spin](https://admin.web.fbs-4e68.brendan-rygus.us.spin.dev/store/shop1/apps/shopify-fulfillment-dev-local/inventory/add_products).

### 🎩 checklist

- [x] Chrome latest
- [x] FF latest
- [x] Safari latest
- [x] Edge
- [x] iPhone (5/SE/X) (10+) Safari Mobile
- [x] iPad (10+) Safari Mobile
- [ ] Android device (5.x) Chrome **_Will need assistance with this
one_**
- [ ] ~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~
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#8929)
11076d8 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.0.0

### Major Changes

- [Shopify#8919](Shopify#8919)
[`7349d4108`](Shopify@e29f62e)
Thanks [@skparkk](https://github.com/skparkk)! - Added new keyboard
major + minor icons

### Minor Changes

- [Shopify#8924](Shopify#8924)
[`4880e3ed7`](Shopify@1ad1a62)
Thanks [@Tal87](https://github.com/tal87)! - Added PersonalizedTextMajor
icon


- [Shopify#8861](Shopify#8861)
[`2bc90503d`](Shopify@3dc9640)
Thanks [@AlejandroE](https://github.com/AlejandroE)! - Added
ExploreImagesMajor

## @shopify/stylelint-polaris@10.0.0

### Major Changes

- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@05d41ad)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8455](Shopify#8455)
[`80eb3ac55`](Shopify@cc8c04e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

### Minor Changes

- [Shopify#8968](Shopify#8968)
[`dbe68efb4`](Shopify@af07125)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
`custom-property-disallowed-list` rule

## @shopify/polaris@10.44.0

### Minor Changes

- [Shopify#8936](Shopify#8936)
[`a2c9b1d24`](Shopify@085d3f7)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed Inline to
HorizontalStack


- [Shopify#8773](Shopify#8773)
[`e8c5a2243`](Shopify@58136bc)
Thanks [@stefanlegg](https://github.com/stefanlegg)! - - Added an
optional `onSpinnerChange` prop to`TextField`
    -   Added an optional `largeStep` prop to `TextField`
- Added `TextField` `Spinner` keypress interactions for Home, End, Page
Up, Page Down


- [Shopify#8876](Shopify#8876)
[`090d09683`](Shopify@7e46d7e)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@05d41ad)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8937](Shopify#8937)
[`fcc543928`](Shopify@6e0bb48)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed `Columns`
to `HorizontalGrid`


- [Shopify#8938](Shopify#8938)
[`289dce569`](Shopify@6d46f59)
Thanks [@alex-page](https://github.com/alex-page)! - Remove deprecation
from `Grid` component


- [Shopify#8935](Shopify#8935)
[`7f3053342`](Shopify@4ccc28a)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [Shopify#8596](Shopify#8596)
[`421bb49dc`](Shopify@bc813c0)
Thanks [@brendanrygus](https://github.com/brendanrygus)! - [Frame] Fix
minimum height overflowing in iOS Webkit browsers


- [Shopify#8953](Shopify#8953)
[`500eed660`](Shopify@1dc66ee)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - - Added
`customActivator` prop to `TopBar.UserMenu`
- Added support for setting a `ReactNode` on `ActionList` `Section`
`title`

### Patch Changes

- [Shopify#8842](Shopify#8842)
[`bd64fa583`](Shopify@b916015)
Thanks [@martenbjork](https://github.com/martenbjork)! - Removed the
Exiting animation state from Popovers, causing them to close immediately
instead of after a 100ms delay.


- [Shopify#8913](Shopify#8913)
[`261355f07`](Shopify@ee7c076)
Thanks [@mrcthms](https://github.com/mrcthms)! - Tweaked the vertical
alignment of elements within the `AlphaFilters` component


- [Shopify#8954](Shopify#8954)
[`f9366c22d`](Shopify@4345b34)
Thanks [@laurkim](https://github.com/laurkim)! - Updated custom property
names to align with new component names for `HorizontalGrid`,
`HorizontalStack`, and `VerticalStack`


- [Shopify#8912](Shopify#8912)
[`1cc47495a`](Shopify@6d47345)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `BulkActions`
to include wrapping tooltip on Popover activator

- Updated dependencies
\[[`4880e3ed7`](Shopify@1ad1a62),
[`7349d4108`](Shopify@e29f62e),
[`2bc90503d`](Shopify@3dc9640)]:
    -   @shopify/polaris-icons@7.0.0

## @shopify/polaris-cli@0.1.28

### Patch Changes

-   Updated dependencies \[]:
    -   @shopify/polaris-migrator@0.17.2

## @shopify/polaris-codemods@0.0.3

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](Shopify@05d41ad),
[`80eb3ac55`](Shopify@cc8c04e),
[`dbe68efb4`](Shopify@af07125)]:
    -   @shopify/stylelint-polaris@10.0.0

## @shopify/polaris-migrator@0.17.2

### Patch Changes

- Updated dependencies
\[[`f1a3ad756`](Shopify@05d41ad),
[`80eb3ac55`](Shopify@cc8c04e),
[`dbe68efb4`](Shopify@af07125)]:
    -   @shopify/stylelint-polaris@10.0.0

## polaris.shopify.com@0.49.0

### Minor Changes

- [Shopify#8876](Shopify#8876)
[`090d09683`](Shopify@7e46d7e)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `IndexFilters`
to support hiding both filters and search field


- [Shopify#8973](Shopify#8973)
[`f1a3ad756`](Shopify@05d41ad)
Thanks [@lgriffee](https://github.com/lgriffee)! - Enabled the
`custom-property-disallowed-list` rule and added deprecated v10 custom
properties.


- [Shopify#8967](Shopify#8967)
[`45d978e7b`](Shopify@ab4bbed)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a version
matchup table to `stylelint-polaris` documentation


- [Shopify#8986](Shopify#8986)
[`f70f586ee`](Shopify@c488159)
Thanks [@laurkim](https://github.com/laurkim)! - Added documentation for
the `react-rename-component` codemod


- [Shopify#8935](Shopify#8935)
[`7f3053342`](Shopify@4ccc28a)
Thanks [@alex-page](https://github.com/alex-page)! - Renamed
`AlphaStack` to `VerticalStack`


- [Shopify#8920](Shopify#8920)
[`2bad4e305`](Shopify@751027b)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added copy button
to markdown headings with ids

### Patch Changes

- [Shopify#8915](Shopify#8915)
[`c8a130caf`](Shopify@8a81b6a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added
scroll-margin-top to anchor links to prevent top bar overlay


- [Shopify#8455](Shopify#8455)
[`80eb3ac55`](Shopify@cc8c04e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Remove deprecated v8
custom properties, functions, mixins, and mixin maps from
stylelint-polaris

- Updated dependencies
\[[`a2c9b1d24`](Shopify@085d3f7),
[`e8c5a2243`](Shopify@58136bc),
[`090d09683`](Shopify@7e46d7e),
[`bd64fa583`](Shopify@b916015),
[`f1a3ad756`](Shopify@05d41ad),
[`261355f07`](Shopify@ee7c076),
[`fcc543928`](Shopify@6e0bb48),
[`4880e3ed7`](Shopify@1ad1a62),
[`7349d4108`](Shopify@e29f62e),
[`2bc90503d`](Shopify@3dc9640),
[`f9366c22d`](Shopify@4345b34),
[`289dce569`](Shopify@6d46f59),
[`7f3053342`](Shopify@4ccc28a),
[`421bb49dc`](Shopify@bc813c0),
[`500eed660`](Shopify@1dc66ee),
[`1cc47495a`](Shopify@6d47345)]:
    -   @shopify/polaris@10.44.0
    -   @shopify/polaris-icons@7.0.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chloerice chloerice chloerice approved these changes

+1 more reviewer

@gui-santos gui-santos gui-santos approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@brendanrygus brendanrygus

Labels

2023 Contribution tracking for 2023 Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023"

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Frame] Height overflows viewport on iOS

3 participants

@brendanrygus @chloerice @gui-santos