fix: dialog style (#43)

* docs(changeset): Dialog improve styles
* improve dialog style

.changeset/weak-dogs-promise.md

@@ -0,0 +1,5 @@
+---
+"@codeui/kit": patch
+---
+
+Dialog improve styles

packages/kit/src/components/Dialog/Dialog.css.ts

@@ -11,6 +11,7 @@ export const [dialogTheme, dialogThemeVars] = createTheme({
 	contentBoxShadow: tokens.dialogBoxShadow,
 	contentTextColor: tokens.dialogTextColor,
 	contentPadding: themeTokens.spacing["6"],
+	titleHeight: "56px",
 	panelRadius: themeTokens.radii.lg,
 	dividerColor: tokens.separator,
 	titleFontSize: themeTokens.fontSize.lg,
@@ -55,9 +56,9 @@ export const overlay = style([
 export const panelContent = style([
 	{
 		padding: `${dialogThemeVars.contentPadding}`,
+		overflow: "auto",
 		selectors: {
-			"[data-full-screen=true] &": {
-				overflow: "auto",
+			"[data-panel-size=full] &": {
 				flex: 1,
 			},
 		},
@@ -67,7 +68,7 @@ export const panelContent = style([
 export const panelFooter = style({
 	padding: `${dialogThemeVars.contentPadding}`,
 	selectors: {
-		"[data-full-screen=true] &": {
+		"[data-panel-size=full] &": {
 			marginTop: "auto",
 			marginBottom: "env(safe-area-inset-bottom, 20px)",
 		},
@@ -82,19 +83,22 @@ export const positioner = style({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
+	paddingTop: themeTokens.spacing['2'],
+	paddingBottom: themeTokens.spacing['2']
 });
 
 export const title = style([
 	{
 		color: dialogThemeVars.contentTextColor,
-		height: "52px",
+		height: dialogThemeVars.titleHeight,
 		borderBottom: `1px solid ${dialogThemeVars.dividerColor}`,
 		padding: `0 ${dialogThemeVars.contentPadding}`,
 		display: "flex",
 		alignItems: "center",
 		fontSize: dialogThemeVars.titleFontSize,
 		fontWeight: themeTokens.fontWeight.medium,
 		justifyContent: "space-between",
+		flexShrink: 0
 	},
 ]);
 
@@ -104,6 +108,7 @@ export const panel = recipe({
 			display: "inline-flex",
 			flexDirection: "column",
 			width: "100%",
+			height: "100%",
 			padding: 0,
 			overflow: "hidden",
 			textAlign: "left",

packages/kit/src/components/Dialog/Dialog.tsx

@@ -11,11 +11,11 @@ export type DialogProps = KDialog.DialogRootOptions &
 	};
 
 export function DialogPanelContent(props: ParentProps): JSXElement {
-	return <div class={styles.panelContent}>{props.children}</div>;
+	return <div data-cui="dialog-panel-content" class={styles.panelContent}>{props.children}</div>;
 }
 
 export function DialogPanelFooter(props: ParentProps): JSXElement {
-	return <div class={styles.panelFooter}>{props.children}</div>;
+	return <div data-cui="dialog-panel-footer" class={styles.panelFooter}>{props.children}</div>;
 }
 
 type DialogPanelProps = styles.DialogPanelVariants &
@@ -37,13 +37,13 @@ export function DialogPanel(props: ParentProps<DialogPanelProps>): JSXElement {
 export function Dialog(props: ParentProps<DialogProps>) {
 	const [local, others] = splitProps(props, ["size", "children", "title"]);
 	return (
-		<KDialog.Root {...others}>
+		<KDialog.Root {...others} data-cui="cui-dialog-root">
 			<KDialog.Portal>
 				<KDialog.Overlay class={styles.overlay} />
-				<div class={mergeClasses(styles.dialogTheme, styles.positioner)}>
+				<div class={mergeClasses(styles.dialogTheme, styles.positioner)} data-panel-size={local.size}>
 					<DialogPanel size={local.size}>
 						<Show when={local.title} keyed={false}>
-							<div class={styles.title}>
+							<div class={styles.title} data-cui="dialog-panel-title">
 								<KDialog.Title>{props.title}</KDialog.Title>
 								<KDialog.CloseButton asChild>
 									<As

packages/playground-next/src/routes/dialog.tsx

@@ -1,5 +1,5 @@
 import { For } from "solid-js";
-import { Button, Dialog, DialogPanelContent } from "@codeui/kit";
+import { Button, Dialog, DialogPanelContent, DialogPanelFooter } from "@codeui/kit";
 import { createStore } from "solid-js/store";
 import { DemoSectionRow } from "~/components/ui/DemoSection";
 
@@ -11,6 +11,8 @@ export default function DialogDemo() {
 		lg: false,
 		xl: false,
 		full: false,
+		mdOverflow: false,
+		fullOverflow: false
 	});
 	return (
 		<>
@@ -47,6 +49,70 @@ export default function DialogDemo() {
 					)}
 				</For>
 			</DemoSectionRow>
+
+			<h2>Oveflow content</h2>
+
+			<DemoSectionRow>
+
+				<Button theme={"secondary"} onClick={() => setDialogState('mdOverflow', true)}>
+					Open Dialog (md)
+				</Button>
+				<Dialog
+					open={dialogState.mdOverflow}
+					title={`Dialog title`}
+					size={'md'}
+					onOpenChange={value => setDialogState('mdOverflow', value)}
+				>
+					<DialogPanelContent>
+						{new Array(20).fill("").map(value => {
+							return (
+								<p>
+
+									Kobalte is a UI toolkit for building accessible web apps and design
+									systems with SolidJS. It provides a set of low-level UI components and
+									primitives which can be the foundation for your design system
+									implementation.
+
+								</p>
+							)
+						})}
+					</DialogPanelContent>
+					<DialogPanelFooter>
+						<Button theme={'secondary'}>Close</Button>
+						<Button theme={'primary'}>Confirm</Button>
+					</DialogPanelFooter>
+				</Dialog>
+
+				<Button theme={"secondary"} onClick={() => setDialogState('fullOverflow', true)}>
+					Open Dialog (full)
+				</Button>
+				<Dialog
+					open={dialogState.fullOverflow}
+					title={`Dialog title`}
+					size={'full'}
+					onOpenChange={value => setDialogState('fullOverflow', value)}
+				>
+					<DialogPanelContent>
+						{new Array(100).fill("").map(value => {
+							return (
+								<p>
+
+									Kobalte is a UI toolkit for building accessible web apps and design
+									systems with SolidJS. It provides a set of low-level UI components and
+									primitives which can be the foundation for your design system
+									implementation.
+
+								</p>
+							)
+						})}
+					</DialogPanelContent>
+					<DialogPanelFooter>
+						<Button theme={'secondary'}>Close</Button>
+						<Button theme={'primary'}>Confirm</Button>
+					</DialogPanelFooter>
+				</Dialog>
+
+			</DemoSectionRow>
 		</>
 	);
 }