Skip to content

Adds bsSize props to Section component and extends options for titleAs #26899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxiadlovskii wants to merge 2 commits into
base: master
Choose a base branch
from
+13 −9
Open

Adds bsSize props to Section component and extends options for titleAs #26899

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10853cf
Adds bsSize props to Section component and extends options for titleAs
maxiadlovskii Aug 5, 2026
c4ae5ac
Merge branch 'master' into feat/add-bsSize-props-to-Section-component
maxiadlovskii Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions graylog2-web-interface/src/components/common/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,29 @@ import styled, { css } from 'styled-components';
import { Collapse } from '@mantine/core';

import useDisclosure from 'util/hooks/useDisclosure';
import sizeForMantine from 'theme/utils/sizeForMantine';
import type { BsSize } from 'components/bootstrap/types';

import IconButton from './IconButton';

const Container = styled.div<{ $collapsible: boolean; $opened: boolean }>(
({ $collapsible, $opened, theme }) => css`
const Container = styled.div<{ $collapsible: boolean; $opened: boolean; $bsSize: BsSize }>(
({ $collapsible, $opened, $bsSize, theme }) => css`
background-color: ${theme.colors.section.filled.background};
border: 1px solid ${theme.colors.section.filled.border};
border-radius: 10px;
padding: ${$collapsible && !$opened ? 0 : theme.spacings.md};
padding: ${$collapsible && !$opened ? 0 : theme.spacings[sizeForMantine($bsSize)]};
margin-bottom: ${theme.spacings.xxs};
`,
);

const Header = styled.div<{ $collapsible: boolean; $opened: boolean }>(
({ $collapsible, $opened, theme }) => css`
const Header = styled.div<{ $collapsible: boolean; $opened: boolean; $bsSize: BsSize }>(
({ $collapsible, $opened, $bsSize, theme }) => css`
display: flex;
justify-content: space-between;
gap: ${theme.spacings.xs};
align-items: center;
border-radius: 10px;
padding: ${$collapsible && !$opened ? theme.spacings.md : 0};
padding: ${$collapsible && !$opened ? theme.spacings[sizeForMantine($bsSize)] : 0};
flex-wrap: wrap;

&:hover {
Expand All @@ -59,7 +61,7 @@ const FlexWrapper = styled.div(

type Props = React.PropsWithChildren<{
title: string;
titleAs?: 'h2' | 'h3';
titleAs?: 'h2' | 'h3' | 'h4' | 'h5';
header?: React.ReactNode;
actions?: React.ReactNode;
preHeaderSection?: React.ReactNode;
Expand All @@ -70,6 +72,7 @@ type Props = React.PropsWithChildren<{
disableCollapseButton?: boolean;
collapseButtonPosition?: 'left' | 'right';
className?: string;
bsSize?: BsSize;

@linuspahl linuspahl Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really want to support all four variants of "BsSize", or just the two which are currently needed?

@linuspahl linuspahl Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we only support two variants we would potentially have less inconsistency in the application longterm.

@maxiadlovskii maxiadlovskii Aug 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@linuspahl for now, just 2. But it would be better to use the already existing prop regarding the size, just do not introduce a new one. And as bsSize everywhere else contains four variants it would be better to keep them. I think that will be more consistent

}>;

/**
Expand All @@ -89,6 +92,7 @@ const Section = ({
collapseButtonPosition = 'left',
children = null,
className = undefined,
bsSize = 'md',
}: Props) => {
const [opened, { toggle }] = useDisclosure(!defaultClosed);

Expand Down Expand Up @@ -117,8 +121,8 @@ const Section = ({
);

return (
<Container $opened={opened} $collapsible={collapsible} className={className}>
<Header $opened={opened} $collapsible={collapsible} onClick={onHeaderClick}>
<Container $opened={opened} $collapsible={collapsible} className={className} $bsSize={bsSize}>
<Header $opened={opened} $collapsible={collapsible} onClick={onHeaderClick} $bsSize={bsSize}>
<FlexWrapper>
{collapseButtonPosition === 'left' && collapseButton}
{preHeaderSection && (
Expand Down
Loading