search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.73k stars 1.79k forks source link

[Feature Request]: OverflowMenu disable option #11057

Closed pjebs closed 2 years ago

pjebs commented 2 years ago

Summary

It would be good to be able to disable the overflow menu so it is not clickable and appears to not be clickable.

Justification

See: https://github.com/carbon-design-system/carbon-components-svelte/issues/1141

Desired UX and success metrics

No response

Required functionality

No response

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

tay1orjones commented 2 years ago

Thanks for the suggestion @pjebs! Could you share a bit of your use case for needing a disabled OverflowMenu?

The component spreads ...other onto the button, so <OverflowMenu disabled="disabled" /> will functionally disable the component.

The lacking piece here is that there aren't styles to accompany the disabled state, so it looks the same but doesn't function.

@carbon-design-system/design do we have a spec for OverflowMenu in a disabled state? This would be a small change to enable this.

aagonzales commented 2 years ago

Yeah we could easily add this. I'm curious though what the use-case is for disabling the whole menu itself versus disabling the options inside the menu. @pjebs

pjebs commented 2 years ago

If you go to https://PETERSIR.com, you will see a play button on the right hand side of the Notting Hill script. It use to be implemented with an overflow menu but I changed it due to this limitation.

I want to disable the playbutton entirely if the browser does not support text-to-speech functionality.

pjebs commented 2 years ago

You will notice that on a smaller screen, if the text for the UIShell (in this case "bookshop") is too long, it squeezes away the toolbar buttons instead of truncating the text.

pjebs commented 2 years ago

Screenshot_20220329-074731~2 Screenshot_20220329-074800~2

tay1orjones commented 2 years ago

I think for the case above it might be more appropriate to use a Button with hasIconOnly instead of using the OverflowMenu.

As Anna stated, for OverflowMenu I'd suggest disabling individual options within the OverflowMenu rather than the entire OverflowMenu. So for now this isn't a feature we're looking to add, but it is something you can create using disabled and providing your own custom styling.