Skip to content
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.

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

Pattern Lab UIKit Bug Fixes #903

Merged
merged 16 commits into from
Oct 9, 2018
Merged

Pattern Lab UIKit Bug Fixes #903

merged 16 commits into from
Oct 9, 2018

Conversation

sghoweri
Copy link
Contributor

@sghoweri sghoweri commented Oct 9, 2018

Summary

Misc bug fixes + cross-browser related updates to Pattern Lab's UI

Before

unadjustednonraw_thumb_4c02
unadjustednonraw_thumb_4c01

Note the extra whitespace on the left and right sides when viewing on a notched device like the iPhone XS Max

image

Safari UI bug with the dropdown buttons + global UI bug with the background color

image

IE 11 rendering bug with the side nav layout

After

img_0126
unadjustednonraw_thumb_4c00

Full screen support + responsive UI layout via the new viewport-fit meta tag + CSS env constants: https://css-tricks.com/the-notch-and-css/

image

Fixed dropdowns + fixed default <button> styles in Safari

image

Fixed layout bugs in IE 11

Details

In particular, this PR:

  1. Fixes several mobile, Safari and IE 11-specific issues encountered in local dev testing (like default browser-specific styles for buttons and input elements)
  2. Fixes major scrolling issues seen on mobile devices while still fixing the IE 11-specific issues that unintentionally caused the bugs in the first place
  3. Implements iframe resizer functionality to Pattern Lab to bring much more native-like scroll functionality + much better performing scrolling as a result
  4. Better mobile support for devices with curved / notched screens (iPhone X, iPhone XS and iPhone XS Max)
  5. Fixes a UI bug relating to missing background colors in the nested Pattern lab navigation

Testing Instructions

Compare Pattern Lab's UI that's currently live with the updates from this branch -- especially on Safari and on mobile devices!

@bolt-bot
Copy link
Collaborator

bolt-bot commented Oct 9, 2018

⚡ PR built on Travis and deployed a now preview here:

@bolt-bot
Copy link
Collaborator

bolt-bot commented Oct 9, 2018

⚡ PR built on Travis and deployed a now preview here:

…r layout is used — fixes issue with a slight overflow when resizing the PL iframe to full and the sidebar layout is used
@bolt-bot
Copy link
Collaborator

bolt-bot commented Oct 9, 2018

⚡ PR built on Travis and deployed a now preview here:

@sghoweri sghoweri merged commit a231d1d into master Oct 9, 2018
@adamszalapski adamszalapski deleted the feature/pl-uikit-fixes branch December 13, 2018 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants