feat(dialog): add Dialog.Actions

Author: GregOnNet

packages/kit-headless/src/components/dialog/dialog.actions.tsx

@@ -0,0 +1,16 @@
+import { Slot, component$, useStyles$ } from '@builder.io/qwik';
+
+export const Actions = component$(() => {
+ useStyles$(`
+ .dialog-actions {
+ position: sticky;
+ bottom: 0;
+ }
+ `);
+
+ return (
+ <div class="dialog-actions">
+ <Slot />
+ </div>
+ );
+});

packages/kit-headless/src/components/dialog/dialog.stories.tsx

@@ -5,13 +5,6 @@ import * as Dialog from './public_api';
 
 const meta: Meta = {
  component: Dialog.Root,
-};
-
-type Story = StoryObj;
-
-export default meta;
-
-export const Primary: Story = {
  args: {
  dialogTrigger: {
  text: 'Open Dialog',
@@ -38,6 +31,13 @@ export const Primary: Story = {
  </Dialog.Root>
  </>
  ),
+};
+
+type Story = StoryObj;
+
+export default meta;
+
+export const Primary: Story = {
  play: ({ canvasElement, args }) => {
  /**
  *
@@ -54,3 +54,32 @@ export const Primary: Story = {
  userEvent.click(canvas.getByText(args.dialogClose.text));
  },
 };
+
+export const ScrollingLongContent: Story = {
+ args: {
+ ...Primary.args,
+ dialogPortal: {
+ text: Array(500)
+ .fill(null)
+ .map(() => 'Hello World')
+ .join(' '),
+ },
+ },
+ render: (args) => (
+ <>
+ <Dialog.Root>
+ <Dialog.Trigger>
+ <button>{args.dialogTrigger.text}</button>
+ </Dialog.Trigger>
+ <Dialog.Portal>
+ {args.dialogPortal.text}
+ <Dialog.Actions>
+ <Dialog.Close>
+ <button>{args.dialogClose.text}</button>
+ </Dialog.Close>
+ </Dialog.Actions>
+ </Dialog.Portal>
+ </Dialog.Root>
+ </>
+ ),
+};

packages/kit-headless/src/components/dialog/public_api.ts

@@ -1,3 +1,4 @@
+export * from './dialog.actions';
 export * from './dialog.close';
 export * from './dialog.context';
 export * from './dialog.portal';