fix: minor ui bugs

once-ui-system · Oct 26, 2024 · 570307d · 570307d
1 parent 8cd4b73
commit 570307d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 38 deletions.
diff --git a/src/once-ui/components/Badge.module.scss b/src/once-ui/components/Badge.module.scss
@@ -9,6 +9,7 @@
     &::before {
         content: '';
         opacity: 0;
+        border-radius: var(--radius-full);
         position: absolute;
         width: 100%;
         height: 100%;

diff --git a/src/once-ui/components/Badge.tsx b/src/once-ui/components/Badge.tsx
@@ -63,6 +63,7 @@ const Badge = forwardRef<HTMLDivElement | HTMLAnchorElement, BadgeProps>(({
         return (
             <SmartLink
                 unstyled
+                style={{borderRadius: 'var(--radius-full)'}}
                 href={href}
                 ref={ref as React.Ref<HTMLAnchorElement>}
                 {...props as React.AnchorHTMLAttributes<HTMLAnchorElement>}>

diff --git a/src/once-ui/components/Feedback.tsx b/src/once-ui/components/Feedback.tsx
@@ -56,7 +56,7 @@ const Feedback = forwardRef<HTMLDivElement, FeedbackProps>(({
                     alignItems="flex-start">
                     <Flex
                         padding="4"
-                        radius="m" border="neutral-medium" borderStyle="solid-1">
+                        radius="m" border={`${variant}-medium`} borderStyle="solid-1">
                         <Icon
                             onBackground={`${variant}-medium`}
                             name={variantIconMap[variant]}
@@ -70,48 +70,50 @@ const Feedback = forwardRef<HTMLDivElement, FeedbackProps>(({
                 gap="24"
                 justifyContent="center"
                 direction="column">
-                <Flex
-                    direction="column"
-                    fillWidth
-                    gap="4">
-                    {title && (
-                        <Flex
-                            fillWidth
-                            gap="16">
+                {(title || description) &&
+                    <Flex
+                        direction="column"
+                        fillWidth
+                        gap="4">
+                        {title && (
                             <Flex
                                 fillWidth
-                                paddingY="4">
+                                gap="16">
+                                <Flex
+                                    fillWidth
+                                    paddingY="4">
+                                    <Text
+                                        variant="heading-strong-m"
+                                        onBackground={`${variant}-medium`}
+                                        role="heading"
+                                        aria-level={2}>
+                                        {title}
+                                    </Text>
+                                </Flex>
+                                {showCloseButton && (
+                                    <IconButton
+                                        onClick={onClose}
+                                        icon="close"
+                                        size="m"
+                                        tooltip="Hide"
+                                        tooltipPosition="top"
+                                        variant="ghost"
+                                        aria-label="Close alert"/>
+                                )}
+                            </Flex>
+                        )}
+                        {description &&
+                            <Flex
+                                fillWidth>
                                 <Text
-                                    variant="heading-strong-m"
-                                    onBackground={`${variant}-medium`}
-                                    role="heading"
-                                    aria-level={2}>
-                                    {title}
+                                    variant="body-default-s"
+                                    onBackground={`${variant}-strong`}>
+                                    {description}
                                 </Text>
                             </Flex>
-                            {showCloseButton && (
-                                <IconButton
-                                    onClick={onClose}
-                                    icon="close"
-                                    size="m"
-                                    tooltip="Hide"
-                                    tooltipPosition="top"
-                                    variant="ghost"
-                                    aria-label="Close alert"/>
-                            )}
-                        </Flex>
-                    )}
-                    {description &&
-                        <Flex
-                            fillWidth>
-                            <Text
-                                variant="body-default-s"
-                                onBackground={`${variant}-strong`}>
-                                {description}
-                            </Text>
-                        </Flex>
-                    }
-                </Flex>
+                        }
+                    </Flex>
+                }
                 {children}
                 {actionButtonProps && (
                     <Flex