Skip to content

Commit

Permalink
Allow amp-autocomplete in email format by default (#34848)
Browse files Browse the repository at this point in the history 
* Allow amp-autocomplete in email by default

* New line eof

* Update documentation
  • Loading branch information
@caroqliu
caroqliu committed Aug 9, 2021
1 parent c3ebe59 commit 365c6c3
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 51 deletions.
10 changes: 0 additions & 10 deletions extensions/amp-autocomplete/0.1/amp-autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import {
} from '#core/types/object';

import {includes} from '#core/types/string';
import {isAmp4Email} from '../../../src/format';
import {isArray, isEnumValue} from '#core/types';
import {tryParseJson} from '#core/types/object/json';

Expand Down Expand Up @@ -245,15 +244,6 @@ export class AmpAutocomplete extends AMP.BaseElement {
/** @override */
buildCallback() {
this.templates_ = Services.templatesForDoc(this.element);

const doc = this.element.ownerDocument;
const isEmail = doc && isAmp4Email(doc);
userAssert(
!isEmail ||
doc.documentElement.hasAttribute('data-amp-autocomplete-opt-in'),
'<amp-autocomplete> is not currently available in AMP4Email.'
);

this.action_ = Services.actionServiceForDoc(this.element);
this.viewport_ = Services.viewportForDoc(this.element);

Expand Down
6 changes: 0 additions & 6 deletions extensions/amp-autocomplete/amp-autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,6 @@ limitations under the License.

The `amp-autocomplete` extension should be used for suggesting completed items based on user input to help users carry out their task more quickly.

[filter formats="email"]

Warning: This component is currently experimental in the AMP for Email format as email clients add support for the feature. Until the component is publicly available in the format, you will notice the component is in some cases valid and sendable in emails but may be only functioning in its fallback behavior capacity across email clients as well as in their respective playgrounds. The fallback for the component does not display autocomplete suggestions, and will behave as the unenhanced `input` or `textarea` field it is given.

[/filter] <!-- formats="email" -->

This can be used to power search experiences, in cases where the user may not know the full range of potential inputs, or in forms to help ensure inputs where there may be multiple ways to express the same intent (using a state abbreviation instead of its full name, for example) yield more predictable results.

Example:
Expand Down
3 changes: 1 addition & 2 deletions validator/testdata/amp4email_feature_tests/amp-autocomplete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
Tests the additional restrictions AMP4EMAIL sets on AMP-AUTOCOMPLETE.
-->
<!DOCTYPE html>
<!-- "data-amp-autocomplete-opt-in" is disallowed by the validator -->
<html ⚡4email data-amp-autocomplete-opt-in data-css-strict>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8" />
<style amp4email-boilerplate>
Expand Down
47 changes: 22 additions & 25 deletions validator/testdata/amp4email_feature_tests/amp-autocomplete.out
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,7 @@ FAIL
| Tests the additional restrictions AMP4EMAIL sets on AMP-AUTOCOMPLETE.
| -->
| <!DOCTYPE html>
| <!-- "data-amp-autocomplete-opt-in" is disallowed by the validator -->
| <html ⚡4email data-amp-autocomplete-opt-in data-css-strict>
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autocomplete-opt-in' in tag 'html' is set to the invalid value ''. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup)
| <html ⚡4email data-css-strict>
| <head>
| <meta charset="utf-8" />
| <style amp4email-boilerplate>
Expand Down Expand Up @@ -87,19 +84,19 @@ amp4email_feature_tests/amp-autocomplete.html:22:0 The attribute 'data-amp-autoc
| <!-- Invalid: amp-component with static data -->
| <amp-autocomplete>
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:85:4 The mandatory attribute 'src' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:84:4 The mandatory attribute 'src' is missing in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| <script type="application/json">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:87:6 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
amp4email_feature_tests/amp-autocomplete.html:86:6 Custom JavaScript is not allowed. (see https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/#custom-javascript-is-not-allowed)
| {}
| </script>
| </amp-autocomplete>
|
| <!-- Invalid: amp-component with filter attribute -->
| <amp-autocomplete
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:93:4 The attribute 'filter' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:92:4 The attribute 'filter' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| filter="prefix"
| src="https://data.com/articles.json?ref=CANONICAL_URL"
| >
Expand All @@ -109,7 +106,7 @@ amp4email_feature_tests/amp-autocomplete.html:93:4 The attribute 'filter' may no
| <!-- Invalid: amp-component with filter-value attribute -->
| <amp-autocomplete
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:101:4 The attribute 'filter-value' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:100:4 The attribute 'filter-value' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| filter-value="property"
| src="https://data.com/articles.json?ref=CANONICAL_URL"
| >
Expand All @@ -123,12 +120,12 @@ amp4email_feature_tests/amp-autocomplete.html:101:4 The attribute 'filter-value'
| <div>
| <amp-autocomplete
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:113:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:112:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| src="https://data.com/articles.json?ref=CANONICAL_URL"
| >
| <template type="amp-mustache" id="1234">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:116:12 The tag 'template' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
amp4email_feature_tests/amp-autocomplete.html:115:12 The tag 'template' may not appear as a descendant of tag 'template (amp4email)'. (see https://amp.dev/documentation/components/amp-mustache)
| <div>
| <a href="https://somelink.com">{{blah}}</a>
| </div>
Expand All @@ -144,12 +141,12 @@ amp4email_feature_tests/amp-autocomplete.html:116:12 The tag 'template' may not
| <div>
| <amp-state src="https://someserver.json">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:129:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:130:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:129:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
| <script type="application/json">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:131:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:130:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
| {}
| </script>
| </amp-state>
Expand All @@ -163,7 +160,7 @@ amp4email_feature_tests/amp-autocomplete.html:131:12 The tag 'script' requires i
| <div>
| <amp-autocomplete
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:143:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:142:10 The tag 'amp-autocomplete' may not appear as a descendant of tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| src="https://data.com/articles.json?ref=CANONICAL_URL"
| template="1234"
| >
Expand All @@ -178,12 +175,12 @@ amp4email_feature_tests/amp-autocomplete.html:143:10 The tag 'amp-autocomplete'
| <div>
| <amp-state id="123" src="https://someserver.json" template="1234">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:155:10 The tag 'amp-state' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-bind/)
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:156:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:155:10 The tag 'amp-state' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
| <script type="application/json">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:157:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
amp4email_feature_tests/amp-autocomplete.html:156:12 The tag 'script' requires including the 'amp-bind' extension JavaScript. (see https://amp.dev/documentation/components/amp-bind/)
| {}
| </script>
| </amp-state>
Expand All @@ -196,7 +193,7 @@ amp4email_feature_tests/amp-autocomplete.html:157:12 The tag 'script' requires i
| <div>
| <amp-autocomplete
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:168:8 The tag 'amp-autocomplete' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:167:8 The tag 'amp-autocomplete' may not appear as a descendant of tag 'template'. (see https://amp.dev/documentation/components/amp-autocomplete)
| src="https://data.com/articles.json?ref=CANONICAL_URL"
| template="1234"
| >
Expand All @@ -207,47 +204,47 @@ amp4email_feature_tests/amp-autocomplete.html:168:8 The tag 'amp-autocomplete' m
| <!-- Invalid: URLs cannot be empty. -->
| <amp-autocomplete src="">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:177:4 Missing URL for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:176:4 Missing URL for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| </amp-autocomplete>
|
| <!-- Invalid: The protocol can only be https -->
| <amp-autocomplete src="http://data.com/articles.json?ref=CANONICAL_URL">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:182:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:181:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| </amp-autocomplete>
|
| <!-- Invalid: src of amp-autocomplete is not bindable -->
| <amp-autocomplete [src]="data">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:187:4 The attribute '[src]' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:186:4 The attribute '[src]' may not appear in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| </amp-autocomplete>
|
| <!-- Invalid: Mustache delimiters are disallowed in src -->
| <amp-autocomplete src="foo{{bar">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:192:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:191:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| </amp-autocomplete>
|
| <!-- Invalid: Mustache delimiters are disallowed in src -->
| <amp-autocomplete src="foo{{bar">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:197:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:196:4 The relative URL 'foo{{bar' for attribute 'src' in tag 'amp-autocomplete' is disallowed. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| </amp-autocomplete>
|
| <!-- Invalid: Mustache variables cannot be concatenated in href -->
| <amp-autocomplete src="http://data.com/articles.json?ref=CANONICAL_URL">
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:202:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
amp4email_feature_tests/amp-autocomplete.html:201:4 Invalid URL protocol 'http:' for attribute 'src' in tag 'amp-autocomplete'. (see https://amp.dev/documentation/components/amp-autocomplete)
| <input />
| <template type="amp-mustache">
| <a href="{{bar}}{{foo}}">disallowed</a>
>> ^~~~~~~~~
amp4email_feature_tests/amp-autocomplete.html:205:8 The attribute 'href' in tag 'a' is set to the invalid value '{{bar}}{{foo}}'.
amp4email_feature_tests/amp-autocomplete.html:204:8 The attribute 'href' in tag 'a' is set to the invalid value '{{bar}}{{foo}}'.
| </template>
| </amp-autocomplete>
| </body>
Expand Down
8 changes: 0 additions & 8 deletions validator/validator-main.protoascii
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,6 @@ tags: { # HTML tag for non-transformed AMP.
tag_name: "HTML"
mandatory: true
mandatory_parent: "!DOCTYPE"
attrs: {
# This attribute should always be invalid. See https://github.com/ampproject/amphtml/pull/27174
# To align with HTML spec, custom attributes should be prefixed with `data-`.
# Because `data-*` attributes are always valid AMP, the following rules explicitly disallow usage.
name: "data-amp-autocomplete-opt-in"
value: "false"
disallowed_value_regex: "false"
}
unique: true
spec_url: "https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#required-markup"
}
Expand Down

0 comments on commit 365c6c3

Please sign in to comment.