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

Jump to bottom

feat: add related prompts list component #1680

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add related prompts list component #1680

wants to merge 5 commits into from

Conversation

lauramargar
Copy link
Contributor

Pull request template

We need to simplify the implementation of related prompts in new setups. Copy-pasting the same components and logic in every setup is not a good practice, so we have added a new component (RelatedPromptsTagList) to the base project.

Motivation and context

  • Dependencies. If any, specify:
  • Open issue. If applicable, link:

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that causes existing functionality to not work as expected)
  • Change requires a documentation update

What is the destination branch of this PR?

  • Main
  • Other. Specify:

How has this been tested?

Tests performed according to testing guidelines:

Checklist:

  • My code follows the style guidelines of this project.
  • I have performed a self-review on my own code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have made corresponding changes to the documentation.
  • My changes generate no new warnings.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.

@lauramargar lauramargar requested a review from a team as a code owner December 16, 2024 10:50
annacv
annacv reviewed Dec 17, 2024
View reviewed changes
packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
:class="[{ 'x-related-prompt-selected__button': isSelected(index) }]"
>
<slot name="related-prompt-button-info">
<div class="x-related-prompt__button-info">
Copy link
Contributor

@annacv annacv Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Hi, can we convert this div into a span?
A div is not allowed inside a button, it can lead to accessibility issues, e.g. for screen readers
Or maybe the right approach is not using a button tag above, otherwise, we can't grant that the content inside the slot is an HTML allowed one.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

with a div element instead of a button seems to work fine

Copy link
Contributor

Choose a reason for hiding this comment

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

Then I would add there a role=button and an aria-pressed attributes for assistive technologies

annacv
annacv reviewed Dec 17, 2024
View reviewed changes
packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue Outdated
</span>
</div>
<CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
<PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
Copy link
Contributor

@annacv annacv Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Maybe colors should be customizable for customers

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, it was a mistake, that class should not be there

@annacv
Copy link
Contributor

annacv commented Dec 18, 2024 •
edited
Loading

Hi, I miss the <docs> section in both components 👀, and the update of Home.vue were the RelatedPrompt.vue is implemented

annacv
annacv reviewed Dec 18, 2024
View reviewed changes
packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
Comment on lines -67 to -69
nextQueryButtonClass: {
type: String,
default: 'x-button-outlined'
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should keep this level of customization, so we can add a class to modify spacing or add background colors as per customer's requirements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@annacv annacv annacv left review comments

@victorcg88 victorcg88 victorcg88 left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@lauramargar @annacv @victorcg88