Add modal popup style, fix z-index, fix opacity prop

infor-design · May 19, 2021 · 4e2000b · 4e2000b
1 parent c8fbbd2
commit 4e2000b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git a/src/ids-base/ids-constants.js b/src/ids-base/ids-constants.js
@@ -72,7 +72,7 @@ export const props = {
   MULTIPLE: 'multiple',
   NO_MARGINS: 'no-margins',
   NO_TEXT_ELLIPSIS: 'no-text-ellipsis',
-  OPACTIY: 'opacity',
+  OPACITY: 'opacity',
   OVERFLOW: 'overflow',
   PLACEHOLDER: 'placeholder',
   PLACEMENT: 'placement',

diff --git a/src/ids-modal/ids-modal-z-counter.js b/src/ids-modal/ids-modal-z-counter.js
@@ -3,7 +3,7 @@
  */
 class IdsModalZCounter {
   constructor() {
-    this.zCounter = 1000;
+    this.zCounter = 1020;
   }
 
   increment() {

diff --git a/src/ids-modal/ids-modal.js b/src/ids-modal/ids-modal.js
@@ -80,7 +80,7 @@ class IdsModal extends mix(IdsElement).with(...appliedMixins) {
   connectedCallback() {
     super.connectedCallback();
 
-    this.popup.type = 'menu';
+    this.popup.type = 'modal';
     this.popup.animated = true;
     this.popup.animationStyle = 'scale-in';
     this.setAttribute('role', 'dialog');

diff --git a/src/ids-popup/ids-popup.js b/src/ids-popup/ids-popup.js
@@ -37,7 +37,7 @@ const ANIMATION_STYLES = [
 const ARROW_TYPES = ['none', 'bottom', 'top', 'left', 'right'];
 
 // Types of Popups
-const TYPES = ['none', 'menu', 'menu-alt', 'tooltip', 'tooltip-alt'];
+const TYPES = ['none', 'menu', 'menu-alt', 'modal', 'tooltip', 'tooltip-alt'];
 
 // Properties exposed with getters/setters
 // safeSet/RemoveAttribute also use these so we pull them out

diff --git a/src/ids-popup/ids-popup.scss b/src/ids-popup/ids-popup.scss
@@ -298,6 +298,21 @@
     @include text-12();
     @include text-black();
   }
+
+  // style: "modal"
+  &.modal {
+    @include antialiased();
+    @include bg-white();
+    @include border-1();
+    @include border-solid();
+    @include font-sans();
+    @include p-8();
+    @include rounded-default();
+    @include shadow();
+
+    border-color: var(--ids-color-palette-slate-30);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
 }
 
 .content-wrapper {