@availity/mui-feedback 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.6](https://github.com/Availity/element/compare/@availity/mui-feedback@0.2.5...@availity/mui-feedback@0.2.6) (2024-08-16)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.2.5`
+* `mui-textfield` updated to version `0.2.5`
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-feedback@0.2.4...@availity/mui-feedback@0.2.5) (2024-08-09)
+
 ## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-feedback@0.2.3...@availity/mui-feedback@0.2.4) (2024-08-08)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -3,7 +3,8 @@ interface FeedbackProps {
         info: (entries: Record<string, unknown>) => void;
     };
     appName: string;
+    buttonVariant?: 'secondary' | 'tertiary';
 }
-declare const Feedback: ({ analytics, appName }: FeedbackProps) => JSX.Element;
+declare const Feedback: ({ analytics, appName, buttonVariant, }: FeedbackProps) => JSX.Element;
 
 export { Feedback, type FeedbackProps };

package/dist/index.d.ts

@@ -3,7 +3,8 @@ interface FeedbackProps {
         info: (entries: Record<string, unknown>) => void;
     };
     appName: string;
+    buttonVariant?: 'secondary' | 'tertiary';
 }
-declare const Feedback: ({ analytics, appName }: FeedbackProps) => JSX.Element;
+declare const Feedback: ({ analytics, appName, buttonVariant, }: FeedbackProps) => JSX.Element;
 
 export { Feedback, type FeedbackProps };

package/dist/index.js

@@ -107,7 +107,20 @@ var SmileButtons = (0, import_styles.styled)(import_mui_toggle_button.ToggleButt
 var FormActions = (0, import_styles.styled)(import_Grid.default, { name: "AvFeedbackContainer", slot: "FormActions" })({});
 var SmileButton = (_a) => {
   var _b = _a, { disabled, Icon, label, value } = _b, props = __objRest(_b, ["disabled", "Icon", "label", "value"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_toggle_button.ToggleButton, __spreadProps(__spreadValues({ "aria-label": value, value }, props), { disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { fontSize: "large" }) })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_mui_toggle_button.ToggleButton,
+    __spreadProps(__spreadValues({
+      component: import_mui_button.IconButton,
+      disableRipple: true,
+      title: label,
+      "aria-label": value,
+      value
+    }, props), {
+      disabled,
+      size: "large",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
+    })
+  ) });
 };
 var FeedbackForm = ({
   analytics,
@@ -206,7 +219,7 @@ var FeedbackForm = ({
               }
             }
           ),
-          smileFieldValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_mui_textfield.TextField,
             __spreadProps(__spreadValues({}, register("feedback", {
               required: "This field is required",
@@ -224,12 +237,22 @@ var FeedbackForm = ({
               },
               helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
               error: !!errors.feedback,
-              disabled: loading
+              disabled: loading || !smileFieldValue
             })
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, { container: true, direction: "row", spacing: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Cancel" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", variant: "contained", children: "Send Feedback" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, { container: true, direction: "row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, flex: 1, minWidth: "147px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_mui_button.LoadingButton,
+              {
+                disabled: !smileFieldValue,
+                loading,
+                type: "submit",
+                variant: "contained",
+                sx: { paddingLeft: 0, paddingRight: 0 },
+                children: "Send Feedback"
+              }
+            ) })
           ] })
         ]
       }
@@ -251,26 +274,30 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     FeedbackHeaderContainer,
     {
-      alignItems: "center",
+      alignItems: "flex-start",
       container: true,
       direction: "row",
-      marginBottom: !sent ? "8px" : "0px",
       justifyContent: "space-between",
       flexWrap: "nowrap",
       id: "feedback-form-header",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid2.default, { item: true, whiteSpace: "normal", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid2.default, { item: true, marginRight: "-8px", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_button2.IconButton, { disabled: loading, title: "Close", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloseIcon, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid2.default, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_button2.IconButton, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloseIcon, { fontSize: "xsmall" }) }) })
       ]
     }
   );
 };
 
 // src/lib/Feedback.tsx
+var import_mui_icon3 = require("@availity/mui-icon");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FeedbackContainer = (0, import_styles3.styled)(import_Container.default, { name: "AvFeedbackContainer", slot: "root" })({});
 var GiveFeedbackButton = (0, import_styles3.styled)(import_mui_button3.Button, { name: "AvGiveFeedbackButton", slot: "root" })({});
