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 to PageLayout component #628

Merged
merged 4 commits into from
May 16, 2024
Merged

Add toolbar to PageLayout component #628

merged 4 commits into from
May 16, 2024

Conversation

pfferrari
Copy link
Contributor

@pfferrari pfferrari commented Apr 22, 2024

What I did

Added toolbar configuration to the PageLayout component to provide a simplified and guided way to manage the top right buttons and dropdown of the apps.
The new toolbar prop added to the PageLayout component is an object with optional buttons and dropdownItems keys to respectively define:

  • The set of main level actions, rendered as Buttons.
  • The set of nested actions groups, rendered as DropdownItems inside a company generated Dropdown.
    A default responsive behavior is active by default to rearrage the external Buttons inside the dropdown menu in case of mobile viewport.

Example usage

<PageLayout
  ...
  toolbar={{
    buttons: [
      {
        label: 'Add new',
        icon: 'plus',
        size: 'small'
      },
      {
        label: 'Secondary',
        icon: 'pulse',
        variant: 'secondary',
        size: 'small'
      }
    ],
    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 self-assigned this Apr 22, 2024
@pfferrari pfferrari added the enhancement New feature or request label Apr 22, 2024
Copy link

netlify bot commented Apr 22, 2024

Deploy Preview for commercelayer-app-elements ready!

Name Link
🔨 Latest commit e65a7e5
🔍 Latest deploy log https://app.netlify.com/sites/commercelayer-app-elements/deploys/6645bb3019348d0007df10f4
😎 Deploy Preview https://deploy-preview-628--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 marked this pull request as ready for review April 22, 2024 15:56
Copy link
Contributor

@gciotola gciotola left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 well done!

@pfferrari pfferrari requested a review from gciotola April 22, 2024 16:53
gciotola
gciotola previously approved these changes Apr 22, 2024
@marcomontalbano marcomontalbano marked this pull request as draft April 23, 2024 15:30
@pfferrari pfferrari changed the title Add TopRightToolbar component Add toolbar to PageLayout component May 13, 2024
@pfferrari pfferrari marked this pull request as ready for review May 13, 2024 09:40
@pfferrari pfferrari requested a review from gciotola May 13, 2024 09:40
gciotola
gciotola previously approved these changes May 14, 2024
@pfferrari pfferrari merged commit 1199f0e into main May 16, 2024
5 checks passed
@pfferrari pfferrari deleted the add-top-right-toolbar branch May 16, 2024 08:30
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.

None yet

4 participants