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.

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

Add tooltip Component for disabled buttons #4740

Merged
merged 17 commits into from
Jan 15, 2024

Conversation

RuthShryock
Copy link
Member

@RuthShryock RuthShryock commented Nov 28, 2023

Checklist

  1. If you've added code that should be tested, add tests
  2. If you've changed APIs, update (or create!) the documentation
  3. Ensure the tests pass
  4. Make sure that your code lints and that you've followed our coding style
  5. Write a title and, if necessary, a description of your work suitable for publishing in our release notes
  6. Mention any related issues in this repository (as #ISSUE) and in other repositories (as kobotoolbox/other#ISSUE)
  7. Open an issue in the docs if there are UI/UX changes

Notes

Added a tooltip component which has been added as an attribute to the Button component and wrote a tooltip.stories.tsx for documentation. Updated all the projectQuickAction and projectBulkAction icons to use the new tooltip component.

Related issues

Fixes #4611

@RuthShryock RuthShryock changed the title Adding Tooltip Component for disabled buttons Tooltip Component for disabled buttons Nov 28, 2023
@RuthShryock RuthShryock marked this pull request as ready for review November 28, 2023 21:51
Copy link

jsapp/js/components/common/tooltip.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Show resolved Hide resolved
jsapp/js/components/common/button.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Outdated Show resolved Hide resolved
jsapp/js/components/common/tooltip.tsx Show resolved Hide resolved
@RuthShryock RuthShryock changed the title Tooltip Component for disabled buttons Add tooltip Component for disabled buttons Dec 12, 2023
{props.isPending && (
<Icon name='spinner' size={iconSize} classNames={['k-spin']} />
<>
{props.tooltip !== undefined && (
Copy link
Member

Choose a reason for hiding this comment

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

I've noticed that if you don't add tooltip, this renders nothing. We need the button to be rendered with or without a tooltip :)

Copy link
Member

Choose a reason for hiding this comment

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

I thought that somethign is wrong with Storybook, because it wasn't rendering anything for Button, so I've added a commit that improves button.stories.tsx. Please take a look at what it does when testing the tooltip:
Screenshot 2023-12-13 at 15 19 35

@magicznyleszek magicznyleszek merged commit fac8cae into beta Jan 15, 2024
3 checks passed
@magicznyleszek magicznyleszek deleted the button-disabled-improve-styles branch January 15, 2024 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants