Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

Commit 291f130

Browse files
author
Axel Peter
committed
refactor(oui-popover): update same functioning as oui-tooltip
1 parent b478aea commit 291f130

File tree

12 files changed

+363
-188
lines changed

12 files changed

+363
-188
lines changed

‎packages/oui-popover/README.md‎

Lines changed: 98 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,49 @@
11
# Popover
22

3-
<component-status cx-design="partial" ux="beta"></component-status>
3+
<component-status cx-design="complete" ux="rc"></component-status>
44

55
## Usage
66

7-
### Simple case
7+
### Using value of `oui-popover` attribute
8+
9+
```html:preview
10+
<button type="button"
11+
class="oui-button oui-button_primary"
12+
oui-popover="This is an awesome popover content.">
13+
Click to toggle popover
14+
</button>
15+
```
16+
17+
### Using value of `title` attribute
18+
19+
```html:preview
20+
<button type="button"
21+
class="oui-button oui-button_primary"
22+
title="This is an awesome popover content."
23+
oui-popover>
24+
Click to toggle popover
25+
</button>
26+
```
27+
28+
### Using a template with `oui-popover-template` attribute
29+
30+
```html:preview
31+
<button type="button"
32+
class="oui-button oui-button_primary"
33+
oui-popover
34+
oui-popover-template="popover.html">
35+
Click to toggle popover
36+
</button>
37+
38+
<script type="text/ng-template" id="popover.html">
39+
<p ng-init="$ctrl.awesome = 'awesome'">This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
40+
<p><a href="#">The quick brown fox jumps over the lazy dog</a></p>
41+
</script>
42+
```
43+
44+
**Note**: This method use `ngInclude` to add the template in a popover. The content of your template will be compiled with a **new** scope. See [ngInclude](https://docs.angularjs.org/api/ng/directive/ngInclude).
45+
46+
### Using `oui-popover` component
847

948
```html:preview
1049
<oui-popover>
@@ -15,81 +54,83 @@
1554
</oui-popover>
1655
```
1756

57+
**Note**: This use is **deprecated** and will be removed in the next major version
58+
1859
### All directions
1960

2061
```html:preview
21-
<oui-popover placement="right">
22-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on right</button>
23-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
24-
</oui-popover>
25-
26-
<oui-popover placement="top">
27-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on top</button>
28-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
29-
</oui-popover>
30-
31-
<oui-popover placement="bottom">
32-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on bottom</button>
33-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
34-
</oui-popover>
35-
36-
<oui-popover placement="left">
37-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on left</button>
38-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
39-
</oui-popover>
62+
<button type="button" class="oui-button oui-button_primary"
63+
oui-popover="This is an awesome popover content."
64+
oui-popover-placement="right">
65+
Popover on right
66+
</button>
67+
68+
<button type="button" class="oui-button oui-button_primary"
69+
oui-popover="This is an awesome popover content."
70+
oui-popover-placement="top">
71+
Popover on top
72+
</button>
73+
74+
<button type="button" class="oui-button oui-button_primary"
75+
oui-popover="This is an awesome popover content."
76+
oui-popover-placement="bottom">
77+
Popover on bottom
78+
</button>
79+
80+
<button type="button" class="oui-button oui-button_primary"
81+
oui-popover="This is an awesome popover content."
82+
oui-popover-placement="left">
83+
Popover on left
84+
</button>
4085
```
4186

4287
### Alignments
4388

4489
```html:preview
45-
<oui-popover placement="bottom-start">
46-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align start</button>
47-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
48-
</oui-popover>
49-
50-
<oui-popover placement="bottom-end">
51-
<button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align end</button>
52-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
53-
</oui-popover>
90+
<button type="button" class="oui-button oui-button_primary"
91+
oui-popover="This is an awesome popover content."
92+
oui-popover-placement="bottom-start">
93+
Align start
94+
</button>
95+
96+
<button type="button" class="oui-button oui-button_primary"
97+
oui-popover="This is an awesome popover content."
98+
oui-popover-placement="bottom-end">
99+
Align end
100+
</button>
54101
```
55102

56103
### Help Popover
57104

58105
```html:preview
59-
<oui-popover>
60-
<button type="button" class="oui-popover-button" oui-popover-trigger></button>
61-
<oui-popover-content>This is an awesome popover content.</oui-popover-content>
62-
</oui-popover>
106+
<button type="button" class="oui-popover-button" oui-popover="This is an awesome popover content."></button>
63107
```
64108

65-
## API
109+
### Dynamic popover text
66110

67-
### oui-popover
68-
69-
The component for a popover.
70-
71-
Availability:
72-
73-
- Element
74-
75-
| Attribute | Type | Binding | Values | Default | Description
76-
| ---- | ---- | ---- | ---- | ---- | ----
77-
| `placement` | string | @? | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements) | `right` | modifier for alignment
78-
79-
### oui-popover-trigger
111+
```html:preview
112+
<input type="text" class="oui-input oui-input_inline"
113+
ng-init="$ctrl.popoverText = 'Lorem ipsum'"
114+
ng-model="$ctrl.popoverText"
115+
oui-popover="{{ $ctrl.popoverText }}">
116+
```
80117

