Disabled Icons

[ramoneguru]

Is there a way to make icons show up as disabled (light mask over them)?

I have icons for capabilities that I'd like to show depending on whether or not it has a certain capability. When it's not capable, I can remove the icon and show a blank space. This is good for fast scanning a list, but it looks a touch odd to me. Alternatively, I can stack the capabilities without any gaps, but it might be tougher to see what is missing.

Ideally, I'd like to have all of the capabilities show up, then disable (using a disabled icon?) the ones that aren't available.

Icons with gaps

Icons without any gaps

[serifluous]

Hey @ramoneguru ! Since you're using buttons for these icons, you certainly have the option to use a disabled button. However, because a disabled button can't be focused and there's no supporting text here about why the 2 different types of icons are different, it's hard (for us) to know whether it'd be immediately clear to your customers what the UI is trying to tell them about a specific phone number's capabilities.

I'd definitely suggest getting more input from the Product Designers on your team, if you haven't already, to reach a solution or even more understanding of how a customer might approach this screen.

[ramoneguru]

Oh, I don't think I'm using it as a button? Were you suggesting wrapping each element in a <button> component?

<Stack orientation="horizontal">
            <Box width="50px" display="inline-block">
              {item.capabilities.voice.isCapable && (
                <VoiceCapableIcon decorative={false} title="Voice Capable" />
              )}
            </Box>
            <Box width="50px" display="inline-block">
              {item.capabilities.sms.isCapable && (
                <SMSCapableIcon decorative={false} title="SMS Capable" />
              )}
            </Box>
            <Box width="50px" display="inline-block">
              {item.capabilities.mms.isCapable && (
                <MMSCapableIcon decorative={false} title="MMS Capable" />
              )}
            </Box>
            <Box width="50px" display="inline-block">
              {item.capabilities.sip.isCapable && (
                <ProductElasticSIPTrunkingIcon decorative={false} title="SIP Capable" />
              )}
            </Box>
            <Box width="50px" display="inline-block">
              {item.capabilities.fax.isCapable && (
                <FaxCapableIcon decorative={false} title="Fax Capable" />
              )}
            </Box>
</Stack>

[TheSisb]

Yup, icons shouldn't be interactive for accessibility. Here's an example of an icon button.

[serifluous]

Ah yeah, I was mistaken. I was looking at the Active Numbers page.

But @TheSisb 's got the right links ^ and regardless, I'm not 100% sure if disabling a button is the right solution here so definitely rely on your product designer for this!

[aayushpi]

Jumping in here, it might be valuable to consider having a table header which shows voice | sms | fax | etc and each column underneath shows either a ☑️ or ❌ - from an information perspective, this will be much clearer. @ramoneguru

[jweintraub]

+1 to Aayush's comment. Also, this pattern, if changed, should be changed everywhere that it appears. Johanna Weintraub Staff, Product Designer [image: twilio] <http://www.twilio.com/?utm_source=email_signature>

…

On Thu, Jan 28, 2021 at 2:25 PM Aayush Iyer ***@***.***> wrote: Jumping in here, it might be valuable to consider having a table header which shows voice | sms | fax | etc and each column underneath shows either a ☑️ or ❌ - from an information perspective, this will be much clearer. @ramoneguru <https://urldefense.com/v3/__https://github.com/ramoneguru__;!!NCc8flgU!Ngpl4_uv_snyInbaW7fV4XUPLvwBI9PhdCr4j1jxXlDSPMx0yydBYnSPlGjlGUf2uw$> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/1115*discussioncomment-319210__;Iw!!NCc8flgU!Ngpl4_uv_snyInbaW7fV4XUPLvwBI9PhdCr4j1jxXlDSPMx0yydBYnSPlGiJ8M58ww$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ADJ7OE5GSPXT7N42QXR4QDLS4HP4RANCNFSM4WVYPFXQ__;!!NCc8flgU!Ngpl4_uv_snyInbaW7fV4XUPLvwBI9PhdCr4j1jxXlDSPMx0yydBYnSPlGgcxEaRcw$> .

[ramoneguru]

I guess I'd need to implement a fixed header thing that stops when the user scrolls to the table. Not terribly difficult shrug

[ramoneguru]

What about this layout?

Hmmm, looking at it in the list it's still kinda difficult to see what's what. They all kinda run together. I guess if there was an even lighter text color it might work or I could mess around more with the opacity as well...

<Stack orientation="horizontal" spacing="space0">
            <Box width="40px" display="inline-block">
              {item.capabilities.voice.isCapable
                ? <VoiceCapableIcon decorative={false} title="Voice Capable" color="colorTextLinkDarker" />
                : <VoiceCapableIcon decorative={false} title="Not Voice Capable" color="colorTextWeaker" />
              }
            </Box>
            <Box width="40px" display="inline-block">
              {item.capabilities.sms.isCapable
                ? <SMSCapableIcon decorative={false} title="SMS Capable" color="colorTextLinkDarker" />
                : <SMSCapableIcon decorative={false} title="Not SMS Capable" color="colorTextWeaker" />
              }
            </Box>
            <Box width="40px" display="inline-block">
              {item.capabilities.mms.isCapable
                ? <MMSCapableIcon decorative={false} title="MMS Capable" color="colorTextLinkDarker" />
                : <MMSCapableIcon decorative={false} title="Not MMS Capable" color="colorTextWeaker" />
              }
            </Box>
            <Box width="40px" display="inline-block">
              {item.capabilities.sip.isCapable
                ? <ProductElasticSIPTrunkingIcon decorative={false} title="SIP Capable" color="colorTextLinkDarker" />
                : <ProductElasticSIPTrunkingIcon decorative={false} title="Not SIP Capable" color="colorTextWeaker" />
              }
            </Box>
            <Box width="40px" display="inline-block">
              {item.capabilities.fax.isCapable
                ? <FaxCapableIcon decorative={false} title="Fax Capable" color="colorTextLinkDarker" />
                : <FaxCapableIcon decorative={false} title="Not Fax Capable" color="colorTextWeaker"/>
              }
            </Box>
</Stack>

[aayushpi]

My concern with this is it doesn't immediately indicate the you cannot ever use phone or sms if it's disabled. It can also be considered as "temporarily not available" and require a user to hover to learn more. A clear check or no check is a lot more effective in making the case. I am also unsure you'll need a fixed header since you can still pass a title attribute saying "SMS not available" on hover for the icon itself. @ramoneguru

[jweintraub]

Please check with Luz @lgalloherran before changing it - it would be good for her to approve the design changes. I think Aayush's idea made sense. Johanna Weintraub Staff, Product Designer [image: twilio] <http://www.twilio.com/?utm_source=email_signature>

…

On Thu, Jan 28, 2021 at 4:28 PM Nick Esquerra ***@***.***> wrote: I guess I'd need to implement a fixed header thing that stops when the user scrolls to the table. Not terribly difficult *shrug* — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/1115*discussioncomment-319400__;Iw!!NCc8flgU!N4COKZzvZ2VdVABn3EjZkB0fc6kfmmAqhC-50NtnhxKxzoguSQPiVktZg2G9hzh1Lg$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ADJ7OE5SPB32UVQ2RZ2N343S4H6L5ANCNFSM4WVYPFXQ__;!!NCc8flgU!N4COKZzvZ2VdVABn3EjZkB0fc6kfmmAqhC-50NtnhxKxzoguSQPiVktZg2E5cSoueA$> .

[corinne-nagel]

@ramoneguru Here's a design idea we worked on a bit ago for easy scanning (hasn't been tested but wanted to share with you all/Luz as an idea)

[ramoneguru]

Nice, yeah will discuss with Luz!!! Thanks for the feedback!!!