Shared:ModalDialog: Added a header component.

packages/shared/components/aside/Aside.styled.tsx

@@ -145,6 +145,7 @@ const StyledHeaderContainer = styled.div`
   justify-content: space-between;
   margin: 0 16px;
   height: 53px;
+  position: relative;
 
   .additional-icons-container {
     display: flex;
@@ -156,14 +157,27 @@ const StyledHeaderContainer = styled.div`
   }
   .close-button {
     margin-inline: auto 0;
+    min-width: 17px;
+  }
+  .header-component {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   ::after {
     content: "";
+    border-bottom: 1px solid rgb(236, 238, 241);
+    width: calc(100% + 32px);
+    position: absolute;
+    left: -16px;
+    bottom: 0;
+
+    /* content: "";
     border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
     width: 100%;
     position: fixed;
     left: 0;
-    top: 53px;
+    top: 53px; */
   }
 `;
 export { StyledAside, StyledControlContainer, StyledHeaderContainer };

packages/shared/components/aside/Aside.types.ts

@@ -37,17 +37,20 @@ export interface AsideProps {
   header: AsideHeaderProps["header"];
   isBackButton?: AsideHeaderProps["isBackButton"];
   isCloseable?: AsideHeaderProps["isCloseable"];
-  hederIcons?: AsideHeaderProps["hederIcons"];
+  headerIcons?: AsideHeaderProps["headerIcons"];
   onBackClick?: AsideHeaderProps["onBackClick"];
   onCloseClick?: AsideHeaderProps["onCloseClick"];
 }
 export interface AsideHeaderProps {
   header: string;
+  className?: string;
+  id?: string;
   isBackButton?: boolean;
   isCloseable?: boolean;
-  hederIcons?: { id: string; url: string; onClick: () => void }[];
+  headerIcons?: { key: string; url: string; onClick: () => void }[];
   onBackClick?: () => void;
   onCloseClick?: () => void;
+  style?: React.CSSProperties;
 }
 export interface StyledAsideProps {
   visible: boolean;

packages/shared/components/aside/AsideHeader.tsx

@@ -38,8 +38,11 @@ const AsideHeader = (props: AsideHeaderProps) => {
     onBackClick,
     onCloseClick,
     header,
-    hederIcons = [],
+    headerIcons = [],
     isCloseable = true,
+    className,
+    id,
+    style,
   } = props;
 
   const backButtonRender = (
@@ -62,16 +65,20 @@ const AsideHeader = (props: AsideHeaderProps) => {
   );
 
   return (
-    <StyledHeaderContainer>
+    <StyledHeaderContainer id={id} className={className} style={style}>
       {isBackButton && backButtonRender}
-      <Text fontSize="21px" fontWeight={700}>
-        {header}
-      </Text>
-      {hederIcons.length > 0 && (
+      {typeof header === "string" ? (
+        <Text fontSize="21px" fontWeight={700} className="header-component">
+          {header}
+        </Text>
+      ) : (
+        header
+      )}
+      {headerIcons.length > 0 && (
         <div className="additional-icons-container">
-          {hederIcons.map((item) => (
+          {headerIcons.map((item) => (
             <IconButton
-              key={item.id}
+              key={item.key}
               size={17}
               className="close-button"
               iconName={item.url}

packages/shared/components/modal-dialog/ModalDialog.styled.ts

@@ -147,24 +147,6 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
         `}
 `;
 
-const StyledHeader = styled.div<{ currentDisplayType?: ModalDialogType }>`
-  display: flex;
-  align-items: center;
-  border-bottom: ${(props) =>
-    `1px solid ${props.theme.modalDialog.headerBorderColor}`};
-  height: 52px;
-  margin-bottom: ${(props) =>
-    props.currentDisplayType === "aside" ? "0px" : "16px"};
-  padding: 0 16px 0;
-
-  .heading {
-    font-family: ${(props) => props.theme.fontFamily};
-    color: ${(props) => props.theme.modalDialog.textColor};
-    font-weight: 700;
-    font-size: 21px;
-  }
-`;
-
 const StyledBody = styled(Box)<{
   currentDisplayType?: ModalDialogType;
   hasFooter?: boolean;
@@ -241,7 +223,6 @@ const StyledFooter = styled.div<{
 `;
 
 Dialog.defaultProps = { theme: Base };
-StyledHeader.defaultProps = { theme: Base };
 Content.defaultProps = { theme: Base };
 
-export { StyledModal, StyledHeader, Content, Dialog, StyledBody, StyledFooter };
+export { StyledModal, Content, Dialog, StyledBody, StyledFooter };

packages/shared/components/modal-dialog/ModalDialog.tsx

@@ -87,6 +87,8 @@ const ModalDialog = ({
   withBodyScroll = false,
   withFooterBorder = false,
   containerVisible = false,
+
+  ...rest
 }: ModalDialogProps) => {
   const onCloseEvent = React.useCallback(() => {
     if (embedded) return;
@@ -173,6 +175,7 @@ const ModalDialog = ({
           isCloseable={isCloseable && !embedded}
           embedded={embedded}
           blur={blur}
+          {...rest}
         />
       }
     />

packages/shared/components/modal-dialog/ModalDialog.types.ts

@@ -24,6 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { AsideHeaderProps } from "../aside/Aside.types";
 import { ModalDialogType } from "./ModalDialog.enums";
 
 export type ModalDialogTypeDetailed = {
@@ -160,4 +161,9 @@ export interface ModalSubComponentsProps {
   embedded?: boolean;
   withForm?: boolean;
   blur?: number;
+
+  isBackButton?: AsideHeaderProps["isBackButton"];
+  headerIcons?: AsideHeaderProps["headerIcons"];
+  onBackClick?: AsideHeaderProps["onBackClick"];
+  onCloseClick?: AsideHeaderProps["onCloseClick"];
 }

packages/shared/components/modal-dialog/sub-components/Modal.tsx

@@ -30,18 +30,15 @@ import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
 import { classNames } from "../../../utils";
 import { DialogSkeleton, DialogAsideSkeleton } from "../../../skeletons";
 
-import { Heading, HeadingSize } from "../../heading";
 import { Scrollbar } from "../../scrollbar";
-
+import { AsideHeader } from "../../aside";
 import {
   StyledModal,
-  StyledHeader,
   Content,
   Dialog,
   StyledBody,
   StyledFooter,
 } from "../ModalDialog.styled";
-import { CloseButton } from "./CloseButton";
 import { ModalBackdrop } from "./ModalBackdrop";
 import { FormWrapper } from "./FormWrapper";
 import { ModalSubComponentsProps } from "../ModalDialog.types";
@@ -68,10 +65,12 @@ const Modal = ({
   modalSwipeOffset,
   containerVisible,
   isDoubleFooterLine,
-  isCloseable,
+
   embedded,
   withForm,
   blur,
+
+  ...rest
 }: ModalSubComponentsProps) => {
   const contentRef = React.useRef<null | HTMLDivElement>(null);
 
@@ -177,32 +176,21 @@ const Modal = ({
               containerComponent
             ) : (
               <FormWrapper withForm={withForm || false}>
-                <StyledHeader
-                  id="modal-header-swipe"
-                  className={
-                    classNames(["modal-header", headerProps.className]) ||
-                    "modal-header"
-                  }
-                  {...headerProps}
-                  currentDisplayType={currentDisplayType}
-                >
-                  {header && (
-                    <Heading
-                      level={1}
-                      className="heading"
-                      size={HeadingSize.medium}
-                      truncate
-                    >
-                      {headerComponent}
-                    </Heading>
-                  )}
-                  {isCloseable && (
-                    <CloseButton
-                      currentDisplayType={currentDisplayType}
-                      onClick={onClose}
-                    />
-                  )}
-                </StyledHeader>
+                {header && (
+                  <AsideHeader
+                    id="modal-header-swipe"
+                    className={
+                      classNames(["modal-header", headerProps.className]) ||
+                      "modal-header"
+                    }
+                    header={headerComponent}
+                    onCloseClick={onClose}
+                    {...(currentDisplayType === "modal" && {
+                      style: { marginBottom: "16px" },
+                    })}
+                    {...rest}
+                  />
+                )}
 
                 {body && (
                   <StyledBody