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

Web: Add MarkInverse and ResourceLabelTooltip contents #50532

Merged
merged 6 commits into from
Dec 24, 2024

Conversation

kimlisa
Copy link
Contributor

@kimlisa kimlisa commented Dec 20, 2024

part of #46976

This PR

  • adds an inverse version of Mark to be used inside Tooltips, otherwise Mark is invisible. Tooltips uses inverse background color of main theme (eg: tooltips for dark theme uses light background and vice versa).
  • adds a single place to get tooltip content to explain user provided labels

Screenshots
RDS - dark theme
image

EKS - dark theme
image

SERVER - light theme
image

DATABASE - light theme
image

KUBE - bblp theme
image

Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-50532.d3pp5qlev8mo18.amplifyapp.com

@kimlisa
Copy link
Contributor Author

kimlisa commented Dec 20, 2024

if it helps to see how it will be used, here is screenshot (ignore the invisible mark, this version was before those changes)

image

Copy link
Collaborator

@zmb3 zmb3 left a comment

Choose a reason for hiding this comment

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

Looks great!

@@ -26,3 +26,8 @@ export const Mark = styled.mark`
background-color: ${p => p.theme.colors.interactive.tonal.neutral[2]};
color: inherit;
`;

export const MarkInverse = styled(Mark)`
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: JSdoc on exported function/var/types/styles etc.

import { IconTooltip } from 'design/Tooltip';
import styled from 'styled-components';

export function ResourceLabelTooltip({
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: JSDoc

@public-teleport-github-review-bot public-teleport-github-review-bot bot removed the request for review from rudream December 23, 2024 20:15
@thedevelopnik
Copy link
Contributor

Copy looks good to me! Thanks!

@kimlisa kimlisa added the no-changelog Indicates that a PR does not require a changelog entry label Dec 24, 2024
@kimlisa kimlisa enabled auto-merge December 24, 2024 19:24
@kimlisa kimlisa added this pull request to the merge queue Dec 24, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 24, 2024
@kimlisa kimlisa added this pull request to the merge queue Dec 24, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 24, 2024
@kimlisa kimlisa added this pull request to the merge queue Dec 24, 2024
Merged via the queue into master with commit 547f59d Dec 24, 2024
41 of 42 checks passed
@kimlisa kimlisa deleted the lisa/resource-label-tooltip branch December 24, 2024 21:51
@public-teleport-github-review-bot

@kimlisa See the table below for backport results.

Branch Result
branch/v16 Failed
branch/v17 Create PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport/branch/v16 backport/branch/v17 no-changelog Indicates that a PR does not require a changelog entry size/md ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants