diff options
Diffstat (limited to 'server/sonar-web/design-system/src/components/modal/ModalBody.tsx')
-rw-r--r-- | server/sonar-web/design-system/src/components/modal/ModalBody.tsx | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx new file mode 100644 index 00000000000..5a3b1f19832 --- /dev/null +++ b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx @@ -0,0 +1,47 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import styled from '@emotion/styled'; +import classNames from 'classnames'; +import { ReactNode } from 'react'; +import tw from 'twin.macro'; +import { themeColor } from '../../helpers/theme'; + +interface Props { + children: ReactNode; + isScrollable?: boolean; +} + +export function ModalBody({ children, isScrollable = true }: Props) { + return <StyledMain className={classNames({ scrollable: isScrollable })}>{children}</StyledMain>; +} + +const StyledMain = styled.main` + ${tw`sw-body-sm`} + ${tw`sw-pr-3`} // to accomodate a possible scrollbar + ${tw`sw-my-12`} + ${tw`sw-overflow-x-hidden`} + + color: ${themeColor('pageContent')}; + + &.scrollable { + overflow-y: auto; + } +`; |