reshaped 3.5.1 → 3.5.2
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-old.md +14 -0
- package/CHANGELOG.md +24 -8
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +8 -8
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +1 -0
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/Radio/Radio.module.css +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +3 -6
- package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +13 -4
- package/dist/components/ScrollArea/tests/ScrollArea.stories.js +129 -30
- package/package.json +8 -9
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.d.ts +0 -23
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.js +0 -66
|
@@ -56,6 +56,7 @@ export const active = {
|
|
|
56
56
|
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
|
57
57
|
expect(args.handleClose).toHaveBeenLastCalledWith();
|
|
58
58
|
});
|
|
59
|
+
await sleep(500);
|
|
59
60
|
await userEvent.click(input);
|
|
60
61
|
await waitFor(() => {
|
|
61
62
|
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-checkbox-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-checkbox-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-checkbox-line-height)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-checkbox-line-height) * .5)}.--size-small{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator,.input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:checked+.decorator:before,.root.--disabled .input:indeterminate+.decorator:before{background-color:var(--rs-color-foreground-disabled)}@media (--rs-viewport-m ){.--size-small--m{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--m{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--l{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-checkbox-line-height:var(--rs-line-height-caption-1);--rs-checkbox-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-checkbox-line-height:var(--rs-line-height-body-3);--rs-checkbox-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-checkbox-line-height:var(--rs-line-height-body-2);--rs-checkbox-gap:var(--rs-unit-x2)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}
|
|
@@ -73,11 +73,8 @@ const ScrollArea = forwardRef((props, ref) => {
|
|
|
73
73
|
const contentRef = React.useRef(null);
|
|
74
74
|
const heightStyles = getHeightStyles(height);
|
|
75
75
|
const maxHeightStyles = getMaxHeightStyles(maxHeight);
|
|
76
|
-
const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames,
|
|
77
|
-
const
|
|
78
|
-
...heightStyles?.variables,
|
|
79
|
-
...maxHeightStyles?.variables,
|
|
80
|
-
};
|
|
76
|
+
const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, className);
|
|
77
|
+
const contentClassNames = classNames(s.content, maxHeightStyles?.classNames);
|
|
81
78
|
const updateScroll = React.useCallback(() => {
|
|
82
79
|
const scrollableEl = scrollableRef.current;
|
|
83
80
|
if (!scrollableEl)
|
|
@@ -134,7 +131,7 @@ const ScrollArea = forwardRef((props, ref) => {
|
|
|
134
131
|
observer.observe(contentEl);
|
|
135
132
|
return () => observer.disconnect();
|
|
136
133
|
}, [updateScroll]);
|
|
137
|
-
return (_jsxs("div", { ...attributes, className: rootClassNames, style:
|
|
134
|
+
return (_jsxs("div", { ...attributes, className: rootClassNames, style: { ...heightStyles?.variables }, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: contentClassNames, ref: contentRef, style: { ...maxHeightStyles?.variables }, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
|
|
138
135
|
});
|
|
139
136
|
ScrollArea.displayName = "ScrollArea";
|
|
140
137
|
export default ScrollArea;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { StoryObj } from "@storybook/react";
|
|
3
|
+
import { Mock } from "@storybook/test";
|
|
3
4
|
declare const _default: {
|
|
4
5
|
title: string;
|
|
5
6
|
component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -13,16 +14,24 @@ declare const _default: {
|
|
|
13
14
|
};
|
|
14
15
|
};
|
|
15
16
|
export default _default;
|
|
16
|
-
export declare const
|
|
17
|
+
export declare const base: {
|
|
17
18
|
name: string;
|
|
18
19
|
render: () => React.JSX.Element;
|
|
19
20
|
};
|
|
20
|
-
export declare const
|
|
21
|
+
export declare const scrollbarDisplay: {
|
|
21
22
|
name: string;
|
|
22
23
|
render: () => React.JSX.Element;
|
|
23
24
|
};
|
|
24
|
-
export declare const
|
|
25
|
+
export declare const height: {
|
|
25
26
|
name: string;
|
|
26
27
|
render: () => React.JSX.Element;
|
|
27
28
|
};
|
|
28
|
-
export declare const
|
|
29
|
+
export declare const onScroll: StoryObj<{
|
|
30
|
+
handleScroll: Mock;
|
|
31
|
+
}>;
|
|
32
|
+
export declare const className: StoryObj;
|
|
33
|
+
export declare const testNested: {
|
|
34
|
+
name: string;
|
|
35
|
+
render: () => React.JSX.Element;
|
|
36
|
+
};
|
|
37
|
+
export declare const testDynamicHeight: StoryObj;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { userEvent, expect, waitFor, fn } from "@storybook/test";
|
|
2
3
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
3
4
|
import ScrollArea from "../index.js";
|
|
4
5
|
import View from "../../View/index.js";
|
|
@@ -16,10 +17,10 @@ export default {
|
|
|
16
17
|
},
|
|
17
18
|
},
|
|
18
19
|
};
|
|
19
|
-
export const
|
|
20
|
-
name: "
|
|
20
|
+
export const base = {
|
|
21
|
+
name: "base",
|
|
21
22
|
render: () => (<Example>
|
|
22
|
-
<Example.Item title="vertical">
|
|
23
|
+
<Example.Item title="vertical scroll">
|
|
23
24
|
<ScrollArea height="100px" scrollbarDisplay="visible">
|
|
24
25
|
<View backgroundColor="elevation-base" padding={4}>
|
|
25
26
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
@@ -33,7 +34,7 @@ export const direction = {
|
|
|
33
34
|
</ScrollArea>
|
|
34
35
|
</Example.Item>
|
|
35
36
|
|
|
36
|
-
<Example.Item title="horizontal">
|
|
37
|
+
<Example.Item title="horizontal scroll">
|
|
37
38
|
<ScrollArea height="100px" scrollbarDisplay="visible">
|
|
38
39
|
<View backgroundColor="elevation-base" padding={4} width="150%" height="100px">
|
|
39
40
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
@@ -42,7 +43,7 @@ export const direction = {
|
|
|
42
43
|
</ScrollArea>
|
|
43
44
|
</Example.Item>
|
|
44
45
|
|
|
45
|
-
<Example.Item title="horizontal
|
|
46
|
+
<Example.Item title="horizontal and vertical scroll">
|
|
46
47
|
<ScrollArea height="100px" scrollbarDisplay="visible">
|
|
47
48
|
<View backgroundColor="elevation-base" padding={4} width="150%">
|
|
48
49
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
@@ -57,12 +58,12 @@ export const direction = {
|
|
|
57
58
|
</Example.Item>
|
|
58
59
|
</Example>),
|
|
59
60
|
};
|
|
60
|
-
export const
|
|
61
|
+
export const scrollbarDisplay = {
|
|
61
62
|
name: "scrollbarDisplay",
|
|
62
63
|
render: () => (<Example>
|
|
63
|
-
<Example.Item title="
|
|
64
|
+
<Example.Item title="scrollbarDisplay: hover">
|
|
64
65
|
<ScrollArea height="100px">
|
|
65
|
-
<View backgroundColor="elevation-base" padding={4}>
|
|
66
|
+
<View backgroundColor="elevation-base" padding={4} width="150%">
|
|
66
67
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
67
68
|
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
68
69
|
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
@@ -74,9 +75,9 @@ export const visibility = {
|
|
|
74
75
|
</ScrollArea>
|
|
75
76
|
</Example.Item>
|
|
76
77
|
|
|
77
|
-
<Example.Item title="
|
|
78
|
+
<Example.Item title="scrollbarDisplay: hidden">
|
|
78
79
|
<ScrollArea height="100px" scrollbarDisplay="hidden">
|
|
79
|
-
<View backgroundColor="elevation-base" padding={4}>
|
|
80
|
+
<View backgroundColor="elevation-base" padding={4} width="150%">
|
|
80
81
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
81
82
|
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
82
83
|
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
@@ -88,9 +89,9 @@ export const visibility = {
|
|
|
88
89
|
</ScrollArea>
|
|
89
90
|
</Example.Item>
|
|
90
91
|
|
|
91
|
-
<Example.Item title="
|
|
92
|
+
<Example.Item title="scrollbarDisplay: visible">
|
|
92
93
|
<ScrollArea height="100px" scrollbarDisplay="visible">
|
|
93
|
-
<View backgroundColor="elevation-base" padding={4}>
|
|
94
|
+
<View backgroundColor="elevation-base" padding={4} width="150%">
|
|
94
95
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
95
96
|
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
96
97
|
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
@@ -103,26 +104,129 @@ export const visibility = {
|
|
|
103
104
|
</Example.Item>
|
|
104
105
|
</Example>),
|
|
105
106
|
};
|
|
106
|
-
export const
|
|
107
|
-
name: "
|
|
107
|
+
export const height = {
|
|
108
|
+
name: "height, maxHeight",
|
|
108
109
|
render: () => (<Example>
|
|
109
|
-
<Example.Item title="
|
|
110
|
-
<ScrollArea height="
|
|
111
|
-
<View padding={4}
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
<Example.Item title="height: 80px">
|
|
111
|
+
<ScrollArea height="80px">
|
|
112
|
+
<View backgroundColor="elevation-base" padding={4}>
|
|
113
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
114
|
+
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
115
|
+
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
116
|
+
survived not only five centuries, but also the leap into electronic typesetting,
|
|
117
|
+
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
118
|
+
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
119
|
+
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
120
|
+
</View>
|
|
121
|
+
</ScrollArea>
|
|
122
|
+
</Example.Item>
|
|
123
|
+
|
|
124
|
+
<Example.Item title="responsive height: s 80px, m: 120px">
|
|
125
|
+
<ScrollArea height={{ s: "80px", m: "120px" }}>
|
|
126
|
+
<View backgroundColor="elevation-base" padding={4}>
|
|
127
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
128
|
+
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
129
|
+
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
130
|
+
survived not only five centuries, but also the leap into electronic typesetting,
|
|
131
|
+
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
132
|
+
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
133
|
+
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
134
|
+
</View>
|
|
135
|
+
</ScrollArea>
|
|
136
|
+
</Example.Item>
|
|
137
|
+
|
|
138
|
+
<Example.Item title="maxHeight: 80px">
|
|
139
|
+
<ScrollArea maxHeight="80px">
|
|
140
|
+
<View backgroundColor="elevation-base" padding={4}>
|
|
141
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
142
|
+
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
143
|
+
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
144
|
+
survived not only five centuries, but also the leap into electronic typesetting,
|
|
145
|
+
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
146
|
+
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
147
|
+
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
148
|
+
</View>
|
|
149
|
+
</ScrollArea>
|
|
150
|
+
</Example.Item>
|
|
151
|
+
|
|
152
|
+
<Example.Item title="responsive max height: s 80px, m: 200px">
|
|
153
|
+
<ScrollArea maxHeight={{ s: "80px", m: "200px" }}>
|
|
154
|
+
<View backgroundColor="elevation-base" padding={4}>
|
|
155
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
156
|
+
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
157
|
+
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
158
|
+
survived not only five centuries, but also the leap into electronic typesetting,
|
|
159
|
+
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
160
|
+
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
161
|
+
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
162
|
+
</View>
|
|
163
|
+
</ScrollArea>
|
|
164
|
+
</Example.Item>
|
|
165
|
+
</Example>),
|
|
166
|
+
};
|
|
167
|
+
export const onScroll = {
|
|
168
|
+
name: "ref, onScroll",
|
|
169
|
+
args: {
|
|
170
|
+
handleScroll: fn(),
|
|
171
|
+
},
|
|
172
|
+
render: (args) => {
|
|
173
|
+
const ref = React.useRef(null);
|
|
174
|
+
return (<View gap={4}>
|
|
175
|
+
<View.Item>
|
|
176
|
+
<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
|
|
177
|
+
</View.Item>
|
|
178
|
+
<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
|
|
179
|
+
<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
|
|
180
|
+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
181
|
+
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
182
|
+
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
183
|
+
survived not only five centuries, but also the leap into electronic typesetting,
|
|
184
|
+
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
185
|
+
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
186
|
+
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
187
|
+
</View>
|
|
188
|
+
</ScrollArea>
|
|
189
|
+
</View>);
|
|
190
|
+
},
|
|
191
|
+
play: async ({ canvas, args }) => {
|
|
192
|
+
const trigger = canvas.getAllByRole("button")[0];
|
|
193
|
+
await userEvent.click(trigger);
|
|
194
|
+
await waitFor(() => {
|
|
195
|
+
expect(args.handleScroll).toHaveBeenCalledTimes(1);
|
|
196
|
+
// x value is flaky, so only testing y here
|
|
197
|
+
expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
|
|
198
|
+
});
|
|
199
|
+
},
|
|
200
|
+
};
|
|
201
|
+
export const className = {
|
|
202
|
+
name: "className, attributes",
|
|
203
|
+
render: () => (<div data-testid="root">
|
|
204
|
+
<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
|
|
205
|
+
Content
|
|
206
|
+
</ScrollArea>
|
|
207
|
+
</div>),
|
|
208
|
+
play: async ({ canvas }) => {
|
|
209
|
+
const root = canvas.getByTestId("root").firstChild;
|
|
210
|
+
expect(root).toHaveClass("test-classname");
|
|
211
|
+
expect(root).toHaveAttribute("id", "test-id");
|
|
212
|
+
},
|
|
213
|
+
};
|
|
214
|
+
export const testNested = {
|
|
215
|
+
name: "test: nested",
|
|
216
|
+
render: () => (<ScrollArea height="100px" scrollbarDisplay="visible">
|
|
217
|
+
<View padding={4} paddingInline={16}>
|
|
218
|
+
<ScrollArea height="200px" scrollbarDisplay="visible">
|
|
219
|
+
{Array(20)
|
|
114
220
|
.fill("")
|
|
115
221
|
.map((_, index) => {
|
|
116
222
|
return <div key={index}>Item {index + 1}</div>;
|
|
117
223
|
})}
|
|
118
|
-
</ScrollArea>
|
|
119
|
-
</View>
|
|
120
224
|
</ScrollArea>
|
|
121
|
-
</
|
|
122
|
-
</
|
|
225
|
+
</View>
|
|
226
|
+
</ScrollArea>),
|
|
123
227
|
};
|
|
124
|
-
export const
|
|
125
|
-
name: "
|
|
228
|
+
export const testDynamicHeight = {
|
|
229
|
+
name: "test: dynamic height change",
|
|
126
230
|
render: () => {
|
|
127
231
|
const [count, setCount] = React.useState(10);
|
|
128
232
|
return (<View gap={4}>
|
|
@@ -137,9 +241,4 @@ export const dynamicHeight = {
|
|
|
137
241
|
</ScrollArea>
|
|
138
242
|
</View>);
|
|
139
243
|
},
|
|
140
|
-
// TODO: After Using play(), Storybook makes the scroll lag, but not when triggered manually in the browser
|
|
141
|
-
// play: async ({ canvas }) => {
|
|
142
|
-
// const trigger = canvas.getAllByRole("button")[0];
|
|
143
|
-
// await userEvent.click(trigger);
|
|
144
|
-
// },
|
|
145
244
|
};
|
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.5.
|
|
4
|
+
"version": "3.5.2",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -21,10 +21,9 @@
|
|
|
21
21
|
"bugs": {
|
|
22
22
|
"url": "https://github.com/formaat-design/reshaped/issues"
|
|
23
23
|
},
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
},
|
|
24
|
+
"sideEffects": [
|
|
25
|
+
"*.css"
|
|
26
|
+
],
|
|
28
27
|
"files": [
|
|
29
28
|
"bin/cli.js",
|
|
30
29
|
"dist/**/*"
|
|
@@ -58,7 +57,6 @@
|
|
|
58
57
|
"./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*",
|
|
59
58
|
"./package.json": "./package.json"
|
|
60
59
|
},
|
|
61
|
-
"sideEffects": false,
|
|
62
60
|
"bin": {
|
|
63
61
|
"reshaped": "./bin/cli.js"
|
|
64
62
|
},
|
|
@@ -76,8 +74,8 @@
|
|
|
76
74
|
"build:storybook": "storybook build -o dist/app --disable-telemetry",
|
|
77
75
|
"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
|
|
78
76
|
"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
|
|
79
|
-
"release:lib": "yarn build && yarn publish",
|
|
80
|
-
"release:canary": "yarn build && yarn publish --tag canary",
|
|
77
|
+
"release:lib": "yarn build && yarn publish && sh ./bin/update-changelog.sh",
|
|
78
|
+
"release:canary": "yarn build && yarn publish --tag canary && sh ./bin/update-changelog.sh",
|
|
81
79
|
"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
|
|
82
80
|
"release:source": "sh ./bin/release-source.sh",
|
|
83
81
|
"release:copy": "sh ./bin/release-copy.sh",
|
|
@@ -89,7 +87,7 @@
|
|
|
89
87
|
"lint": "yarn lint:js && yarn lint:css",
|
|
90
88
|
"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
|
|
91
89
|
"lint:css": "stylelint 'src/**/*.css'",
|
|
92
|
-
"commit": "
|
|
90
|
+
"commit": "sh ./bin/commit.sh"
|
|
93
91
|
},
|
|
94
92
|
"browserslist": [
|
|
95
93
|
"defaults and not IE 11"
|
|
@@ -118,6 +116,7 @@
|
|
|
118
116
|
"@vitest/coverage-istanbul": "3.1.2",
|
|
119
117
|
"@vitest/coverage-v8": "3.1.2",
|
|
120
118
|
"chromatic": "11.28.2",
|
|
119
|
+
"conventional-changelog-cli": "^5.0.0",
|
|
121
120
|
"cz-conventional-changelog": "3.3.0",
|
|
122
121
|
"eslint": "9.25.1",
|
|
123
122
|
"eslint-config-prettier": "10.1.2",
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StoryObj } from "@storybook/react";
|
|
3
|
-
import { fn } from "@storybook/test";
|
|
4
|
-
declare const _default: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
-
parameters: {
|
|
8
|
-
iframe: {
|
|
9
|
-
url: string;
|
|
10
|
-
};
|
|
11
|
-
a11y: {
|
|
12
|
-
disable: boolean;
|
|
13
|
-
};
|
|
14
|
-
chromatic: {
|
|
15
|
-
disableSnapshot: boolean;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export default _default;
|
|
20
|
-
export declare const onScroll: StoryObj<{
|
|
21
|
-
handleScroll: ReturnType<typeof fn>;
|
|
22
|
-
}>;
|
|
23
|
-
export declare const className: StoryObj;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { expect, fn, userEvent, waitFor } from "@storybook/test";
|
|
3
|
-
import Button from "../../Button/index.js";
|
|
4
|
-
import ScrollArea from "../index.js";
|
|
5
|
-
import View from "../../View/index.js";
|
|
6
|
-
export default {
|
|
7
|
-
title: "Utility components/ScrollArea/tests",
|
|
8
|
-
component: ScrollArea,
|
|
9
|
-
parameters: {
|
|
10
|
-
iframe: {
|
|
11
|
-
url: "https://reshaped.so/docs/utilities/text",
|
|
12
|
-
},
|
|
13
|
-
// Skip because axe core incorrectly reports contrast issues
|
|
14
|
-
a11y: {
|
|
15
|
-
disable: true,
|
|
16
|
-
},
|
|
17
|
-
chromatic: { disableSnapshot: true },
|
|
18
|
-
},
|
|
19
|
-
};
|
|
20
|
-
export const onScroll = {
|
|
21
|
-
name: "ref, onScroll",
|
|
22
|
-
args: {
|
|
23
|
-
handleScroll: fn(),
|
|
24
|
-
},
|
|
25
|
-
render: (args) => {
|
|
26
|
-
const ref = React.useRef(null);
|
|
27
|
-
return (<View gap={4}>
|
|
28
|
-
<View.Item>
|
|
29
|
-
<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
|
|
30
|
-
</View.Item>
|
|
31
|
-
<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
|
|
32
|
-
<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
|
|
33
|
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
|
|
34
|
-
has been the industry's standard dummy text ever since the 1500s, when an unknown
|
|
35
|
-
printer took a galley of type and scrambled it to make a type specimen book. It has
|
|
36
|
-
survived not only five centuries, but also the leap into electronic typesetting,
|
|
37
|
-
remaining essentially unchanged. It was popularised in the 1960s with the release of
|
|
38
|
-
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
39
|
-
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
40
|
-
</View>
|
|
41
|
-
</ScrollArea>
|
|
42
|
-
</View>);
|
|
43
|
-
},
|
|
44
|
-
play: async ({ canvas, args }) => {
|
|
45
|
-
const trigger = canvas.getAllByRole("button")[0];
|
|
46
|
-
await userEvent.click(trigger);
|
|
47
|
-
await waitFor(() => {
|
|
48
|
-
expect(args.handleScroll).toHaveBeenCalledTimes(1);
|
|
49
|
-
// x value is flaky, so only testing y here
|
|
50
|
-
expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
|
|
51
|
-
});
|
|
52
|
-
},
|
|
53
|
-
};
|
|
54
|
-
export const className = {
|
|
55
|
-
name: "className, attributes",
|
|
56
|
-
render: () => (<div data-testid="root">
|
|
57
|
-
<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
|
|
58
|
-
Content
|
|
59
|
-
</ScrollArea>
|
|
60
|
-
</div>),
|
|
61
|
-
play: async ({ canvas }) => {
|
|
62
|
-
const root = canvas.getByTestId("root").firstChild;
|
|
63
|
-
expect(root).toHaveClass("test-classname");
|
|
64
|
-
expect(root).toHaveAttribute("id", "test-id");
|
|
65
|
-
},
|
|
66
|
-
};
|