fix(PointerAlert): Reserve space for arrow

Space between PointerAlert has been reduced in readme to highlight space reservation.
cozy · Nov 29, 2023 · 3d7e4b4 · 3d7e4b4
1 parent 2ed2cac
commit 3d7e4b4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/react/PointerAlert/Readme.md b/react/PointerAlert/Readme.md
@@ -62,7 +62,7 @@ const handleChangePosition = el => {
         />
       </div>
       {directions.map(direction =>
-        <div className="u-mb-1" key={direction}>
+        <div className="u-mb-half" key={direction}>
             <PointerAlert
               direction={direction}
               position={state.position}
@@ -112,7 +112,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
 
 <>
   {colors.map(color =>
-    <div className="u-mb-1" key={color}>
+    <div className="u-mb-half" key={color}>
       <PointerAlert
         severity={color}
         action={<Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />}
@@ -127,7 +127,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
   <Typography variant="h4" paragraph>Filled variant</Typography>
 
   {colors.map(color =>
-    <div className="u-mb-1" key={color}>
+    <div className="u-mb-half" key={color}>
       <PointerAlert
         variant="filled"
         severity={color}
@@ -149,7 +149,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
   <Typography variant="h4" paragraph>Outlined variant</Typography>
 
   {colors.map(color =>
-    <div className="u-mb-1" key={color}>
+    <div className="u-mb-half" key={color}>
       <PointerAlert
         variant="outlined"
         severity={color}

diff --git a/react/PointerAlert/index.jsx b/react/PointerAlert/index.jsx
@@ -9,7 +9,7 @@ import { AlertPropTypes, AlertDefaultProps } from '../Alert'
 import Alert from '../Alert'
 
 const useStyles = makeStyles(theme => ({
-  top: {
+  topArrow: {
     // create the arrow
     borderLeft: '0.75rem solid transparent',
     borderRight: '0.75rem solid transparent',
@@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({
     left: ({ position }) => position,
     marginLeft: '-0.75rem'
   },
-  bottom: {
+  bottomArrow: {
     // create the arrow
     borderLeft: '0.75rem solid transparent',
     borderRight: '0.75rem solid transparent',
@@ -33,7 +33,7 @@ const useStyles = makeStyles(theme => ({
     left: ({ position }) => position,
     marginLeft: '-0.75rem'
   },
-  left: {
+  leftArrow: {
     // create the arrow
     borderTop: '0.75rem solid transparent',
     borderBottom: '0.75rem solid transparent',
@@ -45,7 +45,7 @@ const useStyles = makeStyles(theme => ({
     top: ({ position }) => position,
     marginTop: '-0.75rem'
   },
-  right: {
+  rightArrow: {
     // create the arrow
     borderTop: '0.75rem solid transparent',
     borderBottom: '0.75rem solid transparent',
@@ -56,6 +56,18 @@ const useStyles = makeStyles(theme => ({
     right: '-0.75rem',
     top: ({ position }) => position,
     marginTop: '-0.75rem'
+  },
+  topAlert: {
+    marginTop: '0.75rem'
+  },
+  bottomAlert: {
+    marginBottom: '0.75rem'
+  },
+  leftAlert: {
+    marginLeft: '0.75rem'
+  },
+  rightAlert: {
+    marginRight: '0.75rem'
   }
 }))
 
@@ -69,13 +81,13 @@ const PointerAlert = forwardRef(
     return (
       <Alert
         ref={ref}
-        className={cx(className, 'u-pos-relative')}
+        className={cx(className, styles[`${direction}Alert`], 'u-pos-relative')}
         variant={variant}
         severity={severity}
         {...props}
       >
         {children}
-        <span className={styles[direction]}></span>
+        <span className={styles[`${direction}Arrow`]}></span>
       </Alert>
     )
   }