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.

Sign up for GitHub

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

badge: chonkify badge and tags #86207

Merged
merged 6 commits into from
Mar 5, 2025
Merged

badge: chonkify badge and tags #86207

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6e2be7a
badge: chonkify badge and tags
JonasBa Mar 3, 2025
14d7026
tag: use partial record to map type
JonasBa Mar 4, 2025
0a8c2ed
tag: add undefined case
JonasBa Mar 4, 2025
55304f5
lowercase mapping
JonasBa Mar 5, 2025
9a8de48
Merge branch 'master' into jb/theme/badge-tag-theme
JonasBa Mar 5, 2025
a87a325
fix tagPill type prop
JonasBa Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 20 additions & 26 deletions static/app/components/core/badge/index.chonk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,62 +50,56 @@ function makeChonkBadgeTheme(
case 'alpha':
return {
color: theme.colors.static.black,
// @TODO(jonasbadalic) should this use theme colors?
background: `linear-gradient(103deg, #EE8019 0%, #FAA80A 25%, #FBB20B 50%, #FAA80A 75%, #EE8019 100%);`,
background: theme.colors.static.pink400,
};
case 'beta':
return {
color: theme.colors.static.white,
// @TODO(jonasbadalic) should this use theme colors?
background: `linear-gradient(103deg, #FC8B61 0%, #FC5F64 50%, #F32474 100%);`,
color: theme.colors.static.black,
background: theme.colors.static.yellow400,
};
case 'new':
return {
color: theme.colors.static.white,
// @TODO(jonasbadalic) should this use theme colors?
background: `linear-gradient(103deg, #7B51F8 0%, #F644AB 100%);`,
color: theme.colors.static.black,
background: theme.colors.static.green400,
};
case 'experimental':
return {
color: theme.colors.static.white,
// @TODO(jonasbadalic) should this use theme colors?
background: `linear-gradient(103deg, #4E2A9A 0%, #7C30A9 25%, #A737B4 50%, #F2306F 75%, #EE8019 100%);`,
color: theme.colors.dynamic.grayTransparent400,
background: theme.colors.dynamic.surface300,
};
// End feature badge variants
case 'default':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.grayTransparent400,
};

// Highlight maps to info badge for now, but the highlight variant should be removed
case 'highlight':
case 'info':
return {
background: theme.colors.static.blue400,
color: theme.colors.static.white,
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.blue400,
};
case 'success':
return {
background: theme.colors.static.green400,
color: theme.colors.static.black,
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.green400,
};
case 'warning':
return {
background: theme.colors.static.yellow400,
color: theme.colors.static.black,
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.yellow400,
};
case 'danger':
return {
background: theme.colors.static.red400,
color: theme.colors.static.white,
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.red400,
};
case 'promotion':
return {
background: theme.colors.static.pink400,
color: theme.colors.static.black,
};
case 'highlight':
return {
background: theme.colors.dynamic.blue400,
color: theme.colors.static.white,
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.pink400,
};
default:
unreachable(p.type);
Expand Down
93 changes: 93 additions & 0 deletions static/app/components/core/badge/tag.chonk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';

import type {TagProps} from 'sentry/components/core/badge/tag';
import {space} from 'sentry/styles/space';
import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
import {unreachable} from 'sentry/utils/unreachable';

type TagType = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'promotion';

interface ChonkTagProps extends Omit<TagProps, 'type'> {
type: TagType;
}

export function chonkTagPropMapping(props: TagProps): ChonkTagProps {
return {
...props,
type:
props.type === 'highlight'
? 'info'
: props.type === 'error'
? 'danger'
: props.type === 'white'
? 'default'
: props.type === 'black'
? 'default'
: props.type === undefined
? 'default'
: props.type,
Copy link
Member

Choose a reason for hiding this comment

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

can we use a mapping instead 🫠

Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is the main reason why no-nested-ternary exists. Any reason it’s not turned on in sentry?

Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
return {
...props,
type:
props.type === 'highlight'
? 'info'
: props.type === 'error'
? 'danger'
: props.type === 'white'
? 'default'
: props.type === 'black'
? 'default'
: props.type === undefined
? 'default'
: props.type,
const legacyTypeMapping = {
highlight: 'info',
error: 'danger',
white: 'default',
black: 'default',
[undefined]: 'default'
};
return {
...props,
type: legacyTypeMapping[props.type] ?? props.type,

Copy link
Member Author

Choose a reason for hiding this comment

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

What is this [undefined]: 'default' 😂 ?

Copy link
Member Author

Choose a reason for hiding this comment

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

CleanShot 2025-03-03 at 13 06 43@2x

It's not very happy. I honestly have little preference here because I plan to delete this afterwards

Copy link
Contributor

Choose a reason for hiding this comment

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

if we make type optional in ChonkTagProps and then destruct it to ’default’ where necessary, we can do this:

const legacyTypeMapping: Partial<Record<NonNullable<TagProps['type']>, TagType>> = {
  highlight: 'info',
  error: 'danger',
  white: 'default',
  black: 'default',
};

export function chonkTagPropMapping(props: TagProps): ChonkTagProps {
  return {
    ...props,
    type: props.type && legacyTypeMapping[props.type],
  };
}

};
}

export const TagPill = chonkStyled('div')<{
type: TagType;
}>`
${p => ({...makeTagPillTheme(p.type, p.theme)})};

font-size: ${p => p.theme.fontSizeSmall};
display: inline-flex;
align-items: center;
height: 20px;
border-radius: 20px;
padding: 0 ${space(1)};
max-width: 166px;

/* @TODO(jonasbadalic): We need to override button colors because they wrongly default to a blue color... */
button,
button:hover {
color: currentColor;
}
`;

function makeTagPillTheme(
type: TagType,
theme: DO_NOT_USE_ChonkTheme
): React.CSSProperties {
switch (type) {
case 'default':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.grayTransparent400,
};

// Highlight maps to info badge for now, but the highlight variant should be removed
case 'info':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.blue400,
};
case 'success':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.green400,
};
case 'warning':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.yellow400,
};
case 'danger':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.red400,
};
case 'promotion':
return {
background: theme.colors.dynamic.surface300,
color: theme.colors.dynamic.pink400,
};
default:
unreachable(type);
throw new TypeError(`Unsupported badge type: ${type}`);
}
}
8 changes: 7 additions & 1 deletion static/app/components/core/badge/tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import {IconClose} from 'sentry/icons';
import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {withChonk} from 'sentry/utils/theme/withChonk';

import * as ChonkTag from './tag.chonk';

type TagType =
// @TODO(jonasbadalic): "default" is a bad API naming
Expand All @@ -18,6 +21,7 @@ type TagType =
| 'info'
| 'white'
| 'black';

export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
/**
* Icon on the left side.
Expand Down Expand Up @@ -64,7 +68,7 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(
}
);

const StyledTag = styled('div')<{
const TagPill = styled('div')<{
type: TagType;
}>`
font-size: ${p => p.theme.fontSizeSmall};
Expand All @@ -85,6 +89,8 @@ const StyledTag = styled('div')<{
}
`;

const StyledTag = withChonk(TagPill, ChonkTag.TagPill, ChonkTag.chonkTagPropMapping);

const Text = styled('div')`
overflow: hidden;
white-space: nowrap;
Expand Down
Loading