Right border length

[pradyuk]

I'm trying to make my right border touch the top and bottom of my blue background, but a bit stuck with that. Also, when I click, the focus state is not wrapping around the icon only, it stretches to the right border which is not desired. Any help will be appreciated.

Link to PR -> click here

[serifluous]

Thanks, @pradyuk ! Can you push your changes so we can see how you've implemented the border?

[pradyuk]

My bad, pushed! :)

[serifluous]

I'll check in with our engineering team on this border question, but a quick unrelated thing: You might already have this link but this has the tokens you'll need for things like the background color and the border color spec'd out https://share.goabstract.com/b72d29bc-9dbf-4f99-9a52-d3b4e6bf53cd?collectionLayerId=efe4c114-c1ec-47a1-a35d-8d2f2ad50c78&mode=design

(ignore me if you just haven't gotten around to this level of styling yet)

[pradyuk]

Thanks for that @serifluous! I had that link, but just started using abstract so figured about all that info after your msg! I'll still need a little help with that border though :)

[richbachman]

Hi @pradyuk it looks like your Box may be in the place. I put together a quick CodeSandbox to show a possible solution. https://codesandbox.io/s/header-box-example-lo35j?file=/src/index.tsx

[pradyuk]

Hi @richbachman! Thanks for letting me know. I tried updating the packages, and iconColor is failing for some reason. "Property 'iconColor' does not exist on type 'IntrinsicAttributes & IconWrapperProps & { icon: string; title?: string | undefined; decorative: boolean; }"

[serifluous]

Try color rather than iconColor. The icon component props table might be able to help you out: https://paste.twilio.design/icons/usage-guidelines#props

[pradyuk]

Looks like there is a bug. I was actually using iconColor before and it was working fine. When I try now, I get the desired result on storybook with iconColor but i see an error in the editor. Using "color" is not giving be the desired output. Seems a bit weird.

[richbachman]

Hi @pradyuk I think we might be seeing a dependency issue now. You'll need to update all of the Paste packages in order to get the correct types. The full list is here: https://paste.twilio.design/getting-started/engineering#install-paste-system-packages

Keeping these up to date will be much easer soon.

[pradyuk]

@richbachman yup, that was the issue. Thanks! :)