fix(tooltip): correct arrow orientation, remove popper-arrow-rotate

adobe · Jan 28, 2021 · fcd6ea2 · fcd6ea2
1 parent 32e8573
commit fcd6ea2
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 146 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ yarn-error.log
 .npmrc
 .tsbuildinfo
 .rush
+.devcontainer
 
 documentation/components/searchIndex.json
 
@@ -56,4 +57,4 @@ TESTS.xml
 test/visual/screenshots-baseline/ci/userDataDir/
 
 package-lock.json
-custom-elements.json
+custom-elements.json
diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts
@@ -10,23 +10,23 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { createPopper, Instance, maxSize, applyMaxSize } from './popper.js';
 import {
-    Placement,
-    OverlayOpenDetail,
-    TriggerInteractions,
-} from './overlay-types.js';
-import { Scale, Color } from '@spectrum-web-components/theme';
-import {
-    html,
-    SpectrumElement,
-    TemplateResult,
     CSSResultArray,
+    html,
+    ifDefined,
     property,
     PropertyValues,
-    ifDefined,
+    SpectrumElement,
+    TemplateResult,
 } from '@spectrum-web-components/base';
+import { Color, Scale } from '@spectrum-web-components/theme';
 import styles from './active-overlay.css.js';
+import {
+    OverlayOpenDetail,
+    Placement,
+    TriggerInteractions,
+} from './overlay-types.js';
+import { applyMaxSize, createPopper, Instance, maxSize } from './popper.js';
 
 export interface PositionResult {
     arrowOffsetLeft: number;

diff --git a/packages/overlay/src/popper-arrow-rotate.ts b/packages/overlay/src/popper-arrow-rotate.ts
diff --git a/packages/overlay/src/popper.ts b/packages/overlay/src/popper.ts
@@ -15,18 +15,16 @@ governing permissions and limitations under the License.
 
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../local.d.ts" />
+import type { Placement } from '@popperjs/core/dist/esm/enums.js';
+import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
+import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
+import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
+import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
 import {
-    popperGenerator,
     defaultModifiers,
+    popperGenerator,
 } from '@popperjs/core/dist/esm/popper-lite.js';
 import type { Instance } from '@popperjs/core/dist/esm/types.js';
-import type { Placement } from '@popperjs/core/dist/esm/enums.js';
-
-import flip from '@popperjs/core/dist/esm/modifiers/flip.js';
-import preventOverflow from '@popperjs/core/dist/esm/modifiers/preventOverflow.js';
-import arrow from '@popperjs/core/dist/esm/modifiers/arrow.js';
-import offset from '@popperjs/core/dist/esm/modifiers/offset.js';
-import { computeArrowRotateStyles } from './popper-arrow-rotate.js';
 import maxSize from 'popper-max-size-modifier';
 import { applyMaxSize } from './apply-max-size.js';
 
@@ -37,7 +35,6 @@ export const createPopper = popperGenerator({
         preventOverflow,
         arrow,
         offset,
-        computeArrowRotateStyles,
     ],
 });
 

diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts
@@ -11,17 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
+    CSSResultArray,
     html,
+    nothing,
+    property,
     SpectrumElement,
-    CSSResultArray,
     TemplateResult,
-    property,
-    nothing,
 } from '@spectrum-web-components/base';
-
 import {
-    Placement,
     OverlayDisplayQueryDetail,
+    Placement,
 } from '@spectrum-web-components/overlay';
 import popoverStyles from './popover.css.js';
 
@@ -53,24 +52,14 @@ export class Popover extends SpectrumElement {
             <div id="tip">
                 <svg
                     xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-top-bottom"
+                    class="tip"
                     viewBox="0 0 24 12"
                 >
                     <path
                         class="triangle"
                         d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0"
                     ></path>
                 </svg>
-                <svg
-                    xmlns="http://www.w3.org/svg/2000"
-                    class="tip triangle-left-right"
-                    viewBox="0 0 12 24"
-                >
-                    <path
-                        class="triangle"
-                        d="M 0 0.7071067811865476 L 10.707106781186548 11.414213562373096 L 0 22.121320343559645"
-                    ></path>
-                </svg>
             </div>
         `;
     }

diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css
@@ -64,28 +64,41 @@ governing permissions and limitations under the License.
     );
 }
 
+/* provide dimensions */
+
 .tip {
-    display: flex;
+    width: var(--sp-popover-tip-size);
+    height: calc(var(--sp-popover-tip-size) / 2);
+    position: absolute;
 }
 
-:host([placement*='bottom']) .tip,
+/* override #tip orientation so we can orient on .tip instead */
+
+:host([placement*='right']) #tip {
+    transform: none;
+}
+
+:host([placement*='bottom']) #tip {
+    transform: none;
+}
+
+/* orient the tip */
+
 :host([placement*='top']) .tip {
-    width: var(--sp-popover-tip-size);
-    height: calc(var(--sp-popover-tip-size) / 2);
+    top: 100%;
 }
 
-:host([placement*='right']) .tip,
-:host([placement*='left']) .tip {
-    height: var(--sp-popover-tip-size);
-    width: calc(var(--sp-popover-tip-size) / 2);
+:host([placement*='bottom']) .tip {
+    bottom: 100%;
+    transform: scaleY(-1);
 }
 
-:host([placement*='bottom']) .triangle-left-right,
-:host([placement*='top']) .triangle-left-right {
-    display: none;
+:host([placement*='left']) .tip {
+    transform-origin: 100% 0%;
+    transform: rotate(-90deg) translateY(-200%);
 }
 
-:host([placement*='right']) .triangle-top-bottom,
-:host([placement*='left']) .triangle-top-bottom {
-    display: none;
+:host([placement*='right']) .tip {
+    transform-origin: 0% 0%;
+    transform: rotate(90deg);
 }
diff --git a/packages/tooltip/src/tooltip.css b/packages/tooltip/src/tooltip.css
@@ -12,26 +12,72 @@ governing permissions and limitations under the License.
 
 @import './spectrum-tooltip.css';
 
-/* This is getting pulled out by PostCSS, maybe... */
+/* move the #tip styling from spectrum-css onto a pseudo-element,
+   replacing rotations with mirrors of two different border setups (horizontal vs vertical) */
+
 #tip {
-    border-right-color: transparent;
-    border-left-color: transparent;
-    border-bottom-color: transparent;
+    border: none;
+}
+
+:host([placement*='right']) #tip,
+:host([placement*='left']) #tip,
+:host([placement*='bottom']) #tip {
+    transform: none;
 }
 
-:host([data-popper-placement]) {
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    margin-top: 0;
+#tip:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: solid
+        var(
+            --spectrum-tooltip-tip-height,
+            var(--spectrum-global-dimension-size-50)
+        )
+        transparent;
+    border-top-color: var(
+        --spectrum-tooltip-background-color,
+        var(--spectrum-global-color-static-gray-700)
+    );
+}
+
+/* orient the tip */
+
+:host([placement*='bottom']) #tip:after {
+    bottom: 100%;
+    transform: scaleY(-1);
+}
+
+:host([placement*='left']) #tip:after {
+    left: 100%;
+    transform: rotate(-90deg);
+}
+
+:host([placement*='right']) #tip:after {
+    right: 100%;
+    transform: rotate(90deg);
+}
+
+/* color the tip the correct variant color on either a vertical or horizontal axis */
+
+:host([variant='negative']) #tip:after {
+    border-top-color: var(
+        --spectrum-tooltip-negative-background-color,
+        var(--spectrum-global-color-static-red-700)
+    );
 }
 
-:host([data-popper-placement='left']) #tip,
-:host([data-popper-placement='right']) #tip {
-    margin-top: 0;
+:host([variant='info']) #tip:after {
+    border-top-color: var(
+        --spectrum-tooltip-info-background-color,
+        var(--spectrum-global-color-static-blue-700)
+    );
 }
 
-:host([data-popper-placement*='top']) #tip,
-:host([data-popper-placement*='bottom']) #tip {
-    margin-left: 0;
+:host([variant='positive']) #tip:after {
+    border-top-color: var(
+        --spectrum-tooltip-positive-background-color,
+        var(--spectrum-global-color-static-green-700)
+    );
 }