Add type = "success" to Banner component and/or update Banner documentation to include "Toast"

[bensontrent]

I'm creating a shipping app that displays a message to the user if there are no shipments that are unshipped. I'm using a banner component. It would be nice if there were a different icon to display to the user when the banner is a positive message. For example, my banner looks out of place here with an exclamation point:

It would be nice if the banner displayed a green check mark if the status of the message was positive.

A workaround would be to create a component with an icon and border with the appropriate styling, but this seems like it should be part of the functionality of the Banner component.

[gabrielhurley-stripe]

I see your point. The reason this banner type does not exist is because Stripe's own design system guidance is not to use banners to communicate transitory success statuses. Instead we recommend using the Toast component. That info isn't present on the Banner documentation, though, which we can obviously improve.

Hope that helps!

[bensontrent]

You can close this issue. I created a positive banner component.

import { Box, Icon, Inline } from "@stripe/ui-extension-sdk/ui";

type PositiveBannerProps = {
    title: React.ReactNode;
    description?: React.ReactNode;
}
const PositiveBanner = ({ title, description }: PositiveBannerProps) => {

  return (
    <Box css={{ marginY: "small", stack:"x", gap:"small", padding:"medium", backgroundColor:"container", borderRadius:"medium" }}>
        <Box css={{width:"1/12", stack:"y", alignSelfY:"center", marginRight:"small"}}><Inline css={{color: 'success'}}><Icon name="checkCircle"/></Inline></Box>
        <Box css={{width:"11/12"}}>
            <Inline css={{fontWeight:"bold"}}>{title}</Inline>
            {description && <Box>{description}</Box>}
        </Box>

    </Box>
  );
};

export default PositiveBanner;

Typically my app would display unshipped invoices as a list. The user story here is they need a static notification when there's nothing to ship. In relation to my app, a success banner is the anti "happy-path" as defined in the docs:

For example:

[bensontrent]

Here's another use case for the "success" type banner: In a private app, we want our administrators to know how to deal with canceled subscriptions with active SIM card ICCIDs on their accounts.

We use:

{obj?.subscription && !iccid && <Banner
          title="No ICCID found"
          type="critical"
          description={obj.subscription.status === "canceled" ? "Nothing more to do here. Canceled subscriptions do not need an ICCID." :
           "Please ask the customer to add an ICCID to the subscription or ask them to cancel their subscription"} 
           />}

We have created a positive banner component but it feels like this is a missed opportunity with the Stripe Apps platform. While we can use our PositiveBanner component when we would like to use:

 {obj?.subscription && !iccid && <Banner
          title="No ICCID found"
          type={obj.subscription.status === "canceled" ? "success" :"critical"}
          description={obj.subscription.status === "canceled" ? "Nothing more to do here. Canceled subscriptions do not need an ICCID." :
           "Please ask the customer to add an ICCID to the subscription or ask them to cancel their subscription"} />}

For an additional use-case reference, Stripe uses a positive banner at https://dashboard.stripe.com/developers: