Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(react): add unstable_IconButton #10095

Merged
merged 9 commits into from
Nov 29, 2021
Merged

feat(react): add unstable_IconButton #10095

merged 9 commits into from
Nov 29, 2021

Conversation

joshblack
Copy link
Contributor

@joshblack joshblack commented Nov 11, 2021 •
edited
Loading

Closes #9967

This PR adds in the IconButton component under unstable for v11

image

Changelog

New

  • Add src/components/IconButton plus related tests and playground story

Changed

  • Update tooltip to include icon-tooltip
  • Update tooltip to have two new custom properties: tooltip-padding-block and tooltip-padding-inline

Removed

Testing / Reviewing

  • Visit the unstable_IconButton story in our next storybook and verify that the component works and looks as expected
  • Look at the Component API and double-check that it makes sense and matches our API guidelines
  • Make sure tests pass as expected

@netlify
Copy link

netlify bot commented Nov 11, 2021 •
edited
Loading

✔️ 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

@netlify
Copy link

netlify bot commented Nov 11, 2021

✔️ 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

@joshblack joshblack marked this pull request as ready for review November 11, 2021 22:45
@joshblack joshblack requested review from a team as code owners November 11, 2021 22:45
@joshblack
Copy link
Contributor Author

@laurenmrice this should show up under the next storybook under the unstable_IconButton story! Let me know if you have any questions 👀

@netlify
Copy link

netlify bot commented Nov 11, 2021

✔️ 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

@netlify
Copy link

netlify bot commented Nov 11, 2021 •
edited
Loading

✔️ 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

@netlify
Copy link

netlify bot commented Nov 11, 2021 •
edited
Loading

✔️ 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
tay1orjones approved these changes Nov 16, 2021
View reviewed changes
Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really great! I'm excited to see one less dependency in the button styles🏅

@joshblack
Copy link
Contributor Author

bump @jnm2377 @laurenmrice when you get a sec 👀

jnm2377
jnm2377 approved these changes Nov 16, 2021
View reviewed changes
Copy link
Contributor

@jnm2377 jnm2377 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delayed review. This looks 🔥

laurenmrice
laurenmrice requested changes Nov 16, 2021
View reviewed changes
Copy link
Member

@laurenmrice laurenmrice left a comment •
edited by joshblack
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
    Artboard

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

@joshblack joshblack requested review from kingtraceyj and laurenmrice and removed request for laurenmrice November 17, 2021 19:27
aagonzales
aagonzales requested changes Nov 19, 2021
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the height of the tooltip container is 23px not 22.
image

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.
Nov-19-2021 12-34-32

@joshblack
Copy link
Contributor Author

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 body-short-01 which should address the issue 👍

@joshblack
Copy link
Contributor Author

@aagonzales let me know if you have any more questions!

aagonzales
aagonzales approved these changes Nov 29, 2021
View reviewed changes
Copy link
Member

@aagonzales aagonzales left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its fine from the comments I posted. Not sure if @laurenmrice had any other.

laurenmrice
laurenmrice approved these changes Nov 29, 2021
View reviewed changes
Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@kodiakhq kodiakhq bot merged commit c902f3a into carbon-design-system:main Nov 29, 2021
@abbeyhrt abbeyhrt mentioned this pull request Dec 14, 2021
Closed
@tay1orjones tay1orjones mentioned this pull request Nov 7, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@laurenmrice laurenmrice laurenmrice approved these changes

@jnm2377 jnm2377 jnm2377 approved these changes

@aagonzales aagonzales aagonzales approved these changes

@tay1orjones tay1orjones tay1orjones approved these changes

@kingtraceyj kingtraceyj Awaiting requested review from kingtraceyj

Assignees
No one assigned
Labels
status: ready to merge 🎉
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Ship initial version of icon button based on design guidance
5 participants
@joshblack @tay1orjones @aagonzales @jnm2377 @laurenmrice