fix(Dialog): remove underlay from type panel dialogs

Author: tenphi

.changeset/eleven-foxes-shake.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Remove underlay from dialogs with type `panel`.

.changeset/metal-worms-worry.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add ReturnIcon component.

src/components/overlays/Dialog/DialogContainer.tsx

@@ -19,7 +19,7 @@ export interface CubeDialogContainerProps {
    * The type of Dialog that should be rendered. See the visual options below for examples of each.
    * @default 'modal'
    */
-  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
+  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
   /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */
   isDismissable?: boolean;
   /**

src/components/overlays/Dialog/context.tsx

@@ -2,7 +2,13 @@ import { createContext, HTMLAttributes, useContext } from 'react';
 import invariant from 'tiny-invariant';
 
 export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
-  type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover';
+  type?:
+    | 'modal'
+    | 'popover'
+    | 'tray'
+    | 'fullscreen'
+    | 'fullscreenTakeover'
+    | 'panel';
   isDismissable?: boolean;
   onClose?: (arg?: string) => void;
 }

src/components/overlays/Modal/Modal.tsx

@@ -49,16 +49,19 @@ const ModalElement = tasty({
       '[data-type="fullscreenTakeover"] | [data-type="panel"]': '100dvh 100dvh',
       '[data-type="fullscreen"]': '90dvh 90dvh',
       '[data-type="fullscreenTakeover"]': '100dvh 100dvh',
+      '[data-type="panel"]': 'auto',
     },
     width: {
-      width: '288px 90vw',
+      '': '288px 90vw',
+      '[data-type="panel"]': 'auto',
     },
     pointerEvents: 'none',
     transition: 'opacity .25s linear, transform .25s ease-in-out',
     transform: {
       '': 'initial',
       '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
-      '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
+      '([data-type^="fullscreen"] | [data-type="panel"]) & !open':
+        'translate(0, 0) scale(1.02, 1.02)',
     },
     opacity: {
       '': 0,
@@ -86,7 +89,9 @@ function Modal(props: CubeModalProps, ref) {
 
   return (
     <Overlay {...otherProps}>
-      {type !== 'fullscreenTakeover' && <Underlay {...underlayProps} />}
+      {type !== 'fullscreenTakeover' && type !== 'panel' && (
+        <Underlay {...underlayProps} />
+      )}
       <ModalWrapper
         ref={domRef}
         qa={qa}

src/icons/ReturnIcon.tsx

@@ -0,0 +1,19 @@
+import { wrapIcon } from './wrap-icon';
+
+export const ReturnIcon = wrapIcon(
+  'ReturnIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.556 3.9a.6.6 0 0 0 0 1.2h3.455v4.794H5V8.442a.4.4 0 0 0-.684-.282L2.278 10.22a.4.4 0 0 0 0 .562l2.038 2.059A.4.4 0 0 0 5 12.558v-1.464h7.011a1.2 1.2 0 0 0 1.2-1.2V5.1a1.2 1.2 0 0 0-1.2-1.2z"
+      clipRule="evenodd"
+    />
+  </svg>,
+);

src/icons/index.ts

@@ -51,6 +51,7 @@ export { PauseCircleIcon } from './PauseCircleIcon';
 export { PieChartIcon } from './PieChartIcon';
 export { PlusIcon } from './PlusIcon';
 export { ReloadIcon } from './ReloadIcon';
+export { ReturnIcon } from './ReturnIcon';
 export { RightIcon } from './RightIcon';
 export { SearchIcon } from './SearchIcon';
 export { SettingsIcon } from './SettingsIcon';