Skip to content
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.

Sign up for GitHub

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

Update component docs to use angle bracket syntax #292

Merged
merged 10 commits into from
Aug 22, 2021
Merged

Update component docs to use angle bracket syntax #292

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ab45892
update docs to use angle bracket syntax
mcfiredrill Nov 15, 2019
8070f0d
Merge remote-tracking branch 'origin/master' into angle-brackets-codemod
mcfiredrill Nov 16, 2019
0027111
Update addon/components/file-dropzone/component.js
mcfiredrill Nov 19, 2019
aa98e71
prefix @ arguments in angle bracket component examples
mcfiredrill Nov 28, 2019
861b77c
Merge remote-tracking branch 'origin/master' into angle-brackets-codemod
mcfiredrill Jun 14, 2021
9f2d71d
Merge remote-tracking branch 'origin/master' into angle-brackets-codemod
mcfiredrill Jun 17, 2021
56c59a4
Update addon/components/file-dropzone/component.js
mcfiredrill Jun 21, 2021
9b6a103
Update addon/components/file-upload/component.js
mcfiredrill Jun 21, 2021
71d3298
Merge branch 'angle-brackets-codemod' of github.com:mcfiredrill/ember…
mcfiredrill Jul 3, 2021
176c29d
Merge remote-tracking branch 'origin/master' into angle-brackets-codemod
mcfiredrill Jul 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions addon/components/file-dropzone/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const dragListener = new DragListener();
drag and drop.

```hbs
{{#file-dropzone name="photos" as |dropzone queue|}}
<FileDropzone @name="photos" as |dropzone queue|>
{{#if dropzone.active}}
{{#if dropzone.valid}}
Drop to upload
Expand All @@ -39,15 +39,15 @@ const dragListener = new DragListener();
{{#if dropzone.supported}}
Drag and drop images onto this area to upload them or
{{/if}}
{{#file-upload name="photos"
accept="image/*"
multiple=true
onfileadd=(action "uploadImage")}}
<FileUpload name="photos"
accept="image/*"
Copy link
Collaborator

Choose a reason for hiding this comment

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

I fear we don't support passing HTML attributes to <FileUpload> yet. It doesn't seem to pass them to <input>. At least I don't see a ...attributes in the template.

Copy link
Collaborator

Choose a reason for hiding this comment

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

...attributes are applied to the parent element unless tagName is set to a empty string.

multiple=true
Copy link
Collaborator

Choose a reason for hiding this comment

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

multiple=true is not valid HTML, is it? I think it should be <FileUpload multiple />.

@onfileadd={{action "uploadImage"}}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

The coding style looks different than what I would expect. I'm used to this one:

<FileUpload
  @onfileadd={{action "uploadImage"}}
  name="photos"
  accept="image/*"
/>

So it's basically about this rules:

  • If there are multiple lines, each attribute or property should be on a new line
  • It should be intended by two spaces.
  • Arguments should be before HTML attributes.

I thought that's also what's used in Ember docs but noticed that Ember docs aren't consistent on these ones.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I usually do html attributes first and then args, usually actions last

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm I wonder if there is any ember-template-lint rule about this...

Copy link
Member

Choose a reason for hiding this comment

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

@mcfiredrill I am glad you asked 😄
ember-template-lint/ember-template-lint#871
I requested this a while ago :)
ember-template-lint/ember-template-lint#684

Although it isn't exactly what @knownasilya mentioned

<a id="upload-image" tabindex=0>Add an Image.</a>
{{/file-upload}}
</FileUpload>
</p>
{{/if}}
{{/file-dropzone}}
</FileDropzone>
```

```js
Expand Down
8 changes: 4 additions & 4 deletions addon/components/file-upload/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@ import uuid from '../../system/uuid';
<label for='name'>
{{input type='string' value=changeset.name id='name'}}

{{#file-upload name="avatar"
accept="image/*"
onfileadd=(action 'setAvatar' changeset)}}
<FileUpload name="avatar"
accept="image/*"
@onfileadd={{action 'setAvatar' changeset}}
{{#if changeset.avatar}}
<img src={{changeset.avatar.url}}
<a id="upload-avatar" tabindex=0>Add a photo of yourself</a>
{{else}}
<a id="upload-avatar" tabindex=0>Add a photo of yourself</a>
{{/if}}
{{/file-upload}}
</FileUpload>
</form>
{{/with}}
```
Expand Down