Address @chancancode's issues

emberjs · Mar 28, 2019 · 21776ca · 21776ca
1 parent 70f6e67
commit 21776ca
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/components/checkbox.ts b/packages/@ember/-internals/glimmer/lib/components/checkbox.ts
@@ -50,8 +50,6 @@ const Checkbox = EmberComponent.extend({
     By default this component will forward a number of arguments to attributes on the the
     component's element:
 
-    * type
-    * checked
     * indeterminate
     * disabled
     * tabindex
@@ -60,8 +58,13 @@ const Checkbox = EmberComponent.extend({
     * required
     * form
 
-    When invoked with `{{input type="checkbox"}}`, you can only customize these attributes. When
-    invoked with `<Input @type="checkbox" />`, you can just use HTML attributes directly.
+    When invoked with curly braces, this is the exhaustive list of HTML attributes you can
+    customize (i.e. `{{input type="checkbox" disabled=true}}`).
+
+    When invoked with angle bracket invocation, this list is irrelevant, because you can use HTML
+    attribute syntax to customize the element (i.e.
+    `<Input @type="checkbox" disabled data-custom="custom value" />`). However, `@type` and
+    `@checked` must be passed as named arguments, not attributes.
 
     @property attributeBindings
     @type Array | String

diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
@@ -34,7 +34,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
     ```handlebars
     Search:
-    <Input @value={{this.searchWord}}>`
+    <Input @value={{this.searchWord}}>
+    ```
 
     In this example, the initial value in the `<input>` will be set to the value of
     `this.searchWord`. If the user changes the text, the value of `this.searchWord` will also be
@@ -64,6 +65,13 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
     In most cases, if you want to pass an attribute to the underlying HTML `<input>` element, you
     can pass the attribute directly, just like any other Ember component.
 
+    ```handlebars
+    <Input @type="text" size="10" />
+    ```
+
+    In this example, the `size` attribute will be applied to the underlying `<input>` element in the
+    outputted HTML.
+
     However, there are a few attributes where you **must** use the `@` version.
 
     * `@type`: This argument is used to control which Ember component is used under the hood
@@ -79,6 +87,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
     the helper to `TextField`'s `create` method. Subclassing `TextField` is supported but not
     recommended.
 
+    See [TextField](/api/ember/release/classes/TextField)
+
     ### Checkbox
 
     To create an `<input type="checkbox">`:
@@ -93,10 +103,15 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
     ### Extending `Checkbox`
 
-    Internally, `<Input @type="checkbox" />` creates an instance of `Ember.Checkbox`
+    Internally, `<Input @type="checkbox" />` creates an instance of `Checkbox`. Subclassing
+    `TextField` is supported but not recommended.
+
+    See [Checkbox](/api/ember/release/classes/Checkbox)
 
     @method Input
     @for Ember.Templates.components
+    @see {TextField}
+    @see {Checkbox}
     @param {Hash} options
     @public
   */

diff --git a/packages/@ember/-internals/glimmer/lib/components/link-to.ts b/packages/@ember/-internals/glimmer/lib/components/link-to.ts
@@ -52,7 +52,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
 
     ### Handling `href`
 
-    `<LinkTo >` will use your application's Router to fill the element's `href` property with a URL
+    `<LinkTo>` will use your application's Router to fill the element's `href` property with a URL
     that matches the path to the supplied `routeName`.
 
     ### Handling current route