Skip to content

Commit 9f83786

Browse files
kylebuch8kylebuch8
authored
feat: pfe-tabs keep history on tab click and open tab based on url parameters (#786)
* working with history.pushState * finishing tab history with tests and readme updates * adding tab history id to demo page * adding updates per michael's suggestions * updating the changelog for pfe-tabs
1 parent e2ba182 commit 9f83786

File tree

6 files changed

+306
-28
lines changed

6 files changed

+306
-28
lines changed

‎CHANGELOG-prerelease.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Tag: [v1.0.0-prerelease.41](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.41)
44

55
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add events to the generator
6+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-tabs keep history on tab click and open tab based on url parameters #786
67
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-health-index size="mini" version #789
78

89
## Prerelease 40 ( 2020-03-10 )

‎elements/pfe-tabs/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,62 @@ Changes the context of the call-to-action to one of 3 possible themes:
6868

6969
This will override any context being passed from a parent component and will add a style attribute setting the `--theme` variable.
7070

71+
**`pfe-tab-history`** (observed)
72+
73+
Updates window.history and the URL to create sharable links. With the
74+
`pfe-tab-history` attribute, the tabs and each tab *must* have an `id`.
75+
76+
The URL pattern will be `?pfe-{id-of-tabs}={id-of-selected-tab}`. In the example
77+
below, selecting "Tab 2" will update the URL as follows: `?pfe-my-tabs=tab2`.
78+
79+
```html
80+
<pfe-tabs pfe-tab-history id="my-tabs">
81+
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
82+
<pfe-tab-panel role="region" slot="panel">
83+
<h2>Content 1</h2>
84+
<p>Tab 1 panel content.</p>
85+
</pfe-tab-panel>
86+
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
87+
<pfe-tab-panel role="region" slot="panel">
88+
<h2>Content 2</h2>
89+
<p>Tab 2 panel content.</p>
90+
</pfe-tab-panel>
91+
</pfe-tabs>
92+
```
93+
94+
*Note:* This feature is not supported in IE11.
95+
96+
## Using the URL to open a specific tab
97+
98+
By default, `pfe-tabs` will read the URL and look for a query string parameter
99+
that matches the id of a `pfe-tabs` component and a value of a specific
100+
`pfe-tab`.
101+
102+
For example, `?pfe-my-tabs=tab2` would open the second tab in the code sample below.
103+
"my-tabs" is equal to the id of the `pfe-tabs` component and "tab2" is equal to
104+
the id of the second tab in the tab set.
105+
106+
```html
107+
<pfe-tabs id="my-tabs">
108+
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
109+
<pfe-tab-panel role="region" slot="panel">
110+
<h2>Content 1</h2>
111+
<p>Tab 1 panel content.</p>
112+
</pfe-tab-panel>
113+
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
114+
<pfe-tab-panel role="region" slot="panel">
115+
<h2>Content 2</h2>
116+
<p>Tab 2 panel content.</p>
117+
</pfe-tab-panel>
118+
</pfe-tabs>
119+
```
120+
121+
In the event that a tab with the supplied id in the URL does not exist,
122+
`pfe-tabs` will fall back to the `selected-index` attribute if one is supplied
123+
in the markup, or the first tab if `selected-index` is not provided.
124+
125+
*Note:* This feature is not supported in IE11.
126+
71127
## Events
72128

73129
### pfe-tabs:shown-tab

‎elements/pfe-tabs/demo/index.html‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
1313
-->
14-
14+
1515
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
1616
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
1717
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
@@ -61,23 +61,25 @@
6161
</head>
6262
<body unresolved>
6363
<h1>&lt;pfe-tabs&gt;</h1>
64-
64+
6565
<section class="example">
66-
66+
67+
<h1></h1>
68+
6769
<h2>Style: Horizontal plain</h2>
6870
<pfe-tabs>
69-
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
71+
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
7072
<pfe-tab-panel role="region" slot="panel">
7173
<h2>Content 1</h2>
7274
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
7375
</pfe-tab-panel>
74-
<pfe-tab role="heading" slot="tab">Tab 2</pfe-tab>
76+
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
7577
<pfe-tab-panel role="region" slot="panel">
7678
<h2>Content 2</h2>
7779
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
7880
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
7981
</pfe-tab-panel>
80-
<pfe-tab role="heading" slot="tab">Tab 3</pfe-tab>
82+
<pfe-tab role="heading" slot="tab" id="tab3">Tab 3</pfe-tab>
8183
<pfe-tab-panel role="region" slot="panel">
8284
<h2>Content 3</h2>
8385
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -109,11 +111,11 @@ <h2>Content 3</h2>
109111
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
110112
</pfe-tab-panel>
111113
</pfe-tabs>
112-
114+
113115
</section>
114-
116+
115117
<section class="example">
116-
118+
117119
<h2>Style: Horizontal earth</h2>
118120
<pfe-tabs pfe-variant="earth">
119121
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -136,11 +138,11 @@ <h2>Content 3</h2>
136138
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
137139
</pfe-tab-panel>
138140
</pfe-tabs>
139-
141+
140142
</section>
141-
143+
142144
<section class="example">
143-
145+
144146
<h2>Style: Vertical wind</h2>
145147
<pfe-tabs vertical pfe-variant="wind">
146148
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -163,11 +165,11 @@ <h2>Content 3</h2>
163165
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
164166
</pfe-tab-panel>
165167
</pfe-tabs>
166-
168+
167169
</section>
168-
170+
169171
<section class="example">
170-
172+
171173
<h2>Style: Vertical earth </h2>
172174
<pfe-tabs vertical pfe-variant="earth" pfe-tab-align="center" >
173175
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -191,9 +193,9 @@ <h2>Content 3</h2>
191193
</pfe-tab-panel>
192194
</pfe-tabs>
193195
</section>
194-
196+
195197
<section class="example" style="background-color: #000;">
196-
198+
197199
<h2 style="color: #fff;">Style: Horizontal plain (on dark background)</h2>
198200
<pfe-tabs on="dark">
199201
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -216,7 +218,7 @@ <h2>Content 3</h2>
216218
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
217219
</pfe-tab-panel>
218220
</pfe-tabs>
219-
221+
220222
<h2 style="color: #fff;">Style: Horizontal earth (on dark background)</h2>
221223
<pfe-tabs pfe-variant="earth" on="dark">
222224
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -239,7 +241,7 @@ <h2>Content 3</h2>
239241
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
240242
</pfe-tab-panel>
241243
</pfe-tabs>
242-
244+
243245
<h2 style="color: #fff;">Style: Horizontal wind (on dark background)</h2>
244246
<pfe-tabs pfe-variant="wind" on="dark">
245247
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -263,16 +265,16 @@ <h2>Content 3</h2>
263265
</pfe-tab-panel>
264266
</pfe-tabs>
265267
</section>
266-
268+
267269
<section class="example">
268-
270+
269271
<h2>Selected Index</h2>
270272
<pfe-tabs pfe-variant="earth" selected-index="1">
271273
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
272274
<pfe-tab-panel role="region" slot="panel">
273275
<h2>Content 1</h2>
274276
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
275-
<a href="https://kristyandkyle.com">https://kristyandkyle.com</a>
277+
<a href="https://redhat.com">https://redhat.com</a>
276278
</pfe-tab-panel>
277279
<pfe-tab role="heading" slot="tab">Tab 2</pfe-tab>
278280
<pfe-tab-panel role="region" slot="panel">
@@ -289,11 +291,39 @@ <h2>Content 3</h2>
289291
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
290292
</pfe-tab-panel>
291293
</pfe-tabs>
292-
294+
295+
</section>
296+
297+
<section class="example">
298+
299+
<h2 id="tab-history">Tab History</h2>
300+
<pfe-tabs id="my-tabs" pfe-tab-history>
301+
<pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
302+
<pfe-tab-panel role="region" slot="panel">
303+
<h2>Content 1</h2>
304+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
305+
<a href="https://redhat.com">https://redhat.com</a>
306+
</pfe-tab-panel>
307+
<pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
308+
<pfe-tab-panel role="region" slot="panel">
309+
<h2>Content 2</h2>
310+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
311+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
312+
</pfe-tab-panel>
313+
<pfe-tab role="heading" slot="tab" id="tab3">Tab 3</pfe-tab>
314+
<pfe-tab-panel role="region" slot="panel">
315+
<h2>Content 3</h2>
316+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
317+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
318+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
319+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
320+
</pfe-tab-panel>
321+
</pfe-tabs>
322+
293323
</section>
294-
324+
295325
<section class="example">
296-
326+
297327
<h2>Dynamically Adding a Tab and Tab Panel</h2>
298328
<pfe-tabs id="dynamic">
299329
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
@@ -308,7 +338,7 @@ <h4>Tab 2</h4>
308338
</pfe-tab-panel>
309339
</pfe-tabs>
310340
<button id="addTabAndPanelBtn">Add a Tab and Tab Panel</button>
311-
341+
312342
</section>
313343

314344
<script>

0 commit comments

Comments
 (0)