carbon icon indicating copy to clipboard operation
carbon copied to clipboard

Profile cant receive mb

Open emgosa opened this issue 1 year ago • 2 comments

Description

I am doing a selector, which includes a checkbox and a profile. Cant align profile with checkbox. Neither using a box with profile inside.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-jh1lf5?file=src%2FApp.tsx

Steps to reproduce

No response

JIRA ticket numbers (Sage only)

No response

Suggested solution

Integrate components Checkbox in Profile.

Carbon version

latest

Design tokens version

4.29.0

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

  • [X] I confirm there is no confidential or commercially sensitive information included.

emgosa avatar Mar 07 '24 12:03 emgosa

Hi @emgosa yeah, this is an issue with the type interface on Profile, which should extend MarginProps. Margins are still applied, but unfortunately there is still a type error.

Thanks for sending over that template - I'd recommend using a different pattern though to achieve alignment. Instead of passing the Portrait component as a node via the label prop on Checkbox I'd keep the components separate and just use the same string value that you pass to name on Profile as the aria-label prop on Checkbox . After adding some flex attributes to the Box above in the DOM, they can align quite nicely (sandbox here: https://stackblitz.com/edit/parsium-carbon-starter-ikzxfr?file=src%2FApp.tsx)

tomdavies73 avatar Mar 07 '24 15:03 tomdavies73

FE-6392

tomdavies73 avatar Mar 07 '24 15:03 tomdavies73

:tada: This issue has been resolved in version 128.3.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carbonci avatar Apr 04 '24 12:04 carbonci