LG-12103 Embed Styles into Login Button Lookbook Component#10387
LG-12103 Embed Styles into Login Button Lookbook Component#10387
Conversation
|
One thing I hadn't thought to consider previously is if the inline styles will cause any issues for the content-security policy in deployed environments. I think I recall something about the CSP being disabled for the Lookbook component previews. And maybe at worst the inline styles aren't loaded but at least the external CSS file reference will still load and apply its styles. |
|
The "Login.gov" logo looks a little off-center in my testing?
|
I tweaked the margins a tiny bit - seemed like it just needed to be nudged down? |
|
|
There was a problem hiding this comment.
Following from my previous comment, if we applied login-button__logo to the SVG we wouldn't need this, because SVGs are display: inline by default.
I'd also be curious to double-check if the vertical-align is actually doing anything for the styling. It doesn't seem to make any impact for me in my testing.
There was a problem hiding this comment.
It seemed to shift the logo down when I added vertical-align to the div. I originally had the class on the svg but vertical-align didn't seem to work that way. I'll take another look though, maybe something was in a funky state. I'd also prefer not to have the extra div so if that is unnecessary I will definitely remove it.
There was a problem hiding this comment.
@aduth yep you're right I was able to remove vertical-align, margin-top, and display-inline and I moved the class to the svg
changelog: User Facing Improvements, Login Design System Component, login-button embed styles foor partner use
Co-authored-by: Andrew Duthie <1779930+aduth@users.noreply.github.com>
Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
Co-authored-by: Andrew Duthie <1779930+aduth@users.noreply.github.com>
Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>
|
Tweaked the logo sizes a bit
|
|
|
||
| .login-button.usa-button--big > .login-button__logo { | ||
| font-size: 1.8rem; | ||
| margin-top: -2px; |
There was a problem hiding this comment.
praise: hooray for cleanup!
I always like to see negative margins get deprecated :)
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
Looks good after the one suggestion about @after_render. Nice simplification!
Co-authored-by: Andrew Duthie <1779930+aduth@users.noreply.github.com>
5 participants
🎫 Ticket
Link to the relevant ticket:
LG-12103
Original login button PR for context: #9840
🛠 Summary of changes
The login sign up button is embedded into our dev docs for easy use for our partners. We were not displaying the HTML panel for the login button in the developer docs because it was missing the styles that go along with the button. This ticket adds those styles so partners can more easily utilize the button "out of the box" and not have to write as much CSS.
With this addition we will be able to update the embed code to include the HTML panel.