fix(button): only use tooltipAlignment if button hasIconOnly (#16169)

Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Apr 16, 2024 · b82d843 · b82d843
1 parent 0326f87
commit b82d843
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -154,7 +154,9 @@ const Button = React.forwardRef(function Button<T extends React.ElementType>(
   const iconOnlyImage = !ButtonImageElement ? null : <ButtonImageElement />;
 
   if (!isIconOnlyButton(hasIconOnly, kind)) {
-    return <ButtonBase ref={ref} {...props} />;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props;
+    return <ButtonBase ref={ref} {...propsWithoutTooltipAlignment} />;
   } else {
     let align: PopoverAlignment | undefined = undefined;
 

diff --git a/packages/react/src/components/Button/__tests__/Button-test.js b/packages/react/src/components/Button/__tests__/Button-test.js
@@ -80,6 +80,11 @@ describe('Button', () => {
     );
   });
 
+  it('should not error on tooltipAlignment even when hasIconOnly=false', () => {
+    render(<Button tooltipAlignment="start" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
   it.each([
     ['primary', 'cds--btn'],
     ['secondary', 'cds--btn--secondary'],