Fix/notification borders (#2149)

kadena-community · May 27, 2024 · dac1b28 · dac1b28
1 parent 30217ff
commit dac1b28
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 44 deletions.
diff --git a/.changeset/gorgeous-turtles-vanish.md b/.changeset/gorgeous-turtles-vanish.md
@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+Update border styles for the Notification component
diff --git a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
@@ -42,7 +42,7 @@ export const CookieConsent: FC = () => {
       <div className={notificationWrapperClass}>
         <Notification
           intent="info"
-          displayStyle="borderless"
+          type="inlineStacked"
           icon={<MonoCookie />}
           role="none"
         >

diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx
@@ -19,7 +19,7 @@ export const MDNotification: FC<IProps> = ({ children, title = '', label }) => {
       <Notification
         intent={getColor(label)}
         icon={getIcon(label)}
-        displayStyle="borderless"
+        type="inlineStacked"
         role="none"
       >
         <NotificationHeading>{title}</NotificationHeading>

diff --git a/packages/apps/proof-of-us/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/proof-of-us/src/components/CookieConsent/CookieConsent.tsx
@@ -43,7 +43,7 @@ export const CookieConsent: FC = () => {
     <div className={notificationWrapperClass}>
       <Notification
         intent="info"
-        displayStyle="borderless"
+        type="inlineStacked"
         icon={<MonoCookie />}
         role="none"
       >

diff --git a/packages/libs/react-ui/src/components/Notification/Notification.css.ts b/packages/libs/react-ui/src/components/Notification/Notification.css.ts
@@ -68,23 +68,9 @@ export const notificationRecipe = recipe({
         },
       ],
     },
-    displayStyle: {
-      bordered: [
-        atoms({
-          borderStyle: 'solid',
-          borderWidth: 'hairline',
-          borderRadius: 'sm',
-        }),
-        {
-          borderLeftWidth: token('border.width.thick'),
-        },
-      ],
-      borderless: [],
-    },
   },
   defaultVariants: {
     intent: 'info',
-    displayStyle: 'bordered',
   },
 });
 
@@ -101,6 +87,16 @@ export const closeButtonClass = style([
   },
 ]);
 
+export const borderClass = style([
+  atoms({
+    borderRadius: 'sm',
+    borderStyle: 'solid',
+  }),
+  {
+    borderLeftWidth: token('border.width.thick'),
+  },
+]);
+
 export const contentClassRecipe = recipe({
   base: [
     atoms({

diff --git a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx
@@ -33,18 +33,6 @@ const meta: Meta<StoryType> = {
     },
   },
   argTypes: {
-    displayStyle: {
-      options: notificationVariants.displayStyle,
-      control: {
-        type: 'select',
-      },
-      description:
-        'The Notification component has bordered and borderless variants. The borderless variant is used for notifications that located within a card or content body, while the bordered variant can be used in all other cases. ',
-      table: {
-        type: { summary: notificationVariants.displayStyle.join(' | ') },
-        defaultValue: { summary: 'default' },
-      },
-    },
     intent: {
       options: notificationVariants.intent,
       control: {
@@ -102,16 +90,8 @@ export const Primary: Story = {
     intent: undefined,
     children:
       'Notification children to inform users about the event that occurred!',
-    displayStyle: 'bordered',
   },
-  render: ({
-    heading,
-    isDismissable,
-    intent,
-    children,
-    displayStyle,
-    type,
-  }) => {
+  render: ({ heading, isDismissable, intent, children, type }) => {
     return (
       <Notification
         intent={intent}
@@ -120,7 +100,6 @@ export const Primary: Story = {
         onDismiss={() => {
           alert('Close button clicked');
         }}
-        displayStyle={displayStyle}
         role="none"
       >
         <NotificationHeading>{heading}</NotificationHeading>

diff --git a/packages/libs/react-ui/src/components/Notification/Notification.tsx b/packages/libs/react-ui/src/components/Notification/Notification.tsx
@@ -1,8 +1,10 @@
 import { MonoClose, MonoInfo } from '@kadena/react-icons/system';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
+import classNames from 'classnames';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import {
+  borderClass,
   closeButtonClass,
   contentClassRecipe,
   iconClass,
@@ -25,7 +27,6 @@ export const Notification: FC<INotificationProps> = ({
   children,
   isDismissable = false,
   intent,
-  displayStyle,
   onDismiss,
   icon,
   role,
@@ -37,10 +38,12 @@ export const Notification: FC<INotificationProps> = ({
 
   return (
     <div
-      className={notificationRecipe({
-        intent,
-        displayStyle: type === 'inlineStacked' ? 'borderless' : displayStyle,
-      })}
+      className={classNames(
+        notificationRecipe({
+          intent,
+        }),
+        { [borderClass]: type === 'stacked' },
+      )}
       role={role}
     >
       <span className={iconClass}>{icon ? icon : <MonoInfo />}</span>