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

[Docs] Replace Static HTML Element IDs with htmlIdGenerator()() #5114

Closed
wants to merge 15 commits into from
Closed

[Docs] Replace Static HTML Element IDs with htmlIdGenerator()() #5114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b2ba60a
Revised element IDs within the Accordion section of src/docs to use I…
Aug 30, 2021
8bb14f6
Revised element IDs within the Flyout section of src/docs to use IDs …
Aug 30, 2021
638bec8
Revised element IDs within the Header section of src/docs to use IDs …
Aug 30, 2021
d1aa8ae
Revised element IDs within the Modal section of src/docs to use IDs g…
Aug 30, 2021
5d763bf
Revised element IDs within the Popver section of src/docs to use IDs …
Aug 30, 2021
dd6e46b
Revised element IDs within the Resizble Container section of src/docs…
Aug 30, 2021
2e0b0cd
Revised element IDs within the Button section of src/docs to use IDs …
Aug 30, 2021
e5b4bdc
Revised element IDs within the Key Pad Menu section of src/docs to us…
Aug 30, 2021
5ba5fdb
Revised element IDs within the List Group section of src/docs to use …
Aug 30, 2021
dc07184
Revised element IDs within the Form Controls section of src/docs to u…
Aug 30, 2021
7000dd7
Revised element IDs within the Form Layouts section of src/docs to us…
Aug 30, 2021
e804279
Revised element IDs within the Compressed Forms section of src/docs t…
Aug 30, 2021
dc36dc3
Revised element IDs within the Expression section of src/docs to use …
Aug 30, 2021
a1ed276
Revised element IDs within the Range Sliders section of src/docs to u…
Aug 30, 2021
8d7349e
Revised element IDs within the Context Menu section of src/docs to us…
Aug 31, 2021
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
23 changes: 14 additions & 9 deletions src-docs/src/views/accordion/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import React from 'react';

import { EuiAccordion, EuiPanel } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<div>
<EuiAccordion id="accordion1" buttonContent="Click me to toggle">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
</div>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<div>
<EuiAccordion id={accordionID} buttonContent="Click me to toggle">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
</div>
);
};
25 changes: 15 additions & 10 deletions src-docs/src/views/accordion/accordion_arrow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from 'react';

import { EuiAccordion, EuiPanel } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<EuiAccordion
id="accordion11"
arrowDisplay="none"
buttonContent="This one has it removed entirely">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<EuiAccordion
id={accordionID}
arrowDisplay="none"
buttonContent="This one has it removed entirely">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
);
};
25 changes: 15 additions & 10 deletions src-docs/src/views/accordion/accordion_arrow_right.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from 'react';

import { EuiAccordion, EuiPanel } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<EuiAccordion
id="accordion10"
arrowDisplay="right"
buttonContent="This accordion has the arrow on the right">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<EuiAccordion
id={accordionID}
arrowDisplay="right"
buttonContent="This accordion has the arrow on the right">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
);
};
23 changes: 14 additions & 9 deletions src-docs/src/views/accordion/accordion_extra.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import React from 'react';

import { EuiAccordion, EuiButton } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<EuiAccordion
id="accordionExtraWithLeftArrow"
buttonContent="Click to open"
extraAction={<EuiButton size="s">Extra action!</EuiButton>}
paddingSize="l">
<strong>Opened content.</strong>
</EuiAccordion>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<EuiAccordion
id={accordionID}
buttonContent="Click to open"
extraAction={<EuiButton size="s">Extra action!</EuiButton>}
paddingSize="l">
<strong>Opened content.</strong>
</EuiAccordion>
);
};
4 changes: 3 additions & 1 deletion src-docs/src/views/accordion/accordion_forceState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export default () => {
setID(`${idPrefix}--${newState}`);
};

const accordionID = htmlIdGenerator('accordion')();

