diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx index 98faf5be2e..ab4ae4c615 100644 --- a/packages/shared/components/aside/Aside.styled.tsx +++ b/packages/shared/components/aside/Aside.styled.tsx @@ -146,14 +146,18 @@ const StyledHeaderContainer = styled.div` text-overflow: ellipsis; white-space: nowrap; } - ::after { - content: ""; - border-bottom: ${(props) => - `1px solid ${props.theme.modalDialog.headerBorderColor}`}; - width: calc(100% + 32px); - position: absolute; - inset-inline-end: -16px; - bottom: 0; - } + ${(props) => + !props.withoutBorder && + css` + ::after { + content: ""; + border-bottom: ${(props) => + `1px solid ${props.theme.modalDialog.headerBorderColor}`}; + width: calc(100% + 32px); + position: absolute; + inset-inline-end: -16px; + bottom: 0; + } + `} `; export { StyledAside, StyledHeaderContainer }; diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts index dc5619b220..8ff857f92b 100644 --- a/packages/shared/components/aside/Aside.types.ts +++ b/packages/shared/components/aside/Aside.types.ts @@ -53,6 +53,7 @@ export interface AsideHeaderProps { onCloseClick?: () => void; style?: React.CSSProperties; isLoading?: boolean; + withoutBorder?: boolean; } export interface StyledAsideProps { visible: boolean; diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx index 12e7b39e05..d6daa0e013 100644 --- a/packages/shared/components/aside/AsideHeader.tsx +++ b/packages/shared/components/aside/AsideHeader.tsx @@ -45,6 +45,7 @@ const AsideHeader = (props: AsideHeaderProps) => { id, style, isLoading, + withoutBorder = false, } = props; const backButtonRender = ( @@ -101,7 +102,12 @@ const AsideHeader = (props: AsideHeaderProps) => { const loaderComponent = ; return ( - + {isLoading ? loaderComponent : mainComponent} ); diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx index 91d43ec32c..f594d85c58 100644 --- a/packages/shared/components/selector/sub-components/Header.tsx +++ b/packages/shared/components/selector/sub-components/Header.tsx @@ -35,6 +35,7 @@ const Header = React.memo( onCloseClick, withoutBackButton, headerLabel, + withoutBorder, }: HeaderProps) => { return ( ); },