-
Notifications
You must be signed in to change notification settings - Fork 406
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
Conversation
…ot shift the layout
…endering performance
…ch to lit-html for rendering
…ng Preact under fully refactored
…onents + switch to rendering using lit-html
…oing local development (watch mode)
…ted out in a separate file
…ide of components
…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
…; UI cleanup and conversion of the majority of the remaining components over to lit-element
…size when resizing your screen / refreshing on certain devices
…m on resizer handle background to try and address UI quirk in IE 11
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!! |
…n UIKit workshop package
@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 |
There was a problem hiding this 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'), |
There was a problem hiding this comment.
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'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should these be removed?
There was a problem hiding this comment.
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 🧽
@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. |
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 |
…factor-and-enhancements Major UIKit Rendering Performance Improvements, Logo Customization, & LitElement Migration
esc
keyUpdated 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 JSConverted 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 UIKItsrc/icons
folder.Added the ability to customize the UIKit logo! This includes the ability to customize:
Closes #