supabase / ui

Bug report

When setting dot prop && color of a badge, the result is an awkward square background around dot.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Add Badge
set dot prop to true w/ any color

<Badge color='green' dot>Hello World</Badge>

Expected behavior

Maybe the background should have a rounded radius? Or not exist at all.

Screenshots

System information

OS: [e.g. macOS]
Browser (if applies) [e.g. chrome, safari]
supabase/ui latest

Additional context

The docs look ok because no color is set so sbui-badge--[red, green, yellow, etc...] is undefined.

This is due to the sbui-badge--${color} being applied to the SVG, which gives the background color for the component wrapper.

- className={`${BadgeStyles[`sbui-badge-dot`]} ${
-   BadgeStyles[`sbui-badge--${color}`]
- }`}
+ className={`${BadgeStyles[`sbui-badge-dot`]}`}

ui/src/components/Badge/Badge.tsx

Lines 33 to 35 in 989b9ed

    
                     className={`${BadgeStyles[`sbui-badge-dot`]} ${ 
        
                       BadgeStyles[`sbui-badge--${color}`] 
        
                     }`}

Supabase UI is being deprecated.

As part of that, we are closing issues in this repo that are perhaps outdated.

If you'd like to still make an issue, you could consider making an issue for our package in our monorepo https://github.com/supabase/supabase/tree/master/packages/ui

We are moving the components to the main mono repo at https://github.com/supabase/supabase.

The auth component has been moved to it's own repo and package. https://github.com/supabase-community/auth-ui. You can also read the docs for auth ui here.

	className={`${BadgeStyles[`sbui-badge-dot`]} ${
	BadgeStyles[`sbui-badge--${color}`]
	}`}

Badge w/ dot and color has square background of badge