feat(PointerAlert): Make arrow position customisable

cozy · Nov 29, 2023 · 2ed2cac · 2ed2cac
1 parent b77aa02
commit 2ed2cac
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/react/PointerAlert/Readme.md b/react/PointerAlert/Readme.md
@@ -17,6 +17,7 @@ import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
 import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Variants from 'cozy-ui/docs/components/Variants'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
@@ -36,15 +37,35 @@ const initialVariants = [{
 
 const directions = ['top', 'bottom', 'left', 'right']
 
+const initialState = {
+  position: '50%'
+}
+const handleChangePosition = el => {
+  setState({ position: el.target.value })
+}
+
 ;
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
     <>
+      <div>
+        <TextField
+          className="u-mb-1-half"
+          type="string"
+          margin="dense"
+          label="position"
+          variant="outlined"
+          helperText="Arrow position"
+          onChange={handleChangePosition}
+          value={state.position}
+        />
+      </div>
       {directions.map(direction =>
         <div className="u-mb-1" key={direction}>
             <PointerAlert
               direction={direction}
+              position={state.position}
               color={variant.color ? "#EFA82D" : undefined}
               block={variant.block}
               square={variant.square}

diff --git a/react/PointerAlert/index.jsx b/react/PointerAlert/index.jsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
     // position the arrow
     position: 'absolute',
     top: '-0.75rem',
-    left: '50%',
+    left: ({ position }) => position,
     marginLeft: '-0.75rem'
   },
   bottom: {
@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
     // position the arrow
     position: 'absolute',
     bottom: '-0.75rem',
-    left: '50%',
+    left: ({ position }) => position,
     marginLeft: '-0.75rem'
   },
   left: {
@@ -42,7 +42,7 @@ const useStyles = makeStyles(theme => ({
     // position the arrow
     position: 'absolute',
     left: '-0.75rem',
-    top: '50%',
+    top: ({ position }) => position,
     marginTop: '-0.75rem'
   },
   right: {
@@ -54,14 +54,17 @@ const useStyles = makeStyles(theme => ({
     // position the arrow
     position: 'absolute',
     right: '-0.75rem',
-    top: '50%',
+    top: ({ position }) => position,
     marginTop: '-0.75rem'
   }
 }))
 
 const PointerAlert = forwardRef(
-  ({ className, severity, children, variant, direction, ...props }, ref) => {
-    const styles = useStyles({ variant, severity })
+  (
+    { className, variant, severity, children, direction, position, ...props },
+    ref
+  ) => {
+    const styles = useStyles({ variant, severity, position })
 
     return (
       <Alert
@@ -82,12 +85,18 @@ PointerAlert.displayName = 'PointerAlert'
 
 PointerAlert.propTypes = {
   ...AlertPropTypes,
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+  /** Direction of the arrow.*/
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  /** Position of the arrow. Can be any length or percentage value like "100px" or "30%".
+   * If you want to position the arrow on the edge, you need to pay attention to the arrow width.
+   * For example, "calc(0% + 0.75rem)" will position the arrow at the starting edge. */
+  position: PropTypes.string
 }
 
 PointerAlert.defaultProps = {
   ...AlertDefaultProps,
-  direction: 'bottom'
+  direction: 'bottom',
+  position: '50%'
 }
 
 export default PointerAlert