Skip to content

Commit

Permalink
Address CRs
Browse files Browse the repository at this point in the history
  • Loading branch information
kimlisa authored and github-actions committed Dec 24, 2024
1 parent fe089f4 commit 324e842
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 4 deletions.
2 changes: 1 addition & 1 deletion web/packages/design/src/Mark/Mark.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const SampleText = () => {
export const MarkInsideTooltip = () => {
return (
<IconTooltip>
Example of <MarkInverse>MarkForToolTip</MarkInverse>. Note the{' '}
Example of <MarkInverse>MarkInverse</MarkInverse> component. Note the{' '}
<MarkInverse>inversed</MarkInverse> background and text color.
</IconTooltip>
);
Expand Down
8 changes: 8 additions & 0 deletions web/packages/design/src/Mark/Mark.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ export const Mark = styled.mark`
color: inherit;
`;

/**
* Returns a MarkInverse that inverts the colors from its parent Mark.
* For example, if current theme is dark theme, parent Mark would use
* light colors, but MarkInverse will use dark colors.
*
* Intended for use in tooltips since tooltips uses inverse background
* color of the current theme.
*/
export const MarkInverse = styled(Mark)`
background-color: ${p => p.theme.colors.tooltip.inverseBackground};
color: ${p => p.theme.colors.text.main};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@ import { Position } from 'design/Popover/Popover';
import { IconTooltip } from 'design/Tooltip';
import styled from 'styled-components';

/**
* Returns a IconTooltip component with its tip contents
* set to the requested resource kind.
*
* @param resourceKind - the tip contents differ slightly depending
* on the resource kind
* @param toolTipPosition (opt) - the position which the tooltip should
* render (see type Position)
* @returns JSX Element
*/
export function ResourceLabelTooltip({
resourceKind,
toolTipPosition,
Expand All @@ -38,7 +48,7 @@ export function ResourceLabelTooltip({
Labels allow you to do the following:
<Ul>
<li>
Filter servers by labels when using tsh, tctl, or the web UI
Filter servers by labels when using tsh, tctl, or the web UI.
</li>
<li>
Restrict access to this server with{' '}
Expand All @@ -64,7 +74,7 @@ export function ResourceLabelTooltip({
<Ul>
<li>
Filter Kubernetes clusters by labels when using tsh, tctl, or the
web UI
web UI.
</li>
<li>
Restrict access to this Kubernetes cluster with{' '}
Expand Down Expand Up @@ -96,7 +106,7 @@ export function ResourceLabelTooltip({
Labels allow you to do the following:
<Ul>
<li>
Filter databases by labels when using tsh, tctl, or the web UI
Filter databases by labels when using tsh, tctl, or the web UI.
</li>
<li>
Restrict access to this database with{' '}
Expand Down

0 comments on commit 324e842

Please sign in to comment.