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
Calculate share button padding dynamically for scroll affordance #12127
Conversation
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.
Cool! Love the GIFs in the PR descriptions.
extensions/amp-story/0.1/share.js
Outdated
this.root_./*OK*/offsetLeft; | ||
|
||
const iconWidth = | ||
dev().assert(items[0].firstElementChild)./*OK*/offsetWidth; |
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.
Nit: Extract items[0].firstElementChild
into a local var.
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.
Done.
extensions/amp-story/0.1/share.js
Outdated
const iconWidth = | ||
dev().assert(items[0].firstElementChild)./*OK*/offsetWidth; | ||
|
||
// Total width that the buttons will occupy with minimum padding |
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.
Super-nit: Trailing period.
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.
Done.
Fixes #11898.
When the share buttons won't fit in the container, thus making it scrollable, we need a visual affordance so that the user realizes that the element is scrollable.
This change allows the widget to calculate the padding so that there's always an element cut-off if needed, otherwise allows the buttons to have "fluid" padding so that they fit the container.
(This could be done with CSS/flexbox IFF the element wasn't scrollable.)