This change is 

I'm OK with the change, but I'm not technology expert on the front-end.
Do you want to get your code review from someone with front-end expertise? For example @nathanstilwell , @dhartunian or @koorosh

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

    styles.push("badge--uppercase");
  }
  const classes = cx(...styles);

So classnames already has the functionality you are creating here (the ability to add a className based on a boolean variable). So I think what you want is something like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": !allowLowerCase,
  });

This actually makes this kind of confusing for me to read since we are applying the badge--uppercase class after negating a variable. It seems like the default for badges should be that they are uppercase and we want the ability to override that. So what if we had a prop called something like uppercase and defaulted it to false? Then the cx call would look like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

giving us something like,

export function Badge(props: BadgeProps) {
  const { size, status, icon, iconPosition, text, uppercase = true } = props;
  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

Anyway, just a thought.

Code quote:

  const { size, status, icon, iconPosition, text, allowLowerCase } = props;
  const styles = ["badge", `badge--size-${size}`, `badge--status-${status}`];
  if (!allowLowerCase) {
    styles.push("badge--uppercase");
  }
  const classes = cx(...styles);

Thanks for cutting out a duplicate! I think I would prefer that we use Badge from @cockroachlabs/ui-components everywhere, but looking at the implementation it differs slightly from what's in this repo and doesn't support all the features that have been added in Figma for badges (which makes me suspect that this implementation may differ from what's in Managed Service). All that to say, we can worry about migrating to the UI repo another time.

Thank you.

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

I still find reviewable very confusing, but I'm not seeing a change yet. Am I missing something?

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

Nice.

bors r+

Build succeeded:

• GitHub CI (Cockroach)