fix: Button Group Menu Item Label Misaligned (#18951)

## Description

This PR fixes a minor bug that caused the label of new menu items inside the button group widget to be misaligned.

Fixes #18867

## Type of change

- Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?
- Manual

### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or manual QA
- [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
This commit is contained in:
Dhruvik Neharia 2022-12-16 12:06:55 +05:30 committed by GitHub
parent a30fbf2c77
commit f2709d6de7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -347,25 +347,22 @@ function PopoverContent(props: PopoverContentProps) {
onClick,
textColor,
} = menuItem;
if (iconAlign === Alignment.RIGHT) {
return (
<BaseMenuItem
backgroundColor={backgroundColor}
disabled={isDisabled}
key={id}
labelElement={<Icon color={iconColor} icon={iconName} />}
onClick={() => onItemClicked(onClick, buttonId)}
text={label}
textColor={textColor}
/>
);
}
return (
<BaseMenuItem
backgroundColor={backgroundColor}
disabled={isDisabled}
icon={<Icon color={iconColor} icon={iconName} />}
icon={
iconAlign !== Alignment.RIGHT && iconName ? (
<Icon color={iconColor} icon={iconName} />
) : null
}
key={id}
labelElement={
iconAlign === Alignment.RIGHT && iconName ? (
<Icon color={iconColor} icon={iconName} />
) : null
}
onClick={() => onItemClicked(onClick, buttonId)}
text={label}
textColor={textColor}