carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
98 stars 138 forks source link

Enhancement of page header on scroll #3807

Open anna-curtin opened 1 year ago

anna-curtin commented 1 year ago

What will this achieve?

Component enhancement of the IBM for Products page header

The page header currently allows for multiple buttons. On scroll, if there is two or more buttons they merge into one dropdown menu button currently. We would like a solution for this pattern for when one of the buttons is already a menu style/dropdown button of its own, merging with a single use button when a user scrolls down the page.

How will success be measured?

All actions from a header can be accessible when the header is collapsed on scroll, no matter the orginial button capabilities

Additional information

Here are a few initial ideas i had on this component enhancement

Option #1 Option #2
elycheea commented 1 year ago

FYI @carrenelloyd @My-Money29.

@anna-curtin can you share some more information about your product teams and what versions of Carbon you are currently using?

anna-curtin commented 1 year ago

@elycheea We are looking to move to carbon for IBM Products (v11) when the rest of the design org is ready to move over. Grey 100 theme. We are looking ahead to make sure that certain capabilities are there in order for us to make the move over.

elycheea commented 10 months ago

@Laura-Marshall I think we also had a similar discussion about these button behaviors.

Moh-Samy commented 8 months ago

@elycheea Hey Elysia, I was wondering if there's any progress or update regarding this issue. I think it would be very beneficial to have these enhancements in the header component.