Skip to content

Commit 1a2ed7c

Browse files
jeffredoddjeffredodd
authored
fix: Refactor tabs to remove React-Router dependency (#336)
* saving state * Initial Pass at Removing Router from Tabs * Add Test w/ReactRouter * Linting correction * Updating documentation * Updating documentation * PR feedback * Rename TabComponent to TabGroup * Remove Tab/TabGroup from Playground as we are using examples instead of live demos * Updating based on PR feedback * Re-enable datepicker test * Small edits to the docs * Disabling datepicker test for the time being
1 parent d817966 commit 1a2ed7c

File tree

7 files changed

+474
-270
lines changed

7 files changed

+474
-270
lines changed

‎src/Tabs/Tabs.Component.js‎

Lines changed: 186 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,100 @@
11
import React from 'react';
2-
import { Description, DocsText, DocsTile, Header, Import, Playground, Properties, Separator } from '../_playground';
3-
import { TabComponent, Tabs } from '../';
2+
import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
3+
import { Link, MemoryRouter } from 'react-router-dom';
4+
import { Tab, TabGroup } from '../';
45

56
export const TabsComponent = () => {
6-
const tabscomponentCode = `
7-
<Tabs>
8-
<TabComponent ids={[{id : '1', url:'#', name: 'Tab 1', content: 'Hello world', disabled: false},
9-
{id : '2', url:'#', name: 'Tab 2', content: 'Hello world 2', disabled: false},
10-
{id : '3', url:'#', name: 'Tab 3', content: 'Hello world 3', disabled: true}]}>
11-
</TabComponent>
12-
</Tabs>`;
7+
const tabGroupCode = `
8+
<TabGroup
9+
selected='1'>
10+
<Tab
11+
content='Hello world'
12+
id='1'
13+
url='#'>
14+
Tab 1
15+
</Tab>
16+
<Tab
17+
content='Hello world 2'
18+
id='2'
19+
url='#'>
20+
Tab 2
21+
</Tab>
22+
<Tab
23+
content='Hello world 3'
24+
disabled
25+
id='3'
26+
url='#'>
27+
Tab 3
28+
</Tab>
29+
</TabGroup>`;
30+
31+
const tabsGroupWithAnchorCode = `
32+
<TabGroup
33+
selected='1'>
34+
<Tab
35+
content='Hello world'
36+
id='1'>
37+
<a
38+
href='#'>
39+
Tab 1
40+
</a>
41+
</Tab>
42+
<Tab
43+
content='Hello world 2'
44+
id='2'>
45+
<a
46+
href='#'>
47+
Tab 2
48+
</a>
49+
</Tab>
50+
<Tab
51+
content='Hello world 3'
52+
disabled
53+
id='3'>
54+
<a
55+
href='#'>
56+
Tab 2
57+
</a>
58+
</Tab>
59+
</TabGroup>`;
60+
61+
const tabsGroupWithLinkCode = `
62+
<MemoryRouter>
63+
<TabGroup>
64+
<Tab
65+
content='Hello world'
66+
id='1'>
67+
<Link
68+
to='/'>
69+
Tab 1
70+
</Link>
71+
</Tab>
72+
<Tab
73+
content='Hello world 2'
74+
id='2'>
75+
<Link
76+
to='/'>
77+
Tab 2
78+
</Link>
79+
</Tab>
80+
<Tab
81+
content='Hello world 3'
82+
disabled
83+
id='3'>
84+
<Link
85+
to='/'>
86+
Tab 2
87+
</Link>
88+
</Tab>
89+
</TabGroup>
90+
</MemoryRouter>`;
1391

1492
return (
1593
<div>
16-
<Header>Tabs</Header>
94+
<Header>Tab Group</Header>
1795
<Description>
18-
**Tabs** are based on a folder metaphor and used to separate content into different sections.
96+
A **Tab Group** is a collection of **Tab** components. Each **Tab** is based on a folder
97+
metaphor and is used to separate content into different sections.
1998
They should be ordered to create a visual hierarchy based on priority.
2099
</Description>
21100
<Import sourceModule={require('./Tabs')} />
@@ -26,44 +105,107 @@ export const TabsComponent = () => {
26105

27106
<Separator />
28107

108+
<h2>Tab Group with URL</h2>
109+
110+
<DocsTile>
111+
<TabGroup
112+
selectedId='1'>
113+
<Tab
114+
content='Hello world'
115+
id='1'
116+
url='#'>
117+
Tab 1
118+
</Tab>
119+
<Tab
120+
content='Hello world 2'
121+
id='2'
122+
url='#'>
123+
Tab 2
124+
</Tab>
125+
<Tab
126+
content='Hello world 3'
127+
disabled
128+
id='3'
129+
url='#'>
130+
Tab 3
131+
</Tab>
132+
</TabGroup>
133+
</DocsTile>
134+
<DocsText>{tabGroupCode}</DocsText>
135+
136+
<Separator />
137+
138+
<h2>Tab Group with Anchor</h2>
139+
29140
<DocsTile>
30-
<Tabs>
31-
<TabComponent
32-
ids={[
33-
{ id: '1', url: '#', name: 'Tab 1', content: 'Hello world', disabled: false },
34-
{ id: '2', url: '#', name: 'Tab 2', content: 'Hello world 2', disabled: false },
35-
{ id: '3', url: '#', name: 'Tab 3', content: 'Hello world 3', disabled: true }
36-
]} />
37-
</Tabs>
141+
<TabGroup
142+
selectedId='1'>
143+
<Tab
144+
content='Hello world'
145+
id='1'>
146+
<a
147+
href='#'>
148+
Tab 1
149+
</a>
150+
</Tab>
151+
<Tab
152+
content='Hello world 2'
153+
id='2'>
154+
<a
155+
href='#'>
156+
Tab 2
157+
</a>
158+
</Tab>
159+
<Tab
160+
content='Hello world 3'
161+
disabled
162+
id='3'>
163+
<a
164+
href='#'>
165+
Tab 2
166+
</a>
167+
</Tab>
168+
</TabGroup>
38169
</DocsTile>
39-
<DocsText>{tabscomponentCode}</DocsText>
170+
<DocsText>{tabsGroupWithAnchorCode}</DocsText>
40171

41172
<Separator />
42173

43-
<h2>Playground</h2>
44-
<Playground
45-
component='tabs'
46-
schema={[
47-
{
48-
attribute: 'ids',
49-
typeOfAttribute: 'lists',
50-
'enum': ['Tab 1', 'Tab 2', 'Tab 3']
51-
},
52-
{
53-
attribute: 'content',
54-
typeOfAttribute: 'listsContent',
55-
'enum': ['Tab 1', 'Tab 2', 'Tab 3']
56-
}
57-
]}>
58-
<Tabs>
59-
<TabComponent
60-
ids={[
61-
{ id: 'Tab 1', url: '#', name: 'Tab 1', content: 'Hello world', disabled: false },
62-
{ id: 'Tab 2', url: '#', name: 'Tab 2', content: 'Hello world 2', disabled: false },
63-
{ id: 'Tab 3', url: '#', name: 'Tab 3', content: 'Hello world 3', disabled: true }
64-
]} />
65-
</Tabs>
66-
</Playground>
174+
<h2>Tab Group with Link</h2>
175+
176+
<DocsTile>
177+
<MemoryRouter>
178+
<TabGroup
179+
selectedId='1'>
180+
<Tab
181+
content='Hello world'
182+
id='1'>
183+
<Link
184+
to='/'>
185+
Tab 1
186+
</Link>
187+
</Tab>
188+
<Tab
189+
content='Hello world 2'
190+
id='2'>
191+
<Link
192+
to='/'>
193+
Tab 2
194+
</Link>
195+
</Tab>
196+
<Tab
197+
content='Hello world 3'
198+
disabled
199+
id='3'>
200+
<Link
201+
to='/'>
202+
Tab 2
203+
</Link>
204+
</Tab>
205+
</TabGroup>
206+
</MemoryRouter>
207+
</DocsTile>
208+
<DocsText>{tabsGroupWithLinkCode}</DocsText>
67209
</div>
68210
);
69211
};

0 commit comments

Comments
 (0)