81-
The directive that triggers the popover apparition.
118+
## API
82119

83-
Availability:
120+
| Attribute | Type | Binding | One-time Binding | Values | Default | Description
121+
| ---- | ---- | ---- | ---- | ---- | ---- | ----
122+
| `oui-popover` | string | @ | no | n/a | `title` attribute | popover content
123+
| `oui-popover-template` | string | @? | no | n/a | n/a | popover content template
124+
| `oui-popover-placement` | string | @? | yes | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements) | `right` | modifier for alignment
84125

85-
- Element
86-
- Attribute
126+
## Deprecated
87127

88-
### oui-popover-content
128+
### Attributes
89129

90-
The directive that wrap the popover content.
130+
* `placement`: Replaced by `oui-popover-placement` attribute
91131

92-
Availability:
132+
### Components
93133

94-
- Element
95-
- Attribute
134+
* `oui-popover`: Replaced by `oui-popover` attribute
135+
* `oui-popover-trigger`: Replaced by `oui-popover` attribute
136+
* `oui-popover-content`: Replaced by `oui-popover` attribute

‎packages/oui-popover/src/content/popover-content.directive.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import contentTemplate from "./popover-content.html";
22

3+
// Deprecated: Support only for old use
34
export default () => {
45
"ngInject";
56

@@ -13,6 +14,9 @@ export default () => {
1314
bindToController: true,
1415
scope: {},
1516
template: contentTemplate,
16-
transclude: true
17+
transclude: true,
18+
link: (scope, element) => {
19+
element.addClass("oui-popover");
20+
}
1721
};
1822
};

‎packages/oui-popover/src/content/popover-content.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<div class="oui-popover__content">
2-
<button type="button" class="oui-icon oui-icon-close_thin oui-popover__close-button" aria-label="Exit"
3-
ng-click="$ctrl.popover.closePopover()"></button>
4-
<div class="oui-popover__content-container" aria-labelledby="{{:: $ctrl.popover.id }}"
5-
ng-transclude></div>
6-
<div class="oui-popover__arrow" aria-hidden="true"></div>
7-
</div>
1+
<button type="button" class="oui-icon oui-icon-close_thin oui-popover__close-button" aria-label="Exit"
2+
ng-click="$ctrl.popover.closePopover()"></button>
3+
<div class="oui-popover__content-container" aria-labelledby="{{:: $ctrl.popover.id }}"
4+
ng-transclude></div>
5+
<div class="oui-popover__arrow" aria-hidden="true"></div>

‎packages/oui-popover/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Popover from "./popover.component.js";
1+
import Popover from "./popover.directive.js";
22
import PopoverContent from "./content/popover-content.directive";
33
import PopoverTrigger from "./trigger/popover-trigger.directive";
44

55
export default angular
66
.module("oui.popover", [])
7-
.component("ouiPopover", Popover)
7+
.directive("ouiPopover", Popover)
88
.directive("ouiPopoverContent", PopoverContent)
99
.directive("ouiPopoverTrigger", PopoverTrigger)
1010
.name;

0 commit comments

Comments
 (0)