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

Fix Integration Button styles #50258

Merged
merged 1 commit into from
Dec 16, 2024
Merged

Fix Integration Button styles #50258

merged 1 commit into from
Dec 16, 2024

Conversation

avatus
Copy link
Contributor

@avatus avatus commented Dec 14, 2024

If a user could list integrations, and they could NOT create integrations, AND integrations existed, this would cause the disabled 'enroll new integration' button to be smashed to the left of the header (this is due to how its wrapped in an optional Hover Tooltip).

This PR just adds some space-between flex property to the header to ensure the button stays on the right side. It also moves the HoverTooltip position to the bottom because it looks better

old:
Screenshot 2024-12-13 at 9 26 08 PM

Updated
Screenshot 2024-12-13 at 9 25 40 PM

If a user could list integrations, and they could NOT create
integrations, AND integrations existed, this would cause the disabled
'enroll new integration' button to be smashed to the left of the header
(this is due to how its wrapped in an optional Hover Tooltip).

This PR just adds some space-between flex property to the header to
ensure the button stays on the right side. It also moves the
HoverTooltip position to the bottom because it looks better
@@ -79,7 +79,7 @@ export function Integrations() {
return (
<>
<FeatureBox>
<FeatureHeader>
<FeatureHeader justifyContent="space-between">
Copy link
Member

Choose a reason for hiding this comment

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

I'll take a closer look at this when I actually get around to reviewing the change. But just from a quick glance, I think it shouldn't be parent's responsibility to remember to set a certain flex attribute because a child might conditionally not render something. If possible, the child should make sure it's rendered correctly no matter the state. I'll see if that's doable here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The HoverTooltip has give me an issue with this in the past but this was back when I made it in v14 or whatever. Maybe it's easier now that the style system has been updated.

The issue is wanting to position the hover tooltip to its child but is wanting to render that child according to the tooltips parent. Last time i tried, this meant having to set something on the parent regardless. (This is also an issue when using it in a Table cell that you want to align right, for example). This could have all changed tho

I think merging this in before the next cut is preferable to reworking hovertooltip, and i can add a TODO to update the hovertooltip if you think that is sufficient.

Copy link
Member

Choose a reason for hiding this comment

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

Sure, I'll approve now and we can work on this later.

@ravicious ravicious self-requested a review December 16, 2024 12:19
@avatus avatus added this pull request to the merge queue Dec 16, 2024
Merged via the queue into master with commit 841d826 Dec 16, 2024
44 of 45 checks passed
@avatus avatus deleted the avatus/fix_int_button branch December 16, 2024 15:11
@public-teleport-github-review-bot

@avatus See the table below for backport results.

Branch Result
branch/v16 Create PR
branch/v17 Create PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants