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

new cba-list-new component #45

Open
Manvel opened this issue Mar 26, 2021 · 0 comments
Open

new cba-list-new component #45

Manvel opened this issue Mar 26, 2021 · 0 comments
Labels
good first issue Good for newcomers

Comments

@Manvel
Copy link
Member

Manvel commented Mar 26, 2021

Background

For the new CBA UI, we need to introduce new cba-list-new component as shown in the image below:

Screen Shot 2021-03-26 at 5 20 05 PM

For the project it might be wise to reuse already implemented cba-list component, as in the future this component is going to replace it.

What to change

Introduce new cba-list-new component by extending the existing cba-list component.

Additional info

  • The new cba-list-new component should mostly be WCAG compliant.
  • Keyboard naviations, sub-items, expansions and other similar implementation details are covered already by cba-list, so when in doubt about implementation, please refer to it first and ensure no regression is provided.
  • Replace subHeading with group and add + button to the end of the line.
    • Clicking + button should trigger addItem event on the cba-list component and in smoke test we need to use the event to add new group to the end of the list.
  • Hovering or selecting list item should show + button.
    • Clicking + button should trigger addSubitem event and in the smoke test add element to the end of the group the project(s) is located.
  • Hovering or selecting list item should show kebab menu.
    • Clicking or focusing and hitting enter on kebab menu should open cba-menu with items below:
      • Rename - trigger rename for current item.
        • hitting enter saves changes and trigger change event on the cba-list component.
      • Delete - deletes current item and trigger change event on the cba-list component.
  • Hitting Tab button on the selected item should move focus to +, then to kebab menu if exist and only then move out of the component.

Tests

  • Ensure to create smoke test with information about how to use the component.
  • Ensure that the functionality explained above are covered by puppeteer where possible(i.e. custom methods, parameters, keyboard and mouse navigation and etc.).
@Manvel Manvel changed the title Buttons and kebab menu for cba-list Buttons and kebab menu support for cba-list Mar 26, 2021
@Manvel Manvel changed the title Buttons and kebab menu support for cba-list new cba-projects component May 2, 2021
@Manvel Manvel added the good first issue Good for newcomers label May 2, 2021
@Manvel Manvel assigned Manvel and unassigned Manvel May 6, 2021
Manvel added a commit that referenced this issue May 10, 2021
Manvel added a commit that referenced this issue May 10, 2021
@Manvel Manvel changed the title new cba-projects component new cba-list-new component May 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants