IA icon variation - fix and guidance

[cdpestitschek]

Use case: Icon for left side panel navigation - Entry point to a new Flex AI product.

We notice a few things related to this icon that has being recommended to be applied to IA features/products. Could you help us with the fix and next steps?

• Icon is barely noticeable when is active. Others icons used to have filling.
  
  
  

• The icon is currently invisible on dark mode
  

• Different size compared to other icons
  it appears this icon is of larger size than other icons
  

Looking forward to hear back.

Thanks in advance,
Carol

[dosubot[bot]]

Hey @cdpestitschek, nice to see you back! 😊 Hope everything's been awesome since our last chat. I'm diving into your issue now and will get back to you with a detailed response soon!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Support Center Icons (updated: 09/21/2022, similarity score: 87%)
• Warning icon on Avatar (updated: 05/31/2023, similarity score: 86%)
• Regional Icon - Answer (updated: 01/04/2023, similarity score: 86%)

[dosubot[bot]]

Based on the context provided, it seems like you're having issues with the visibility, size, and active state of a specific icon in the Paste design system. Here are some suggestions on how you can address these issues:

1. Make it more noticeable when active: You can achieve this by changing the color of the icon when it's active. This can be done by dynamically changing the color prop based on the active state. Here's an example of how you can do this:

const dynamicColor = isActive ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFFFFF" : "#000000") : color;

In this example, the color of the icon changes based on whether it's active and the user's preferred color scheme.

2. Visibility in dark mode: To ensure visibility in dark mode, you can use a color that contrasts well against dark backgrounds. Light colors like white or light gray are generally good choices. You can also consider using CSS media queries to change the icon color based on the user's preferred color scheme.

3. Consistency in size with other icons: To maintain consistency in size, you can set a standard size for all icons in your application. If the size prop is used to control the size of the icon, ensure that it is set to a value that matches the size of other icons in your application. You can also provide a default size that aligns with your design guidelines if the size prop is not specified.

Here's an example of how you can set a default size for your icons:

const CircleIcon = React.memo(
  ({ title = "Circle Icon", decorative = true, className, color, size = 24, isActive = false }: CircleIconProps) => { // Default size set to 24
    ...
  },
);

In this example, the size prop has a default value of 24, ensuring consistency across icons if not specified.

Regarding the application of color to the icons in the Paste design system, the current method is through the use of the CustomizationProvider component, which allows for custom styles to be applied to icons. This is demonstrated in the test case for customization, where the CustomizationProvider is used to apply a backgroundColor style to icons, effectively changing their color. The backgroundColor is specified using theme tokens such as colorBackgroundSuccess and colorBackgroundDestructive.

I hope this helps! If you have any further questions or need more clarification, please let me know.

Sources

• packages/paste-website/src/components/icons/CircleIcon.tsx
• packages/paste-icons/test/icons.spec.tsx
• packages/paste-website/src/components/icons/PasteIconPride.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Hi @cdpestitschek,

Icon is barely noticeable when is active. Others icons used to have filling.

Icons should not have built-in state. Maybe you want to wrap it in a toggle button like this example? https://paste.twilio.design/components/button#toggle-button

The icon is currently invisible on dark mode

Icons by default inherit the current font color. All Icons in Paste work the same way. If it doesn't adjust correctly on dark mode, it is likely you are overriding the icon color on light mode, and not accounting for dark mode.

Different size compared to other icons. it appears this icon is of larger size than other icons

Icons are SVGs and can be sized any which way. Please see this example https://paste.twilio.design/components/icon/usage-guidelines#resizing-icons

Hope this helps!

[cdpestitschek]

I don't believe that toggle is the example in case. Here is a currently situation to illustrate the issue I'm reporting:

The difference between when an icon in the side left navigation is selected. Is not just the stroke colour that changes. It's as if it were a negative of the icon, and in this case, I couldn't find this variation of the IA icon available anywhere.

About size and invisibility
I inform you that regarding the other two pending points, the developer already adjust the implementation and they are apparently are resolved.

[TheSisb]

I'm sorry, I read your message a few times and still can't understand what the issue is. Can you please explain it in more detail? I'm also not clear on what the image is showing.

About size and invisibility
I inform you that regarding the other two pending points, the developer already adjust the implementation and they are apparently are resolved.

Glad it worked out!

[nkrantz]

Hey @cdpestitschek - do you still need support with this icon question?

[cdpestitschek]

Since I've created the other thread (requesting an icon), I will finish this one. Thanks.