Skip to content

✨ Changing Inline Page Attachment Button UI #33142

Merged
gmajoulet merged 106 commits intoampproject:masterfrom
raxsha:inline-ui
Mar 12, 2021
Merged

✨ Changing Inline Page Attachment Button UI #33142
gmajoulet merged 106 commits intoampproject:masterfrom
raxsha:inline-ui

Conversation

@raxsha
Copy link
Copy Markdown
Contributor

@raxsha raxsha commented Mar 8, 2021

  • Separates outlink & inline code paths.
  • Adds new chip.
  • Added customizable image options: 0, 1, or 2 custom images.
  • Added light theme arrow.
  • Protected changes with flag.

Fixes #32770.

Firebase demo: https://amp-story-inline-cta.web.app/examples/amp-story/attachment.html
To see it, be sure to set the feature flag in the console with: AMP.toggleExperiment('amp-story-page-attachment-ui-v2');.
Feature is on page 1.

Preview:
inline-cta-demo

One image:
Screen Shot 2021-03-09 at 2 30 44 PM

No text:
Screen Shot 2021-03-09 at 2 31 17 PM

@raxsha raxsha requested a review from gmajoulet March 11, 2021 19:06
@raxsha raxsha removed the request for review from estherkim March 12, 2021 20:46
@gmajoulet gmajoulet merged commit a4dd1ad into ampproject:master Mar 12, 2021
westonruter added a commit to westonruter/amphtml that referenced this pull request Mar 15, 2021
* 'master' of github.com:ampproject/amphtml: (536 commits)
  ✨ Send extension versions from AMPHTML ads to FIE  (ampproject#33190)
  Update amp-autocomplete test output file (ampproject#33216)
  ✨ Changing Inline Page Attachment Button UI  (ampproject#33142)
  ✨Launch no-signing (ampproject#33229)
  ♻️ Add logic for story ad page manager. (ampproject#33201)
  Migrate Bento components to V1 (ampproject#32974)
  📦 Update dependency mocha to v8.3.2 (ampproject#33234)
  📦 Update build system devDependencies (ampproject#33178)
  🧪 [amp-consent] Turn on TCF PostMessage Proxy API Experiment (ampproject#33196)
  Fix amp-video amp_video_quality parameter name. (ampproject#33227)
  🏗 Guard access to `BASH_ENV` during CircleCI push builds (ampproject#33231)
  🏗 Clean up CircleCI merge SHA logic (ampproject#33215)
  📦 Update dependency karma to v6.1.2 (ampproject#33151)
  🏗 Ensure up-to-date and clean `package-lock.json` before running any CI job (ampproject#33223)
  Ensure that pre-stubbing always happens before the first element is upgraded (ampproject#33212)
  🏗 Restore `package-lock.json` to `lockfileVersion = 1` (ampproject#33222)
  Fixed text align of buttons (ampproject#33217)
  [amp-story] ♿ Add label for next story and add i18n for pagination buttons (ampproject#33205)
  [amp-story-player] 📖  Rename skip-next control to skip-to-next (ampproject#33164)
  🚀 Report cls-fcp and cls-vis to compare with cls (ampproject#33207)
  ...
muuki88 pushed a commit to highfivve/amphtml that referenced this pull request Mar 15, 2021
* moved page attachment styling to a shadow DOM

* prettier formating

* create open-attachment helper class

* create new file

* fixed exports

* make this class non-overridable by publishers

Co-authored-by: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com>

* removing active attribute

* appending class list correctly

* trying to make click target work

* moving template to new file

* pausing page nav

* resync

* fixes

* remove manual activation

* new CSS file

* new CSS file

* fixes

* fixes

* fixes

* separating CSS into separate files

* separating CSS into separate files

* separating shadow DOM css

* removing extra CSS import

* removing new CSS file

* removing new CSS file

* removing import

* separating CSS

* separating CSS

* separating CSS

* formatting

* remove CSS changes

* moving container code out of mutate block

* npm build

* npm build

* merge

* merge

* add flag

* lint

* z-index

* typo

* merge issue

* separating inline and outlink

* cleanup

* added image and new chip

* added new image

* added arrow

* newline

* added multiple image API

* nit

* merge conflicts

* change img input api to separate attributes

* chip tweaks

* styling fixups - matched to figma

* make spans divs

* added aria labels, dynamically rendered 2nd image

* removed image

* validator for new fields

* accessibility fixes

* change img to image

* change img to image in attachment.html

* adding localized string for accessibility

* removing redundant display block

* changing to data-cta-text to match other story instances

* adding data- prefix and swipe up aria text

* Do not allow relative paths

To allow this PR to move forward and give time for the necessary transformers to be released, we're going to disallow relative URLs for now. Once the transformers are released and in production then we can allow relative URLs.

* removing data prefixes for new attributes

* merge master

* merge master

* merge master

* merge master

* fixes

* adding internationalized aria label to new button

* changing function name to with-images

* validator tests

* validator tests

* remove package lock changes

* remove package lock changes

* newline

* remove package lock changes

* remove package lock changes

* remove package lock changes

* remove package lock changes

* remove package lock changes

* remove package lock changes

* remove package lock changes

* remove package lock changes

* add margin to center image that is either on the left or right depending if page text is RTL of LTR

* add unit tests

* add internationalized aria label

* example nit

* prettier

Co-authored-by: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com>
Co-authored-by: honeybadgerdontcare <honeybadgerdontcare@users.noreply.github.com>
Gregable pushed a commit that referenced this pull request Mar 15, 2021
@raxsha raxsha deleted the inline-ui branch April 12, 2021 16:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Page attachments] [Inline] Image preview UI

7 participants