Is there a way to customize popover button styles ?

[jaymehta-twilio]

Hi team,

I need to include this popover alongside the column header.

I need to

1. change the color of the info icon
2. Adjust spacing so it's in the same line as the heading

I tried adding the style to the popover button but the button component doesn't respect that.

<PopoverButton variant="link" size="reset">
      <InformationIcon
           decorative={false}
           title="Description of icon"
           style={{
               top: "space5",
                color: "#606B85",
              }}
 />

Is there a workaround for this ?

[SiTaggart]

Hi @jaymehta1986

---

Generally speaking you will not be able to apply a Classname, style attribute or CSS attribute to any Paste component. If you can, it's a bug, and will likely break in the future when we spot it.

⚠️ Please don't do this. 🙏

---

Positioning and layout

For positioning we ask you to think compositionally. You have two components in a layout (Text, Popover, aligned centrally). You will need to place your text and popover inside a layout that you create that aligns the two components together. You can do this a number of ways, potentially the easiest will be a simple box

<Box display="flex" alignItems="center">
  <Text></Text>
  <Popover />
</Box>

This codesandbox goes over a few options you have for doing this. It applies for all components though, not just icons and text. https://codesandbox.io/s/ways-to-align-icons-to-text-953xm?file=/src/index.tsx

Coloring

In a similar vein, components come in variants or sometimes have style props. You have to place the component into the state that you want based on what is provided. In the case of an Icon it comes with a color prop.

You should be able to change the color of the Icon as per the guidelines on using Icons https://paste.twilio.design/icons/usage-guidelines/#adapting-the-icons-color.

Hope that helps. Let us know how you get on and if this answers your question

[jaymehta-twilio]

@SiTaggart this was very helpful. Not just to solve the problem (took me 5 mins) but also, to understand the paste design principles. 🙏🏽