Skip to content
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

Jump to bottom

[EuiPageSection] Add component prop, default to section tag #6192

Merged
merged 4 commits into from
Aug 30, 2022
Merged

[EuiPageSection] Add component prop, default to section tag #6192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
82b22e8
[EuiPageSection] Default to `section` tag, allow overriding `componen…
cee-chen Aug 30, 2022
a8b37fa
Add `component` unit tests
cee-chen Aug 30, 2022
9977183
Update snapshots
cee-chen Aug 30, 2022
ff09df9
changelog
cee-chen Aug 30, 2022
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
118 changes: 72 additions & 46 deletions src/components/page/page_section/__snapshots__/page_section.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,237 +1,263 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiPageSection is rendered 1`] = `
<div
<section
aria-label="aria-label"
class="testClass1 testClass2 emotion-euiPageSection-l-top-transparent"
data-test-subj="test subject string"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props alignment center is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-center-transparent"
>
<div
class="emotion-euiPageSection__content-l-center"
/>
</div>
</section>
`;

exports[`EuiPageSection props alignment horizontalCenter is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-horizontalCenter-transparent"
>
<div
class="emotion-euiPageSection__content-l-center"
/>
</div>
</section>
`;

exports[`EuiPageSection props alignment top is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props bottomBorder can be true 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l-border"
/>
</div>
</section>
`;

exports[`EuiPageSection props color accent is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-accent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color danger is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-danger"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color plain is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-plain"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color primary is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-primary"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color subdued is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-subdued"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color success is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-success"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color transparent is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props color warning is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-warning"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props component 1`] = `
<main>
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</section>
<div
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
<aside
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</aside>
</main>
`;

exports[`EuiPageSection props contentProps are passed down 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
aria-label="aria-label"
class="testClass1 testClass2 emotion-euiPageSection__content-l"
data-test-subj="test subject string"
/>
</div>
</section>
`;

exports[`EuiPageSection props grow can be true 1`] = `
<div
<section
class="emotion-euiPageSection-grow-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize l is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize m is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-m-top-transparent"
>
<div
class="emotion-euiPageSection__content-m"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize none is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-top-transparent"
>
<div
class="emotion-euiPageSection__content"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize s is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-s-top-transparent"
>
<div
class="emotion-euiPageSection__content-s"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize xl is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-xl-top-transparent"
>
<div
class="emotion-euiPageSection__content-xl"
/>
</div>
</section>
`;

exports[`EuiPageSection props paddingSize xs is rendered 1`] = `
<div
<section
class="emotion-euiPageSection-xs-top-transparent"
>
<div
class="emotion-euiPageSection__content-xs"
/>
</div>
</section>
`;

exports[`EuiPageSection props restrictWidth can be custom 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l-restrictWidth"
style="max-width:1000px"
/>
</div>
</section>
`;

exports[`EuiPageSection props restrictWidth can be true 1`] = `
<div
<section
class="emotion-euiPageSection-l-top-transparent"
>
<div
class="emotion-euiPageSection__content-l-restrictWidth"
style="max-width:1200px"
/>
</div>
</section>
`;
12 changes: 12 additions & 0 deletions src/components/page/page_section/page_section.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,18 @@ describe('EuiPageSection', () => {
});

describe('props', () => {
test('component', () => {
const component = render(
<main>
<EuiPageSection />
<EuiPageSection component="div" />
<EuiPageSection component="aside" />
</main>
);

expect(component).toMatchSnapshot();
});

describe('restrictWidth', () => {
test('can be true', () => {
const component = render(<EuiPageSection restrictWidth />);
Expand Down
13 changes: 9 additions & 4 deletions src/components/page/page_section/page_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* Side Public License, v 1.
*/

import React, { FunctionComponent, HTMLAttributes } from 'react';
import React, { FunctionComponent, ComponentType, HTMLAttributes } from 'react';
import { CommonProps } from '../../common';

import {
Expand Down Expand Up @@ -53,7 +53,11 @@ export type EuiPageSectionProps = CommonProps &
* Passed down to the div wrapper of the section contents
*/
contentProps?: HTMLAttributes<HTMLDivElement>;
} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
/**
* Sets which HTML element to render.
*/
component?: keyof JSX.IntrinsicElements | ComponentType;
} & Omit<HTMLAttributes<Element>, 'color'>;

export const EuiPageSection: FunctionComponent<EuiPageSectionProps> = ({
children,
Expand All @@ -64,6 +68,7 @@ export const EuiPageSection: FunctionComponent<EuiPageSectionProps> = ({
color = 'transparent',
grow = false,
contentProps,
component: Component = 'section',
...rest
}) => {
// Set max-width as a style prop
Expand Down Expand Up @@ -98,10 +103,10 @@ export const EuiPageSection: FunctionComponent<EuiPageSectionProps> = ({
];

return (
<div css={cssStyles} {...rest}>
<Component css={cssStyles} {...rest}>
<div css={cssContentStyles} {...contentProps} style={widthStyles}>
{children}
</div>
</div>
</Component>
);
};
Loading