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.

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

VTag improvements #3975

Merged
merged 2 commits into from Apr 1, 2024
Merged

VTag improvements #3975

merged 2 commits into from Apr 1, 2024

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Mar 27, 2024

Fixes

Fixes #3190 by @dhruvkb

This PR is the updated version of #3870 by @Stagge

Description

The VTag component added in #3137 has been improved in the following ways:

  • All props are forwarded to the inner VButton (and the VLink component)
  • All events are emitted from the inner VButton
  • The content is displayed with a slot for the content instead of a prop.
  • Accessible labels to the links have been added to clearly indicate that the link is a tag. The a11y group advised not to add aria-labels, and use the inner text instead
  • Tests for the VTag component has been added.

Testing Instructions

Run the frontend app using just frontend/run dev
Go to http://localhost:8443/preferences and switch the additional_search_views flag on.
Go to the homepage and search for something, then select one of the results. You should see the tags work as expected.

There are no visual changes, so the VR tests pass.

Checklist

  • My pull request has a descriptive title (not a vague title likeUpdate index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.
  • I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@obulat obulat requested a review from a team as a code owner March 27, 2024 06:15
@openverse-bot openverse-bot added 🟩 priority: low Low priority and doesn't need to be rushed ✨ goal: improvement Improvement to an existing user-facing feature 💻 aspect: code Concerns the software code in the repository 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Mar 27, 2024
@github-actions github-actions bot added the 🧱 stack: frontend Related to the Nuxt frontend label Mar 27, 2024
@obulat obulat mentioned this pull request Mar 27, 2024
8 tasks
@obulat obulat removed the 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work label Mar 27, 2024
Copy link
Member

@zackkrida zackkrida left a comment

Choose a reason for hiding this comment

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

I think the tests could use some cleanup but that it isn't blocking.

Stagge and others added 2 commits March 28, 2024 15:32
Co-authored-by: FelixSjogren <felixarvidsjogren@gmail.com>

FEAT - Add lot for the content instead of a prop (#2)

Closes #2

Co-authored-by: Stagge <jonatan.stagge@gmail.com>

TEST - Add tests for VTag (#7)

Added tests for Vtag,
tests include:
All props are sent to VButton
VTag renders slot content
Renders anchor tag.

Co-authored-by: Stagge <jonatan.stagge@gmail.com>

FEAT - Ensure inner VButton emits and handles events in VTag #4

Closes #4

Added accessibility label (#10)

- Added aria-label to indicate that that the link is a tag

Improvements from review

lint

Signed-off-by: Olga Bulat <obulat@gmail.com>
Signed-off-by: Olga Bulat <obulat@gmail.com>
Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

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

LGTM, I just have a doubt.

Comment on lines +7 to +8
v-bind="$props"
v-on="$listeners"
Copy link
Member

Choose a reason for hiding this comment

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

Why were these added?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Normally, these should just pass through, but I think because we use 2 levels of components here: VButton that is as VLink, they are not being passed without these.

@obulat obulat merged commit d47d1c0 into main Apr 1, 2024
41 checks passed
@obulat obulat deleted the vtag_improvments branch April 1, 2024 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💻 aspect: code Concerns the software code in the repository ✨ goal: improvement Improvement to an existing user-facing feature 🟩 priority: low Low priority and doesn't need to be rushed 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Refactor and improve VTag component
5 participants