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

Dropdowns with Accordion #1014

Closed
silvalaura opened this issue Feb 16, 2023 · 4 comments · Fixed by #1129
Closed

Dropdowns with Accordion #1014

silvalaura opened this issue Feb 16, 2023 · 4 comments · Fixed by #1129
Assignees
Labels
feature request Functionality that you believe is missing that you want added

Comments

@silvalaura
Copy link
Collaborator

Need to finalize visual design for what it should look like to have an accordion inside a dropdown. Then, we should add an example in the docs site.

Quick example: https://codesandbox.io/s/dropdown-with-accordion-8uheek?file=/example.tsx

@silvalaura silvalaura added the needs design feedback Waiting for Design approval or feedback label Feb 16, 2023
@orion-cengage
Copy link
Contributor

orion-cengage commented May 2, 2023

Figma: https://www.figma.com/file/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?type=design&node-id=606%3A16350&t=6yAmjnYZwlYgQwt3-1

###ACs

1.0 When a list item in the dropdown is a parent with children, it gets a chevron on the right side to indicate it can be expanded.

Image

-- 1.1 There should be a prop to show that parent item expanded by default.
-- 1.2 Clicking anywhere on the item (not just the chevron) should expand or collapse the item.
-- 1.3 Child items should be indented 32px to reinforce the hierarchy

Image

-- 1.4 You can only have one level of children. Children can not also be parents with their own children.
-- 1.5 If you include icons on the parent level, the children do not also have icons.

Image

-- 1.6 If you include icons on the parent level, children are indented 72px

Image

2.0 You can insert dividers between items to create groups, same as with non-expandable items

Image

3.0 Verify dark mode is also included

Image

@orion-cengage orion-cengage added feature request Functionality that you believe is missing that you want added and removed needs design feedback Waiting for Design approval or feedback labels May 2, 2023
@orion-cengage orion-cengage moved this from To Do to In Progress in React Magma May 2, 2023
@orion-cengage orion-cengage moved this from In Progress to Ready for Review in React Magma May 2, 2023
@silvalaura silvalaura moved this from Ready for Review to To Do in React Magma May 8, 2023
@jwad03 jwad03 moved this from To Do to In Progress in React Magma Aug 21, 2023
@silvalaura silvalaura linked a pull request Sep 12, 2023 that will close this issue
5 tasks
@chris-cedrone-cengage chris-cedrone-cengage moved this from In Progress to Ready for Review in React Magma Oct 9, 2023
@github-project-automation github-project-automation bot moved this from Ready for Review to Ready for QA in React Magma Oct 11, 2023
@silvalaura
Copy link
Collaborator Author

@ccedrone Please provide testing notes & list of all use cases

@silvalaura
Copy link
Collaborator Author

Testing Notes: https://laura-silva.notion.site/Expandable-Dropdown-dd5c52a6072f4cfca8a6e64259f1a4a5?pvs=4

There are a few questions and issues noted @ccedrone

@orion-cengage
Copy link
Contributor

Feedback:

  • Please adjust the focus outline on the top level items so it doesn't cut off on the sides. Looks like one way to do it is to change the offset to -2px. This will also help keep the focus outline from overlapping into adjacent menu items.

Image

  • There should only be 8px of padding at the top and bottom of the dropdown container. It looks like there is some extra padding being applied on a div inside that container, making the padding actually look more like 12px or 16px.

Image

  • Did AC 1.1 get completed? There should be a prop to have one or more parent items automatically expanded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Functionality that you believe is missing that you want added
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants