feat(core): Modal revisited!

packages/core/.storybook/main.js

@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/modal.stories.tsx',
     '../stories/tree.stories.tsx',
     '../stories/tabs.stories.tsx',
     '../stories/list.stories.tsx',

packages/core/components/Modal/Modal.css.ts

@@ -0,0 +1,77 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { contract } from '../ThemeProvider/themes/contract.css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const modalWrapper = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    padding: '2px 2px 8px',
+    top: '50px',
+    backgroundColor: contract.colors.material,
+    boxShadow: contract.shadows.out,
+  },
+  variants: {
+    active: {
+      true: {
+        zIndex: contract.zIndices.modal,
+      },
+    },
+  },
+});
+
+export const buttonWrapper = style({
+  display: 'flex',
+  gap: '6px',
+  flexDirection: 'row',
+  padding: '0 6px 6px 6px',
+});
+
+globalStyle(`${buttonWrapper} button`, {
+  minWidth: '70px',
+});
+
+export const content = style({
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '6px',
+});
+
+export const menuWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  listStyle: 'none',
+  margin: '0',
+  paddingLeft: '0',
+  paddingTop: '1px',
+  paddingBottom: '1px',
+  borderBottomStyle: 'solid',
+  borderWidth: '1px',
+  borderBottomColor: contract.colors.borderDark,
+  boxShadow: `0 1px 0 0 ${contract.colors.borderLighter}`,
+});
+
+export const menuItem = recipe({
+  base: {
+    position: 'relative',
+    paddingLeft: '6px',
+    paddingRight: '6px',
+    userSelect: 'none',
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: contract.colors.material,
+        color: contract.colors.materialTextInvert,
+      },
+    },
+  },
+});
+
+globalStyle(`${menuItem.classNames.base} ul`, {
+  position: 'absolute',
+  left: '0',
+  color: contract.colors.materialText,
+});

packages/core/components/Modal/Modal.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import List from '../List';
 import { fireEvent, waitRender } from '../shared/test/utils';
-import Modal from './Modal';
+import { Modal } from './Modal';
 import ModalContext from './ModalContext';
 
 describe('<Modal />', () => {
@@ -13,7 +13,7 @@ describe('<Modal />', () => {
         <Modal
           icon={<Bat />}
           title="file.bat"
-          closeModal={() => {}}
+          onClose={() => {}}
           buttons={[
             { value: 'Ok', onClick: () => {} },
             { value: 'Cancel', onClick: () => {} },
@@ -48,7 +48,7 @@ describe('<Modal />', () => {
         <Modal
           icon={<Bat />}
           title="file.bat"
-          closeModal={() => {}}
+          onClose={() => {}}
           buttons={[
             { value: 'Ok', onClick: () => {} },
             { value: 'Cancel', onClick: () => {} },
@@ -66,7 +66,7 @@ describe('<Modal />', () => {
         <Modal
           icon={<Bat />}
           title="file.bat"
-          closeModal={() => {}}
+          onClose={() => {}}
           buttons={[
             { value: 'Ok', onClick: () => {} },
             { value: 'Cancel', onClick: () => {} },
@@ -86,7 +86,7 @@ describe('<Modal />', () => {
           title="file.bat"
           width="300"
           height="200"
-          closeModal={() => {}}
+          onClose={() => {}}
         >
           Hello
         </Modal>,
@@ -111,7 +111,7 @@ describe('<Modal />', () => {
             title="file.bat"
             width="300"
             height="200"
-            closeModal={() => {}}
+            onClose={() => {}}
           >
             Hello
           </Modal>
@@ -121,18 +121,18 @@ describe('<Modal />', () => {
     });
   });
 
-  describe('closeModal prop', () => {
-    it('should call closeModal when Modal close button is clicked', async () => {
-      const closeModalMock = vi.fn();
-      const { getByText } = await waitRender(
-        <Modal icon={<Bat />} title="file.bat" closeModal={closeModalMock}>
+  describe('onClose prop', () => {
+    it('should call onClose when Modal close button is clicked', async () => {
+      const onCloseMock = vi.fn();
+      const { getByRole } = await waitRender(
+        <Modal icon={<Bat />} title="file.bat" onClose={onCloseMock}>
           Hello
         </Modal>,
       );
 
-      fireEvent.click(getByText('X'));
+      fireEvent.click(getByRole('button'));
 
-      expect(closeModalMock).toHaveBeenCalled();
+      expect(onCloseMock).toHaveBeenCalled();
     });
   });
 
@@ -144,7 +144,7 @@ describe('<Modal />', () => {
           icon={<Bat />}
           title="file.bat"
           buttons={[{ value: buttonText, onClick: () => {} }]}
-          closeModal={() => {}}
+          onClose={() => {}}
         >
           Hello
         </Modal>,
@@ -163,7 +163,7 @@ describe('<Modal />', () => {
             { value: 'button 2', onClick: () => {} },
             { value: 'button 3', onClick: () => {} },
           ]}
-          closeModal={() => {}}
+          onClose={() => {}}
         >
           Hello
         </Modal>,
@@ -178,7 +178,7 @@ describe('<Modal />', () => {
         <Modal
           title="file.bat"
           buttons={[{ value: 'Ok', onClick: onClickMock }]}
-          closeModal={() => {}}
+          onClose={() => {}}
         >
           Hello
         </Modal>,
@@ -195,7 +195,7 @@ describe('<Modal />', () => {
       const { getByText } = await waitRender(
         <Modal
           title="file.bat"
-          closeModal={() => {}}
+          onClose={() => {}}
           menu={[
             {
               name: 'Menu Text',
@@ -217,7 +217,7 @@ describe('<Modal />', () => {
       const { getByText } = await waitRender(
         <Modal
           title="file.bat"
-          closeModal={() => {}}
+          onClose={() => {}}
           menu={[
             {
               name: 'Edit',