Skip to content

Commit 62533f6

Browse files
MarcosViniciusPCMarcosViniciusPC
authored
Merge pull request #523 from catho/QTM-531
fix(QTM-531): Fixed display of tabs when prop fluid is true
2 parents 6790ef6 + 73c4bae commit 62533f6

File tree

3 files changed

+253
-4
lines changed

3 files changed

+253
-4
lines changed

‎components/TabbedView/TabbedView.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const NavItem = styled.button.attrs({
7272
7373
${({
7474
skin,
75-
children,
75+
quantityOfItems,
7676
theme: {
7777
components: {
7878
tabbedView: { skins },
@@ -96,7 +96,7 @@ const NavItem = styled.button.attrs({
9696
text-overflow: ellipsis;
9797
white-space: nowrap;
9898
overflow: hidden;
99-
width: ${(100 / children.length).toFixed(2)}%;
99+
width: ${(100 / quantityOfItems).toFixed(2)}%;
100100
`
101101
: null}
102102
@@ -201,6 +201,7 @@ class TabbedView extends Component {
201201
{Children.map(children, ({ props: { title, badge, icon } }) => (
202202
<NavItem
203203
fluid={fluid}
204+
quantityOfItems={Children.count(children)}
204205
key={title}
205206
onClick={() => this.onTabClick(title, onTabClick)}
206207
skin={skin}

‎components/TabbedView/TabbedView.unit.test.jsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,30 @@ describe('<TabbedView /> ', () => {
2121
expect(container.firstChild).toMatchSnapshot();
2222
});
2323
it('should match snapshot with fluid option', () => {
24-
const { container } = render(
24+
const { container: withOneTab } = render(
25+
<TabbedView fluid>
26+
<Tab title="Candidates">Candidates content</Tab>
27+
</TabbedView>,
28+
);
29+
30+
const { container: withTwoTabs } = render(
31+
<TabbedView fluid>
32+
<Tab title="Candidates">Candidates content</Tab>
33+
<Tab title="Companies">Companies content</Tab>
34+
</TabbedView>,
35+
);
36+
37+
const { container: withThreeTabs } = render(
2538
<TabbedView fluid>
2639
<Tab title="Candidates">Candidates content</Tab>
2740
<Tab title="Companies">Companies content</Tab>
2841
<Tab title="Education">Education content</Tab>
2942
</TabbedView>,
3043
);
3144

32-
expect(container.firstChild).toMatchSnapshot();
45+
expect(withOneTab.firstChild).toMatchSnapshot();
46+
expect(withTwoTabs.firstChild).toMatchSnapshot();
47+
expect(withThreeTabs.firstChild).toMatchSnapshot();
3348
});
3449
it('should match snapshot with badges and icons', () => {
3550
const { container } = render(

‎components/TabbedView/__snapshots__/TabbedView.unit.test.jsx.snap

+233
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,239 @@ exports[`<TabbedView /> Snapshot should match snapshot with fluid option 1`] =
381381
overflow-x: scroll;
382382
}
383383
384+
.c1 {
385+
border: none;
386+
box-sizing: border-box;
387+
cursor: pointer;
388+
-webkit-flex-shrink: 0;
389+
-ms-flex-negative: 0;
390+
flex-shrink: 0;
391+
height: 56px;
392+
line-height: 1.5;
393+
min-width: 90px;
394+
outline: none;
395+
overflow: hidden;
396+
position: relative;
397+
text-align: center;
398+
-webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out;
399+
transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out;
400+
border-bottom: 1px solid #e0e0e0;
401+
background-color: transparent;
402+
font-size: 16px;
403+
color: inherit;
404+
padding: 16px;
405+
text-overflow: ellipsis;
406+
white-space: nowrap;
407+
overflow: hidden;
408+
width: 100.00%;
409+
}
410+
411+
.c1[aria-selected='true'] {
412+
border-bottom: 1px solid #1250C4;
413+
color: #1250C4;
414+
cursor: default;
415+
}
416+
417+
.c1[aria-selected='true']::after {
418+
content: ' ';
419+
background-color: #1250C4;
420+
position: absolute;
421+
left: 0px;
422+
bottom: 0px;
423+
height: 3px;
424+
border-radius: 4px 4px 0 0;
425+
width: 100%;
426+
}
427+
428+
.c1:hover {
429+
color: #1250C4;
430+
border-bottom: 1px solid #1250C4;
431+
background-color: #E5EDFC;
432+
}
433+
434+
.c1:focus {
435+
color: #1250C4;
436+
border: 1px solid #1250C4;
437+
background-color: #E5EDFC;
438+
padding: 15px;
439+
}
440+
441+
.c2 {
442+
vertical-align: top;
443+
}
444+
445+
@media (min-width:1024px) {
446+
.c0 {
447+
overflow-x: auto;
448+
}
449+
}
450+
451+
<nav
452+
class="c0"
453+
role="tablist"
454+
>
455+
<button
456+
aria-controls="candidates-panel"
457+
aria-selected="true"
458+
class="c1"
459+
id="candidates-tab"
460+
role="tab"
461+
>
462+
<span
463+
class="c2"
464+
>
465+
Candidates
466+
</span>
467+
</button>
468+
</nav>
469+
`;
470+
471+
exports[`<TabbedView /> Snapshot should match snapshot with fluid option 2`] = `
472+
.c0 {
473+
display: -webkit-box;
474+
display: -webkit-flex;
475+
display: -ms-flexbox;
476+
display: flex;
477+
-webkit-box-flex: 1;
478+
-webkit-flex-grow: 1;
479+
-ms-flex-positive: 1;
480+
flex-grow: 1;
481+
-webkit-flex-shrink: 1;
482+
-ms-flex-negative: 1;
483+
flex-shrink: 1;
484+
padding: 0;
485+
max-width: 100%;
486+
clear: left;
487+
float: left;
488+
background-color: transparent;
489+
margin: 0 0 24px 0;
490+
width: 100%;
491+
overflow-x: scroll;
492+
}
493+
494+
.c1 {
495+
border: none;
496+
box-sizing: border-box;
497+
cursor: pointer;
498+
-webkit-flex-shrink: 0;
499+
-ms-flex-negative: 0;
500+
flex-shrink: 0;
501+
height: 56px;
502+
line-height: 1.5;
503+
min-width: 90px;
504+
outline: none;
505+
overflow: hidden;
506+
position: relative;
507+
text-align: center;
508+
-webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out;
509+
transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out;
510+
border-bottom: 1px solid #e0e0e0;
511+
background-color: transparent;
512+
font-size: 16px;
513+
color: inherit;
514+
padding: 16px;
515+
text-overflow: ellipsis;
516+
white-space: nowrap;
517+
overflow: hidden;
518+
width: 50.00%;
519+
}
520+
521+
.c1[aria-selected='true'] {
522+
border-bottom: 1px solid #1250C4;
523+
color: #1250C4;
524+
cursor: default;
525+
}
526+
527+
.c1[aria-selected='true']::after {
528+
content: ' ';
529+
background-color: #1250C4;
530+
position: absolute;
531+
left: 0px;
532+
bottom: 0px;
533+
height: 3px;
534+
border-radius: 4px 4px 0 0;
535+
width: 100%;
536+
}
537+
538+
.c1:hover {
539+
color: #1250C4;
540+
border-bottom: 1px solid #1250C4;
541+
background-color: #E5EDFC;
542+
}
543+
544+
.c1:focus {
545+
color: #1250C4;
546+
border: 1px solid #1250C4;
547+
background-color: #E5EDFC;
548+
padding: 15px;
549+
}
550+
551+
.c2 {
552+
vertical-align: top;
553+
}
554+
555+
@media (min-width:1024px) {
556+
.c0 {
557+
overflow-x: auto;
558+
}
559+
}
560+
561+
<nav
562+
class="c0"
563+
role="tablist"
564+
>
565+
<button
566+
aria-controls="candidates-panel"
567+
aria-selected="true"
568+
class="c1"
569+
id="candidates-tab"
570+
role="tab"
571+
>
572+
<span
573+
class="c2"
574+
>
575+
Candidates
576+
</span>
577+
</button>
578+
<button
579+
aria-controls="companies-panel"
580+
aria-selected="false"
581+
class="c1"
582+
id="companies-tab"
583+
role="tab"
584+
>
585+
<span
586+
class="c2"
587+
>
588+
Companies
589+
</span>
590+
</button>
591+
</nav>
592+
`;
593+
594+
exports[`<TabbedView /> Snapshot should match snapshot with fluid option 3`] = `
595+
.c0 {
596+
display: -webkit-box;
597+
display: -webkit-flex;
598+
display: -ms-flexbox;
599+
display: flex;
600+
-webkit-box-flex: 1;
601+
-webkit-flex-grow: 1;
602+
-ms-flex-positive: 1;
603+
flex-grow: 1;
604+
-webkit-flex-shrink: 1;
605+
-ms-flex-negative: 1;
606+
flex-shrink: 1;
607+
padding: 0;
608+
max-width: 100%;
609+
clear: left;
610+
float: left;
611+
background-color: transparent;
612+
margin: 0 0 24px 0;
613+
width: 100%;
614+
overflow-x: scroll;
615+
}
616+
384617
.c1 {
385618
border: none;
386619
box-sizing: border-box;

0 commit comments

Comments
 (0)