From cc7b30a620369a1a18858cb1c8795eae0a3cfa3a Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 8 Mar 2022 08:39:19 -0800
Subject: [PATCH] fix(scss): inline `Popover` styles from carbon-components
 v10.47 (#1139)

---
 css/_popover.scss    | 322 +++++++++++++++++++++++++++++++++++++++++++
 css/all.scss         |   2 +-
 css/g10.scss         |   2 +-
 css/g100.scss        |   2 +-
 css/g80.scss         |   2 +-
 css/g90.scss         |   2 +-
 css/white.scss       |   2 +-
 scripts/build-css.js |   8 ++
 8 files changed, 336 insertions(+), 6 deletions(-)
 create mode 100644 css/_popover.scss

diff --git a/css/_popover.scss b/css/_popover.scss
new file mode 100644
index 00000000..c927ec8f
--- /dev/null
+++ b/css/_popover.scss
@@ -0,0 +1,322 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'carbon-components/scss/globals/scss/vars';
+@import 'carbon-components/scss/globals/scss/helper-mixins';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Popover component
+/// @access private
+/// @group components
+@mixin popover {
+  $popover-text-color: $text-01;
+  $popover-caret-offset: 1rem;
+  $popover-offset: 8px;
+
+  .#{$prefix}--popover {
+    // Specify the distance between the popover and the trigger. This value must
+    // have a unit otherwise the `calc()` expression will not work
+    // stylelint-disable-next-line length-zero-no-unit
+    --cds-popover-offset: 0rem;
+
+    // Specify the distance that the caret should be offset from the side of the
+    // popover when not centered
+    --cds-popover-caret-offset: 1rem;
+
+    position: absolute;
+    z-index: z('floating');
+    display: none;
+  }
+
+  // We use a pseudo element inside of the popover to create a space between the
+  // target and the popover. This helps in situations like tooltips where you do
+  // not want the tooltip to disappear when the user moves from the target to
+  // the popover.
+  .#{$prefix}--popover::before {
+    position: absolute;
+    display: block;
+    content: '';
+  }
+
+  .#{$prefix}--popover--open {
+    display: block;
+  }
+
+  .#{$prefix}--popover-contents {
+    @include box-shadow;
+
+    position: relative;
+    width: max-content;
+    max-width: rem(368px);
+    background-color: $ui-01;
+    border-radius: 2px;
+    color: $popover-text-color;
+  }
+
+  .#{$prefix}--popover--light .#{$prefix}--popover-contents {
+    background-color: $ui-background;
+  }
+
+  .#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
+    background-color: $inverse-02;
+    color: $inverse-01;
+  }
+
+  .#{$prefix}--popover--caret {
+    --cds-popover-offset: 0.5rem;
+  }
+
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
+    position: absolute;
+    display: inline-block;
+    width: rem(8px);
+    height: rem(8px);
+    background-color: inherit;
+    content: '';
+  }
+
+  .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
+    z-index: -1;
+    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  // The popover's tooltip is created by drawing two 8px x 8px boxes, one for
+  // rendering the box-shadow that the popover content uses and another for
+  // layering on top of this box to create an effect of a popover caret with a
+  // box-shadow. The layer with the box-shadow is rendered behind the popover
+  // content, while the other is rendered above of the popover content.
+
+  //-----------------------------------------------------------------------------
+  // Bottom
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--bottom {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom) {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  // Bottom left
+  .#{$prefix}--popover--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-left) {
+    top: 0;
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
+  }
+
+  // Bottom right
+  .#{$prefix}--popover--bottom-right {
+    right: 0;
+    bottom: 0;
+    transform: translateY(calc(100% + var(--cds-popover-offset)));
+  }
+
+  @include place-caret(bottom-right) {
+    top: 0;
+    right: 0;
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--bottom.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--cds-popover-offset);
+    transform: translateY(-100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // TOP
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top) {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+  }
+
+  // Top left
+  .#{$prefix}--popover--top-left {
+    bottom: 100%;
+    left: 0;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top-left) {
+    bottom: 0;
+    left: 0;
+    transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
+  }
+
+  // Top right
+  .#{$prefix}--popover--top-right {
+    right: 0;
+    bottom: 100%;
+    transform: translateY(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(top-right) {
+    right: 0;
+    bottom: 0;
+    transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--top-right.#{$prefix}--popover::before {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--cds-popover-offset);
+    transform: translateY(100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Right
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--right {
+    top: 50%;
+    left: 100%;
+    transform: translate(var(--cds-popover-offset), -50%);
+  }
+
+  @include place-caret(right) {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  // Right top
+  .#{$prefix}--popover--right-top {
+    top: 0;
+    left: 100%;
+    transform: translateX($popover-offset);
+  }
+
+  @include place-caret(right-top) {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
+  }
+
+  // Right bottom
+  .#{$prefix}--popover--right-bottom {
+    bottom: 0;
+    left: 100%;
+    transform: translateX(var(--cds-popover-offset));
+  }
+
+  @include place-caret(right-bottom) {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--right.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--cds-popover-offset);
+    transform: translateX(-100%);
+  }
+
+  //-----------------------------------------------------------------------------
+  // Left
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--left {
+    top: 50%;
+    right: 100%;
+    transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
+  }
+
+  @include place-caret(left) {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%) rotate(45deg);
+  }
+
+  // Left top
+  .#{$prefix}--popover--left-top {
+    top: 0;
+    right: 100%;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(left-top) {
+    top: 0;
+    right: 0;
+    transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
+  }
+
+  // Left bottom
+  .#{$prefix}--popover--left-bottom {
+    right: 100%;
+    bottom: 0;
+    transform: translateX(calc(-1 * var(--cds-popover-offset)));
+  }
+
+  @include place-caret(left-bottom) {
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
+      rotate(45deg);
+  }
+
+  // Hover area
+  .#{$prefix}--popover--left.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-top.#{$prefix}--popover::before,
+  .#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--cds-popover-offset);
+    transform: translateX(100%);
+  }
+}
+
+/// Helper for placing the caret inside a popover. The selectors here can get
+/// distracting in the main stylesheet, but ultimately they target the ::before
+/// and ::after pseudo-elements for the given direction. The @content block
+/// passed in should appropriately position the caret for the given direction.
+@mixin place-caret($direction) {
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
+    .#{$prefix}--popover-contents::before,
+  .#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
+    .#{$prefix}--popover-contents::after {
+    @content;
+  }
+}
+
+@include exports('popover') {
+  @include popover;
+}
diff --git a/css/all.scss b/css/all.scss
index 5f222bfa..7b0b2e18 100644
--- a/css/all.scss
+++ b/css/all.scss
@@ -22,7 +22,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 // The default theme is "white" (White)
 :root {
diff --git a/css/g10.scss b/css/g10.scss
index 5ac6db53..3c69ccb8 100644
--- a/css/g10.scss
+++ b/css/g10.scss
@@ -21,7 +21,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";
diff --git a/css/g100.scss b/css/g100.scss
index 5c81ecb9..0488eacb 100644
--- a/css/g100.scss
+++ b/css/g100.scss
@@ -21,7 +21,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";
diff --git a/css/g80.scss b/css/g80.scss
index 8f6a46bb..7af28262 100644
--- a/css/g80.scss
+++ b/css/g80.scss
@@ -21,7 +21,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";
diff --git a/css/g90.scss b/css/g90.scss
index 52c648d9..1defac45 100644
--- a/css/g90.scss
+++ b/css/g90.scss
@@ -21,7 +21,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";
diff --git a/css/white.scss b/css/white.scss
index 7fbeb5c9..823fbfd2 100644
--- a/css/white.scss
+++ b/css/white.scss
@@ -21,7 +21,7 @@ $css--plex: true;
 @import "carbon-components/src/components/tag/tag";
 @import "carbon-components/src/components/notification/inline-notification";
 @import "carbon-components/src/components/notification/toast-notification";
-@import "carbon-components-10.47/src/components/popover/popover";
+@import "./popover";
 
 @import "carbon-components/scss/globals/scss/_css--reset";
 @import "carbon-components/scss/globals/scss/_css--font-face";
diff --git a/scripts/build-css.js b/scripts/build-css.js
index 378109af..ff9a9fdf 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -5,6 +5,14 @@ const postcss = require("postcss");
 const path = require("path");
 
 (async () => {
+  const popover = fs.readFileSync(
+    "node_modules/carbon-components-10.47/src/components/popover/_popover.scss",
+    "utf-8"
+  );
+  const popover_mod = popover.replace(/..\/..\//g, "carbon-components/scss/");
+
+  fs.writeFileSync("css/_popover.scss", popover_mod);
+
   const scss = fs
     .readdirSync("css")
     .filter((file) => file.endsWith(".scss"))