@dialpad/dialtone 6.17.0 → 6.19.0-beta.2

package/CHANGELOG.md

@@ -1,8 +1,65 @@
+# [6.19.0-beta.2](https://github.com/dialpad/dialtone/compare/v6.19.0-beta.1...v6.19.0-beta.2) (2022-03-01)
+
+
+### Bug Fixes
+
+* remove z-index from content ([38bd70a](https://github.com/dialpad/dialtone/commit/38bd70aae06f947698e5f90d2043af5d02f23da1))
+
+# [6.19.0-beta.1](https://github.com/dialpad/dialtone/compare/v6.18.0...v6.19.0-beta.1) (2022-02-25)
+
+
+### Bug Fixes
+
+* add justify-content flex-end to header/footer ([6547fea](https://github.com/dialpad/dialtone/commit/6547fea38d80696629f1a50f91cd195c789607e4))
+* make z-index work on all children ([7aa3fd1](https://github.com/dialpad/dialtone/commit/7aa3fd1a54c058a5db096d72f46869506e41779c))
+* popover example page issues ([574dee2](https://github.com/dialpad/dialtone/commit/574dee2fe898ac188405cc18683f9f3f6edb2076))
+* remove side padding from header footer ([e0abbcf](https://github.com/dialpad/dialtone/commit/e0abbcf74c9417e84b96d2541140254c59a10153))
+
+
+### Features
+
+* add popover css and documentation ([df3d204](https://github.com/dialpad/dialtone/commit/df3d2049a8391918e72c912e79da00b00e00bb07))
+* add transparent modal ([488f46a](https://github.com/dialpad/dialtone/commit/488f46a6c7995b4e67c40efb553e67fa7194412c))
+* popover css and documentation ([#540](https://github.com/dialpad/dialtone/issues/540)) ([2c4dc58](https://github.com/dialpad/dialtone/commit/2c4dc58404944036693816c23b69b0453f38399f))
+
+# [6.15.0-beta.6](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.5...v6.15.0-beta.6) (2022-02-17)
+
+
+### Bug Fixes
+
+* add justify-content flex-end to header/footer ([6547fea](https://github.com/dialpad/dialtone/commit/6547fea38d80696629f1a50f91cd195c789607e4))
+
+# [6.15.0-beta.5](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.4...v6.15.0-beta.5) (2022-02-16)
+
+
+### Bug Fixes
+
+* popover example page issues ([574dee2](https://github.com/dialpad/dialtone/commit/574dee2fe898ac188405cc18683f9f3f6edb2076))
+# [6.18.0](https://github.com/dialpad/dialtone/compare/v6.17.0...v6.18.0) (2022-02-22)
+
+
+### Features
+
+* add transparent modal ([488f46a](https://github.com/dialpad/dialtone/commit/488f46a6c7995b4e67c40efb553e67fa7194412c))
+
+# [6.15.0-beta.4](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.3...v6.15.0-beta.4) (2022-02-15)
+* add icons for new call workflow (Phase 1) ([#554](https://github.com/dialpad/dialtone/issues/554)) ([e23f1de](https://github.com/dialpad/dialtone/commit/e23f1dee4c3c05c136f0b10491ca60e4e1abde21))
+
 # [6.17.0](https://github.com/dialpad/dialtone/compare/v6.16.0...v6.17.0) (2022-02-17)
 
 
 ### Features
 
+* popover css and documentation ([#540](https://github.com/dialpad/dialtone/issues/540)) ([2c4dc58](https://github.com/dialpad/dialtone/commit/2c4dc58404944036693816c23b69b0453f38399f))
+
+# [6.15.0-beta.3](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.2...v6.15.0-beta.3) (2022-02-01)
+
+
+### Bug Fixes
+
+* make z-index work on all children ([7aa3fd1](https://github.com/dialpad/dialtone/commit/7aa3fd1a54c058a5db096d72f46869506e41779c))
+
+# [6.15.0-beta.2](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.1...v6.15.0-beta.2) (2022-02-01)
 * add icon only button styles ([#550](https://github.com/dialpad/dialtone/issues/550)) ([4116700](https://github.com/dialpad/dialtone/commit/41167009d1d56ee7b4ddf94ffc320ee1f9e6cb19))
 
 # [6.16.0](https://github.com/dialpad/dialtone/compare/v6.15.0...v6.16.0) (2022-02-11)
@@ -17,11 +74,15 @@
 
 ### Bug Fixes
 
+* remove side padding from header footer ([e0abbcf](https://github.com/dialpad/dialtone/commit/e0abbcf74c9417e84b96d2541140254c59a10153))
+
+# [6.15.0-beta.1](https://github.com/dialpad/dialtone/compare/v6.14.0...v6.15.0-beta.1) (2022-02-01)
 * uc-11528 updating background replacement icon in dialtone ([#541](https://github.com/dialpad/dialtone/issues/541)) ([038bd4e](https://github.com/dialpad/dialtone/commit/038bd4e9c9fbd489445233972dce718559fa2f1e))
 
 
 ### Features
 
+* add popover css and documentation ([df3d204](https://github.com/dialpad/dialtone/commit/df3d2049a8391918e72c912e79da00b00e00bb07))
 * add a few social icons for contact center ([#543](https://github.com/dialpad/dialtone/issues/543)) ([7c1e0a9](https://github.com/dialpad/dialtone/commit/7c1e0a9ddef5acece52ecbca11f1f1b3eb84a9c4))
 * **device settings:** gear icon for device settings ([#539](https://github.com/dialpad/dialtone/issues/539)) ([805f17f](https://github.com/dialpad/dialtone/commit/805f17ff777419877cf36f49a24b75982bc1eac4))
 

package/lib/build/less/components/modal.less

@@ -50,6 +50,32 @@
     will-change: visibility, z-index, opacity;
 }
 
+.d-modal--transparent {
+  //  Component CSS Vars
+  //  ------------------------------------------------------------------------
+  --modal--bgc: hsla(var(--black-900-hsl) ~' / ' 85%);
+  --modal-dialog--bgc: var(--white);
+  --modal-dialog--fc: var(--black-700);
+  --modal-header--fc: var(--black-800);
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--zi-hide);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--su32);
+  background-color: var(--d-bgc-transparent);
+  backface-visibility: hidden;
+  visibility: hidden;
+  opacity: 0;
+  will-change: visibility, z-index, opacity;
+}
+
 //  $$  MODAL DIALOG
 //  ----------------------------------------------------------------------------
 .d-modal__dialog {
@@ -78,7 +104,9 @@
 //  $$   MAKE THEM APPEAR
 //  ----------------------------------------------------------------------------
 .d-modal[aria-hidden='false'],
-.d-modal[aria-hidden='false'] .d-modal__dialog {
+.d-modal[aria-hidden='false'] .d-modal__dialog,
+.d-modal--transparent[aria-hidden='false'],
+.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
   z-index: var(--zi-modal);
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   visibility: visible;

package/lib/build/less/components/popover.less

@@ -0,0 +1,80 @@
+//
+//  DIALTONE
+//  COMPONENTS: POPOVER
+//
+//  These are popover classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/popover
+//
+//  TABLE OF CONTENTS
+//  • POPOVER
+//  • POPOVER DIALOG
+//    - Base dialog style
+//    - Content
+//    - Header / Footer
+
+
+//  $  POPOVER
+//  ----------------------------------------------------------------------------
+
+//  $  POPOVER DIALOG
+//  ----------------------------------------------------------------------------
+.d-popover__dialog {
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: auto;
+  background-color: var(--white);
+  border-color: var(--black-100);
+  border-radius: var(--su8);
+  box-shadow: var(--bs-card);
+}
+
+// to be set on the dialog when it is modal
+.d-popover__dialog--modal {
+  z-index: var(--zi-modal-element);
+}
+
+// to be set on the anchor container whenever the modal dialog is opened.
+.d-popover__anchor--modal-opened * {
+  z-index: 650;
+}
+
+//  $$  DIALOG CONTENT
+//  ----------------------------------------------------------------------------
+.d-popover__content {
+  overflow: auto;
+}
+
+//  $$  DIALOG HEADER / FOOTER
+//  ----------------------------------------------------------------------------
+.d-popover__header-footer-base {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: var(--size48);
+  padding-top: var(--su6);
+  padding-bottom: var(--su6);
+  overflow: auto;
+  font-weight: var(--fw-bold);
+  font-size: var(--fs16);
+}
+
+.d-popover__header {
+  .d-popover__header-footer-base();
+
+  border-bottom: var(--su1) solid var(--black-075);
+}
+
+.d-popover__footer {
+  .d-popover__header-footer-base();
+
+  border-top: var(--su1) solid var(--black-075);
+}

package/lib/build/less/components/tooltip.less

@@ -113,128 +113,148 @@
 //  ============================================================================
 //  $$  TOP
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--bottom,
+.d-tooltip__arrow-tippy--bottom-end,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-    top: calc(100% + var(--su12));
-    transform: translateY(var(--su16));
+  top: calc(100% + var(--su12));
+  transform: translateY(var(--su16));
 
-    &::after {
-        top: var(--sun6);
-        border-top-width: 0;
-        border-bottom-color: var(--tooltip--bgc);
-    }
+  &::after {
+    top: var(--sun6);
+    border-top-width: 0;
+    border-bottom-color: var(--tooltip--bgc);
+  }
 }
 
-
 //  $$  BOTTOM
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--top-start,
+.d-tooltip__arrow-tippy--top,
+.d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-    bottom: calc(100% + var(--su12));
-    transform: translateY(var(--sun16));
+  bottom: calc(100% + var(--su12));
+  transform: translateY(var(--sun16));
 
-    &::after {
-        bottom: var(--sun6);
-        border-top-color: var(--tooltip--bgc);
-        border-bottom-width: 0;
-    }
+  &::after {
+    bottom: var(--sun6);
+    border-top-color: var(--tooltip--bgc);
+    border-bottom-width: 0;
+  }
 }
 
-
 //  $$  TOP / BOTTOM LEFT
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--bottom-start,
+.d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-    left: var(--sun2);
+  left: var(--sun2);
 
-    &::after {
-        left: var(--su16);
-    }
+  &::after {
+    left: var(--su16);
+  }
 }
 
 //  $$  TOP / BOTTOM CENTER
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--bottom,
+.d-tooltip__arrow-tippy--top,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--bottom-center {
-    &::after {
-        left: 50%;
-        margin-left: var(--sun6);
-    }
+  &::after {
+    left: 50%;
+    margin-left: var(--sun6);
+  }
 }
 
 //  $$  TOP / BOTTOM RIGHT
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--bottom-end,
+.d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-    right: var(--sun2);
+  right: var(--sun2);
 
-    &::after {
-        right: var(--su16);
-    }
+  &::after {
+    right: var(--su16);
+  }
 }
 
 //  $$  RIGHT
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--left-start,
+.d-tooltip__arrow-tippy--left,
+.d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-    right: calc(100% + var(--su12));
-    transform: translateX(var(--sun16));
+  right: calc(100% + var(--su12));
+  transform: translateX(var(--sun16));
 
-    &::after {
-        right: var(--sun6);
-        border-right-width: 0;
-        border-left-color: var(--tooltip--bgc);
-    }
+  &::after {
+    right: var(--sun6);
+    border-right-width: 0;
+    border-left-color: var(--tooltip--bgc);
+  }
 }
 
-
 //  $$  LEFT
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--right,
+.d-tooltip__arrow-tippy--right-end,
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-    left: calc(100% + var(--su12));
-    transform: translateX(var(--su16));
+  left: calc(100% + var(--su12));
+  transform: translateX(var(--su16));
 
-    &::after {
-        left: var(--sun6);
-        border-right-color: var(--tooltip--bgc);
-        border-left-width: 0;
-    }
+  &::after {
+    left: var(--sun6);
+    border-right-color: var(--tooltip--bgc);
+    border-left-width: 0;
+  }
 }
 
-
 //  $$  RIGHT / LEFT TOP
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--right-start,
+.d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-    top: var(--sun1);
+  top: var(--sun1);
 
-    &::after {
-        top: var(--su8);
-    }
+  &::after {
+    top: var(--su8);
+  }
 }
 
 //  $$  RIGHT / LEFT CENTER
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--right,
+.d-tooltip__arrow-tippy--left,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--left-center {
-    &::after {
-        top: 50%;
-        margin-top: var(--sun6);
-    }
+  &::after {
+    top: 50%;
+    margin-top: var(--sun6);
+  }
 }
 
 //  $$  RIGHT / LEFT BOTTOM
 //  ----------------------------------------------------------------------------
+.d-tooltip__arrow-tippy--right-end,
+.d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-    bottom: var(--sun1);
+  bottom: var(--sun1);
 
-    &::after {
-        bottom: var(--su8);
-    }
+  &::after {
+    bottom: var(--su8);
+  }
 }

package/lib/build/less/dialtone.less

@@ -23,6 +23,7 @@
 @import 'components/modal';
 @import 'components/toast'; // Needs to come before Notice styles
 @import 'components/notice';
+@import 'components/popover';
 @import 'components/radio-checkbox';
 @import 'components/selects';
 @import 'components/skeleton';

package/lib/build/less/utilities/backgrounds.less

@@ -64,7 +64,7 @@
   -webkit-background-clip: text !important;
   background-clip: text !important;
 }
-.d-bgc-unset { background-clip: unset !important; }
+.d-bgclip-unset { background-clip: unset !important; }
 
 
 //  ============================================================================

package/lib/build/less/utilities/layout.less

@@ -196,5 +196,6 @@
 .d-zi-tooltip { z-index: var(--zi-tooltip) !important; }
 .d-zi-drawer { z-index: var(--zi-drawer) !important; }
 .d-zi-modal { z-index: var(--zi-modal) !important; }
+.d-zi-modal-element { z-index: var(--zi-modal-element) !important; }
 .d-zi-notification { z-index: var(--zi-notification) !important; }
 .d-zi-unset { z-index: unset !important; }

package/lib/build/less/variables/layout.less

@@ -113,6 +113,7 @@
 @zi-tooltip:                    400;
 @zi-drawer:                     500;
 @zi-modal:                      600;
+@zi-modal-element:              650;
 @zi-notification:               700;
 
 @zi-vars: {
@@ -128,6 +129,7 @@
     zi-tooltip:                 @zi-tooltip;
     zi-drawer:                  @zi-drawer;
     zi-modal:                   @zi-modal;
+    zi-modal-element:           @zi-modal-element;
     zi-notification:            @zi-notification;
 }
 

package/lib/build/svg/system/park.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0272 8.07422V12.0762H11.7432C13.1907 12.0762 13.8969 11.2559 13.8969 10.0664C13.8969 8.87109 13.1907 8.07422 11.7315 8.07422H10.0272Z" fill="#0D0C0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM10.0272 18H7.5V6H12.216C14.93 6 16.5 7.68164 16.5 10.0664C16.5 12.4629 14.9008 14.1094 12.1518 14.1094H10.0272V18Z" fill="#0D0C0F"/>
+</svg>

package/lib/build/svg/system/recording-off.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8H16V16H8V8Z" fill="#D81616"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#D81616"/>
+</svg>

package/lib/build/svg/system/recording.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="#0D0C0F"/>
+<path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z" fill="#D81616"/>
+</svg>

package/lib/build/svg/system/screenshare-off.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.83243 4.00682C2.80177 4.0911 2 4.94645 2 6V16C2 17.1 2.89 18 4 18H0V20H19.8526L13.6781 13.8359L13 14.47V13.1589L12.1484 12.3088C9.83746 12.4714 8.24285 13.328 7 15C7.38639 13.1577 8.24411 11.3202 10.0166 10.1806L3.83243 4.00682Z" fill="#0D0C0F"/>
+<path d="M15.2374 12.3781L17 10.73L13 7V9.13C12.7014 9.17145 12.4166 9.22539 12.1449 9.29087L6.84514 4H20C21.1 4 22 4.89 22 6L21.99 16C21.99 16.8424 21.468 17.5675 20.7295 17.8609L15.2374 12.3781Z" fill="#0D0C0F"/>
+<path d="M20.8688 18L22.8051 19.9331L22.7383 20H24V18H20.8688Z" fill="#0D0C0F"/>
+<rect x="1.33325" y="4.17642" width="2.13333" height="26.3262" transform="rotate(-45.0483 1.33325 4.17642)" fill="#D81616"/>
+</svg>

package/lib/build/svg/system/vi-off.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9348 10.4823L10 14.3519L6.70651 7.7648C6.3534 7.05855 5.49574 6.77456 4.79008 7.12597C4.08441 7.4791 3.79814 8.33678 4.15126 9.04246L8.72237 18.1849C8.96464 18.6689 9.45889 18.9746 10 18.9746C10.5411 18.9746 11.0354 18.6689 11.2776 18.1849L14.0654 12.6093L11.9348 10.4823Z" fill="#0D0C0F"/>
+<path d="M20 15.8209L17 12.8259V10.4706C17 9.65824 17.6714 9 18.5 9C19.3286 9 20 9.65824 20 10.4706V15.8209Z" fill="#0D0C0F"/>
+<path d="M14.9702 10.7996L12.8396 8.67257L13.2935 7.7648C13.6466 7.05855 14.5037 6.77284 15.2099 7.12597C15.9156 7.4791 16.2019 8.33678 15.8487 9.04246L14.9702 10.7996Z" fill="#0D0C0F"/>
+<path d="M18.5 8C19.3285 8 20 7.32855 20 6.5C20 5.67145 19.3285 5 18.5 5C17.6715 5 17 5.67145 17 6.5C17 7.32855 17.6715 8 18.5 8Z" fill="#0D0C0F"/>
+<rect x="4" y="4.95883" width="1.92" height="23.6936" transform="rotate(-45.0483 4 4.95883)" fill="#D81616"/>
+</svg>