WIP: start refactor of modals and tooltips

packages/ui/src/lib/button/Button.svelte

@@ -20,7 +20,9 @@
 		openInNewTab: boolean;
 		type: 'button' | 'submit';
 		title: string;
-		customAction: ((node: HTMLElement) => MeltActionReturn<'keydown' | 'pointerdown'>) | undefined;
+		customAction:
+			| ((node: HTMLElement) => MeltActionReturn<'keydown' | 'pointerdown' | 'click'>)
+			| undefined;
 	}
 
 	type ButtonStyle = Record<
@@ -78,12 +80,13 @@
 	export let title: ButtonProps['title'] = '';
 
 	/**
-	 * MeltUI Action passed down from MultipleActionButton
+	 * MeltUI actions passed down from Trigger
 	 */
 	export let customAction: ButtonProps['customAction'] = undefined;
+	const action = customAction ? customAction : () => {};
 
 	/**
-	 * MeltUI action props passed down from MultipleActionButton, which include ARIA attributes and tabindex.
+	 * MeltUI action props passed down from Trigger, which include ARIA attributes and tabindex.
 	 */
 	export let actionProps = {};
 
@@ -233,37 +236,33 @@
 		href && disabled === true ? 'pointer-events-none' : '',
 		$$props.class
 	);
-
-	const action = customAction ? customAction : () => {};
 </script>
 
-<div class="flex">
-	<svelte:element
-		this={href ? 'a' : 'button'}
-		type={href ? undefined : type}
-		target={href && openInNewTab ? '_blank' : undefined}
-		rel={href && openInNewTab ? 'noopener noreferrer' : undefined}
-		{href}
-		{disabled}
-		{title}
-		class={buttonClass}
-		aria-label={ariaLabel}
-		{id}
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:touchstart
-		on:touchend
-		on:touchcancel
-		on:mouseenter
-		on:mouseleave
-		role="button"
-		tabindex="0"
-		use:action
-		{...actionProps}
-	>
-		<!-- contents of the button -->
-		<slot />
-	</svelte:element>
-</div>
+<svelte:element
+	this={href ? 'a' : 'button'}
+	type={href ? undefined : type}
+	target={href && openInNewTab ? '_blank' : undefined}
+	rel={href && openInNewTab ? 'noopener noreferrer' : undefined}
+	{href}
+	{disabled}
+	{title}
+	class={buttonClass}
+	aria-label={ariaLabel}
+	{id}
+	on:click
+	on:change
+	on:keydown
+	on:keyup
+	on:touchstart
+	on:touchend
+	on:touchcancel
+	on:mouseenter
+	on:mouseleave
+	role="button"
+	tabindex="0"
+	use:action
+	{...actionProps}
+>
+	<!-- contents of the button -->
+	<slot />
+</svelte:element>

packages/ui/src/lib/modal/Modal.svelte

@@ -8,20 +8,27 @@
 	 * @component
 	 */
 
-	import { createDialog } from '@melt-ui/svelte';
+	import { createDialog, type FocusProp } from '@melt-ui/svelte';
 	import { XMark } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { writable } from 'svelte/store';
 	import Button from '../button/Button.svelte';
+	import Trigger from '../trigger/Trigger.svelte';
 	import { classNames } from '../utils/classNames';
 
 	/**
 	 * boolean Svelte store that determines whether the modal is currently open.
 	 */
 	export let isOpen = writable(false);
 
+	const customOpenFocus: FocusProp = () => {
+		const customElToFocus = document.getElementById($meltTitle.id);
+		return customElToFocus;
+	};
+
 	const {
 		elements: {
+			trigger,
 			portalled,
 			overlay,
 			content,
@@ -30,7 +37,7 @@
 			close
 		},
 		states: { open }
-	} = createDialog({ open: isOpen });
+	} = createDialog({ open: isOpen, openFocus: customOpenFocus });
 
 	/**
 	 * title that appears at the top of the modal
@@ -64,6 +71,9 @@
 		| '7xl'
 		| 'full' = 'md';
 
+	export let hintLabel = 'More info';
+	export let showTrigger = false;
+
 	const hasChildren = Object.keys($$slots).length > 0;
 
 	const widthClasses = {
@@ -87,17 +97,30 @@
 	);
 </script>
 
-<div {...$portalled} use:$portalled.action>
+{#if showTrigger}
+	{#if $$slots.hint}
+		<Trigger customAction={trigger} actionProps={$trigger}>
+			<slot name="hint" />
+		</Trigger>
+	{:else}
+		<Trigger {hintLabel} customAction={trigger} actionProps={$trigger} />
+	{/if}
+{/if}
+
+<div {...$portalled} use:portalled>
 	{#if $open}
-		<div {...$overlay} use:$overlay.action class="fixed inset-0 bg-black bg-opacity-40 z-40" />
+		<!-- The dim background that is behind the modal -->
+		<div {...$overlay} use:overlay class="fixed inset-0 bg-black bg-opacity-40 z-40" />
 
 		<div class="fixed inset-8 flex items-center justify-center pointer-events-none z-50">
-			<div {...$content} use:$content.action class={modalClass}>
+			<!-- Modal content -->
+			<div {...$content} use:content class={modalClass}>
+				<!-- Header -->
 				<div
-					class={`bg-color-container-level-1 text-color-text-primary p-2 pl-3 relative flex items-center justify-between border-l-[5px] border-color-static-brand ${headerTheme}`}
+					class="bg-color-container-level-1 text-color-text-primary p-2 pl-3 relative flex items-center justify-between border-l-[5px] border-color-static-brand {headerTheme}"
 				>
-					<div class="text-lg font-medium" {...$meltTitle} use:$meltTitle.action>{title}</div>
-					<div {...$close} use:$close.action>
+					<div class="text-lg font-medium" tabindex="-1" {...$meltTitle} use:meltTitle>{title}</div>
+					<div {...$close} use:close>
 						<Button
 							variant="square"
 							emphasis="secondary"
@@ -110,10 +133,11 @@
 					</div>
 				</div>
 
+				<!-- Modal body -->
 				<div class="overflow-y-auto">
 					<div class="p-4">
 						{#if description}
-							<div {...$meltDescription} use:$meltDescription.action>{description}</div>
+							<div {...$meltDescription} use:meltDescription>{description}</div>
 						{/if}
 
 						{#if hasChildren}

packages/ui/src/lib/multipleActionButton/MultipleActionButton.svelte

@@ -21,6 +21,7 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import type { ButtonProps } from '../button/Button.svelte';
 	import Button from '../button/Button.svelte';
+	import Trigger from '../trigger/Trigger.svelte';
 	import { randomId } from '../utils/randomId';
 
 	/**
@@ -142,25 +143,25 @@
 			</div>
 		</Button>
 
-		<Button
+		<Trigger
 			variant="square"
 			{emphasis}
 			{condition}
 			{size}
 			{disabled}
-			customAction={$trigger.action}
+			customAction={trigger}
 			actionProps={$trigger}
 			class={`${variant === 'outline' ? ' border-l-0 ' : 'border-l border-color-action-border-secondary'}`}
 			ariaLabel={menuTitle ? 'Open popover to ' + menuTitle : 'Open popover'}
 		>
-			<Icon src={ChevronDown} theme="mini" class="h-5 w-5" />
-		</Button>
+			<Icon src={ChevronDown} theme="mini" class="h-5 w-5" slot="hint" />
+		</Trigger>
 	</div>
 
 	{#if $open}
 		<div
 			class="bg-color-container-level-1 z-40 max-w-sm p-2 shadow flex flex-col space-y-2"
-			use:$menu.action
+			use:menu
 			{...$menu}
 			transition:fly={{ duration: 150, y: -10 }}
 		>
@@ -174,7 +175,7 @@
 					<button
 						class="text-left w-full p-2 hover:bg-color-action-background-primary-hover hover:text-color-static-white"
 						on:click={() => changeOption(option)}
-						use:$item.action
+						use:item
 						{...$item}
 					>
 						<div class="flex items-center">
@@ -189,6 +190,6 @@
 				{/each}
 			</div>
 		</div>
-		<div use:$arrow.action {...$arrow} />
+		<div use:arrow {...$arrow} />
 	{/if}
 {/if}

packages/ui/src/lib/sidebar/elements/sidebarHint/SidebarHint.stories.svelte

@@ -31,7 +31,17 @@
 	</SidebarHint></Template
 >
 
-<Story name="Default (Modal)" source />
+<Story name="Default (tooltip)" source />
+
+<Story name="Modal" source>
+	<SidebarHint hintType="modal">
+		'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.'
+	</SidebarHint>
+</Story>
 
 <Story name="Modal width" source>
 	<SidebarHint hintType="modal" modalWidth="5xl">

packages/ui/src/lib/sidebar/elements/sidebarHint/SidebarHint.svelte

@@ -4,9 +4,9 @@
 	 * @component
 	 */
 
