fix(radio-button): margin bug fix

[andreancardona]

Closes #7113

added a margin around radio button to fix truncation bug

Changelog

New

• 0.25 rem to margin-top & margin-bottom around radio-button

Testing / Reviewing

• Go to: https://deploy-preview-7133--carbon-components-react.netlify.app/?path=/story/radiobutton--default

• add border & overflow around radio-button bx--radio-button__label as seen below border: 10px solid red; overflow: hidden;

• make sure radio-button's focus state is not cut off / truncated

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 6a018f1

https://deploy-preview-7133--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 6a018f1

https://deploy-preview-7133--carbon-components-react.netlify.app

[joshblack]

@andreancardona if I understand this issue, it's that the box-shadow bleeds over the box model of the radio button? Just wanted to confirm 👀

[andreancardona]

@andreancardona if I understand this issue, it's that the box-shadow bleeds over the box model of the radio button? Just wanted to confirm 👀

Yep! Let me know if there is a better way to solve for it

[joshblack]

@andreancardona this makes me think about the focus style itself, I'm curious if the shadow should be inset then instead? Would require a sync with design but it seems like our focus styles should probably stay scoped inside of the container instead of growing otherwise we do have to add in some extra spacing to accommodate for it 🤔

[andreancardona]

kes me think about the focus style itself, I'm curious if the shadow should be inset then instead? Would require a sync with design but it seems like our focus styles should probably stay scoped inside of the contai

Yeah that makes a lot more sense. What is the best next step then in this situation?

[joshblack]

bump @dakahn if you have a sec to review today

[tw15egan]

Just curious, if we're adding a margin to the top and bottom to account for the focus, should we also add some to the left side?

[dakahn]

seems cool to me, pending @tw15egan 's questions

[andreancardona]

Just curious, if we're adding a margin to the top and bottom to account for the focus, should we also add some to the left side?

good catch! updated!