+
Skip to content
This repository was archived by the owner on Oct 14, 2025. It is now read-only.

Conversation

clintcs
Copy link
Collaborator

@clintcs clintcs commented May 14, 2024

🚀 Description

Tooltip's 0 line height can lead to overflow in some cases. Better to use display: flex instead. Additionally, Tooltip should be inline so it doesn't fill it's container and the tooltip itself is always positioned against its target.

📋 Checklist

  • I have read and followed the Contributing Guidelines.
  • I have added tests to cover new or updated functionality.
  • I have created or updated stories in Storybook to document the new functionality.
  • I have included a changeset with this Pull Request if it adds/updates/removes functionality for consumers.
  • I have scheduled a Design Review for these changes, if one is required.
  • I have followed the ARIA Authoring Practices Guide and/or met with the Accessibility Team to ensure this functionality is accessible.
  • I have added the component to exports in packages/components/package.json (if applicable).

🔬 How to Test

📸 Images/Videos of Functionality

.target { display: flex }

Before

image

After

image

.component { display: inline-block }

Before

image

After

image

Copy link

changeset-bot bot commented May 14, 2024

🦋 Changeset detected

Latest commit: e93d567

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@crowdstrike/glide-core-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

@clintcs clintcs marked this pull request as ready for review May 14, 2024 18:13
@clintcs clintcs merged commit fc9bfeb into main May 14, 2024
@clintcs clintcs deleted the tooltip-fixes branch May 14, 2024 21:21
@github-actions github-actions bot mentioned this pull request May 14, 2024
@abhiStriker
Copy link

Hi @clintcs I upgraded core version to 0.3.2 and can see this change impacted the position of tooltip icon a bit in accordions. Should we adapt to this change and make some changes at our end in internals repo?
image

@clintcs
Copy link
Collaborator Author

clintcs commented May 15, 2024

Thanks for letting us know and apologies the churn. Without a line-height on Tooltip, Tooltip is assuming the line-height of .summary.

The fix is actually on our end. The existing .target { display: inline-flex } ensures the target's box wraps neatly around it so that the tooltip is horizontally and vertically centered. We can also add .component { display: flex } so the inherited line-height doesn't apply.

I'll open a PR shortly.

@abhiStriker
Copy link

Thanks for letting us know and apologies the churn. Without a line-height on Tooltip, Tooltip is assuming the line-height of .summary.

The fix is actually on our end. The existing .target { display: inline-flex } ensures the target's box wraps neatly around it so that the tooltip is horizontally and vertically centered. We can also add .component { display: flex } so the inherited line-height doesn't apply.

I'll open a PR shortly.

Awesome thanks :)

@clintcs
Copy link
Collaborator Author

clintcs commented May 15, 2024

No problem! #124

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载