Is there a badge with content available?

[thomaschaaf]

Hello!

We are building a flex plugin using paste. We want to show the number of "unread" voicemails.

In MUI we would use something like a badge: https://mui.com/components/badges/#basic-badge

Is there something like this available?

[loreina]

Hi @thomaschaaf, we have in our roadmap to add a counter variant to the Badge component. I've added a ticket to our backlog for this and the team will follow up on its progress.

Would you be able to share some screenshots and your use cases for the counter? This'll help us with context when working on the design. Thanks!

[kelseycavitt]

Hi @thomaschaaf, just following up here as I'm on helper duty this week. Would you be able to share some screenshots and your use cases for the counter? Thanks so much!

[thomaschaaf]

Can take a screenshot of our flex instance on Tuesday

[thomaschaaf]

I've added the screenshot below.

[jweintraub]

I’m doing some testing on something similar for the console to help inform this pattern. I’m going to test a few color options.

…

On Oct 29, 2021, at 1:48 PM, Thomas Schaaf ***@***.***> wrote:  Can take a screenshot of our flex instance on Tuesday — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[gloriliale]

@thomaschaaf, if you have the opportunity, it'd be great to know the use cases for the counter and have some screenshots to look at while we're doing this design work. Thank you!

[thomaschaaf]

This is what it looks like if you have three missed calls.

[andioneto]

Hi there @thomaschaaf 👋

We apologize for the lengthy delay! While we did not reply, we have been taking actions to get this accomplished and I have a few updates for you.

📐 Our engineers are pulling in a ticket to add this variant in this next sprint, and we will let you know when it's published by replying to this thread. ETA is approximately 2 weeks.

🎨 We will be publishing the below preview of the designs for the badge with cntent to our community Figma files very soon. We will let you know when they are ready. ETA is about 3 days.

🖼️ Please check out a preview of our mocks below 👇

Thank you for your patience and helping us improve Paste! 💯

[thomaschaaf]

The mockup looks great but as I have stated below the badge counter in the docs looks different 🤔

[TheSisb]

Badge has entered Stage 2 and this is now released in the latest version of Paste: https://paste.twilio.design/components/badge#counter

[thomaschaaf]

Hello! Maybe the example is broken but for me the counter does not look like the comment by @andipants12

[gloriliale]

Hi @thomaschaaf! Do you mean that the docs example is a more pill-like shape than the mockup above? If so, this is because the shape is determined by the content; if the counter only had a "1" it would be a circle, like the mockup and image below. You can try it out by changing the live code in that example on the docs site.

Please let me know if the shape was not what you were referring to though so that we can best support!

[thomaschaaf]

@gloriliale
There is no way I can see how I could get the Badge to be in the top right like in the design @andipants12 shared.

The following implementations have a bit different api where the children are rendered and then the badge is positioned in the top right. https://mui.com/material-ui/react-badge/ or https://ant.design/components/badge/#

Our use case is to show how many missed calls you have.

I would have assumed to be able to use it like this:

  <Badge as="span" variant="neutral_counter" badgeValue={100}>
      <HistoryIcon decorative={false} title="100 missed calls" />
  </Badge>

[thomaschaaf]

I was able to get it sort of like it want like this... not perfect but better than nothing

  const renderIcon = () => (
    // @ts-ignore
    <Box position={'relative'}>
      <HistoryIcon
        decorative={false}
        as={'div'}
        title={templates.CallHistory()}
      />
      {/* @ts-ignore */}
      <Box position={'absolute'} top={-16} right={-16}>
        {Boolean(data?.missedCalls) && (
          // @ts-ignore
          <Badge>{data?.missedCalls}</Badge>
        )}
      </Box>
    </Box>
  );

  return (
    <SideLink
      icon={renderIcon()}
      iconActive={renderIcon()}
      onClick={() => {
        FActions.invokeAction('HistoryPush', '/call-history');
        openedCallHistory();
        retry();
      }}
      showLabel={true}
    >
      {templates.CallHistory()}
    </SideLink>
  );
};

[gloriliale]

Hi @thomaschaaf! Ah I see what you mean. Our Badge's API doesn't have the ability to automatically implement the icon w/ overlapping Badge UI, but I created a codesandbox based on your example that could be useful for reusability. Let me know if it's helpful: https://codesandbox.io/s/icon-with-counter-badge-2up9kr?file=/src/index.tsx