Merge pull request #2198 from exadel-inc/feat/esl-popup-css-variables

ESLPopup: rework styles to use CSS variables
exadel-inc · Feb 5, 2024 · 7f7ec68 · 7f7ec68
2 parents ba7e184 + 8b9b71b
commit 7f7ec68
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 78 deletions.
diff --git a/site/src/navigation/header/header.less b/site/src/navigation/header/header.less
@@ -85,11 +85,8 @@
   }
 
   &-share-popup.esl-popup {
-    &,
-    & > .esl-popup-arrow {
-      background: @landing-bg-color;
-      border-color: gray;
-    }
+    --esl-popup-background-color: @landing-bg-color;
+    --esl-popup-border-color: gray;
     .esl-share-list {
       margin: 0.75rem;
       gap: 0.25rem;

diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md
@@ -129,3 +129,15 @@ When you add a placeholder to the DOM tree, all attributes are copied from the o
 
  - `from` - static method that creates a placeholder for a given popup element
  - `$origin` - the original element that was here before it was replaced by a placeholder
+
+### Styles
+
+ESLPopup is a non-trivial component that calculates its position depending on user settings. So for styling, it would be advisable to use the basic styles that we provide with our library. You can easily override most of the rules from the base styles. Some properties are calculated, so you can't override them directly, but it is possible to set the value through CSS variables. For now, you can use the following variables:
+
+- `--esl-popup-arrow-size` - arrow size ('20px' by default)
+- `--esl-popup-background-color` - background color of the popup ('#fff' by default)
+- `--esl-popup-border-color` - popup border color ('#dbdbdb' by default)
+- `--esl-popup-border-width` - border width of the popup ('1px' by default)
+- `--esl-popup-z-index` - z-index of the popup ('999' by default)
+
+Or if you are using the LESS preprocessor, you can optionally use mixins instead of CSS variables. However, we would recommend using the general approach with CSS variables.
diff --git a/src/modules/esl-popup/core.less b/src/modules/esl-popup/core.less
@@ -1,7 +1 @@
-@import 'core.mixin.less';
-
-esl-popup:not(.esl-popup) {
-  display: none;
-}
-
-.esl-popup-init();
+@import './core/esl-popup.less';
diff --git a/src/modules/esl-popup/core.mixin.less b/src/modules/esl-popup/core.mixin.less
@@ -1 +1 @@
-@import './core/esl-popup.less';
+@import './core/esl-popup.mixin.less';
diff --git a/src/modules/esl-popup/core/esl-popup.less b/src/modules/esl-popup/core/esl-popup.less
@@ -1,95 +1,84 @@
-.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
-                      @popupArrowSize: 20px,
-                      @popupBackgroundColor: #FFF,
-                      @popupBorderColor: #DBDBDB,
-                      @popupBorderWidth: 1px) {
-  @popupArrowHalf: (@popupArrowSize / 2);
-  @popupArrowShift: (
-    @popupArrowSize * 0.2071 - @popupBorderWidth
-  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+esl-popup:not(.esl-popup) {
+  display: none;
+}
+
+.esl-popup {
+  --_border-width: var(--esl-popup-border-width, 1px);
+  --_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0.5s 0.2s;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  border: var(--_border);
+  background: var(--esl-popup-background-color, #fff);
+  cursor: default;
+  will-change: auto;
+
+  &[open] {
+    z-index: var(--esl-popup-z-index, 999);
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.15s,
+      transform 0.2s;
+  }
 
-  .@{arrowClassName} {
+  &:not([open]) {
+    display: none;
+  }
+
+  .esl-popup-arrow {
+    --_size: var(--esl-popup-arrow-size, 20px);
+    --_half: calc(var(--_size) / 2);
+    --_shift: calc(0.2071 * var(--_size) - var(--_border-width));
+    // 0.2071 = (sqrt(2) - 1) / 2
     position: absolute;
-    top: (-@popupArrowHalf - @popupBorderWidth);
+    top: calc(-1 * var(--_half) - var(--_border-width));
     bottom: 100%;
     z-index: -1;
     transform: rotate(45deg);
-    width: @popupArrowSize;
-    height: @popupArrowSize;
-    margin-left: @popupArrowShift;
-    border-left: @popupBorderWidth solid @popupBorderColor;
-    border-top: @popupBorderWidth solid @popupBorderColor;
-    background: @popupBackgroundColor;
+    width: var(--_size);
+    height: var(--_size);
+    margin-left: var(--_shift);
+    border-left: var(--_border);
+    border-top: var(--_border);
+    background: inherit;
   }
 
   &[placed-at='top'] {
-    .@{arrowClassName} {
+    .esl-popup-arrow {
       top: auto;
-      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      bottom: calc(-1 * var(--_half) - var(--_border-width));
       transform: rotate(225deg);
     }
   }
 
   &[placed-at='left'] {
-    .@{arrowClassName} {
-      right: (-@popupArrowHalf - @popupBorderWidth);
+    .esl-popup-arrow {
+      right: calc(-1 * var(--_half) - var(--_border-width));
       left: auto;
       transform: rotate(135deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &[placed-at='right'] {
-    .@{arrowClassName} {
-      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+    .esl-popup-arrow {
+      left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift));
       right: auto;
       transform: rotate(315deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &.disable-arrow {
-    .@{arrowClassName} {
-      display: none;
-    }
-  }
-}
-
-.esl-popup-init(@className: esl-popup,
-                @arrowClassName: esl-popup-arrow,
-                @arrowSize: 20px,
-                @backgroundColor: #FFF,
-                @borderColor: #DBDBDB,
-                @borderWidth: 1px,
-                @zIndex: 999) {
-  .@{className} {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: block;
-    opacity: 0;
-    visibility: hidden;
-    transition: visibility 0.5s 0.2s;
-    box-sizing: border-box;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-    border: @borderWidth solid @borderColor;
-    background: @backgroundColor;
-    cursor: default;
-    will-change: auto;
-
-    &[open] {
-      z-index: @zIndex;
-      opacity: 1;
-      visibility: visible;
-      transition:
-        opacity 0.15s,
-        transform 0.2s;
-    }
-
-    &:not([open]) {
+    .esl-popup-arrow {
       display: none;
     }
-
-    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
   }
 }
diff --git a/src/modules/esl-popup/core/esl-popup.mixin.less b/src/modules/esl-popup/core/esl-popup.mixin.less
@@ -0,0 +1,95 @@
+.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
+                      @popupArrowSize: 20px,
+                      @popupBackgroundColor: #FFF,
+                      @popupBorderColor: #DBDBDB,
+                      @popupBorderWidth: 1px) {
+  @popupArrowHalf: (@popupArrowSize / 2);
+  @popupArrowShift: (
+    @popupArrowSize * 0.2071 - @popupBorderWidth
+  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+
+  .@{arrowClassName} {
+    position: absolute;
+    top: (-@popupArrowHalf - @popupBorderWidth);
+    bottom: 100%;
+    z-index: -1;
+    transform: rotate(45deg);
+    width: @popupArrowSize;
+    height: @popupArrowSize;
+    margin-left: @popupArrowShift;
+    border-left: @popupBorderWidth solid @popupBorderColor;
+    border-top: @popupBorderWidth solid @popupBorderColor;
+    background: @popupBackgroundColor;
+  }
+
+  &[placed-at='top'] {
+    .@{arrowClassName} {
+      top: auto;
+      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      transform: rotate(225deg);
+    }
+  }
+
+  &[placed-at='left'] {
+    .@{arrowClassName} {
+      right: (-@popupArrowHalf - @popupBorderWidth);
+      left: auto;
+      transform: rotate(135deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &[placed-at='right'] {
+    .@{arrowClassName} {
+      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+      right: auto;
+      transform: rotate(315deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &.disable-arrow {
+    .@{arrowClassName} {
+      display: none;
+    }
+  }
+}
+
+.esl-popup-init(@className: esl-popup,
+                @arrowClassName: esl-popup-arrow,
+                @arrowSize: 20px,
+                @backgroundColor: #FFF,
+                @borderColor: #DBDBDB,
+                @borderWidth: 1px,
+                @zIndex: 999) {
+  .@{className} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s 0.2s;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+    border: @borderWidth solid @borderColor;
+    background: @backgroundColor;
+    cursor: default;
+    will-change: auto;
+
+    &[open] {
+      z-index: @zIndex;
+      opacity: 1;
+      visibility: visible;
+      transition:
+        opacity 0.15s,
+        transform 0.2s;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import './core/esl-popup.less';
		@import './core/esl-popup.mixin.less';