Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component: Tooltips #164

Closed
wants to merge 34 commits into from
Closed

Component: Tooltips #164

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
97645c4
tooltip start
driskull Oct 3, 2019
0aa2c43
tooltip progress
driskull Oct 3, 2019
f391f0b
progress
driskull Oct 3, 2019
d52c99e
arrow setup
driskull Oct 3, 2019
9b62f48
tests
driskull Oct 3, 2019
96948b8
cleanup
driskull Oct 3, 2019
6aef4f8
ready for styling
driskull Oct 3, 2019
28ef028
update demo
driskull Oct 3, 2019
17c2111
review fix
driskull Oct 4, 2019
ac750bc
use slot for image
driskull Oct 4, 2019
746d71c
update readme/test
driskull Oct 4, 2019
3b9b89c
add slot doc
driskull Oct 4, 2019
591e72c
image demo
driskull Oct 4, 2019
aa665bb
some styling updates
Oct 4, 2019
5e6d9e7
Added dark theme
Oct 4, 2019
8f746ec
updated background var
Oct 4, 2019
688638d
presentation cleanup
Oct 4, 2019
28ef8ea
fit kitty.
driskull Oct 4, 2019
53df32d
get arrow showing
driskull Oct 4, 2019
7066381
arrow variable
driskull Oct 4, 2019
07785ae
fix BG var
driskull Oct 4, 2019
44325a6
margin for pointer.
driskull Oct 4, 2019
999bd34
placement options
driskull Oct 4, 2019
ad88e74
fix test.
driskull Oct 4, 2019
0d539f6
popover arrow styles.
driskull Oct 5, 2019
abe8004
DRY css
driskull Oct 7, 2019
0e1b1dd
Update readme.md
driskull Oct 7, 2019
dd46d07
2px border radius
driskull Oct 7, 2019
c794d03
simplify tooltip to just hover
driskull Oct 9, 2019
c2b30db
Merge branch 'master' into dris0000/calcite-tooltip
driskull Oct 9, 2019
eb6b2a4
remove module
driskull Oct 9, 2019
5d22e3d
Updates css, removes stale classes
macandcheese Oct 10, 2019
20544b7
Removed unused CSS variable
Oct 10, 2019
1bd92b6
Removed hover and pressed states
Oct 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 14 additions & 33 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
"popper.js": "1.15.0"
},
"devDependencies": {
"@esri/calcite-base": "^1.0.0",
"@esri/calcite-colors": "^1.3.1",
"@esri/calcite-base": "^1.1.0",
"@esri/calcite-colors": "^1.4.1",
"@esri/calcite-ui-icons": "^2.0.1",
"@stencil/core": "^1.2.2",
"@stencil/sass": "^1.0.1",
Expand Down
1 change: 1 addition & 0 deletions src/assets/styles/includes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "./node_modules/@esri/calcite-colors/colors.scss";
@import "./node_modules/@esri/calcite-base/dist/_index.scss";
@import "popper";

:host([hidden]) {
display: none;
Expand Down
126 changes: 126 additions & 0 deletions src/assets/styles/popper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
$pointer_arrow_size: 5px;

@mixin popperPointer() {
:host {
margin: $pointer_arrow_size;
}

.container:after {
position: absolute;
content: " ";
font-size: 0;
line-height: 0;
}

:host([x-placement="top-start"]) .container:after {
top: 100%;
left: $pointer_arrow_size;
width: 0;
border-top: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="top"]) .container:after {
top: 100%;
left: 50%;
margin-left: -$pointer_arrow_size;
width: 0;
border-top: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="top-end"]) .container:after {
top: 100%;
right: $pointer_arrow_size;
width: 0;
border-top: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="right-start"]) .container:after {
right: 100%;
top: $pointer_arrow_size;
width: 0;
border-right: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}

:host([x-placement="right"]) .container:after {
right: 100%;
top: 50%;
margin-top: -$pointer_arrow_size;
width: 0;
border-right: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}

:host([x-placement="right-end"]) .container:after {
right: 100%;
bottom: $pointer_arrow_size;
width: 0;
border-right: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}

