Feat: Improve Dropdown Component #2492

ArthurTriis1 · 2024-10-04T13:05:08Z

What's the purpose of this pull request?

Improve the Dropdown by adding new options and expanding its usability. In this PR, properties like asChild, alignment, and dismissOnClick have been added. There are no breaking changes, but properties related to icons in DropdownButton and DropdownMenuItem were marked as deprecated, as these functionalities can now be configured directly within the component content.

How does it work?

New Hooks

As part of the refactor of the DropdownButton and DropdownMenuItem components, new hooks were created that encapsulate logic, enabling new components to be created with a fresh structure while maintaining functionality. The new hooks are useDropdownItem and useDropdownTrigger.

Alignment Property

A new property called align has been added to the DropdownMenu. This property allows the DropdownMenu to align with the DropdownButton based on the desired alignment: right, left, or center.

right	center	left

Adjustments to the `useDropdownPosition` Hook

Some adjustments have been made to the useDropdownPosition hook. It now observes changes in window resizing, fixing the alignment bug for the Dropdown.

Controlled Component

New functionality has been added to allow the Dropdown to be controlled externally, enabling it to be manipulated through external states. Example:

      const [isOpen, setIsOpen] = useState(false)
      return (
        <Dropdown isOpen={isOpen} onDismiss={() => {setIsOpen(false)}}>
          <DropdownButton>Controlled Dropdown</DropdownButton>
          <DropdownMenu>
            <DropdownItem>A - Dropdown item as child</DropdownItem>
            <DropdownItem>B - Dropdown item as child</DropdownItem>
            <DropdownItem>C - Dropdown item as child</DropdownItem>
            <DropdownItem>D - Dropdown item as child</DropdownItem>
          </DropdownMenu>
        </Dropdown>

The usage of the controlled Dropdown can be seen in the preview at: #controlled

asChild Property

Based on libraries like Radix, the DropdownButton and DropdownMenuItem components now include the asChild property. This allows replacing the default rendered components with custom child elements, while maintaining behavior through prop passing. Example:

      <Dropdown>
        <DropdownButton asChild>
          <button>{'Dropdown with trigger as child'}</button>
        </DropdownButton>
        <DropdownMenu style={{ backgroundColor: "white"}}>
          <DropdownItem asChild>
            <button>A - Dropdown item as child</button>
          </DropdownItem>
          <DropdownItem asChild>
            <button>B - Dropdown item as child</button>
          </DropdownItem>
          <DropdownItem asChild>
            <button>C - Dropdown item as child</button>
          </DropdownItem>
          <DropdownItem asChild>
            <button>D - Dropdown item as child</button>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

The usage of the asChild property can be seen in the preview at: #as-child

How to test it?
You can test it by visiting the documentation at: https://faststore-site-git-feat-improve-dropdowneat-faststore.vercel.app/components/molecules/dropdown

References
Dropdown Menu
B2BTEAM-1895

Checklist

You may erase this after checking them all 😉

PR Title and Commit Messages

PR title and commit messages follow the Conventional Commits specification
- Available prefixes: feat, fix, chore, docs, style, refactor and test

PR Description

Added a label according to the PR goal - breaking change, bug, contributing, performance, documentation..

Dependencies

Committed the yarn.lock file when there were changes to the packages

vercel · 2024-10-04T13:05:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
faststore-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 31, 2024 0:55am

ArthurTriis1 · 2024-10-04T13:05:33Z

apps/site/middleware.ts

+  // const { pathname } = new URL(request.url)
+  // if (pathname.startsWith('/docs')) {
+  //   return NextResponse.redirect(
+  //     `https://developers.vtex.com/docs/guides/faststore${pathname.replace(
+  //       '/docs',
+  //       ''
+  //     )}`
+  //   )
+  // }
+  // if (pathname.startsWith('/components')) {
+  //   return NextResponse.redirect(
+  //     `https://developers.vtex.com/docs/guides/faststore${pathname
+  //       .replace('/components', '')
+  //       .replace(/\/([^\/]*)\//, '/$1-')}`
+  //   )
+  // }


Uncomment before the merge

ArthurTriis1 · 2024-10-04T13:06:02Z

apps/site/pages/components/molecules/dropdown.mdx

+#### Controlled
+
+export const ControlledDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <Dropdown isOpen={isOpen} onDismiss={() => {console.log("Dismiss"); setIsOpen(false)}}>
+      <DropdownButton asChild>
+        <button onClick={() => setIsOpen(old => !old)}>{'Controlled Dropdown with trigger as child'}</button>
+      </DropdownButton>
+      <DropdownMenu style={{ backgroundColor: "white"}}>
+        <DropdownItem  asChild>
+          <button>A - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>B - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>C - Dropdown item as child</button>
+        </DropdownItem>
+        <DropdownItem  asChild>
+          <button>D - Dropdown item as child</button>
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}


