Update example and document

unicef · Dec 20, 2023 · 976e833 · 976e833
1 parent 8ddc9ea
commit 976e833
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
@@ -104,7 +104,7 @@ export default function UConfirmationButtonExample() {
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Unlink"
-          variant="menuItem"
+          variant="button"
           confirmText="Confirm unlink?"
           confirmActionText="Yes, unlink"
           icon={<LinkOffIcon />}

diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -146,7 +146,7 @@ UConfirmationButton.propTypes = {
   buttonText: PropTypes.string,
   /** trigger confirmation function */
   onConfirm: PropTypes.func.isRequired,
-  /** variant: menu or icon */
+  /** variant: popup or menuItem or icon or button */
   variant: PropTypes.oneOf([
     CONTROL_VARIANTS.popup,
     CONTROL_VARIANTS.menuItem,

diff --git a/src/components/UConfirmationButton/UConfirmationButton.md b/src/components/UConfirmationButton/UConfirmationButton.md
@@ -1,13 +1,24 @@
 Delete button with examples:
 
 ```jsx
-import { Typography, Grid } from '@material-ui/core'
+import React, { useState } from 'react'
+import { Typography, Grid, Menu, MenuItem, Link, IconButton } from '@material-ui/core'
 import LinkOffIcon from '@material-ui/icons/LinkOff'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
 
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const open = Boolean(anchorEl)
   const itemId = 1
   function handleDelete(event, id) {
     console.log(id)
   }
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget)
+  }
+  function handleClose() {
+    setAnchorEl(null)
+  }
 
     <Grid container>
       <Grid item xs={12} sm={4} md={3}>
@@ -20,11 +31,49 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
         <Typography variant="subtitle1">Menu item variant</Typography>
+        <IconButton
+          aria-label="more"
+          aria-controls="menu-item-variant"
+          aria-haspopup="true"
+          onClick={handleClick}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="menu-item-variant"
+          anchorEl={anchorEl}
+          keepMounted
+          open={open}
+          onClose={handleClose}
+          disableEnforceFocus={true}
+        >
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              Edit
+            </Link>
+          </MenuItem>
+          <MenuItem onClick={handleClose}>
+            <Link href="#" underline="none">
+              View
+            </Link>
+          </MenuItem>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={itemId}
+            buttonText="Delete"
+            variant="menuItem"
+            icon={null}
+          />
+        </Menu>
+      </Grid>
+      <Grid item xs={12} sm={4} md={3}>
+        <Typography variant="subtitle1">Button variant</Typography>
         <UConfirmationButton
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Delete"
-          variant="menuItem"
+          variant="button"
+          icon={null}
         />
       </Grid>
       <Grid item xs={12} sm={4} md={3}>
@@ -33,7 +82,7 @@ import LinkOffIcon from '@material-ui/icons/LinkOff'
           onConfirm={handleDelete}
           id={itemId}
           buttonText="Unlink"
-          variant="menuItem"
+          variant="button"
           confirmText='Confirm unlink?'
           confirmActionText='Yes, unlink'
           icon={<LinkOffIcon />}