Removing hover/focus state styling for Input

[mannehedlund]

I'm using Paste for this message input, and am struggling to make it look the way I want.
Basically, I'm wrapping an Input component with an InputBox. Unfortunately I can't seem to find a way to remove the styling for the hover and focus state for the Input. Currently, it looks like this. Any ideas on how to accomplish that or a workaround that might be worth trying?

[kylegilbreath]

Hi @mannehedlund! Could you provide some more info on what you are trying to achieve with this message input you describe? Is there are specific reason you are wrapping both the input and the attachment card in an outer input container?

[mannehedlund]

I am trying to have a message input and attach files to a message before sending. I want the attachments to be intuitively thought of as "in the input". Design wise, I want the attachments to go inside the input. But since I cannot have a Box inside an Input, I wrapped the Box and Input in an InputBox, which looks like the Input but does not handle the input message logic like the Input.

The result I want is basically what you see above, except only the InputBox has the hover/focus state styling whereas the Input does not.

[kylegilbreath]

Thanks for context @mannehedlund! I definitely see why you would want to intuitively associate the attachment to the input, but I'd suggest that you may not need to use the outer InputBox to wrap around them. Especially since you don't need any of the functionality or styling of an input on this outer container. From an accessibility standpoint, we purposely have the hover/focus state built into the input, and wouldn't want to turn those off for users.

This might be a good topic to chat more about at our office hrs! The slots are filled up this week, but the next opportunity to sign up would be on Thu Dec 16 if you are interested. Let me know if you'd like to grab a slot then, and I can add you to the signup sheet.

In the meantime, I'd recommend wrapping the message input and attachment in a Box and style it as necessary to create the desired illusion of association.

[mannehedlund]

Hey @kylegilbreath thanks for the explanation. I'm definitely up for a chat 16 Dec :)

As for replacing the InputBox with a Box, I could perhaps with some tweaks make it look the same as it does currently, but it will not help me achieve the desired result, which is to have accessibility for a large input where attachments are visible inside. While it would've been nice to have some flexibility there, I do understand and appreciate the rationale behind hardcoding accessibility.

[shleewhite]

@mannehedlund Came to design system office hours and we decided he should continue using his workaround until Paste has a component that is more appropriate for a chat input.