-var Feedback = ({ analytics = import_api_axios2.avLogMessagesApiV2, appName }) => {
+var Feedback = ({
+  analytics = import_api_axios2.avLogMessagesApiV2,
+  appName,
+  buttonVariant = "secondary"
+}) => {
   const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
   const [sent, setSent] = (0, import_react2.useState)(false);
   const [loading, setLoading] = (0, import_react2.useState)(false);
@@ -283,7 +310,7 @@ var Feedback = ({ analytics = import_api_axios2.avLogMessagesApiV2, appName }) =
   };
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GiveFeedbackButton, { onClick: handlePopoverOpen, color: "secondary", children: "Give Feedback" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GiveFeedbackButton, { onClick: handlePopoverOpen, color: buttonVariant, startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.CommentsIcon, {}), children: "Give Feedback" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_mui_popover.Popover,
       {

package/dist/index.mjs

@@ -61,7 +61,7 @@ import { avLogMessagesApiV2 } from "@availity/api-axios";
 // src/lib/FeedbackForm.tsx
 import { useEffect } from "react";
 import { TextField } from "@availity/mui-textfield";
-import { LoadingButton, Button } from "@availity/mui-button";
+import { LoadingButton, Button, IconButton } from "@availity/mui-button";
 import { ToggleButtonGroup, ToggleButton } from "@availity/mui-toggle-button";
 import Grid from "@mui/material/Grid";
 import { styled } from "@mui/material/styles";
@@ -74,7 +74,20 @@ var SmileButtons = styled(ToggleButtonGroup, { name: "AvFeedbackContainer", slot
 var FormActions = styled(Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
 var SmileButton = (_a) => {
   var _b = _a, { disabled, Icon, label, value } = _b, props = __objRest(_b, ["disabled", "Icon", "label", "value"]);
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ToggleButton, __spreadProps(__spreadValues({ "aria-label": value, value }, props), { disabled, children: /* @__PURE__ */ jsx(Icon, { fontSize: "large" }) })) });
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    ToggleButton,
+    __spreadProps(__spreadValues({
+      component: IconButton,
+      disableRipple: true,
+      title: label,
+      "aria-label": value,
+      value
+    }, props), {
+      disabled,
+      size: "large",
+      children: /* @__PURE__ */ jsx(Icon, {})
+    })
+  ) });
 };
 var FeedbackForm = ({
   analytics,
@@ -173,7 +186,7 @@ var FeedbackForm = ({
               }
             }
           ),
-          smileFieldValue && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             TextField,
             __spreadProps(__spreadValues({}, register("feedback", {
               required: "This field is required",
@@ -191,12 +204,22 @@ var FeedbackForm = ({
               },
               helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
               error: !!errors.feedback,
-              disabled: loading
+              disabled: loading || !smileFieldValue
             })
           ),
-          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", spacing: 1, children: [
-            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", variant: "contained", children: "Send Feedback" }) })
+          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, flex: 1, minWidth: "147px", children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, flex: 1, children: /* @__PURE__ */ jsx(
+              LoadingButton,
+              {
+                disabled: !smileFieldValue,
+                loading,
+                type: "submit",
+                variant: "contained",
+                sx: { paddingLeft: 0, paddingRight: 0 },
+                children: "Send Feedback"
+              }
+            ) })
           ] })
         ]
       }
