Skip to content

✨ amp-story-shopping-tag text specs#37186

Merged
jshamble merged 31 commits intoampproject:mainfrom
jshamble:shopTagTextSpecs
Jan 19, 2022
Merged

✨ amp-story-shopping-tag text specs#37186
jshamble merged 31 commits intoampproject:mainfrom
jshamble:shopTagTextSpecs

Conversation

@jshamble
Copy link
Copy Markdown
Contributor

@jshamble jshamble commented Dec 11, 2021

Added tech specs for the shopping tag, handle single line, 2-line, and 2-line overflow (ellipsis) cases.

Fixes #37039

single line LTR 2-line LTR 2-line overflow LTR
Screen Shot 2021-12-14 at 10 53 39 PM Screen Shot 2021-12-14 at 10 53 28 PM Screen Shot 2021-12-14 at 10 53 31 PM
single line RTL 2-line RTL 2-line overflow RTL
Screen Shot 2021-12-14 at 10 53 14 PM Screen Shot 2021-12-14 at 10 53 22 PM Screen Shot 2021-12-14 at 10 53 18 PM

@amp-owners-bot
Copy link
Copy Markdown

amp-owners-bot bot commented Dec 11, 2021

Hey @gmajoulet! These files were changed:

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js

@jshamble jshamble changed the title Shop tag text specs ✨Shopping tag text specs Dec 11, 2021
@jshamble jshamble changed the title ✨Shopping tag text specs ✨ amp-story-shopping-tag text specs Dec 11, 2021
Copy link
Copy Markdown
Contributor

@coreymasanto coreymasanto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add images to the description that show how the single line, 2-line, and 2-line overflow cases appear on your local AMP server

@jshamble jshamble removed the request for review from processprocess December 14, 2021 00:59
@processprocess
Copy link
Copy Markdown
Contributor

To recap our GVC:

  • Margin between pill and image looks slightly small.
  • Right margin looks like it was added, we might not need that at all since it's padding on the pill.

Screen Shot 2022-01-12 at 1 47 08 PM

Please look into if there is a way to remove the extra space when there are line breaks:
Screen Shot 2022-01-12 at 1 48 29 PM

@jshamble jshamble requested a review from coreymasanto January 13, 2022 23:31
Copy link
Copy Markdown
Contributor

@processprocess processprocess left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me!

@jshamble jshamble enabled auto-merge (squash) January 19, 2022 20:08
@jshamble jshamble disabled auto-merge January 19, 2022 22:19
@jshamble jshamble merged commit a993fd7 into ampproject:main Jan 19, 2022
@gmajoulet
Copy link
Copy Markdown
Contributor

I just added several comments, can you address them in a follow up PR please? They're important accessibility and performance things.

mhalabi-google pushed a commit to mhalabi-google/amphtml that referenced this pull request Jan 20, 2022
* added some shopping tag text specs

* added shopping tag text specs

* fixed shopping tag

* fixed shopping tag

* added visual diff test

* fixed nit, one liner comment

* added dynamic border radius for styling with two tag texts

* added better name

* added correct calls for clientrect for using measuremutate eleemnt

* updated spec exampel to have tags with rtl support, used arabic as the demonstration language.

* fixed a few issues with shopping tag specs

* resolved mrege conflicts iwth main

* removed duplicate page id

* fixed blank page on no products

* added suggestion about ?. null operator

* added text specs

* added parseInt to font size to fix border radius

* fixed all issues except for multi-line ellipsis

* added shopping tag text specs ellipsis fix (it had to do with flex display)

* rmeoved gitignore file

* added mutate element

* added more relvant example

* updated visual diff tests

* added classlist optimization for mutatelement

* type

* fix circleCI tests
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.

[amp story shopping] Shopping tag text specs

5 participants