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

Major UIKit Rendering Performance Improvements, Logo Customization, & LitElement Migration #1078

Merged
merged 48 commits into from
Nov 12, 2019

Conversation

sghoweri
Copy link
Contributor

@sghoweri sghoweri commented Oct 20, 2019

  • Significant rendering performance improvements when resizing the Drawer + Iframe resizer
  • Added the ability to auto-close the Nav + Context menu via hitting the esc key
  • Added the ability to auto-close the Nav + the Context menu via clicking anywhere outside of either menu — even inside the iframe!

  • Improved (and slowly, more consistent) focus styles for navigating the Pattern Lab UI via Keyboard

CleanShot 2019-10-20 at 14 24 43

  • Updated the SVG icons used in UIKit to automatically inherit the parent's text color via currentColor; added the light / dark theme + horizontal / vertical layout SVG icons that were previously inlined into the component-specific JS

  • Converted several of our web components' internal JS rendering to use lit-html vs previously using Preact

  • Added a brand new <pl-icon> web component (powered by lit-element!) + updated our Webpack build process to auto-generate an SVG spritesheet based off of the icons available in the UIKIt src/icons folder.

    • Updated several components to take advantage of this new Icon component
  • Added the ability to customize the UIKit logo! This includes the ability to customize:

    • The image you use on both light and dark themes
    • Logo url
    • Logo text (including hiding this text and just displaying a logo)
    • Logo alt text

80047293-26FA-40E6-9049-0AF683463726

Closes #

…one of PL's components are currently enabled to use SD
Conflicts:
	packages/uikit-workshop/dist/index.html
	packages/uikit-workshop/dist/styleguide/css/pattern-lab.css
	packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js
	packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js
@coveralls
Copy link

coveralls commented Oct 22, 2019

Coverage Status

Coverage remained the same at 74.144% when pulling e285e78 on feature/uikit-refactor-and-enhancements into 59de7ac on dev.

@sghoweri
Copy link
Contributor Author

sghoweri commented Nov 4, 2019

I need to update the PR description on this + add a few more screenshots but other than that I think this should be ready to go!

Super excited with how this turned out!!

@sghoweri sghoweri marked this pull request as ready for review November 4, 2019 02:14
@sghoweri sghoweri changed the title WIP: Improve UIKit Rendering Performance, Logo Customization, & Refactoring Major UIKit Rendering Performance Improvements, Logo Customization, & LitElement Migration Nov 4, 2019
@sghoweri
Copy link
Contributor Author

sghoweri commented Nov 5, 2019

@bmuenzenmeyer I couldn't help but notice that the most recent Netlify deploy on this branch seems to be missing the Handlebars data (but the UIKit still seems to be rendering just fine without any errors)... any ideas?

Pulling up a fresh copy / build of this locally seems to be working fine (testing in the edition-twig package) so I'm wondering if that's just a Netlify fluke.. 🤔

Copy link
Member

@bmuenzenmeyer bmuenzenmeyer left a comment

Choose a reason for hiding this comment

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

tested this a bunch throughout the day - we had some discussions via Slack. small comments only

@@ -39,7 +39,7 @@ export const loadPolyfills = new Promise(resolve => {
// Based on https://github.com/webcomponents/webcomponentsjs/blob/master/entrypoints/webcomponents-sd-ce-index.js
// Used in: Safari 9, Firefox, Edge
Promise.all([
import('@webcomponents/shadydom/src/shadydom.js'),
// import('@webcomponents/shadydom/src/shadydom.js'),
Copy link
Member

Choose a reason for hiding this comment

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

should these be removed?

@@ -56,7 +56,7 @@ export const loadPolyfills = new Promise(resolve => {
// Based on https://github.com/webcomponents/webcomponentsjs/blob/master/entrypoints/webcomponents-hi-ce-index.js
// Used in: Safari 10, Firefox once SD is shipped
Promise.all([
import('@webcomponents/shadydom/src/shadydom.js'),
// import('@webcomponents/shadydom/src/shadydom.js'),
Copy link
Member

Choose a reason for hiding this comment

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

should these be removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep - that’s on my todo list.

Already cleaned these up in my local version of these updates 🧽

@bmuenzenmeyer
Copy link
Member

@sghoweri if you could, please feel free to merge and release - I am about to step out the door and will be out for a while, so I dont think it smart to release and then bail.

@sghoweri
Copy link
Contributor Author

sghoweri commented Nov 5, 2019

@sghoweri if you could, please feel free to merge and release - I am about to step out the door and will be out for a while, so I dont think it smart to release and then bail.

Thanks @bmuenzenmeyer!!

I’m good waiting till tomorrow (or even Thursday) before I merge all this down and cut a new release. Want to make sure I keep an eye on the NPM publish + see if I can squeeze in some markdown docs to help folks configure the new Logo options.

@bmuenzenmeyer
Copy link
Member

see if I can squeeze in some markdown docs to help focus configure the new Logo options.

or PR it into patternlab.io? I know Brad is working on a new design but adding more content shouldn't get too much in the way like I did for pattern-lab/website#121

@sghoweri sghoweri mentioned this pull request Nov 11, 2019
@bmuenzenmeyer bmuenzenmeyer merged commit 4b2faff into dev Nov 12, 2019
@bmuenzenmeyer bmuenzenmeyer deleted the feature/uikit-refactor-and-enhancements branch November 12, 2019 13:49
sghoweri added a commit to boltdesignsystem/core-php that referenced this pull request Dec 13, 2019
sghoweri added a commit to boltdesignsystem/bolt_connect that referenced this pull request Dec 13, 2019
antonia-rose pushed a commit to quelltexterin/nemo-uikit-workshop that referenced this pull request Apr 12, 2023
…factor-and-enhancements

Major UIKit Rendering Performance Improvements, Logo Customization, & LitElement Migration
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants