paris 0.8.7 → 0.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "paris",
|
|
3
3
|
"author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
|
|
4
4
|
"description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
|
|
5
|
-
"version": "0.8.
|
|
5
|
+
"version": "0.8.8",
|
|
6
6
|
"homepage": "https://paris.slingshot.fm",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
@@ -5,7 +5,7 @@ import { useState } from 'react';
|
|
|
5
5
|
import { Drawer } from './Drawer';
|
|
6
6
|
import { Button } from '../button';
|
|
7
7
|
import {
|
|
8
|
-
Menu,
|
|
8
|
+
Menu,
|
|
9
9
|
} from '../menu';
|
|
10
10
|
import { usePagination } from '../pagination';
|
|
11
11
|
import { ChevronRight, Ellipsis } from '../icon';
|
|
@@ -39,7 +39,7 @@ export const Default: Story = {
|
|
|
39
39
|
onClose={setIsOpen}
|
|
40
40
|
additionalActions={(
|
|
41
41
|
<Menu as="div">
|
|
42
|
-
<
|
|
42
|
+
<Menu.Button>
|
|
43
43
|
<Button
|
|
44
44
|
kind="tertiary"
|
|
45
45
|
shape="circle"
|
|
@@ -49,16 +49,16 @@ export const Default: Story = {
|
|
|
49
49
|
>
|
|
50
50
|
Action menu
|
|
51
51
|
</Button>
|
|
52
|
-
</
|
|
53
|
-
<
|
|
54
|
-
<
|
|
52
|
+
</Menu.Button>
|
|
53
|
+
<Menu.Items position="right">
|
|
54
|
+
<Menu.Item as="button">
|
|
55
55
|
Dispute
|
|
56
|
-
</
|
|
57
|
-
<
|
|
56
|
+
</Menu.Item>
|
|
57
|
+
<Menu.Item as="button">
|
|
58
58
|
Transfer
|
|
59
59
|
<ChevronRight size={20} />
|
|
60
|
-
</
|
|
61
|
-
</
|
|
60
|
+
</Menu.Item>
|
|
61
|
+
</Menu.Items>
|
|
62
62
|
</Menu>
|
|
63
63
|
)}
|
|
64
64
|
>
|
|
@@ -59,7 +59,7 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
|
|
|
59
59
|
bottomPanel?: ReactNode;
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
|
-
* An optional
|
|
62
|
+
* An optional area that will be rendered at the top of the Drawer next to the title. This is useful for adding actions to the Drawer. Recommended to use {@link Menu} for an action menu.
|
|
63
63
|
*/
|
|
64
64
|
additionalActions?: ReactNode;
|
|
65
65
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import {
|
|
3
|
-
Menu,
|
|
3
|
+
Menu,
|
|
4
4
|
} from './Menu';
|
|
5
5
|
import { Button } from '../button';
|
|
6
6
|
import { ChevronRight, Ellipsis } from '../icon';
|
|
@@ -20,7 +20,7 @@ export const Default: Story = {
|
|
|
20
20
|
},
|
|
21
21
|
render: (args) => (
|
|
22
22
|
<Menu as="div">
|
|
23
|
-
<
|
|
23
|
+
<Menu.Button>
|
|
24
24
|
<Button
|
|
25
25
|
kind="tertiary"
|
|
26
26
|
shape="circle"
|
|
@@ -30,16 +30,16 @@ export const Default: Story = {
|
|
|
30
30
|
>
|
|
31
31
|
Action menu
|
|
32
32
|
</Button>
|
|
33
|
-
</
|
|
34
|
-
<
|
|
35
|
-
<
|
|
33
|
+
</Menu.Button>
|
|
34
|
+
<Menu.Items>
|
|
35
|
+
<Menu.Item as="button">
|
|
36
36
|
Dispute
|
|
37
|
-
</
|
|
38
|
-
<
|
|
37
|
+
</Menu.Item>
|
|
38
|
+
<Menu.Item as="button">
|
|
39
39
|
Transfer
|
|
40
40
|
<ChevronRight size={20} />
|
|
41
|
-
</
|
|
42
|
-
</
|
|
41
|
+
</Menu.Item>
|
|
42
|
+
</Menu.Items>
|
|
43
43
|
</Menu>
|
|
44
44
|
),
|
|
45
45
|
};
|
|
@@ -9,21 +9,54 @@ import styles from './Menu.module.scss';
|
|
|
9
9
|
|
|
10
10
|
export { Menu as HeadlessMenu } from '@headlessui/react';
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Wraps the `HeadlessMenu` component from `@headlessui/react` to provide a styled dropdown menu.
|
|
14
|
+
*
|
|
15
|
+
* This component serves as the root of the menu and should wrap `Menu.Button`, `Menu.Items`, and `Menu.Item` components.
|
|
16
|
+
*
|
|
17
|
+
* Usage:
|
|
18
|
+
*
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <Menu>
|
|
21
|
+
* <Menu.Button>Options</Menu.Button>
|
|
22
|
+
* <Menu.Items>
|
|
23
|
+
* <Menu.Item>Item 1</Menu.Item>
|
|
24
|
+
* <Menu.Item>Item 2</Menu.Item>
|
|
25
|
+
* </Menu.Items>
|
|
26
|
+
* </Menu>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export const Menu: FC<MenuProps<React.ElementType>> & {
|
|
30
|
+
Button: FC<MenuButtonProps<React.ElementType>>;
|
|
31
|
+
Items: FC<MenuItemsProps<React.ElementType> & {
|
|
32
|
+
position?: 'left' | 'right';
|
|
33
|
+
}>;
|
|
34
|
+
Item: FC<MenuItemProps<React.ElementType>>;
|
|
35
|
+
} = ({ className, children, ...props }) => (
|
|
13
36
|
<HeadlessMenu as="div" className={clsx(className, styles.menu)} {...props}>
|
|
14
37
|
{children}
|
|
15
38
|
</HeadlessMenu>
|
|
16
39
|
);
|
|
17
40
|
|
|
18
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Renders a button that toggles the display of `MenuItems` in a `Menu`.
|
|
43
|
+
*
|
|
44
|
+
* Should be used inside a `Menu` component to serve as the toggle for `MenuItems`.
|
|
45
|
+
*/
|
|
46
|
+
Menu.Button = ({ className, children, ...props }) => (
|
|
19
47
|
<HeadlessMenu.Button className={clsx(className, styles.menuButton)} {...props}>
|
|
20
48
|
{children}
|
|
21
49
|
</HeadlessMenu.Button>
|
|
22
50
|
);
|
|
23
51
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Container for menu item options, rendering the list of `MenuItem` components.
|
|
54
|
+
*
|
|
55
|
+
* Positions the menu items relative to the `MenuButton` based on the `position` prop.
|
|
56
|
+
*
|
|
57
|
+
* @param position - Controls the positioning of the menu items ('left' or 'right').
|
|
58
|
+
*/
|
|
59
|
+
Menu.Items = ({
|
|
27
60
|
className, children, position = 'left', ...props
|
|
28
61
|
}) => (
|
|
29
62
|
<HeadlessMenu.Items className={clsx(className, styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition)} {...props}>
|
|
@@ -31,7 +64,13 @@ export const MenuItems: FC<MenuItemsProps<React.ElementType> & {
|
|
|
31
64
|
</HeadlessMenu.Items>
|
|
32
65
|
);
|
|
33
66
|
|
|
34
|
-
|
|
67
|
+
/**
|
|
68
|
+
* Represents an individual item within a `MenuItems` container.
|
|
69
|
+
*
|
|
70
|
+
* Should be used inside `MenuItems` to represent selectable options in the menu.
|
|
71
|
+
*
|
|
72
|
+
*/
|
|
73
|
+
Menu.Item = ({ className, children, ...props }) => (
|
|
35
74
|
<HeadlessMenu.Item className={clsx(className, styles.menuItem)} {...props}>
|
|
36
75
|
{children}
|
|
37
76
|
</HeadlessMenu.Item>
|