forked from elastic/eui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Docs] Replace Static HTML Element IDs Generated IDs (Layout Section) (…
…elastic#5220) * Revised element IDs within the Accordion section of src/docs to use IDs generated the htmlIdGenerator utility function * Revised element IDs within the Accordion section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Flyout section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Header section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Revised element IDs within the Modal section of src/docs to use IDs generated the useGeneratedHtmlId utility function * Test commit * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revised element IDs within the Resizable Panel section of src/docs to use the useGeneratedHtmlId utility function * Revisions from PR * Update src-docs/src/views/resizable_container/resizable_container_reset_values.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update accordion_example.js Created unique IDs in the snapshots for the example components for accordions. Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
- Loading branch information
Showing
25 changed files
with
383 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 { useGeneratedHtmlId } 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 simpleAccordionId = useGeneratedHtmlId({ prefix: 'simpleAccordion' }); | ||
|
||
return ( | ||
<div> | ||
<EuiAccordion id={simpleAccordionId} buttonContent="Click me to toggle"> | ||
<EuiPanel color="subdued"> | ||
Any content inside of <strong>EuiAccordion</strong> will appear here. | ||
</EuiPanel> | ||
</EuiAccordion> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,20 @@ | ||
import React from 'react'; | ||
|
||
import { EuiAccordion, EuiPanel } from '../../../../src/components'; | ||
import { useGeneratedHtmlId } 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 noArrowAccordionId = useGeneratedHtmlId({ prefix: 'noArrowAccordion' }); | ||
|
||
return ( | ||
<EuiAccordion | ||
id={noArrowAccordionId} | ||
arrowDisplay="none" | ||
buttonContent="This one has it removed entirely" | ||
> | ||
<EuiPanel color="subdued"> | ||
Any content inside of <strong>EuiAccordion</strong> will appear here. | ||
</EuiPanel> | ||
</EuiAccordion> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,22 @@ | ||
import React from 'react'; | ||
|
||
import { EuiAccordion, EuiPanel } from '../../../../src/components'; | ||
import { useGeneratedHtmlId } 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 rightArrowAccordionId = useGeneratedHtmlId({ | ||
prefix: 'rightArrowAccordion', | ||
}); | ||
|
||
return ( | ||
<EuiAccordion | ||
id={rightArrowAccordionId} | ||
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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,21 @@ | ||
import React from 'react'; | ||
|
||
import { EuiAccordion, EuiButton } from '../../../../src/components'; | ||
import { useGeneratedHtmlId } 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 extraActionAccordionId = useGeneratedHtmlId({ | ||
prefix: 'extraActionAccordion', | ||
}); | ||
|
||
return ( | ||
<EuiAccordion | ||
id={extraActionAccordionId} | ||
buttonContent="Click to open" | ||
extraAction={<EuiButton size="s">Extra action!</EuiButton>} | ||
paddingSize="l" | ||
> | ||
<strong>Opened content.</strong> | ||
</EuiAccordion> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.