return (
<div>
<EuiButtonGroup
Expand All @@ -45,7 +47,7 @@ export default () => {
/>
<EuiSpacer />
<EuiAccordion
id={htmlIdGenerator()()}
id={accordionID}
forceState={trigger}
onToggle={onToggle}
buttonContent="I am a controlled accordion"
Expand Down
50 changes: 28 additions & 22 deletions src-docs/src/views/accordion/accordion_form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
EuiTitle,
EuiButtonIcon,
} from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

const repeatableForm = (
<EuiForm component="form">
Expand Down Expand Up @@ -76,26 +77,31 @@ const extraAction = (
/>
);

export default () => (
<div>
<EuiAccordion
id="accordionForm1"
className="euiAccordionForm"
buttonClassName="euiAccordionForm__button"
buttonContent={buttonContent}
extraAction={extraAction}
paddingSize="l">
{repeatableForm}
</EuiAccordion>
export default () => {
const accordionID__1 = htmlIdGenerator('accordion')();
const accordionID__2 = htmlIdGenerator('accordion')();

<EuiAccordion
id="accordionForm2"
className="euiAccordionForm"
buttonClassName="euiAccordionForm__button"
buttonContent={buttonContent}
extraAction={extraAction}
paddingSize="l">
{repeatableForm}
</EuiAccordion>
</div>
);
return (
<div>
<EuiAccordion
id={accordionID__1}
className="euiAccordionForm"
buttonClassName="euiAccordionForm__button"
buttonContent={buttonContent}
extraAction={extraAction}
paddingSize="l">
{repeatableForm}
</EuiAccordion>

<EuiAccordion
id={accordionID__2}
className="euiAccordionForm"
buttonClassName="euiAccordionForm__button"
buttonContent={buttonContent}
extraAction={extraAction}
paddingSize="l">
{repeatableForm}
</EuiAccordion>
</div>
);
};
27 changes: 16 additions & 11 deletions src-docs/src/views/accordion/accordion_grow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Rows = () => {
}
const growingAccordianDescriptionId = htmlIdGenerator()();
const listId = htmlIdGenerator()();

return (
<EuiText size="s">
<EuiScreenReaderOnly>
Expand Down Expand Up @@ -50,14 +51,18 @@ const Rows = () => {
);
};

export default () => (
<EuiAccordion
id={htmlIdGenerator()()}
buttonContent="Click me to toggle close / open"
initialIsOpen={true}
paddingSize="s">
<EuiPanel color="subdued">
<Rows />
</EuiPanel>
</EuiAccordion>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<EuiAccordion
id={accordionID}
buttonContent="Click me to toggle close / open"
initialIsOpen={true}
paddingSize="s">
<EuiPanel color="subdued">
<Rows />
</EuiPanel>
</EuiAccordion>
);
};
98 changes: 53 additions & 45 deletions src-docs/src/views/accordion/accordion_multiple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,63 @@ import {
EuiSpacer,
EuiPanel,
} from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<div>
<EuiAccordion
id="accordion3"
buttonContent="An accordion with padding applied through props"
paddingSize="l">
<EuiText size="s">
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
</EuiText>
</EuiAccordion>
export default () => {
const accordionID__1 = htmlIdGenerator('accordion')();
const accordionID__2 = htmlIdGenerator('accordion')();
const accordionID__3 = htmlIdGenerator('accordion')();

<EuiSpacer />
return (
<div>
<EuiAccordion
id={accordionID__1}
buttonContent="An accordion with padding applied through props"
paddingSize="l">
<EuiText size="s">
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
</EuiText>
</EuiAccordion>

<EuiAccordion
id="accordion4"
buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
buttonContentClassName="eui-textTruncate"
paddingSize="l">
<EuiText size="s">
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
</EuiText>
</EuiAccordion>
<EuiSpacer />

<EuiSpacer />
<EuiAccordion
id={accordionID__2}
buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
buttonContentClassName="eui-textTruncate"
paddingSize="l">
<EuiText size="s">
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
<p>The content inside can be of any height.</p>
</EuiText>
</EuiAccordion>

<EuiAccordion
id="accordion5"
buttonContent="A third accordion with a nested accordion"
paddingSize="m">
<EuiText size="s">
<p>
This content area will grow to accommodate when the accordion below
opens
</p>
</EuiText>
<EuiSpacer />
<EuiAccordion id="accordion6" buttonContent="A fourth nested accordion">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>

<EuiAccordion
id={accordionID__3}
buttonContent="A third accordion with a nested accordion"
paddingSize="m">
<EuiText size="s">
<p>
This content area will grow to accommodate when the accordion below
opens
</p>
</EuiText>
<EuiSpacer />
<EuiAccordion id="accordion6" buttonContent="A fourth nested accordion">
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear
here.
</EuiPanel>
</EuiAccordion>
</EuiAccordion>
</EuiAccordion>
</div>
);
</div>
);
};
28 changes: 16 additions & 12 deletions src-docs/src/views/accordion/accordion_open.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,19 @@ import React from 'react';
import { EuiAccordion, EuiPanel } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => (
<div>
<EuiAccordion
id={htmlIdGenerator()()}
buttonContent="I am opened by default. Click me to toggle close / open"
initialIsOpen={true}>
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
</div>
);
export default () => {
const accordionID = htmlIdGenerator('accordion')();

return (
<div>
<EuiAccordion
id={accordionID}
buttonContent="I am opened by default. Click me to toggle close / open"
initialIsOpen={true}>
<EuiPanel color="subdued">
Any content inside of <strong>EuiAccordion</strong> will appear here.
</EuiPanel>
</EuiAccordion>
</div>
);
};
5 changes: 4 additions & 1 deletion src-docs/src/views/button/split_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ import {
EuiPopover,
} from '../../../../src/components';

import { htmlIdGenerator } from '../../../../src/services';

export default () => {
const [isPopoverOpen, setPopover] = useState(false);
const buttonID = htmlIdGenerator('button')();

const onButtonClick = () => {
setPopover(!isPopoverOpen);
Expand Down Expand Up @@ -43,7 +46,7 @@ export default () => {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPopover
id="splitButtonExamplePopover"
id={buttonID}
button={
<EuiButtonIcon
display="base"
Expand Down
Loading