reshaped 3.7.0-canary.16 → 3.7.0-canary.18
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 +8 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +11 -11
- package/dist/components/ActionBar/ActionBar.js +11 -4
- package/dist/components/ActionBar/ActionBar.module.css +1 -1
- package/dist/components/ActionBar/ActionBar.types.d.ts +5 -1
- package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +23 -1
- package/dist/components/ActionBar/tests/ActionBar.stories.js +175 -3
- package/dist/components/Autocomplete/Autocomplete.js +64 -24
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +2 -0
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +2 -2
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/FileUpload/FileUpload.js +5 -3
- package/dist/components/FileUpload/FileUpload.module.css +1 -1
- package/dist/components/FileUpload/FileUpload.types.d.ts +5 -1
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +18 -2
- package/dist/components/FileUpload/tests/FileUpload.stories.js +102 -23
- package/dist/components/Flyout/FlyoutContent.js +1 -1
- package/dist/components/MenuItem/MenuItem.js +2 -2
- package/dist/components/MenuItem/MenuItem.module.css +1 -1
- package/dist/components/MenuItem/MenuItem.types.d.ts +1 -0
- package/dist/components/Popover/Popover.js +1 -1
- package/dist/components/Popover/tests/Popover.stories.js +4 -3
- package/package.json +1 -1
- package/dist/components/ActionBar/tests/ActionBar.test.stories.d.ts +0 -15
- package/dist/components/ActionBar/tests/ActionBar.test.stories.js +0 -26
- package/dist/components/FileUpload/tests/FileUpload.test.stories.d.ts +0 -21
- package/dist/components/FileUpload/tests/FileUpload.test.stories.js +0 -52
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { expect, userEvent, fn } from "storybook/test";
|
|
2
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
3
4
|
import FileUpload from "../index.js";
|
|
4
5
|
import View from "../../View/index.js";
|
|
@@ -6,6 +7,7 @@ import Image from "../../Image/index.js";
|
|
|
6
7
|
import Link from "../../Link/index.js";
|
|
7
8
|
import Icon from "../../Icon/index.js";
|
|
8
9
|
import IconMic from "../../../icons/Mic.js";
|
|
10
|
+
import Button from "../../Button/index.js";
|
|
9
11
|
export default {
|
|
10
12
|
title: "Components/FileUpload",
|
|
11
13
|
component: FileUpload,
|
|
@@ -34,28 +36,105 @@ const Demo = () => {
|
|
|
34
36
|
</View>
|
|
35
37
|
</View>);
|
|
36
38
|
};
|
|
37
|
-
export const base =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
export const base = {
|
|
40
|
+
name: "base",
|
|
41
|
+
render: () => (<Example>
|
|
42
|
+
<Example.Item title="Base upload with previews">
|
|
43
|
+
<Demo />
|
|
44
|
+
</Example.Item>
|
|
45
|
+
<Example.Item title="With trigger">
|
|
46
|
+
<FileUpload name="file">
|
|
47
|
+
<div>
|
|
48
|
+
Drop files to attach, or{" "}
|
|
49
|
+
<FileUpload.Trigger>
|
|
50
|
+
<Link variant="plain">browse</Link>
|
|
51
|
+
</FileUpload.Trigger>
|
|
52
|
+
</div>
|
|
53
|
+
</FileUpload>
|
|
54
|
+
</Example.Item>
|
|
55
|
+
</Example>),
|
|
56
|
+
};
|
|
57
|
+
export const inline = {
|
|
58
|
+
name: "inline, variant, render props",
|
|
59
|
+
render: () => {
|
|
60
|
+
return (<Example>
|
|
61
|
+
<Example.Item title="inline">
|
|
62
|
+
<FileUpload name="file" inline onChange={console.log}>
|
|
63
|
+
<View padding={2} paddingInline={3}>
|
|
64
|
+
Upload
|
|
65
|
+
</View>
|
|
66
|
+
</FileUpload>
|
|
67
|
+
</Example.Item>
|
|
68
|
+
<Example.Item title="variant headless">
|
|
69
|
+
<FileUpload name="file2" variant="headless" onChange={console.log}>
|
|
70
|
+
<Button variant="outline" fullWidth>
|
|
71
|
+
Upload
|
|
72
|
+
</Button>
|
|
73
|
+
</FileUpload>
|
|
74
|
+
</Example.Item>
|
|
75
|
+
<Example.Item title="variant headless, inline">
|
|
76
|
+
<FileUpload name="file2" variant="headless" inline onChange={console.log}>
|
|
77
|
+
<Button>Upload</Button>
|
|
78
|
+
</FileUpload>
|
|
79
|
+
</Example.Item>
|
|
80
|
+
<Example.Item title="inline, render props">
|
|
81
|
+
<FileUpload name="file3" variant="headless" inline onChange={console.log}>
|
|
82
|
+
{(props) => <Button highlighted={props.highlighted}>Upload</Button>}
|
|
83
|
+
</FileUpload>
|
|
84
|
+
</Example.Item>
|
|
85
|
+
</Example>);
|
|
86
|
+
},
|
|
87
|
+
};
|
|
88
|
+
export const height = {
|
|
89
|
+
name: "height",
|
|
90
|
+
render: () => (<Example>
|
|
91
|
+
<Example.Item title="Custom height">
|
|
92
|
+
<FileUpload name="file" height="300px">
|
|
93
|
+
<View gap={3}>
|
|
94
|
+
<Icon svg={IconMic} size={8}/>
|
|
95
|
+
Drop files to attach
|
|
96
|
+
</View>
|
|
97
|
+
</FileUpload>
|
|
98
|
+
</Example.Item>
|
|
99
|
+
</Example>),
|
|
100
|
+
};
|
|
101
|
+
export const onChange = {
|
|
102
|
+
name: "name, onChange",
|
|
103
|
+
args: {
|
|
104
|
+
handleChange: fn(),
|
|
105
|
+
},
|
|
106
|
+
render: (args) => (<div data-testid="root">
|
|
107
|
+
<FileUpload name="test-name" onChange={args.handleChange}>
|
|
108
|
+
Content
|
|
49
109
|
</FileUpload>
|
|
50
|
-
</
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
110
|
+
</div>),
|
|
111
|
+
play: async ({ canvas, args }) => {
|
|
112
|
+
const file = new File(["hello"], "hello.png", { type: "image/png" });
|
|
113
|
+
const input = canvas.getByTestId("root").querySelector("input");
|
|
114
|
+
await userEvent.upload(input, file);
|
|
115
|
+
expect(input).toHaveAttribute("name", "test-name");
|
|
116
|
+
expect(input.files?.[0]).toBe(file);
|
|
117
|
+
expect(input.files).toHaveLength(1);
|
|
118
|
+
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
|
119
|
+
expect(args.handleChange).toHaveBeenCalledWith({
|
|
120
|
+
name: "test-name",
|
|
121
|
+
value: [file],
|
|
122
|
+
event: expect.objectContaining({ target: input }),
|
|
123
|
+
});
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
export const className = {
|
|
127
|
+
name: "className, attributes",
|
|
128
|
+
render: () => (<div data-testid="root">
|
|
129
|
+
<FileUpload name="name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ id: "test-input-id" }}>
|
|
130
|
+
Content
|
|
59
131
|
</FileUpload>
|
|
60
|
-
</
|
|
61
|
-
|
|
132
|
+
</div>),
|
|
133
|
+
play: async ({ canvas }) => {
|
|
134
|
+
const root = canvas.getByTestId("root").firstChild;
|
|
135
|
+
const input = canvas.getByTestId("root").querySelector("input");
|
|
136
|
+
expect(root).toHaveClass("test-classname");
|
|
137
|
+
expect(root).toHaveAttribute("id", "test-id");
|
|
138
|
+
expect(input).toHaveAttribute("id", "test-input-id");
|
|
139
|
+
},
|
|
140
|
+
};
|
|
@@ -75,7 +75,7 @@ const FlyoutContent = (props) => {
|
|
|
75
75
|
s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"], triggerType === "hover" && disableContentHover && s["--hover-disabled"]);
|
|
76
76
|
// className is applied to inner element because it has the transform and is treated like a real root element
|
|
77
77
|
const innerClassNames = classNames(s.inner, className, contentClassName);
|
|
78
|
-
let role;
|
|
78
|
+
let role = attributes?.role;
|
|
79
79
|
if (triggerType === "hover") {
|
|
80
80
|
role = "tooltip";
|
|
81
81
|
}
|
|
@@ -7,8 +7,8 @@ import View from "../View/index.js";
|
|
|
7
7
|
import MenuItemAligner from "./MenuItemAligner.js";
|
|
8
8
|
import s from "./MenuItem.module.css";
|
|
9
9
|
const MenuItem = forwardRef((props, ref) => {
|
|
10
|
-
const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
|
|
11
|
-
const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
|
|
10
|
+
const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
|
|
11
|
+
const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
|
|
12
12
|
const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
|
|
13
13
|
const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
|
|
14
14
|
return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
1
|
+
.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -9,6 +9,7 @@ export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled
|
|
|
9
9
|
startSlot?: React.ReactNode;
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
endSlot?: React.ReactNode;
|
|
12
|
+
highlighted?: boolean;
|
|
12
13
|
selected?: boolean;
|
|
13
14
|
size?: G.Responsive<Size>;
|
|
14
15
|
roundedCorners?: G.Responsive<boolean>;
|
|
@@ -7,7 +7,7 @@ import getPaddingStyles from "../../styles/padding/index.js";
|
|
|
7
7
|
const Popover = (props) => {
|
|
8
8
|
const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
|
|
9
9
|
const padding = props.padding ?? (variant === "headless" ? 0 : 4);
|
|
10
|
-
const trapFocusMode = props.trapFocusMode
|
|
10
|
+
const trapFocusMode = props.trapFocusMode ?? (triggerType === "hover" ? "content-menu" : undefined);
|
|
11
11
|
const paddingStyles = getPaddingStyles(padding);
|
|
12
12
|
const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`]);
|
|
13
13
|
return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
1
|
+
import { useState, useId } from "react";
|
|
2
2
|
import { expect, fn, userEvent, within, waitFor } from "storybook/test";
|
|
3
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
4
4
|
import { sleep } from "../../../utilities/helpers.js";
|
|
@@ -19,13 +19,14 @@ export default {
|
|
|
19
19
|
};
|
|
20
20
|
const Demo = (props) => {
|
|
21
21
|
const { position, ...rest } = props;
|
|
22
|
+
const id = useId();
|
|
22
23
|
return (<Popover position={position} {...rest}>
|
|
23
24
|
<Popover.Trigger>
|
|
24
25
|
{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
|
|
25
26
|
</Popover.Trigger>
|
|
26
|
-
<Popover.Content>
|
|
27
|
+
<Popover.Content attributes={{ "aria-labelledby": id }}>
|
|
27
28
|
<View gap={2} align="start">
|
|
28
|
-
Popover content
|
|
29
|
+
<span id={id}>Popover content</span>
|
|
29
30
|
<View direction="row" gap={2}>
|
|
30
31
|
<Button onClick={() => { }}>Action 1</Button>
|
|
31
32
|
<Button onClick={() => { }}>Action 2</Button>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.7.0-canary.
|
|
4
|
+
"version": "3.7.0-canary.18",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
|
2
|
-
declare const _default: {
|
|
3
|
-
title: string;
|
|
4
|
-
component: import("react").FC<import("./..").ActionBarProps>;
|
|
5
|
-
parameters: {
|
|
6
|
-
iframe: {
|
|
7
|
-
url: string;
|
|
8
|
-
};
|
|
9
|
-
chromatic: {
|
|
10
|
-
disableSnapshot: boolean;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
export default _default;
|
|
15
|
-
export declare const className: StoryObj;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { expect } from "storybook/test";
|
|
2
|
-
import ActionBar from "../index.js";
|
|
3
|
-
import { Placeholder } from "../../../utilities/storybook/index.js";
|
|
4
|
-
export default {
|
|
5
|
-
title: "Components/ActionBar/tests",
|
|
6
|
-
component: ActionBar,
|
|
7
|
-
parameters: {
|
|
8
|
-
iframe: {
|
|
9
|
-
url: "https://reshaped.so/docs/components/action-bar",
|
|
10
|
-
},
|
|
11
|
-
chromatic: { disableSnapshot: true },
|
|
12
|
-
},
|
|
13
|
-
};
|
|
14
|
-
export const className = {
|
|
15
|
-
name: "className, attributes",
|
|
16
|
-
render: () => (<div data-testid="root">
|
|
17
|
-
<ActionBar className="test-classname" attributes={{ id: "test-id" }}>
|
|
18
|
-
<Placeholder />
|
|
19
|
-
</ActionBar>
|
|
20
|
-
</div>),
|
|
21
|
-
play: async ({ canvas }) => {
|
|
22
|
-
const root = canvas.getByTestId("root").firstChild;
|
|
23
|
-
expect(root).toHaveClass("test-classname");
|
|
24
|
-
expect(root).toHaveAttribute("id", "test-id");
|
|
25
|
-
},
|
|
26
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import { fn } from "storybook/test";
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: import("react").FC<import("./..").FileUploadProps> & {
|
|
6
|
-
Trigger: import("react").FC<import("../FileUpload.types").TriggerProps>;
|
|
7
|
-
};
|
|
8
|
-
parameters: {
|
|
9
|
-
iframe: {
|
|
10
|
-
url: string;
|
|
11
|
-
};
|
|
12
|
-
chromatic: {
|
|
13
|
-
disableSnapshot: boolean;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export default _default;
|
|
18
|
-
export declare const onChange: StoryObj<{
|
|
19
|
-
handleChange: ReturnType<typeof fn>;
|
|
20
|
-
}>;
|
|
21
|
-
export declare const className: StoryObj;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { expect, userEvent, fn } from "storybook/test";
|
|
2
|
-
import FileUpload from "../index.js";
|
|
3
|
-
export default {
|
|
4
|
-
title: "Components/FileUpload/tests",
|
|
5
|
-
component: FileUpload,
|
|
6
|
-
parameters: {
|
|
7
|
-
iframe: {
|
|
8
|
-
url: "https://reshaped.so/docs/components/file-upload",
|
|
9
|
-
},
|
|
10
|
-
chromatic: { disableSnapshot: true },
|
|
11
|
-
},
|
|
12
|
-
};
|
|
13
|
-
export const onChange = {
|
|
14
|
-
name: "name, onChange",
|
|
15
|
-
args: {
|
|
16
|
-
handleChange: fn(),
|
|
17
|
-
},
|
|
18
|
-
render: (args) => (<div data-testid="root">
|
|
19
|
-
<FileUpload name="test-name" onChange={args.handleChange}>
|
|
20
|
-
Content
|
|
21
|
-
</FileUpload>
|
|
22
|
-
</div>),
|
|
23
|
-
play: async ({ canvas, args }) => {
|
|
24
|
-
const file = new File(["hello"], "hello.png", { type: "image/png" });
|
|
25
|
-
const input = canvas.getByTestId("root").querySelector("input");
|
|
26
|
-
await userEvent.upload(input, file);
|
|
27
|
-
expect(input).toHaveAttribute("name", "test-name");
|
|
28
|
-
expect(input.files?.[0]).toBe(file);
|
|
29
|
-
expect(input.files).toHaveLength(1);
|
|
30
|
-
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
|
31
|
-
expect(args.handleChange).toHaveBeenCalledWith({
|
|
32
|
-
name: "test-name",
|
|
33
|
-
value: [file],
|
|
34
|
-
event: expect.objectContaining({ target: input }),
|
|
35
|
-
});
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
export const className = {
|
|
39
|
-
name: "className, attributes",
|
|
40
|
-
render: () => (<div data-testid="root">
|
|
41
|
-
<FileUpload name="name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ id: "test-input-id" }}>
|
|
42
|
-
Content
|
|
43
|
-
</FileUpload>
|
|
44
|
-
</div>),
|
|
45
|
-
play: async ({ canvas }) => {
|
|
46
|
-
const root = canvas.getByTestId("root").firstChild;
|
|
47
|
-
const input = canvas.getByTestId("root").querySelector("input");
|
|
48
|
-
expect(root).toHaveClass("test-classname");
|
|
49
|
-
expect(root).toHaveAttribute("id", "test-id");
|
|
50
|
-
expect(input).toHaveAttribute("id", "test-input-id");
|
|
51
|
-
},
|
|
52
|
-
};
|