feat(react-components): add "styled" to Toast

PeculiarVentures · Sep 25, 2023 · 915a903 · 915a903
1 parent 4bc9f14
commit 915a903
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/packages/react-components/src/Toast/toast.tsx b/packages/react-components/src/Toast/toast.tsx
@@ -2,7 +2,10 @@ import * as React from 'react';
 import { Alert, AlertProps } from '../Alert';
 import { Fade } from '../Fade';
 
-type BaseProps = {
+/**
+ * Types.
+ */
+type ToastOwnProps = {
   /**
    * The `id` of the toast. Mostly used when you need to prevent duplicate.
    */
@@ -28,8 +31,11 @@ type BaseProps = {
    */
   alertProps?: Omit<AlertProps, 'children' | 'onClose'>;
 };
+/**
+ *
+ */
 
-export const Toast: React.FC<BaseProps> = (props) => {
+export const Toast: React.FC<ToastOwnProps> = (props) => {
   const {
     id,
     duration,
@@ -55,7 +61,7 @@ export const Toast: React.FC<BaseProps> = (props) => {
       };
     }
 
-    return null;
+    return undefined;
   });
 
   return (

diff --git a/packages/react-components/src/Toast/toast_container.tsx b/packages/react-components/src/Toast/toast_container.tsx
@@ -1,17 +1,25 @@
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
 
-type BaseProps = {
+/**
+ * Types.
+ */
+type ToastContainerOwnProps = {
   /**
    * The content of the component.
    */
   children: React.ReactNode;
 };
 
-export type ToastContainerProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export type ToastContainerProps = ToastContainerOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ *
+ */
 
-const stylesBase = () => css({
-  label: 'ToastContainer',
+/**
+ * Styles.
+ */
+const ToastContainerRoot = styled('div')({
   position: 'fixed',
   bottom: 0,
   padding: '10px',
@@ -25,20 +33,19 @@ const stylesBase = () => css({
     marginTop: '10px',
   },
 });
+/**
+ *
+ */
 
 export const ToastContainer: React.FC<ToastContainerProps> = (props) => {
-  const { children, className, ...other } = props;
+  const { children, ...other } = props;
 
   return (
-    <div
-      className={cx({
-        [stylesBase()]: true,
-        [className]: !!className,
-      })}
+    <ToastContainerRoot
       {...other}
     >
       {children}
-    </div>
+    </ToastContainerRoot>
   );
 };