Skip to content

Commit 898b61d

Browse files
zeroedinzeroedin
authored
Merge pull request #2573 from patternfly/docs/button/examples-onclick
docs(button): examples of onclick
2 parents cb9556d + 95e7c95 commit 898b61d

File tree

10 files changed

+297
-8
lines changed

10 files changed

+297
-8
lines changed

‎.changeset/tabs-expand-cem.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
"@patternfly/elements": patch
3+
---
4+
`<pf-tabs>`: corrected the name of the `expand` event in the custom elements manifest

‎.changeset/tabs-expand-event.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
`<pf-tabs>`: add `isExpandEvent` static method, to help prevent name conflicts
5+
6+
```js
7+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js';
8+
document.addEventListener('expand', function(event) {
9+
if (PfTabs.isExpandEvent(event)) {
10+
// a pf-tabs' tab has expanded
11+
}
12+
});
13+
```

‎docs/components/components.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,27 @@
1515
}
1616
---
1717

18+
<script type="module">
19+
const LS_KEY = 'html-lit-react-snippets-index';
20+
document.addEventListener('expand', async function(event) {
21+
const PfTabs = await customElements.whenDefined('pf-tabs');
22+
if (PfTabs.isExpandEvent(event)) {
23+
const tabs = event.target.closest('pf-tabs');
24+
await tabs.updateComplete;
25+
debugger;
26+
localStorage.setItem(LS_KEY, tabs.activeIndex);
27+
update();
28+
}
29+
});
30+
async function update() {
31+
for (const tabs of document.querySelectorAll('pf-tabs.html-lit-react-snippets')) {
32+
await tabs.updateComplete;
33+
tabs.activeIndex = parseInt(localStorage.getItem(LS_KEY) ?? '0');
34+
}
35+
}
36+
update();
37+
</script>
38+
1839
<header class="band">
1940
<h1>{{element.title}}</h1>
2041

