[FEATURE] Create More Action Component on Table Listing

judeb21 commented 2 months ago

Description

Develop the More Action Component Popover button. This component will be used on table components to view more actions like edit, delete etc. This component should function properly and be fully responsive on all screen sizes.

Acceptance Criteria

Implement the More Action Component button that functions appropriately using popover guideline
Ensure the component is visually appealing and follow the design accordingly
Use the same icon used on the design with alteration
Maintain accessibility standards and arial labels

Requirements

The component should accept a list of more actions to perform example, Edit, Delete, View etc
Each actions should return corresponding events when there are clicked
The component should be clickable and drops down further clickable actions
The component should follow the design

Test

Ensure the component renders properly when imported
Test that the component accepts required props: More actions and it corresponding functions
Ensure responsiveness across various screen sizes
Ensure accessibility with screen readers and appropriate tab indexing

Task

[ ] Develop the component based on the specific requirements
[ ] Implement support for the various props that will be sent to the component
[ ] Implement support for functions that will be performed when action values are clicked
[ ] Write unit test to validate component behavior
[ ] Verify accessibility features are properly implemented.

Link

Fimga

Image

chumex412 commented 2 months ago

There's no timeframe for this task. Please do so. Also, link this issue to the issue for implementing the full table.

judeb21 commented 2 months ago

Done @chumex412

MhideTech commented 2 months ago

Hey @judeb21 @chumex412 please I need help understanding this issue. I was told to develop the More Action popover button and make it fully responsive. How I'm I supposed to do that if I don't have access to the component implementing this one I'm about to do??

judeb21 commented 2 months ago

This issue is deeply related to the product table issue on #Issue203. Please collaborate with the person working on it and if there's no need for this implementation. You can pick another task @MhideTech

MhideTech commented 2 months ago

Woaaahh thanks @judeb21

hngprojects / hng_boilerplate_nextjs