+	import Modal from '../../../modal/Modal.svelte';
 	import Popover from '../../../popover/Popover.svelte';
 	import Tooltip from '../../../tooltip/Tooltip.svelte';
-	import SidebarHintModal from './SidebarHintModal.svelte';
 
 	/**
 	 * Form in which the help text should be displayed.
@@ -58,8 +58,12 @@
 		<slot />
 	</Popover>
 {:else if hintType === 'modal'}
-	<SidebarHintModal {hintLabel} {modalTitle} {modalDescription} {modalWidth}>
+	<Modal title={modalTitle || ''} description={modalDescription} width={modalWidth} showTrigger>
+		<svelte:fragment slot="hintText">
+			{hintLabel}
+		</svelte:fragment>
+
 		<!-- The help message. -->
 		<slot />
-	</SidebarHintModal>
+	</Modal>
 {/if}

packages/ui/src/lib/tooltip/Tooltip.stories.svelte

@@ -9,6 +9,32 @@
 			hintSize: {
 				options: ['sm', 'md', 'lg'],
 				control: { type: 'select' }
+			},
+			triggerClass: { type: 'string', control: 'text' },
+			triggerVariant: {
+				options: ['brand', 'solid', 'outline', 'text'], //square
+				control: { type: 'select' }
+			},
+			triggerEmphasis: {
+				options: ['primary', 'secondary'],
+				control: { type: 'radio' }
+			},
+			placement: {
+				options: [
+					'top',
+					'top-start',
+					'top-end',
+					'right',
+					'right-start',
+					'right-end',
+					'bottom',
+					'bottom-start',
+					'bottom-end',
+					'left',
+					'left-start',
+					'left-end'
+				],
+				control: { type: 'select' }
 			}
 		}
 	};
@@ -26,22 +52,26 @@
 	<Tooltip {...args}>This is some text</Tooltip>
 </Template>
 
-<Story name="Default" source />
+<Story name="Default" source args={{ triggerClass: '!p-0' }} />
 
 <Story name="Hint Size">
-	<Tooltip hintSize="sm">This is some text</Tooltip>
+	<Tooltip hintSize="sm" triggerClass="!p-0">This is some text</Tooltip>
 </Story>
 
 <Story name="Custom hint label">
-	<Tooltip hintLabel="Hover over me!">This is some text</Tooltip>
+	<Tooltip hintLabel="Hover over me!" triggerClass="!p-0">This is some text</Tooltip>
 </Story>
 
 <Story name="Custom hint icon">
-	<Tooltip>
+	<Tooltip triggerClass="!p-0">
 		<svelte:fragment slot="hint">
 			I have a different icon
 			<Icon src={Cog6Tooth} theme="mini" class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
 		</svelte:fragment>
 		But I still work the same
 	</Tooltip>
 </Story>
+
+<Story name="Custom trigger styling">
+	<Tooltip triggerVariant="square">This is a test!</Tooltip>
+</Story>