‎elements/pf-button/docs/pf-button.md‎

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
{% renderInstallation %} {% endrenderInstallation %}
2-
31
<style>
42
pf-button + pf-button {
53
margin-inline-start: 4px;
@@ -8,9 +6,12 @@ pf-button + pf-button {
86
</style>
97

108
<script type="module">
11-
import '@patternfly/elements/pf-icon/pf-icon.js';
9+
import '@patternfly/elements/pf-icon/pf-icon.js';
10+
import '@patternfly/elements/pf-tabs/pf-tabs.js';
1211
</script>
1312

13+
{% renderInstallation %} {% endrenderInstallation %}
14+
1415
{% renderOverview %}
1516

1617
<div class="overview-buttons">
@@ -70,6 +71,57 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
7071
<pf-button>Medium Button</pf-button>
7172
<pf-button size="large">Large Button</pf-button>
7273
{% endhtmlexample %}
74+
75+
### Click listeners
76+
77+
<pf-tabs class="html-lit-react-snippets">
78+
<pf-tab slot="tab">HTML</pf-tab>
79+
<pf-tab-panel>
80+
81+
```html
82+
<script type="module">
83+
import '@patternfly/elements/pf-button/pf-button.js';
84+
document.querySelector('pf-button')
85+
.addEventListener('click', function() {
86+
console.log('clicked!');
87+
});
88+
</script>
89+
<pf-button>Click me!</pf-button>
90+
```
91+
92+
</pf-tab-panel>
93+
<pf-tab slot="tab">Lit</pf-tab>
94+
<pf-tab-panel>
95+
96+
```js
97+
import { html, render } from 'lit';
98+
import '@patternfly/elements/pf-button/pf-button.js';
99+
100+
render(html`
101+
<pf-button @click="${() => console.log('clicked!');}">
102+
Click me!
103+
</pf-button>
104+
`, document.getElementById('container'));
105+
```
106+
107+
</pf-tab-panel>
108+
<pf-tab slot="tab">React</pf-tab>
109+
<pf-tab-panel>
110+
111+
```jsx
112+
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
113+
export function Clicker() {
114+
return (
115+
<Button onClick={() => console.log('clicked!');}>
116+
Click me!
117+
</Button>
118+
)
119+
}
120+
```
121+
122+
</pf-tab-panel>
123+
</pf-tabs>
124+
73125
{% endband %}
74126

75127
{% renderSlots %}{% endrenderSlots %}

‎elements/pf-popover/docs/pf-popover.md‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,110 @@
1515
<pf-popover heading="Popover heading"
1616
body="Popovers are triggered by click rather than hover."
1717
footer="Popover footer">
18-
<button>Toggle popover</button>
18+
<pf-button>Toggle popover</pf-button>
1919
</pf-popover>
2020
{% endhtmlexample %}
2121

2222
**Note**: Unlike the [Patternfly React implementation][withfocustrap], this
2323
component does not trap focus in the popover dialog. If you would like to trap
2424
focus, consider using a modal dialog instead.
25+
26+
### Activating programmatically
27+
28+
Use the `show()` method to activate the popover.
29+
30+
<pf-tabs class="html-lit-react-snippets">
31+
<pf-tab slot="tab">HTML</pf-tab>
32+
<pf-tab-panel>
33+
34+
```html
35+
<script type="module">
36+
import '@patternfly/elements/pf-button/pf-button.js';
37+
import '@patternfly/elements/pf-popover/pf-popover.js';
38+
39+
const button = document.querySelector('pf-button');
40+
41+
const popover = document.querySelector('pf-popover');
42+
43+
button.addEventListener('mouseover', function() {
44+
popover.show();
45+
});
46+
47+
button.addEventListener('mouseout', function() {
48+
popover.hide();
49+
});
50+
</script>
51+
52+
<pf-button>Hover to cite</pf-button>
53+
54+
<pf-popover>
55+
<cite slot="body">Richard M. Stallman</cite>
56+
<q>Free software is a political movement; open source is a development model.</q>
57+
</pf-popover>
58+
```
59+
60+
</pf-tab-panel>
61+
<pf-tab slot="tab">Lit</pf-tab>
62+
<pf-tab-panel>
63+
64+
```js
65+
import { LitElement, html } from 'lit';
66+
import '@patternfly/elements/pf-button/pf-button.js';
67+
import '@patternfly/elements/pf-popover/pf-popover.js';
68+
69+
class Citer extends LitElement {
70+
render() {
71+
return html`
72+
<pf-button @mouseover="${this.#onMouseover}"
73+
@mouseout="${this.#onMouseout}">Hover to Cite</pf-button>
74+
75+
<pf-popover>
76+
<cite slot="body">Richard M. Stallman</cite>
77+
<q>Free software is a political movement; open source is a development model.</q>
78+
</pf-popover>
79+
`;
80+
}
81+
82+
get #popover() { return this.shadowRoot.querySelector('pf-popover'); }
83+
84+
#onMouseover() { this.#popover.show(); }
85+
86+
#onMouseout() { this.#popover.hide(); }
87+
}
88+
```
89+
90+
</pf-tab-panel>
91+
<pf-tab slot="tab">React</pf-tab>
92+
<pf-tab-panel>
93+
94+
```jsx
95+
import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
96+
import { Popover } from '@patternfly/elements/react/pf-popover/pf-popover.js';
97+
import { useRef } from 'react';
98+
99+
100+
export function Citer() {
101+
const popoverRef = useRef(null);
102+
103+
const onMouseover = e => void popoverRef.current.show();
104+
105+
const onMouseout = e => void popoverRef.current.hide();
106+
107+
return (
108+
<>
109+
<Button onmouseover={onMouseover}
110+
onmouseout={onMouseout}>Hover to Cite</Button>
111+
<Popover ref={popoverRef}>
112+
<cite slot="body">Richard M. Stallman</cite>
113+
<q>Free software is a political movement; open source is a development model.</q>
114+
</Popover>
115+
</>
116+
);
117+
}
118+
```
119+
120+
</pf-tab-panel>
121+
</pf-tabs>
25122
{% endband %}
26123

27124
{% renderSlots %}{% endrenderSlots %}

‎elements/pf-tabs/BaseTab.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export class TabExpandEvent extends ComposedEvent {
1818
}
1919
}
2020

21+
/**
22+
* @fires {TabExpandEvent} expand - when a tab is selected
23+
*/
2124
export abstract class BaseTab extends LitElement {
2225
static readonly styles = [style];
2326

‎elements/pf-tabs/docs/pf-tabs.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,90 @@
4242
<pf-tab-panel>Database</pf-tab-panel>
4343
</pf-tabs>
4444
{% endhtmlexample %}
45+
46+
### Reacting to changes
47+
Listen for the `expand` event to react when a tab is selected.
48+
49+
<pf-tabs class="html-lit-react-snippets">
50+
<pf-tab slot="tab">HTML</pf-tab>
51+
<pf-tab-panel>
52+
53+
```html
54+
<script type="module">
55+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};
56+
57+
document.querySelector('pf-tabs')
58+
.addEventListener('expand', function(event) {
59+
if (PfTabs.isExpandEvent(event)) {
60+
const pfTabs = event.target.closest('pf-tabs');
61+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
62+
console.log(`${activeTab.textContent} tab activated!`);
63+
}
64+
});
65+
</script>
66+
67+
<pf-tabs>
68+
<pf-tab slot="tab">GPL</pf-tab>
69+
<pf-tab-panel>Copyleft</pf-tab-panel>
70+
<pf-tab slot="tab">MIT</pf-tab>
71+
<pf-tab-panel>Open source</pf-tab-panel>
72+
</pf-tabs>
73+
```
74+
75+
</pf-tab-panel>
76+
<pf-tab slot="tab">Lit</pf-tab>
77+
<pf-tab-panel>
78+
79+
```js
80+
import { html, render } from 'lit';
81+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};
82+
83+
function onExpand(event) {
84+
if (PfTabs.isExpandEvent(event)) {
85+
const pfTabs = event.target.closest('pf-tabs');
86+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
87+
console.log(`${activeTab.textContent} tab activated!`);
88+
}
89+
}
90+
91+
render(html`
92+
<pf-tabs @expand="${onExpand}">
93+
<pf-tab slot="tab">GPL</pf-tab>
94+
<pf-tab-panel>Copyleft</pf-tab-panel>
95+
<pf-tab slot="tab">MIT</pf-tab>
96+
<pf-tab-panel>Open source</pf-tab-panel>
97+
</pf-tabs>
98+
`, document.getElementById('container'));
99+
```
100+
101+
</pf-tab-panel>
102+
<pf-tab slot="tab">React</pf-tab>
103+
<pf-tab-panel>
104+
105+
```jsx
106+
import { Tabs, Tab, TabPanel } from '@patternfly/elements/react/pf-tabs/pf-tabs.js';
107+
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js';
108+
109+
function onExpand(event) {
110+
if (PfTabs.isExpandEvent(event)) {
111+
const pfTabs = event.target.closest('pf-tabs');
112+
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
113+
console.log(`${activeTab.textContent} tab activated!`);
114+
}
115+
}
116+
117+
export const Expander = () => (
118+
<Tabs onExpand={onExpand}>
119+
<Tab slot="tab">GPL</Tab>
120+
<TabPanel>Copyleft</TabPanel>
121+
<Tab slot="tab">MIT</Tab>
122+
<TabPanel>Open source</TabPanel>
123+
</Tabs>
124+
)
125+
```
126+
127+
</pf-tab-panel>
128+
</pf-tabs>
45129
{% endband %}
46130

47131
{% band header="Variants" %}

‎elements/pf-tabs/pf-tab.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import styles from './pf-tab.css';
6565
*
6666
* @cssprop {<length>} --pf-c-tabs__link--child--MarginRight {@default `1rem`}
6767
*
68-
* @fires { TabExpandEvent } tab-expand - when a tab expands
68+
* @fires { TabExpandEvent } expand - when a tab expands
6969
*/
7070
@customElement('pf-tab')
7171
export class PfTab extends BaseTab {

‎elements/pf-tabs/pf-tabs.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { property } from 'lit/decorators/property.js';
44
import { cascades } from '@patternfly/pfe-core/decorators.js';
55

66
import { BaseTabs } from './BaseTabs.js';
7+
import { TabExpandEvent } from './BaseTab.js';
78
import { PfTab } from './pf-tab.js';
89
import { PfTabPanel } from './pf-tab-panel.js';
910

@@ -73,6 +74,10 @@ export class PfTabs extends BaseTabs {
7374
return element instanceof PfTabPanel;
7475
}
7576

77+
static isExpandEvent(event: Event): event is TabExpandEvent {
78+
return event instanceof TabExpandEvent;
79+
}
80+
7681
@cascades('pf-tab', 'pf-tab-panel')
7782
@property({ reflect: true }) box: 'light' | 'dark' | null = null;
7883

0 commit comments

Comments
 (0)