feat(react): add unstable_IconButton#10095
Conversation
|
✔️ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: 8eee0cf 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61a50c7f5ecf1c0007d23c2b 😎 Browse the preview: https://deploy-preview-10095--carbon-react-next.netlify.app |
|
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: e240c1b 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/618d92c56b171b0007c0e267 😎 Browse the preview: https://deploy-preview-10095--carbon-components-react.netlify.app |
|
@laurenmrice this should show up under the next storybook under the |
|
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: e240c1b 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/618d92c57c336b0008193b9c 😎 Browse the preview: https://deploy-preview-10095--carbon-elements.netlify.app |
|
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: 8eee0cf 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61a50c7f8428790007e69d98 😎 Browse the preview: https://deploy-preview-10095--carbon-elements.netlify.app |
|
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 8eee0cf 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61a50c7fb9b66900083fa34e 😎 Browse the preview: https://deploy-preview-10095--carbon-components-react.netlify.app |
tay1orjones
left a comment
There was a problem hiding this comment.
Looks really great! I'm excited to see one less dependency in the button styles🏅
|
bump @jnm2377 @laurenmrice when you get a sec 👀 |
jnm2377
left a comment
There was a problem hiding this comment.
Sorry for the delayed review. This looks 🔥
There was a problem hiding this comment.
Tooltip sizing
- The caret for the icon button tooltip should be 8px x 4px in size.
- There should be 2px padding on the top and the bottom of the text inside of the tooltip
For align
Take out alignments for:
- left-bottom
- left-top
- right-bottom
- right-top
For kind
The following buttons do not come as icon only buttons and should be removed from the dropdown:
- danger
- danger--primary
- danger--ghost
- danger--tertiary
aagonzales
left a comment
There was a problem hiding this comment.
Looks like the height of the tooltip container is 23px not 22.
Also the tooltip hangs around for a while after mousing away, is that intentional? I could see problems with that is there are multiple icons and a row.
|
Thanks @aagonzales! For the delay, there is a delay for entrance and exit that is a part of the spec. These are also configurable values as props so teams can have set the exit delay to 0 for that classic icon group approach 👀 Another option on our end could be to implement such that only one tooltip is visible at a time. For the height, I just updated it to use |
|
@aagonzales let me know if you have any more questions! |
aagonzales
left a comment
There was a problem hiding this comment.
I think its fine from the comments I posted. Not sure if @laurenmrice had any other.
Closes #9967
This PR adds in the
IconButtoncomponent underunstablefor v11Changelog
New
src/components/IconButtonplus related tests and playground storyChanged
tooltipto includeicon-tooltiptooltipto have two new custom properties:tooltip-padding-blockandtooltip-padding-inlineRemoved
Testing / Reviewing
unstable_IconButtonstory in our next storybook and verify that the component works and looks as expected