Skip to content

Moved role=main logic into EuiPageComponent #47

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

Merged
cchaos merged 1 commit into from
Mar 31, 2021
Merged

Moved role=main logic into EuiPageComponent #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion src-docs/src/components/guide_page/guide_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ const GuidePageComponent = ({
</EuiPageHeader>

<EuiPageContent
role="main"
hasShadow={false}
paddingSize="none"
color="transparent"
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/bottom_bar/bottom_bar_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ export const BottomBarExample = {
text: (
<>
<p>
Bottom bars default to a fixed position, in a portal at the
bottom of the browser window. Alternatively, you can change the{' '}
Bottom bars default to a fixed position, in a portal at the bottom
of the browser window. Alternatively, you can change the{' '}
<EuiCode>position</EuiCode> to <EuiCode>sticky</EuiCode> where it
will render in place but stick to the window only as the window edge
nears. The <EuiCode>static</EuiCode> position reverts back to
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/home/home_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import { Link } from 'react-router-dom';

export const HomeView = () => (
<EuiPageContent
role="main"
hasShadow={false}
hasBorder={false}
paddingSize="none"
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/page/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default () => (
<EuiButton>Do something</EuiButton>,
]}
/>
<EuiPageContent role="main">
<EuiPageContent>
<EuiTitle>
<h2>Content title</h2>
</EuiTitle>
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_bottom_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export default ({ button = <></>, content, sideNav, bottomBar }) => {
rightSideItems={[button]}
/>
<EuiPageContent
role="main"
hasBorder={false}
hasShadow={false}
paddingSize="none"
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_centered_body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export default ({ button = <></>, content, sideNav }) => {

<EuiPageBody paddingSize="l">
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize="none">
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_centered_content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export default ({ button = <></>, content, sideNav }) => (
/>

<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize="none"
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export default ({ button = <></>, content, sideNav }) => (
tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
/>
<EuiPageContent
role="main"
hasBorder={false}
hasShadow={false}
paddingSize="none"
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_restricting_width.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export default ({ button = <></>, content, sideNav }) => {
/>

<EuiPageContent
role="main"
hasBorder={false}
hasShadow={false}
paddingSize="none"
Expand Down
6 changes: 1 addition & 5 deletions src-docs/src/views/page/page_simple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,7 @@ export default ({ button = <></>, content }) => (
rightSideItems={[button]}
tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
/>
<EuiPageContent
role="main"
borderRadius="none"
hasShadow={false}
paddingSize="none">
<EuiPageContent borderRadius="none" hasShadow={false} paddingSize="none">
<EuiPageContentBody restrictWidth paddingSize="l">
{content}
</EuiPageContentBody>
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_simple_content_body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default ({ button = <></>, content }) => {
<EuiPage paddingSize="none">
<EuiPageBody paddingSize="l">
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize="none">
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/views/page/page_simple_empty_content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export default ({ button = <></>, content }) => (
hasShadow={false}
style={{ display: 'flex' }}>
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize="none"
Expand Down
6 changes: 6 additions & 0 deletions src/components/page/__snapshots__/page_template.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ exports[`EuiPageTemplate template centeredContent is rendered 1`] = `
>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down Expand Up @@ -202,6 +203,7 @@ exports[`EuiPageTemplate template is rendered with pageBodyProps 3`] = `
>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down Expand Up @@ -293,6 +295,7 @@ exports[`EuiPageTemplate template is rendered with pageContentBodyProps 3`] = `
>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down Expand Up @@ -386,6 +389,7 @@ exports[`EuiPageTemplate template is rendered with pageContentProps 3`] = `
>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down Expand Up @@ -493,6 +497,7 @@ exports[`EuiPageTemplate template is rendered with pageHeader 3`] = `
/>
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down Expand Up @@ -585,6 +590,7 @@ exports[`EuiPageTemplate template paddingSize is rendered 3`] = `
>
<div
class="euiPanel euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
role="main"
style="display:flex"
>
<div
Expand Down
1 change: 1 addition & 0 deletions src/components/page/page_content/__snapshots__/page_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ exports[`EuiPageContent is rendered 1`] = `
aria-label="aria-label"
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent testClass1 testClass2"
data-test-subj="test subject string"
role="main"
/>
`;
4 changes: 4 additions & 0 deletions src/components/page/page_content/page_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,11 @@ export const EuiPageContent: FunctionComponent<EuiPageContentProps> = ({
borderRadius,
children,
className,
role: _role,
...rest
}) => {
// EuiPanel switches to a button element if onClick is provided
const role = _role ?? rest.onClick ? undefined : 'main';
Comment on lines +62 to +63
Copy link
Owner

@cchaos cchaos Mar 31, 2021

Choose a reason for hiding this comment

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

OOH you just meant actually adding the role="main" portion, not trying to get EuiPanel to render as a <main> element.

Copy link
Owner

@cchaos cchaos Mar 31, 2021

Choose a reason for hiding this comment

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

Also I think I need to actually omit the onClick anyway for page content. That should never be clickable 😆 .

const borderRadiusClass =
borderRadius === 'none' ? 'euiPageContent--borderRadiusNone' : '';

Expand All @@ -76,6 +79,7 @@ export const EuiPageContent: FunctionComponent<EuiPageContentProps> = ({
className={classes}
paddingSize={panelPaddingSize ?? paddingSize}
borderRadius={borderRadius}
role={role}
{...rest}>
{children}
</EuiPanel>
Expand Down
8 changes: 0 additions & 8 deletions src/components/page/page_template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
<EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
)}
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize={paddingSize}
Expand All @@ -165,7 +164,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
{/* Extra page body to get the correct alignment and padding of the centered EuiPageContent */}
<EuiPageBody paddingSize={paddingSize}>
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
paddingSize={paddingSize}
Expand Down Expand Up @@ -197,7 +195,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
<EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
)}
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
hasShadow={false}
Expand Down Expand Up @@ -229,7 +226,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
paddingSize={paddingSize}
style={{ display: 'flex' }}>
<EuiPageContent
role="main"
verticalPosition="center"
horizontalPosition="center"
hasShadow={false}
Expand Down Expand Up @@ -263,7 +259,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
<EuiPageHeader restrictWidth={restrictWidth} {...pageHeader} />
)}
<EuiPageContent
role="main"
hasBorder={false}
hasShadow={false}
paddingSize={'none'}
Expand All @@ -290,7 +285,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
/>
)}
<EuiPageContent
role="main"
hasBorder={false}
hasShadow={false}
paddingSize={'none'}
Expand Down Expand Up @@ -346,7 +340,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
/>
)}
<EuiPageContent
role="main"
hasShadow={false}
hasBorder={false}
color={'transparent'}
Expand Down Expand Up @@ -374,7 +367,6 @@ export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
/>
)}
<EuiPageContent
role="main"
hasBorder={pageHeader === undefined ? false : undefined}
hasShadow={false}
paddingSize={'none'}
Expand Down