Skip to content

Commit 5e33a09

Browse files
yash-rajpaldougfabris
authored and
ggazzo
committed
feat: Resizable contextualbars out of feature preview (#37022)
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
1 parent d30fdeb commit 5e33a09

File tree

17 files changed

+1082
-861
lines changed

17 files changed

+1082
-861
lines changed

‎.changeset/happy-carpets-draw.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@rocket.chat/ui-client': major
3+
'@rocket.chat/i18n': major
4+
'@rocket.chat/meteor': major
5+
---
6+
7+
Promotes Resizable Contextualbars from preview state to stable.

‎apps/meteor/client/components/Contextualbar/ContextualbarDialog.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
21
import { useLayoutSizes, useLayoutContextualBarPosition } from '@rocket.chat/ui-contexts';
32
import type { ComponentProps } from 'react';
43
import { useCallback, useRef } from 'react';
@@ -40,16 +39,9 @@ const ContextualbarDialog = ({ onClose, ...props }: ContextualbarDialogProps) =>
4039

4140
return (
4241
<FocusScope autoFocus restoreFocus>
43-
<FeaturePreview feature='contextualbarResizable'>
44-
<FeaturePreviewOn>
45-
<ContextualbarResizable defaultWidth={contextualBar}>
46-
<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
47-
</ContextualbarResizable>
48-
</FeaturePreviewOn>
49-
<FeaturePreviewOff>
50-
<Contextualbar ref={callbackRef} width={contextualBar} position={position} {...dialogProps} {...props} />
51-
</FeaturePreviewOff>
52-
</FeaturePreview>
42+
<ContextualbarResizable defaultWidth={contextualBar}>
43+
<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
44+
</ContextualbarResizable>
5345
</FocusScope>
5446
);
5547
};

‎apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { action } from '@storybook/addon-actions';
33
import type { Meta, StoryFn } from '@storybook/react';
44

55
import CannedResponseList from './CannedResponseList';
6-
import { Contextualbar } from '../../../../components/Contextualbar';
76

87
export default {
98
component: CannedResponseList,
@@ -75,10 +74,4 @@ Default.args = {
7574
itemCount: 3,
7675
loadMoreItems: action('loadMoreItems'),
7776
};
78-
Default.decorators = [
79-
(fn) => (
80-
<Box h='600px'>
81-
<Contextualbar>{fn()}</Contextualbar>
82-
</Box>
83-
),
84-
];
77+
Default.decorators = [(fn) => <Box height='100vh'>{fn()}</Box>];

‎apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
44
<body>
55
<div>
66
<div
7-
class="rcx-box rcx-box--full rcx-css-1kmfepv"
7+
class="rcx-box rcx-box--full rcx-css-llf9s1"
88
>
9+
<span
10+
data-focus-scope-start="true"
11+
hidden=""
12+
/>
913
<div
10-
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-8umsxh"
14+
style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
1115
>
12-
<span
13-
data-focus-scope-start="true"
14-
hidden=""
15-
/>
1616
<div
1717
aria-labelledby="contextualbarTitle"
18-
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1n0hsd8"
18+
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-qtw00q"
1919
role="dialog"
2020
tabindex="-1"
2121
>
@@ -157,11 +157,49 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
157157
</div>
158158
</div>
159159
</div>
160-
<span
161-
data-focus-scope-end="true"
162-
hidden=""
163-
/>
160+
<div>
161+
<div
162+
class=""
163+
style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
164+
/>
165+
<div
166+
class=""
167+
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
168+
/>
169+
<div
170+
class=""
171+
style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
172+
/>
173+
<div
174+
class=""
175+
style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
176+
>
177+
<div
178+
class="rcx-box rcx-box--full rcx-css-h2r2vg"
179+
/>
180+
</div>
181+
<div
182+
class=""
183+
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
184+
/>
185+
<div
186+
class=""
187+
style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
188+
/>
189+
<div
190+
class=""
191+
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
192+
/>
193+
<div
194+
class=""
195+
style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
196+
/>
197+
</div>
164198
</div>
199+
<span
200+
data-focus-scope-end="true"
201+
hidden=""
202+
/>
165203
</div>
166204
</div>
167205
</body>

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import { Box } from '@rocket.chat/fuselage';
12
import { mockAppRoot } from '@rocket.chat/mock-providers';
23
import { action } from '@storybook/addon-actions';
34
import type { Meta } from '@storybook/react';
45
import { FormProvider, useForm } from 'react-hook-form';
56

67
import { AppLogsFilterContextualBar } from './AppLogsFilterContextualBar';
7-
import { Contextualbar } from '../../../../../../components/Contextualbar';
88

99
export default {
1010
component: AppLogsFilterContextualBar,
@@ -33,7 +33,7 @@ export default {
3333

3434
return (
3535
<FormProvider {...methods}>
36-
<Contextualbar height='100vh'>{fn()}</Contextualbar>
36+
<Box height='100vh'> {fn()}</Box>
3737
</FormProvider>
3838
);
3939
},

0 commit comments

Comments
 (0)