Adds controlled option for Dropdown Component

ArthurTriis1 · 2024-10-04T13:06:54Z

packages/components/src/molecules/Dropdown/DropdownMenu.tsx

+  const handleKeyNavigatePress = (key: string) => {
+    const dropdownItems = dropdownItemsRef?.current ?? [];
+    const selectedIndex = selectedDropdownItemIndexRef!.current;
+
+    const rearrangedDropdownItems = [
+      ...dropdownItems.slice(selectedIndex + 1),
+      ...dropdownItems.slice(0, selectedIndex + 1),
+    ];
+
+    const matchItem = rearrangedDropdownItems.find(
+      (item) => item.textContent?.[0]?.toLowerCase() === key.toLowerCase()
+    );
+
+    if (matchItem) {
+      selectedDropdownItemIndexRef!.current = dropdownItems.indexOf(matchItem);
+      matchItem.focus();
+    }
+  };


Add key navigation to Dropdown component

codesandbox-ci · 2024-10-04T13:07:10Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

ArthurTriis1 · 2024-10-04T13:08:26Z

packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts

+  dismissOnClick?: boolean
+}
+
+export const useDropdownItem = <


Extract the logic of DropdownItem to a reusable hook

ArthurTriis1 · 2024-10-04T13:09:03Z

packages/components/src/molecules/Dropdown/hooks/useDropdownPosition.ts

+  useEffect(() => {
+    const updateMenuPosition = () => {
+      // Necessary to use this component in SSR
+      const isBrowser = typeof window !== 'undefined'
+
+      const buttonRect = dropdownTriggerRef?.current?.getBoundingClientRect()
+      const topLevel = buttonRect?.top ?? 0
+      const topOffset = buttonRect?.height ?? 0
+      const leftLevel = buttonRect?.left ?? 0
+
+      // The scroll properties fix the position of DropdownMenu when the scroll is activated.
+      const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0
+      const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0
+
+      const topPosition = topLevel + topOffset + scrollTop
+
+      const leftPosition = leftLevel + scrollLeft
+
+      setPositionProps({
+        top: topPosition,
+        left: leftPosition,
+        loading: false
+      })
+    }


Update Dropdown position based on window resize

ArthurTriis1 · 2024-10-04T13:09:23Z

packages/components/src/molecules/Dropdown/hooks/useDropdownTrigger.ts

+export const useDropdownTrigger = <T extends HTMLElement = HTMLElement>({
+  triggerRef,
+}: UseDropdownTriggerProps<T>) => {
+  const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } =
+    useDropdown<T>()
+
+  useImperativeHandle(triggerRef, () => dropdownTriggerRef!.current!, [
+    dropdownTriggerRef,
+  ])
+
+  return {
+    onClick: toggle,
+    ref: addDropdownTriggerRef,
+    'aria-expanded': isOpen,
+    'aria-controls': id,
+    'aria-haspopup': 'menu' as const,
+  }
+}


Extract the logic of DropdownButton to a reusable hook

packages/components/src/atoms/Button/index.ts

packages/components/src/molecules/Dropdown/DropdownButton.tsx

Co-authored-by: Fanny Chien <[email protected]>

apps/site/pages/components/molecules/dropdown.mdx

packages/components/src/molecules/Dropdown/contexts/DropdownContext.ts

packages/components/src/molecules/Dropdown/hooks/useDropdownItem.ts

packages/components/src/molecules/Dropdown/DropdownItem.tsx

packages/components/src/molecules/Dropdown/DropdownButton.tsx

hellofanny

Nice work! I think it's working as expected.
We just need to make sure to update our docs related to this component :)

hellofanny · 2024-10-22T19:09:32Z

packages/components/src/molecules/Dropdown/DropdownMenu.tsx

   * Specifies the size variant.
   */
  size?: 'small' | 'regular'