@@ -207,7 +230,7 @@ var FeedbackForm = ({
 };
 
 // src/lib/FeedbackHeader.tsx
-import { IconButton } from "@availity/mui-button";
+import { IconButton as IconButton2 } from "@availity/mui-button";
 import { CloseIcon } from "@availity/mui-icon";
 import { Typography } from "@availity/mui-typography";
 import Grid2 from "@mui/material/Grid";
@@ -218,26 +241,30 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
   return /* @__PURE__ */ jsxs2(
     FeedbackHeaderContainer,
     {
-      alignItems: "center",
+      alignItems: "flex-start",
       container: true,
       direction: "row",
-      marginBottom: !sent ? "8px" : "0px",
       justifyContent: "space-between",
       flexWrap: "nowrap",
       id: "feedback-form-header",
       children: [
         /* @__PURE__ */ jsx2(Grid2, { item: true, whiteSpace: "normal", children: /* @__PURE__ */ jsx2(Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ jsx2(Grid2, { item: true, marginRight: "-8px", children: /* @__PURE__ */ jsx2(IconButton, { disabled: loading, title: "Close", onClick: handleClose, children: /* @__PURE__ */ jsx2(CloseIcon, {}) }) })
+        /* @__PURE__ */ jsx2(Grid2, { item: true, children: /* @__PURE__ */ jsx2(IconButton2, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "xsmall" }) }) })
       ]
     }
   );
 };
 
 // src/lib/Feedback.tsx
+import { CommentsIcon } from "@availity/mui-icon";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var FeedbackContainer = styled3(Container, { name: "AvFeedbackContainer", slot: "root" })({});
 var GiveFeedbackButton = styled3(Button2, { name: "AvGiveFeedbackButton", slot: "root" })({});
