fix(react): iconButtons have reiterate classNames

[kuri-sun]

Closes #15459

Icon buttons have duplicate classNames in their button HTML element because of the circular dependency.

Changelog

New

• ButtonBase.tsx

Changed

• Button.tsx
• index.tsx (IconButton folder)

Testing / Reviewing

To avoid the circular dependency, introduced a new ButtonBase.

[OLD] Button > IconButton > Button <--- This is the cause of "circular dependency". [NEW] Button > IconButton > ButtonBase

In IconButton, we used to import the Button component once again since we needed to rely on the logic(i.e. generating some classNames, ...etc.) that resides in Button.tsx. However, this logic in Button.tsx is seperatable. Upon investigation, I noticed that the logic was a mixture of the logic for the Button component(not hasIconOnly) and the IconButton component. So, by splitting this logic up and creating a new ButtonBase component to migrate the Button component's logic from Button.tsx.

Here is a brief explanation for this. Button.tsx … If-else condition for deciding whether the Button component or IconButton component. ButtonBase.tsx … The Button component's logic exists IconButton.tsx … Export the IconButton component

So in a nutshell, Extracted a logic for the Button component into ButtonBase.tsx from Button.tsx to leave Button.tsx file's responsibility only deciding whether the Button component or IconButton component.

As a pic below, we successfully removed duplicated classNames from the Button component. Also, the circular dependency during the build as well!(#14399)

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b21907144701c730acca35e9a2b95f77d69e573a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65f7a429440bde0008564079
😎 Deploy Preview	https://deploy-preview-15626--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kuri-sun]

Sorry I have to update this PR, I will let you know if it's ready! Thank you!

[kuri-sun]

I updated the PR, so it's ready! Thank you for your review!

[kuri-sun]

Thanks for the review, @guidari! 😄

[kuri-sun]

Sorry everyone! I had a long break so I didn't have time to look at this one! Sure, @tay1orjones! I will renew this with taking Storybook into consideration! Thank you for your patience! 😄

[kuri-sun]

Thanks for taking a look at this! This change will impact Storybook's ability to autogenerate the component API tables.

Right now the defaults for Button are not coming through: https://deploy-preview-15626--v11-carbon-react.netlify.app/?path=/docs/components-button--overview#component-api

We won't want to add BaseButton to the table because it's not exported. I'm not sure how best to fix this without specifying the default for every prop in the storybook args/argTypes.

Hi @tay1orjones!, I just checked the component table and as far as I saw, I don't think any changes are detected between the current Button component's props table and this branch's Button component's props table.

Here I attached the preview of this branch's Button components' props table. Please take a look. Thanks!

[carbon-automation[bot]]

Hey there! v11.54.0 was just released that references this issue/PR.