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!! |
sghoweri
changed the title
…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 |
| @@ -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'), | |||
| @@ -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.
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
esckeyUpdated 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/iconsfolder.Added the ability to customize the UIKit logo! This includes the ability to customize:
Closes #