:host([x-placement="bottom-start"]) .container:after {
bottom: 100%;
left: $pointer_arrow_size;
width: 0;
border-bottom: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="bottom"]) .container:after {
bottom: 100%;
left: 50%;
margin-left: -$pointer_arrow_size;
width: 0;
border-bottom: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="bottom-end"]) .container:after {
bottom: 100%;
right: $pointer_arrow_size;
width: 0;
border-bottom: $pointer_arrow_size solid var(--calcite-popper-background);
border-right: $pointer_arrow_size solid transparent;
border-left: $pointer_arrow_size solid transparent;
}

:host([x-placement="left-start"]) .container:after {
left: 100%;
top: $pointer_arrow_size;
width: 0;
border-left: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}

:host([x-placement="left"]) .container:after {
left: 100%;
top: 50%;
margin-top: -$pointer_arrow_size;
width: 0;
border-left: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}

:host([x-placement="left-end"]) .container:after {
left: 100%;
bottom: $pointer_arrow_size;
width: 0;
border-left: $pointer_arrow_size solid var(--calcite-popper-background);
border-top: $pointer_arrow_size solid transparent;
border-bottom: $pointer_arrow_size solid transparent;
}
}
14 changes: 14 additions & 0 deletions src/components/calcite-popover/calcite-popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,29 @@
:host {
--calcite-popover-background: #{$ui-foreground};
--calcite-popper-background: #{$ui-foreground};
--calcite-popover-primary-text: #{$ui-text-1};
display: block;
position: absolute;
z-index: 999;
top: -999999px;
left: -999999px;
}

:host([theme="dark"]) {
--calcite-popover-background: #{$ui-foreground-dark};
--calcite-popper-background: #{$ui-foreground-dark};
--calcite-popover-primary-text: #{$ui-text-1-dark};
}

.container {
visibility: hidden;
box-shadow: $shadow-2;
background: var(--calcite-popover-background);
color: var(--calcite-popover-primary-text);
}

.container--open {
visibility: visible;
}

@include popperPointer();
6 changes: 3 additions & 3 deletions src/components/calcite-popover/calcite-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class CalcitePopover {
}

/**
* Determines where the element will be positioned.
* Determines where the component will be positioned relative to the referenceElement.
* horizontal: Positioned to the left or right of the referenceElement.
* vertical: Positioned above or below the referenceElement.
*/
Expand Down Expand Up @@ -91,10 +91,10 @@ export class CalcitePopover {

@Element() el: HTMLCalcitePopoverElement;

@State() popper: Popper;

@State() _referenceElement: HTMLElement = this.getReferenceElement();

popper: Popper;

// --------------------------------------------------------------------------
//
// Lifecycle
Expand Down
14 changes: 7 additions & 7 deletions src/components/calcite-popover/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
| `open` | `open` | Display and position the component. | `boolean` | `false` |
| `placement` | `placement` | Determines where the element will be positioned. horizontal: Positioned to the left or right of the referenceElement. vertical: Positioned above or below the referenceElement. | `"horizontal" \| "vertical"` | `"horizontal"` |
| `referenceElement` | `reference-element` | Reference HTMLElement used to position this component according to the placement property. | `HTMLElement \| string` | `undefined` |
| `xOffset` | `x-offset` | Offset the position of the popover in the horizontal direction. | `number` | `0` |
| `yOffset` | `y-offset` | Offset the position of the popover in the vertical direction. | `number` | `0` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------- |
| `open` | `open` | Display and position the component. | `boolean` | `false` |
| `placement` | `placement` | Determines where the component will be positioned relative to the referenceElement. horizontal: Positioned to the left or right of the referenceElement. vertical: Positioned above or below the referenceElement. | `"horizontal" \| "vertical"` | `"horizontal"` |
| `referenceElement` | `reference-element` | Reference HTMLElement used to position this component according to the placement property. | `HTMLElement \| string` | `undefined` |
| `xOffset` | `x-offset` | Offset the position of the popover in the horizontal direction. | `number` | `0` |
| `yOffset` | `y-offset` | Offset the position of the popover in the vertical direction. | `number` | `0` |


## Methods
Expand Down
Loading