Update some CSS on Dialog

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Dialog/Dialog.stories.tsx

@@ -25,7 +25,7 @@ import {
 import { Button, Flex, Text, TextField, Select } from '@backstage/ui';
 
 const meta = {
-  title: 'Components/Dialog',
+  title: 'Backstage UI/Dialog',
   component: Dialog,
 } satisfies Meta<typeof Dialog>;
 
@@ -50,6 +50,23 @@ export const Default: Story = {
   ),
 };
 
+export const WithNoHeader: Story = {
+  render: () => (
+    <DialogTrigger>
+      <Button variant="secondary">Open Dialog</Button>
+      <Dialog>
+        <DialogBody>
+          <Text>This is a basic dialog example.</Text>
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose>Close</DialogClose>
+          <DialogClose variant="primary">Save</DialogClose>
+        </DialogFooter>
+      </Dialog>
+    </DialogTrigger>
+  ),
+};
+
 export const Scrollable: Story = {
   render: () => (
     <DialogTrigger>

packages/ui/src/components/Dialog/Dialog.styles.css

@@ -5,13 +5,17 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(232, 232, 232, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
 }
 
+[data-theme='dark'] .bui-Dialog {
+  background: rgba(0, 0, 0, 0.5);
+}
+
 .bui-Dialog[data-entering] {
   animation: fade-in 200ms ease-out forwards;
 }
@@ -46,12 +50,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--bui-space-3);
+  padding-inline: var(--bui-space-3);
+  padding-block: var(--bui-space-2);
   border-bottom: 1px solid var(--bui-border);
 }
 
-.bui-Dialog [slot='title'] {
+.bui-DialogHeaderTitle {
   font-size: var(--bui-font-size-3);
+  font-weight: var(--bui-font-weight-bold);
+  margin: 0;
 }
 
 .bui-DialogFooter {
@@ -59,7 +66,8 @@
   align-items: center;
   justify-content: end;
   gap: var(--bui-space-2);
-  padding: var(--bui-space-3);
+  padding-inline: var(--bui-space-3);
+  padding-block: var(--bui-space-3);
   border-top: 1px solid var(--bui-border);
 }
 

packages/ui/src/components/Dialog/Dialog.tsx

@@ -33,6 +33,8 @@ import './Dialog.styles.css';
 import { RiCloseLine } from '@remixicon/react';
 import { ScrollArea } from '../ScrollArea';
 import { Button } from '../Button';
+import { useStyles } from '../../hooks/useStyles';
+import { Flex } from '../Flex';
 
 /** @public */
 export const DialogTrigger = (props: DialogTriggerProps) => {
@@ -43,82 +45,102 @@ export const DialogTrigger = (props: DialogTriggerProps) => {
 export const DialogHeader = forwardRef<
   React.ElementRef<'div'>,
   DialogHeaderProps
->(({ className, children, ...props }, ref) => (
-  <div ref={ref} className={clsx('bui-DialogHeader', className)} {...props}>
-    <Heading slot="title" className="bui-DialogHeaderTitle">
-      {children}
-    </Heading>
-    <Button variant="tertiary" className="bui-DialogHeaderClose" slot="close">
-      <RiCloseLine />
-    </Button>
-  </div>
-));
+>(({ className, children, ...props }, ref) => {
+  const { classNames } = useStyles('Dialog');
+
+  return (
+    <Flex ref={ref} className={clsx(classNames.header, className)} {...props}>
+      <Heading slot="title" className={classNames.headerTitle}>
+        {children}
+      </Heading>
+      <Button variant="tertiary" slot="close">
+        <RiCloseLine />
+      </Button>
+    </Flex>
+  );
+});
 DialogHeader.displayName = 'DialogHeader';
 
 /** @public */
 export const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(
-  ({ className, children, height, ...props }, ref) => (
-    <ScrollArea.Root
-      className={clsx('bui-DialogBody', className)}
-      style={{
-        height: height
-          ? typeof height === 'number'
-            ? `${height}px`
-            : height
-          : undefined,
-      }}
-      ref={ref}
-      {...props}
-    >
-      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation="vertical">
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-    </ScrollArea.Root>
-  ),
+  ({ className, children, height, ...props }, ref) => {
+    const { classNames } = useStyles('Dialog');
+
+    return (
+      <ScrollArea.Root
+        className={clsx(classNames.body, className)}
+        style={{
+          height: height
+            ? typeof height === 'number'
+              ? `${height}px`
+              : height
+            : undefined,
+        }}
+        ref={ref}
+        {...props}
+      >
+        <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+        <ScrollArea.Scrollbar orientation="vertical">
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
+    );
+  },
 );
+
 DialogBody.displayName = 'DialogBody';
 
 /** @public */
 export const DialogFooter = forwardRef<
   React.ElementRef<'div'>,
   React.ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <div ref={ref} className={clsx('bui-DialogFooter', className)} {...props}>
-    {children}
-  </div>
-));
+>(({ className, children, ...props }, ref) => {
+  const { classNames } = useStyles('Dialog');
+
+  return (
+    <div ref={ref} className={clsx(classNames.footer, className)} {...props}>
+      {children}
+    </div>
+  );
+});
 DialogFooter.displayName = 'DialogFooter';
 
 /** @public */
 export const DialogClose = forwardRef<
   React.ElementRef<typeof Button>,
   DialogCloseProps
->(({ className, variant = 'secondary', children, ...props }, ref) => (
-  <Button
-    ref={ref}
-    slot="close"
-    variant={variant}
-    className={clsx('bui-DialogClose', className)}
-    {...props}
-  >
-    {children}
-  </Button>
-));
+>(({ className, variant = 'secondary', children, ...props }, ref) => {
+  return (
+    <Button
+      ref={ref}
+      slot="close"
+      variant={variant}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});
 DialogClose.displayName = 'DialogClose';
 
 /** @public */
 export const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(
-  ({ className, children, ...props }, ref) => (
-    <Modal
-      ref={ref}
-      className={clsx('bui-Dialog', className)}
-      isDismissable
-      isKeyboardDismissDisabled={false}
-      {...props}
-    >
-      <RADialog className="bui-DialogContent">{children}</RADialog>
-    </Modal>
-  ),
+  ({ className, children, ...props }, ref) => {
+    const { classNames } = useStyles('Dialog');
+
+    return (
+      <Modal
+        ref={ref}
+        className={clsx(classNames.root, className)}
+        isDismissable
+        isKeyboardDismissDisabled={false}
+        {...props}
+      >
+        <RADialog className="bui-DialogContent">{children}</RADialog>
+      </Modal>
+    );
+  },
 );
+
 Dialog.displayName = 'Dialog';

packages/ui/src/utils/componentDefinitions.ts

@@ -85,6 +85,16 @@ export const componentDefinitions = {
       root: 'bui-Container',
     },
   },
+  Dialog: {
+    classNames: {
+      root: 'bui-Dialog',
+      content: 'bui-DialogContent',
+      header: 'bui-DialogHeader',
+      headerTitle: 'bui-DialogHeaderTitle',
+      body: 'bui-DialogBody',
+      footer: 'bui-DialogFooter',
+    },
+  },
   FieldLabel: {
     classNames: {
       root: 'bui-FieldLabelWrapper',