Add styling options & improve NotificationAlert (#319)

src/DIG/Dialog.jsx

@@ -11,6 +11,8 @@ let {
   trigger,
   actionStyles,
   contentStyles,
+  overlayColor,
+  overlayBlur,
   ...forwardedProps
 } = props;
 
@@ -25,7 +27,8 @@ const variant = type === "alert" ? "AlertDialog" : "Dialog";
 const Root = styled(`${variant}.Root`)``;
 
 const Overlay = styled(`${variant}.Overlay`)`
-  background-color: var(--blackA3);
+  background-color: ${(p) => p.background ?? "var(--blackA3)"};
+  backdrop-filter: ${(p) => p.blur ?? ""};
   position: fixed;
   inset: 0;
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -55,6 +58,7 @@ const Content = styled(`${variant}.Content`)`
   padding: 24px;
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 10005;
+  outline: none;
 
   @keyframes contentShow {
     from {
@@ -145,7 +149,7 @@ return (
         )}
       </>
     )}
-    <Overlay />
+    <Overlay background={overlayColor} blur={overlayBlur} />
     <Content {...contentStyles}>
       {title && <Title>{title}</Title>}
       {description && <Description>{description}</Description>}

src/DIG/Dialog.metadata.json

@@ -1,5 +1,5 @@
 {
-  "description": "This Dialog is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dialog\n\nExample:\n\n```jsx\nState.init({\n  dialogIsOpen: false,\n});\n\nfunction handleCancelFunction() {\n  console.log(\"cancel\");\n}\n\nfunction handleConfirmFunction() {\n  console.log(\"confirm\");\n}\n\nreturn (\n  <>\n    <Widget\n      src=\"near/widget/DIG.Button\"\n      props={{\n        label: \"Open Dialog\",\n        onClick: () => State.update({ dialogIsOpen: true }),\n      }}\n    />\n\n    <Widget\n      src=\"near/widget/DIG.Dialog\"\n      props={{\n        type: \"alert\",\n        title: \"Header\",\n        description: \"Some description\",\n        onCancel: handleCancelFunction,\n        onConfirm: handleConfirmFunction,\n        cancelButtonText: \"Cancel\",\n        confirmButtonText: \"Confirm\",\n        open: state.dialogIsOpen,\n        onOpenChange: (value) => State.update({ dialogIsOpen: value }),\n      }}\n    />\n  </>\n);\n```\n\n### Props\n\n`type`\n\n- type: `string` (variants: `\"alert\"` or `\"dialog\"`)\n- `\"alert\"` - https://www.radix-ui.com/primitives/docs/components/alert-dialog\n- `\"dialog\"` - https://www.radix-ui.com/primitives/docs/components/dialog\n- Defines type of Dialog.\n\n`title`\n\n- type: `string`\n- Title of Dialog.\n\n`description`\n\n- type: `string`\n- Description of Dialog.\n\n`onCancel`\n\n- type: `function`\n- Event handler called when the user clicks on cancel button.\n\n`onConfirm`\n\n- type: `function`\n- Event handler called when the user clicks on confirm button.\n\n`cancelButtonText`\n\n- type: `string`\n- Label on cancel button.\n\n`confirmButtonText`\n\n- type: `string`\n- Label on confirm button.\n\n`cancelButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `cancelButtonText`.\n- _note:_ pass `onCancel` event handler to specify custom action on cancel.\n\n`confirmButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `confirmButtonText`.\n- _note:_ pass `onConfirm` event handler to specify custom action on cancel.\n\n`trigger`\n\n- type: `JSX`\n- An optional trigger element that will open the dialog\n\n`contentStyles`\n\n- type: `object`\n- styling options for Dialog.Content\n\n`actionStyles`\n\n- type: `object`\n- styling options for Dialog action buttons\n\nThis component also accepts all `Alert.Dialog` or `Dialog` (depends on selected `type`) props as outlined in the Radix documentation.\n",
+  "description": "This Dialog is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dialog\n\nExample:\n\n```jsx\nState.init({\n  dialogIsOpen: false,\n});\n\nfunction handleCancelFunction() {\n  console.log(\"cancel\");\n}\n\nfunction handleConfirmFunction() {\n  console.log(\"confirm\");\n}\n\nreturn (\n  <>\n    <Widget\n      src=\"near/widget/DIG.Button\"\n      props={{\n        label: \"Open Dialog\",\n        onClick: () => State.update({ dialogIsOpen: true }),\n      }}\n    />\n\n    <Widget\n      src=\"near/widget/DIG.Dialog\"\n      props={{\n        type: \"alert\",\n        title: \"Header\",\n        description: \"Some description\",\n        onCancel: handleCancelFunction,\n        onConfirm: handleConfirmFunction,\n        cancelButtonText: \"Cancel\",\n        confirmButtonText: \"Confirm\",\n        open: state.dialogIsOpen,\n        onOpenChange: (value) => State.update({ dialogIsOpen: value }),\n      }}\n    />\n  </>\n);\n```\n\n### Props\n\n`type`\n\n- type: `string` (variants: `\"alert\"` or `\"dialog\"`)\n- `\"alert\"` - https://www.radix-ui.com/primitives/docs/components/alert-dialog\n- `\"dialog\"` - https://www.radix-ui.com/primitives/docs/components/dialog\n- Defines type of Dialog.\n\n`title`\n\n- type: `string`\n- Title of Dialog.\n\n`description`\n\n- type: `string`\n- Description of Dialog.\n\n`onCancel`\n\n- type: `function`\n- Event handler called when the user clicks on cancel button.\n\n`onConfirm`\n\n- type: `function`\n- Event handler called when the user clicks on confirm button.\n\n`cancelButtonText`\n\n- type: `string`\n- Label on cancel button.\n\n`confirmButtonText`\n\n- type: `string`\n- Label on confirm button.\n\n`cancelButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `cancelButtonText`.\n- _note:_ pass `onCancel` event handler to specify custom action on cancel.\n\n`confirmButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `confirmButtonText`.\n- _note:_ pass `onConfirm` event handler to specify custom action on cancel.\n\n`trigger`\n\n- type: `JSX`\n- An optional trigger element that will open the dialog\n\n`contentStyles`\n\n- type: `object`\n- styling options for Dialog.Content\n\n`actionStyles`\n\n- type: `object`\n- styling options for Dialog action buttons\n\n`overlayColor`\n\n-`type`: `string`\n- Specify a color for layer that covers the inert portion of the view when the dialog is open.\n\n`overlayBlur`\n\n- `type`: `string`\n- Similar to `overlayColor`. Specifies blur\n\nThis component also accepts all `Alert.Dialog` or `Dialog` (depends on selected `type`) props as outlined in the Radix documentation.\n",
   "name": "DIG.Dialog",
   "tags": {
     "dig": ""

src/NearOrg/Notifications/NotificationAlert.jsx

@@ -1,4 +1,12 @@
-let { open, onConfirm, onCancel, onOpenChange } = props;
+let {
+  open,
+  onConfirm,
+  onCancel,
+  onOpenChange,
+  cancelProps,
+  confirmProps,
+  ...forwardedProps
+} = props;
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -48,7 +56,7 @@ const actionStyles = {
   },
 };
 
-const CancelButton = () => (
+const CancelButton = ({ cancelProps }) => (
   <Widget
     src="${REPL_ACCOUNT}/widget/DIG.Button"
     props={{
@@ -57,18 +65,20 @@ const CancelButton = () => (
       fill: "ghost",
       onClick: onCancel,
       style: { width: "100%" },
+      ...cancelProps,
     }}
   />
 );
 
-const ConfirmButton = () => (
+const ConfirmButton = ({ confirmProps }) => (
   <Widget
     src="${REPL_ACCOUNT}/widget/DIG.Button"
     props={{
       label: "Turn On",
       variant: "primary",
       onClick: onConfirm,
       style: { width: "100%" },
+      ...confirmProps,
     }}
   />
 );
@@ -80,11 +90,13 @@ return (
       type: "alert",
       title: <Header />,
       description: <Description />,
-      cancelButton: <CancelButton />,
-      confirmButton: <ConfirmButton />,
+      cancelButton: <CancelButton cancelProps={cancelProps} />,
+      confirmButton: <ConfirmButton confirmProps={confirmProps} />,
       open,
       onOpenChange,
       actionStyles,
+      overlayColor: "var(--blackA11)",
+      overlayBlur: "blur(4px)",
     }}
   />
 );