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

Add Toolbar component #624

Merged
merged 4 commits into from
Apr 22, 2024
Merged

Add Toolbar component #624

merged 4 commits into from
Apr 22, 2024

Conversation

pfferrari
Copy link
Contributor

@pfferrari pfferrari commented Apr 18, 2024

What I did

Added a new Toolbar component that generates a horizontal navigation menu made of Buttons and Dropdowns configured by its props.
Its menu items are configurable by filling the items prop and they are rendered as Buttons as default behavior.
Each menu item could have a grouped hierarchy of dropdownItems to define the sub menu shown by clicking it.
If set, the dropdownItems prop will cause the current item to be rendered as a Dropdown with a Button as clickable label.
Thanks to the grouped behavior of the dropdownItems prop a divider line will be automatically rendered between each group.

Toolbar

Example usage

<Toolbar
  items={[
    {
      label: 'Primary',
      size: 'small',
      onClick: () => {
        console.log('Primary')
      }
    },
    {
      label: 'Secondary',
      icon: 'pulse',
      variant: 'secondary',
      size: 'small',
      onClick: () => {
        console.log('Secondary')
      }
    },
    {
      icon: 'dotsThree',
      size: 'small',
      variant: 'secondary',
      dropdownItems: [
        [
          {
            label: 'Edit',
            onClick: () => {
              console.log('Edit')
            }
          },
          {
            label: 'Set metadata',
            onClick: () => {
              console.log('Set metadata')
            }
          }
        ],
        [
          {
            label: 'Delete',
            onClick: () => {
              console.log('Delete')
            }
          }
        ]
      ]
    }
  ]}
/>

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests).
  • Make sure to add/update documentation regarding your changes.
  • You are NOT deprecating/removing a feature.

@pfferrari pfferrari marked this pull request as draft April 18, 2024 15:03
Copy link

netlify bot commented Apr 18, 2024

Deploy Preview for commercelayer-app-elements ready!

Name Link
🔨 Latest commit 811657d
🔍 Latest deploy log https://app.netlify.com/sites/commercelayer-app-elements/deploys/6622509fe12c150008fa10de
😎 Deploy Preview https://deploy-preview-624--commercelayer-app-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@pfferrari pfferrari requested a review from gciotola April 18, 2024 15:03
@pfferrari pfferrari self-assigned this Apr 18, 2024
@pfferrari pfferrari added the enhancement New feature or request label Apr 18, 2024
@pfferrari pfferrari marked this pull request as ready for review April 18, 2024 17:38
gciotola
gciotola previously approved these changes Apr 19, 2024
malessani
malessani previously approved these changes Apr 19, 2024
@pfferrari pfferrari dismissed stale reviews from malessani and gciotola via 811657d April 19, 2024 11:08
@pfferrari pfferrari merged commit 1dd85a7 into main Apr 22, 2024
5 checks passed
@pfferrari pfferrari deleted the add-toolbar branch April 22, 2024 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants