Skip to content

Commit 7c1f866

Browse files
juliajforestidougfabris
juliajforesti
and
dougfabris
authored
fix(fuselage): ContextualbarHeader overlap with button focus (#1846)
Co-authored-by: Douglas Fabris <devfabris@gmail.com>
1 parent 99b319c commit 7c1f866

File tree

6 files changed

+234
-7
lines changed

6 files changed

+234
-7
lines changed

‎.changeset/legal-pets-rest.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': patch
3+
---
4+
5+
fix(fuselage): `ContextualbarHeader` style overlapping with button focus style

‎packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import * as stories from './Contextualbar.stories';
77

88
expect.extend(toHaveNoViolations);
99

10+
const { WithLongTitle } = composeStories(stories);
11+
1012
const testCases = Object.values(composeStories(stories)).map((Story) => [
1113
Story.storyName || 'Story',
1214
Story,
@@ -30,4 +32,18 @@ describe('[Contextualbar Rendering]', () => {
3032
expect(results).toHaveNoViolations();
3133
},
3234
);
35+
36+
test('WithLongTitle should truncate long titles', () => {
37+
const { getByRole } = render(<WithLongTitle />);
38+
const titleElement = getByRole('heading');
39+
40+
const titleStyle = window.getComputedStyle(titleElement);
41+
expect(titleStyle.overflow).toBe('hidden');
42+
expect(titleStyle.textOverflow).toBe('ellipsis');
43+
expect(titleStyle.whiteSpace).toBe('nowrap');
44+
45+
const flexContainer = titleElement.parentElement;
46+
const containerStyle = window.getComputedStyle(flexContainer!);
47+
expect(containerStyle.overflow).toBe('hidden');
48+
});
3349
});

‎packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,3 +115,57 @@ export const Empty: StoryFn<typeof ContextualbarV2> = () => (
115115
<ContextualbarV2Footer>Footer</ContextualbarV2Footer>
116116
</ContextualbarV2>
117117
);
118+
119+
export const WithLongTitle: StoryFn<typeof ContextualbarV2> = () => (
120+
<ContextualbarV2 position='static' height='x540'>
121+
<ContextualbarV2Header>
122+
<ContextualbarV2Action
123+
title='Back'
124+
name='arrow-back'
125+
onClick={action('click')}
126+
/>
127+
<ContextualbarV2Title>
128+
ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2
129+
Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title
130+
ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2
131+
Long Title ContextualbarV2 Long Title
132+
</ContextualbarV2Title>
133+
<ContextualbarV2Actions>
134+
<ContextualbarV2Action
135+
title='Title'
136+
name='new-window'
137+
onClick={action('click')}
138+
/>
139+
<ContextualbarV2Action
140+
title='Add user'
141+
name='add-user'
142+
onClick={action('click')}
143+
/>
144+
<ContextualbarV2Action
145+
title='Close'
146+
name='cross'
147+
onClick={action('click')}
148+
/>
149+
</ContextualbarV2Actions>
150+
</ContextualbarV2Header>
151+
<ContextualbarV2Section>
152+
<InputBox
153+
type='text'
154+
placeholder='Search'
155+
addon={<Icon name='magnifier' size='x20' />}
156+
/>
157+
</ContextualbarV2Section>
158+
<ContextualbarV2Content />
159+
<ContextualbarV2Footer>
160+
<ButtonGroup>
161+
<ContextualbarV2Button width='full' secondary>
162+
Cancel
163+
</ContextualbarV2Button>
164+
<Button width='full' primary>
165+
Save
166+
</Button>
167+
<IconButton title='More' icon='menu' secondary />
168+
</ButtonGroup>
169+
</ContextualbarV2Footer>
170+
</ContextualbarV2>
171+
);

‎packages/fuselage/src/components/ContextualbarV2/ContextualbarHeader.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ const ContextualbarHeader = ({
2626
flexGrow={1}
2727
height='100%'
2828
overflow='hidden'
29+
mi={-4}
30+
pi={4}
2931
className={css`
3032
gap: 8px;
3133
`}

‎packages/fuselage/src/components/ContextualbarV2/ContextualbarTitle.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const ContextualbarTitle = (props: ContextualbarTitleProps) => (
1010
flexGrow={1}
1111
fontScale='h5'
1212
withTruncatedText
13+
is='h5'
1314
{...props}
1415
/>
1516
);

‎packages/fuselage/src/components/ContextualbarV2/__snapshots__/Contextualbar.spec.tsx.snap‎

Lines changed: 156 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
1313
class="rcx-box rcx-box--full rcx-css-1usi2qo"
1414
>
1515
<div
16-
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
16+
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
1717
>
1818
<button
1919
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
@@ -27,11 +27,11 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
2727
⦉
2828
</i>
2929
</button>
30-
<div
30+
<h5
3131
class="rcx-box rcx-box--full rcx-css-1spko5i"
3232
>
3333
ContextualbarV2 Title
34-
</div>
34+
</h5>
3535
<div
3636
class="rcx-button-group rcx-button-group--align-start"
3737
role="group"
@@ -162,7 +162,7 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
162162
class="rcx-box rcx-box--full rcx-css-1usi2qo"
163163
>
164164
<div
165-
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
165+
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
166166
>
167167
<button
168168
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
@@ -176,11 +176,11 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
176176
⦉
177177
</i>
178178
</button>
179-
<div
179+
<h5
180180
class="rcx-box rcx-box--full rcx-css-1spko5i"
181181
>
182182
ContextualbarV2 Empty
183-
</div>
183+
</h5>
184184
<div
185185
class="rcx-button-group rcx-button-group--align-start"
186186
role="group"
@@ -243,7 +243,7 @@ exports[`[Contextualbar Rendering] renders Skeleton without crashing 1`] = `
243243
class="rcx-box rcx-box--full rcx-css-1usi2qo"
244244
>
245245
<div
246-
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
246+
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
247247
>
248248
<span
249249
class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
@@ -277,3 +277,152 @@ exports[`[Contextualbar Rendering] renders Skeleton without crashing 1`] = `
277277
</div>
278278
</body>
279279
`;
280+
281+
exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] = `
282+
<body>
283+
<div>
284+
<div
285+
class="rcx-box rcx-box--full rcx-css-k3k951"
286+
>
287+
<div
288+
class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-37ac0e"
289+
>
290+
<div
291+
class="rcx-box rcx-box--full rcx-css-1usi2qo"
292+
>
293+
<div
294+
class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
295+
>
296+
<button
297+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
298+
title="Back"
299+
type="button"
300+
>
301+
<i
302+
aria-hidden="true"
303+
class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
304+
>
305+
⦉
306+
</i>
307+
</button>
308+
<h5
309+
class="rcx-box rcx-box--full rcx-css-1spko5i"
310+
>
311+
ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title
312+
</h5>
313+
<div
314+
class="rcx-button-group rcx-button-group--align-start"
315+
role="group"
316+
>
317+
<button
318+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
319+
title="Title"
320+
type="button"
321+
>
322+
<i
323+
aria-hidden="true"
324+
class="rcx-box rcx-box--full rcx-icon--name-new-window rcx-icon rcx-css-4pvxx3"
325+
>
326+
⁽
327+
</i>
328+
</button>
329+
<button
330+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
331+
title="Add user"
332+
type="button"
333+
>
334+
<i
335+
aria-hidden="true"
336+
class="rcx-box rcx-box--full rcx-icon--name-add-user rcx-icon rcx-css-4pvxx3"
337+
>
338+
339+
</i>
340+
</button>
341+
<button
342+
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
343+
title="Close"
344+
type="button"
345+
>
346+
<i
347+
aria-hidden="true"
348+
class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
349+
>
350+
351+
</i>
352+
</button>
353+
</div>
354+
</div>
355+
</div>
356+
<div
357+
class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-16mbly4"
358+
>
359+
<label
360+
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
361+
>
362+
<input
363+
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
364+
placeholder="Search"
365+
size="1"
366+
type="text"
367+
/>
368+
<span
369+
class="rcx-box rcx-box--full rcx-input-box__addon"
370+
>
371+
<i
372+
aria-hidden="true"
373+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
374+
>
375+
376+
</i>
377+
</span>
378+
</label>
379+
</div>
380+
<div
381+
class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1ptgac4"
382+
/>
383+
<div
384+
class="rcx-box rcx-box--full rcx-css-f51umh"
385+
>
386+
<div
387+
class="rcx-button-group rcx-button-group--align-start"
388+
role="group"
389+
>
390+
<button
391+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-button-group__item rcx-css-1qcz93u"
392+
type="button"
393+
>
394+
<span
395+
class="rcx-button--content"
396+
>
397+
Cancel
398+
</span>
399+
</button>
400+
<button
401+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u"
402+
type="button"
403+
>
404+
<span
405+
class="rcx-button--content"
406+
>
407+
Save
408+
</span>
409+
</button>
410+
<button
411+
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
412+
title="More"
413+
type="button"
414+
>
415+
<i
416+
aria-hidden="true"
417+
class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-1x2l7ts"
418+
>
419+
420+
</i>
421+
</button>
422+
</div>
423+
</div>
424+
</div>
425+
</div>
426+
</div>
427+
</body>
428+
`;

0 commit comments

Comments
 (0)