From 2684b9bf2e6d2e3e756c2a80fd6701175532254a Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Thu, 6 Nov 2025 16:13:40 +0000 Subject: [PATCH 1/9] test: NRP-2403: pre-release --- package.json | 4 ++++ src/shadcn/ui/dialog.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 907d05d..e970112 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,10 @@ { "name": "dark-mode-selector-css", "prerelease": true + }, + { + "name": "NRP-2403-dialog-enhancements", + "prerelease": true } ] }, diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index e07ea8a..b603fd5 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef< Date: Thu, 6 Nov 2025 17:49:08 +0000 Subject: [PATCH 2/9] feat: NRP-2403: non dismissable dialog --- src/shadcn/ui/dialog.tsx | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index b603fd5..e3422ec 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef< , - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( + React.ComponentPropsWithoutRef & { + isDismissable?: boolean + } +>(({ className, children, isDismissable = true, ...props }, ref) => ( { + if (!isDismissable) e.preventDefault() + }} + onEscapeKeyDown={(e) => { + if (!isDismissable) e.preventDefault() + }} {...props} > {children} - - - Close - + + {isDismissable && ( + + + Close + + )} )) From f4c05365a65623fa829759c8f9524a2456b7810e Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Fri, 7 Nov 2025 19:58:07 +0000 Subject: [PATCH 3/9] feat: NRP-2403: bottom dialog and visible background --- src/shadcn/ui/dialog.tsx | 130 ++++++++++++++++++++---------- stories/shadcn/dialog.stories.tsx | 64 ++++++++++++--- 2 files changed, 141 insertions(+), 53 deletions(-) diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index e3422ec..b00050c 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -16,16 +16,28 @@ const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - + React.ComponentPropsWithoutRef & { + isBackgroundVisible?: boolean + } +>(({ + className, + isBackgroundVisible = false + , ...props + }, ref) => ( + <> + + )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName @@ -33,38 +45,74 @@ const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { isDismissable?: boolean + isBottomDialog?: boolean + isBackgroundVisible?: boolean } ->(({ className, children, isDismissable = true, ...props }, ref) => ( - - - { - if (!isDismissable) e.preventDefault() - }} - onEscapeKeyDown={(e) => { - if (!isDismissable) e.preventDefault() - }} - {...props} - > - {children} - - {isDismissable && ( - - - Close - - )} - - -)) +>(({ + className, + children, + isDismissable = true, + isBottomDialog = false, + isBackgroundVisible = false, + ...props }, + ref) => { + const base = [ + "z-50", + "fixed", + "grid gap-4 p-6", + "border", + "bg-background", + "duration-200", + "data-[state=open]:animate-in data-[state=closed]:animate-out", + ] + + const centerStyles = [ + "max-w-lg", + "left-[50%] top-[50%]", + "translate-x-[-50%] translate-y-[-50%]", + "sm:rounded-lg", + "shadow-lg", + "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", + "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", + "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", + "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", + ].join(" ") + + const bottomStyles = [ + "left-0 bottom-0", + "w-full max-w-none", + "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom", + ].join(" ") + + return ( + + + { + if (!isDismissable) e.preventDefault() + }} + onEscapeKeyDown={(e) => { + if (!isDismissable) e.preventDefault() + }} + {...props} + > + {children} + + {isDismissable && ( + + + Close + + )} + + + ) +}) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ diff --git a/stories/shadcn/dialog.stories.tsx b/stories/shadcn/dialog.stories.tsx index 91c52d2..df32741 100644 --- a/stories/shadcn/dialog.stories.tsx +++ b/stories/shadcn/dialog.stories.tsx @@ -6,24 +6,64 @@ import { DialogHeader, DialogTitle, DialogTrigger, + Button } from "src"; +export const BottomDialogDemo = () => { + return ( +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

+ + + + + Privacy Notice + +
+

+ We use cookies and similar technologies to improve your experience on our site, to analyze our traffic, and to understand where our audience is coming from. +

+
+ +
+ + +
+
+
+ + + + +
+ ); +}; + const DialogDemo = () => { return ( - - Open - - - Are you sure absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - - - - +
+ + + + + + + Are you sure absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + +
); }; + const meta: Meta = { component: DialogDemo, }; From 6c92376004888fe754b8fc20b5de552ed8be6ab4 Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Mon, 10 Nov 2025 14:33:56 +0000 Subject: [PATCH 4/9] feat: NRP-2403: bottom dialog black background --- src/shadcn/ui/dialog.tsx | 14 +++++++------- stories/shadcn/dialog.stories.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index b00050c..c79d95c 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -17,11 +17,11 @@ const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - isBackgroundVisible?: boolean + isBackdropBlack?: boolean } >(({ className, - isBackgroundVisible = false + isBackdropBlack = false , ...props }, ref) => ( <> @@ -31,8 +31,8 @@ const DialogOverlay = React.forwardRef< "fixed", "inset-0 z-50", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", - isBackgroundVisible && "bg-background/60", - !isBackgroundVisible && "bg-background/80 backdrop-blur-sm", + isBackdropBlack && "bg-black/20", + !isBackdropBlack && "bg-background/80 backdrop-blur-sm", className )} {...props} @@ -46,14 +46,14 @@ const DialogContent = React.forwardRef< React.ComponentPropsWithoutRef & { isDismissable?: boolean isBottomDialog?: boolean - isBackgroundVisible?: boolean + isBackdropBlack?: boolean } >(({ className, children, isDismissable = true, isBottomDialog = false, - isBackgroundVisible = false, + isBackdropBlack = false, ...props }, ref) => { const base = [ @@ -86,7 +86,7 @@ const DialogContent = React.forwardRef< return ( - + { - + Privacy Notice -
-

+

+

We use cookies and similar technologies to improve your experience on our site, to analyze our traffic, and to understand where our audience is coming from.

From 363ba187b36c4b1604a7250be269b0fe52bee99d Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Tue, 11 Nov 2025 11:29:43 +0000 Subject: [PATCH 5/9] chore: NRP-2403: remove prop and make universally the overlays to be dark instead of white --- package.json | 12 ------------ src/shadcn/ui/dialog.tsx | 12 ++---------- src/shadcn/ui/sheet.tsx | 2 +- 3 files changed, 3 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index e970112..3ecae66 100644 --- a/package.json +++ b/package.json @@ -17,18 +17,6 @@ "release": { "branches": [ "main", - { - "name": "remove-unused-components", - "prerelease": true - }, - { - "name": "refactor-simpler-build", - "prerelease": true - }, - { - "name": "dark-mode-selector-css", - "prerelease": true - }, { "name": "NRP-2403-dialog-enhancements", "prerelease": true diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index c79d95c..5e0d49e 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -16,23 +16,15 @@ const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & { - isBackdropBlack?: boolean - } ->(({ - className, - isBackdropBlack = false - , ...props - }, ref) => ( + React.ComponentPropsWithoutRef>(({className, ...props}, ref) => ( <> (({ className, ...props }, ref) => ( Date: Tue, 11 Nov 2025 13:06:29 +0000 Subject: [PATCH 6/9] fix: NRP-2403: remove prop --- src/shadcn/ui/dialog.tsx | 4 +--- stories/shadcn/dialog.stories.tsx | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index 5e0d49e..4830b82 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -38,14 +38,12 @@ const DialogContent = React.forwardRef< React.ComponentPropsWithoutRef & { isDismissable?: boolean isBottomDialog?: boolean - isBackdropBlack?: boolean } >(({ className, children, isDismissable = true, isBottomDialog = false, - isBackdropBlack = false, ...props }, ref) => { const base = [ @@ -78,7 +76,7 @@ const DialogContent = React.forwardRef< return ( - + { Privacy Notice From 5159d9d6356b84ac2475f598666c844d99c057d6 Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Tue, 11 Nov 2025 13:25:20 +0000 Subject: [PATCH 7/9] fix: NRP-2403: black 40 --- src/shadcn/ui/dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shadcn/ui/dialog.tsx b/src/shadcn/ui/dialog.tsx index 4830b82..e1a0d56 100644 --- a/src/shadcn/ui/dialog.tsx +++ b/src/shadcn/ui/dialog.tsx @@ -23,7 +23,7 @@ const DialogOverlay = React.forwardRef< className={cn( "fixed", "inset-0 z-50", - "bg-black/20", + "bg-black/40", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className )} From 93aa50f9fa53669dbcc50385d4d8eb37f027bf55 Mon Sep 17 00:00:00 2001 From: Aidan <104831665+aidanCQ@users.noreply.github.com> Date: Tue, 11 Nov 2025 14:20:15 +0000 Subject: [PATCH 8/9] docs: Add statefulness to dialog story. --- stories/shadcn/dialog.stories.tsx | 45 ++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/stories/shadcn/dialog.stories.tsx b/stories/shadcn/dialog.stories.tsx index 07660f1..8e48e1a 100644 --- a/stories/shadcn/dialog.stories.tsx +++ b/stories/shadcn/dialog.stories.tsx @@ -1,23 +1,22 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { - Dialog, + Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, - DialogTrigger, - Button + DialogTrigger } from "src"; -export const BottomDialogDemo = () => { +export const BottomDialogDemo = (props: {isOpen: boolean, isBottomDialog: boolean, isDismissable: boolean}) => { return (

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

- - + Privacy Notice @@ -29,7 +28,7 @@ export const BottomDialogDemo = () => {
- +
@@ -63,12 +62,32 @@ const DialogDemo = () => { ); }; -const meta: Meta = { - component: DialogDemo, +const meta: Meta = { + component: BottomDialogDemo, + argTypes: { + isBottomDialog: { + control: 'boolean', + description: 'Positions the dialog at the bottom of the screen.', + defaultValue: true, + }, + isDismissable: { + control: 'boolean', + description: 'Whether the dialog can be dismissed.', + defaultValue: true, + }, + isOpen: { + control: 'boolean', // 👈 Tells Storybook this is a toggle + description: 'Controls whether the dialog is open or closed.', + defaultValue: true, + } + } }; export default meta; -export const Default: StoryObj = { - args: {}, +export const Default: StoryObj = { + args: { + isBottomDialog: true, + isOpen: true + }, }; From 8ed612e518ed7b4ddac06e5ae818730d615dd725 Mon Sep 17 00:00:00 2001 From: stavros-tomas Date: Tue, 11 Nov 2025 16:23:50 +0000 Subject: [PATCH 9/9] chore: NRP-2403: update storybook --- package.json | 6 +---- stories/shadcn/dialog.stories.tsx | 38 ++++++++----------------------- 2 files changed, 10 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 3ecae66..553ed29 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,7 @@ }, "release": { "branches": [ - "main", - { - "name": "NRP-2403-dialog-enhancements", - "prerelease": true - } + "main" ] }, "publishConfig": { diff --git a/stories/shadcn/dialog.stories.tsx b/stories/shadcn/dialog.stories.tsx index 8e48e1a..7b3c139 100644 --- a/stories/shadcn/dialog.stories.tsx +++ b/stories/shadcn/dialog.stories.tsx @@ -9,7 +9,7 @@ import { DialogTrigger } from "src"; -export const BottomDialogDemo = (props: {isOpen: boolean, isBottomDialog: boolean, isDismissable: boolean}) => { +const DialogDemo = (props: {isOpen: boolean, isBottomDialog: boolean, isDismissable: boolean}) => { return (

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

@@ -41,34 +41,13 @@ export const BottomDialogDemo = (props: {isOpen: boolean, isBottomDialog: boolea ); }; -const DialogDemo = () => { - return ( -
- - - - - - - Are you sure absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - - - - -
- ); -}; - -const meta: Meta = { - component: BottomDialogDemo, +const meta: Meta = { + component: DialogDemo, argTypes: { isBottomDialog: { control: 'boolean', description: 'Positions the dialog at the bottom of the screen.', - defaultValue: true, + defaultValue: false, }, isDismissable: { control: 'boolean', @@ -76,7 +55,7 @@ const meta: Meta = { defaultValue: true, }, isOpen: { - control: 'boolean', // 👈 Tells Storybook this is a toggle + control: 'boolean', description: 'Controls whether the dialog is open or closed.', defaultValue: true, } @@ -85,9 +64,10 @@ const meta: Meta = { export default meta; -export const Default: StoryObj = { +export const Default: StoryObj = { args: { - isBottomDialog: true, - isOpen: true + isOpen: true, + isBottomDialog: false, + isDismissable: true, }, };