-var Feedback = ({ analytics = avLogMessagesApiV2, appName }) => {
+var Feedback = ({
+  analytics = avLogMessagesApiV2,
+  appName,
+  buttonVariant = "secondary"
+}) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [sent, setSent] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -250,7 +277,7 @@ var Feedback = ({ analytics = avLogMessagesApiV2, appName }) => {
   };
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(GiveFeedbackButton, { onClick: handlePopoverOpen, color: "secondary", children: "Give Feedback" }),
+    /* @__PURE__ */ jsx3(GiveFeedbackButton, { onClick: handlePopoverOpen, color: buttonVariant, startIcon: /* @__PURE__ */ jsx3(CommentsIcon, {}), children: "Give Feedback" }),
     /* @__PURE__ */ jsx3(
       Popover,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-feedback",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Availity MUI Feedback Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
   "dependencies": {
     "@availity/api-axios": "^9.0.0",
     "@availity/mui-button": "^0.6.10",
-    "@availity/mui-form-utils": "^0.12.4",
+    "@availity/mui-form-utils": "^0.12.5",
     "@availity/mui-icon": "^0.10.1",
     "@availity/mui-popover": "^0.1.5",
-    "@availity/mui-textfield": "^0.6.4",
+    "@availity/mui-textfield": "^0.6.5",
     "@availity/mui-toggle-button": "^0.1.13",
     "@availity/mui-typography": "^0.2.0",
     "react-hook-form": "^7.51.3"

package/src/lib/Feedback.tsx

@@ -6,17 +6,23 @@ import { styled } from '@mui/material/styles';
 import { avLogMessagesApiV2 } from '@availity/api-axios';
 import { FeedbackForm } from './FeedbackForm';
 import { FeedbackHeader } from './FeedbackHeader';
+import { CommentsIcon } from '@availity/mui-icon';
 
 export interface FeedbackProps {
   analytics?: { info: (entries: Record<string, unknown>) => void };
   appName: string;
+  buttonVariant?: 'secondary' | 'tertiary';
 }
 
 const FeedbackContainer = styled(Container, { name: 'AvFeedbackContainer', slot: 'root' })({});
 
 const GiveFeedbackButton = styled(Button, { name: 'AvGiveFeedbackButton', slot: 'root' })({});
 
-export const Feedback = ({ analytics = avLogMessagesApiV2, appName }: FeedbackProps): JSX.Element => {
+export const Feedback = ({
+  analytics = avLogMessagesApiV2,
+  appName,
+  buttonVariant = 'secondary',
+}: FeedbackProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [sent, setSent] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -34,7 +40,7 @@ export const Feedback = ({ analytics = avLogMessagesApiV2, appName }: FeedbackPr
 
   return (
     <>
-      <GiveFeedbackButton onClick={handlePopoverOpen} color="secondary">
+      <GiveFeedbackButton onClick={handlePopoverOpen} color={buttonVariant} startIcon={<CommentsIcon />}>
         Give Feedback
       </GiveFeedbackButton>
       <Popover

package/src/lib/FeedbackForm.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { TextField } from '@availity/mui-textfield';
-import { LoadingButton, Button } from '@availity/mui-button';
+import { LoadingButton, Button, IconButton } from '@availity/mui-button';
 import { ToggleButtonGroup, ToggleButton } from '@availity/mui-toggle-button';
 import Grid from '@mui/material/Grid';
 import { SvgIconProps } from '@mui/material/SvgIcon';
@@ -41,8 +41,17 @@ const FormActions = styled(Grid, { name: 'AvFeedbackContainer', slot: 'FormActio
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SmileButton = ({ disabled, Icon, label, value, ...props }: SmileButtonProps) => (
   <div>
-    <ToggleButton aria-label={value} value={value} {...props} disabled={disabled}>
-      <Icon fontSize="large" />
+    <ToggleButton
+      component={IconButton}
+      disableRipple
+      title={label}
+      aria-label={value}
+      value={value}
+      {...props}
+      disabled={disabled}
+      size="large"
+    >
+      <Icon />
     </ToggleButton>
   </div>
 );
@@ -148,35 +157,39 @@ export const FeedbackForm = ({
             );
           }}
         />
-        {smileFieldValue && (
-          <TextField
-            {...register('feedback', {
-              required: 'This field is required',
-              maxLength: { value: 200, message: 'This field must not exceed 200 characters' },
-            })}
-            fullWidth
-            multiline
-            minRows={3}
-            maxRows={3}
-            label={getFeedbackLabel()}
-            inputProps={{ 'aria-required': 'true' }}
-            InputLabelProps={{
-              component: FormLabel,
-              required: true,
-            }}
-            helperText={errors.feedback?.message || 'Max 200 characters'}
-            error={!!errors.feedback}
-            disabled={loading}
-          />
-        )}
-        <FormActions container direction="row" spacing={1}>
-          <Grid item>
+        <TextField
+          {...register('feedback', {
+            required: 'This field is required',
+            maxLength: { value: 200, message: 'This field must not exceed 200 characters' },
+          })}
+          fullWidth
+          multiline
+          minRows={3}
+          maxRows={3}
+          label={getFeedbackLabel()}
+          inputProps={{ 'aria-required': 'true' }}
+          InputLabelProps={{
+            component: FormLabel,
+            required: true,
+          }}
+          helperText={errors.feedback?.message || 'Max 200 characters'}
+          error={!!errors.feedback}
+          disabled={loading || !smileFieldValue}
+        />
+        <FormActions container direction="row">
+          <Grid item flex={1} minWidth="147px">
             <Button color="secondary" disabled={loading} onClick={handleClose}>
-              Cancel
+              Close
             </Button>
           </Grid>
-          <Grid item>
-            <LoadingButton disabled={!smileFieldValue} loading={loading} type="submit" variant="contained">
+          <Grid item flex={1}>
+            <LoadingButton
+              disabled={!smileFieldValue}
+              loading={loading}
+              type="submit"
+              variant="contained"
+              sx={{ paddingLeft: 0, paddingRight: 0 }}
+            >
               Send Feedback
             </LoadingButton>
           </Grid>

package/src/lib/FeedbackHeader.tsx

@@ -16,10 +16,9 @@ const FeedbackHeaderContainer = styled(Grid, { name: 'AvFeedbackContainer', slot
 export const FeedbackHeader = ({ appName, handleClose, loading, sent }: FeedbackHeaderProps): JSX.Element => {
   return (
     <FeedbackHeaderContainer
-      alignItems="center"
+      alignItems="flex-start"
       container
       direction="row"
-      marginBottom={!sent ? '8px' : '0px'}
       justifyContent="space-between"
       flexWrap="nowrap"
       id="feedback-form-header"
@@ -29,9 +28,9 @@ export const FeedbackHeader = ({ appName, handleClose, loading, sent }: Feedback
           {sent ? 'Thank you for your feedback.' : `Tell us what you think about ${appName}`}
         </Typography>
       </Grid>
-      <Grid item marginRight="-8px">
-        <IconButton disabled={loading} title="Close" onClick={handleClose}>
-          <CloseIcon />
+      <Grid item>
+        <IconButton disabled={loading} title="Close" onClick={handleClose} size="medium">
+          <CloseIcon fontSize="xsmall" />
         </IconButton>
       </Grid>
     </FeedbackHeaderContainer>