+  /**
+   * Alignment for the dropdown


Suggested change

* Alignment for the dropdown

* Specifies the dropdown alignment

Foi feita a alteração, como a Lari esta de ferias estou fazendo o dismiss.

ArthurTriis1 added 4 commits October 4, 2024 10:03

feat: Improve Dropdown

a2ff711

feat: Simplify DropdownItemElement

40db848

feat: Update dropdown position

1967473

docs: Adjust Dropdown Docs

814264f

ArthurTriis1 commented Oct 4, 2024

View reviewed changes

ArthurTriis1 self-assigned this Oct 4, 2024

ArthurTriis1 added the contributing Pull request submitted by the community label Oct 4, 2024

vercel bot deployed to Preview October 4, 2024 13:12 View deployment

feat: Add align position in DropdownMenu

aba94bd

vercel bot deployed to Preview October 8, 2024 02:10 View deployment

ArthurTriis1 marked this pull request as ready for review October 8, 2024 02:48

ArthurTriis1 requested a review from a team as a code owner October 8, 2024 02:48

ArthurTriis1 requested review from emersonlaurentino, pedromtec, eduardoformiga and hellofanny and removed request for a team, emersonlaurentino and pedromtec October 8, 2024 02:48

hellofanny reviewed Oct 15, 2024

View reviewed changes

packages/components/src/atoms/Button/index.ts Outdated Show resolved Hide resolved

packages/components/src/molecules/Dropdown/DropdownButton.tsx Outdated Show resolved Hide resolved

Update packages/components/src/molecules/Dropdown/DropdownButton.tsx

9aa21f8

Co-authored-by: Fanny Chien <[email protected]>

vercel bot deployed to Preview October 16, 2024 17:35 View deployment

Update packages/components/src/atoms/Button/index.ts

b64df8d

vercel bot had a problem deploying to Preview October 18, 2024 11:39 Failure

lariciamota reviewed Oct 18, 2024

View reviewed changes

lariciamota previously requested changes Oct 18, 2024

View reviewed changes

packages/components/src/molecules/Dropdown/DropdownButton.tsx Outdated Show resolved Hide resolved

packages/components/src/molecules/Dropdown/DropdownButton.tsx Outdated Show resolved Hide resolved

feat: apply adjusts in Dropdown

450d8b4

vercel bot deployed to Preview October 22, 2024 14:39 View deployment

feat: apply adjusts in Dropdown

9ae264e

ArthurTriis1 requested review from lariciamota and hellofanny October 22, 2024 14:42

vercel bot deployed to Preview October 22, 2024 14:44 View deployment

hellofanny approved these changes Oct 22, 2024

View reviewed changes

renatomaurovtex approved these changes Oct 29, 2024

View reviewed changes

feat: remove lock scroll

07912b1

vercel bot deployed to Preview October 31, 2024 12:55 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Improve Dropdown Component #2492

Feat: Improve Dropdown Component #2492

ArthurTriis1 commented Oct 4, 2024 •

edited

Loading

vercel bot commented Oct 4, 2024 •

edited

Loading

ArthurTriis1 Oct 4, 2024

ArthurTriis1 Oct 4, 2024

ArthurTriis1 Oct 4, 2024

codesandbox-ci bot commented Oct 4, 2024 •

edited

Loading

ArthurTriis1 Oct 4, 2024

ArthurTriis1 Oct 4, 2024

ArthurTriis1 Oct 4, 2024

hellofanny left a comment

hellofanny Oct 22, 2024

	* Alignment for the dropdown
	* Specifies the dropdown alignment

Feat: Improve Dropdown Component #2492

Are you sure you want to change the base?

Feat: Improve Dropdown Component #2492

Conversation

ArthurTriis1 commented Oct 4, 2024 • edited Loading

What's the purpose of this pull request?

How does it work?

New Hooks

Alignment Property

Adjustments to the useDropdownPosition Hook

Controlled Component

asChild Property

Checklist

vercel bot commented Oct 4, 2024 • edited Loading

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

codesandbox-ci bot commented Oct 4, 2024 • edited Loading

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

ArthurTriis1 Oct 4, 2024

Choose a reason for hiding this comment

hellofanny left a comment

Choose a reason for hiding this comment

hellofanny Oct 22, 2024

Choose a reason for hiding this comment

ArthurTriis1 commented Oct 4, 2024 •

edited

Loading

Adjustments to the `useDropdownPosition` Hook

vercel bot commented Oct 4, 2024 •

edited

Loading

codesandbox-ci bot commented Oct 4, 2024 •

edited

Loading