Skip to content

fix(examples): updating example microcopy #6196

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
redallen merged 4 commits into from
Aug 19, 2021
Merged

fix(examples): updating example microcopy #6196

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
9ade0b0
fix(examples): updating example microcopy
evwilkin Aug 16, 2021
e269c6c
updated remaining microcopy
evwilkin Aug 19, 2021
74437d3
updated date picker example for build
evwilkin Aug 19, 2021
136e576
revert DatePicker date formatting changes
evwilkin Aug 19, 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
2 changes: 1 addition & 1 deletion packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ class BasicCodeEditor extends React.Component {
name="toggle-read-only"
/>
<Checkbox
label="Display Minimap"
label="Minimap"
isChecked={isMinimapVisible}
onChange={this.toggleMinimap}
aria-label="display minimap checkbox"
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/AboutModal/examples/AboutModal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class SimpleAboutModal extends React.Component {
return (
<React.Fragment>
<Button variant="primary" onClick={this.handleModalToggle}>
Show About Modal
Show about modal
</Button>
<AboutModal
isOpen={isModalOpen}
Expand Down Expand Up @@ -93,7 +93,7 @@ class SimpleAboutModal extends React.Component {
return (
<React.Fragment>
<Button variant="primary" onClick={this.handleModalToggle}>
Show About Modal
Show about modal
</Button>
<AboutModal
isOpen={isModalOpen}
Expand Down Expand Up @@ -152,7 +152,7 @@ class ContentRichAboutModal extends React.Component {
return (
<React.Fragment>
<Button variant="primary" onClick={this.handleModalToggle}>
Show About Modal
Show about modal
</Button>
<AboutModal
isOpen={isModalOpen}
Expand Down Expand Up @@ -219,7 +219,7 @@ class SimpleAboutModal extends React.Component {
return (
<React.Fragment>
<Button variant="primary" onClick={this.handleModalToggle}>
Show About Modal
Show about modal
</Button>
<AboutModal
isOpen={isModalOpen}
Expand Down
40 changes: 20 additions & 20 deletions packages/react-core/src/components/Accordion/examples/Accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle1'}
id="ex-toggle1"
>
Item One
Item one
</AccordionToggle>
<AccordionContent id="ex-expand1" isHidden={this.state.expanded !== 'ex-toggle1'}>
<p>
Expand All @@ -59,7 +59,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle2'}
id="ex-toggle2"
>
Item Two
Item two
</AccordionToggle>
<AccordionContent id="ex-expand2" isHidden={this.state.expanded !== 'ex-toggle2'}>
<p>
Expand All @@ -77,7 +77,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle3'}
id="ex-toggle3"
>
Item Three
Item three
</AccordionToggle>
<AccordionContent id="ex-expand3" isHidden={this.state.expanded !== 'ex-toggle3'}>
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
Expand All @@ -92,7 +92,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle4'}
id="ex-toggle4"
>
Item Four
Item four
</AccordionToggle>
<AccordionContent id="ex-expand4" isHidden={this.state.expanded !== 'ex-toggle4'}>
<p>
Expand All @@ -115,7 +115,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle5'}
id="ex-toggle5"
>
Item Five
Item five
</AccordionToggle>
<AccordionContent id="ex-expand5" isHidden={this.state.expanded !== 'ex-toggle5'}>
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
Expand Down Expand Up @@ -159,7 +159,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle1'}
id="ex-toggle1"
>
Item One
Item one
</AccordionToggle>
<AccordionContent id="ex-expand1" isHidden={this.state.expanded !== 'ex-toggle1'}>
<p>
Expand All @@ -177,7 +177,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle2'}
id="ex-toggle2"
>
Item Two
Item two
</AccordionToggle>
<AccordionContent id="ex-expand2" isHidden={this.state.expanded !== 'ex-toggle2'}>
<p>
Expand All @@ -195,7 +195,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle3'}
id="ex-toggle3"
>
Item Three
Item three
</AccordionToggle>
<AccordionContent id="ex-expand3" isHidden={this.state.expanded !== 'ex-toggle3'}>
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
Expand All @@ -210,7 +210,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle4'}
id="ex-toggle4"
>
Item Four
Item four
</AccordionToggle>
<AccordionContent id="ex-expand4" isHidden={this.state.expanded !== 'ex-toggle4'}>
<p>
Expand All @@ -233,7 +233,7 @@ class SimpleAccordion extends React.Component {
isExpanded={this.state.expanded === 'ex-toggle5'}
id="ex-toggle5"
>
Item Five
Item five
</AccordionToggle>
<AccordionContent id="ex-expand5" isHidden={this.state.expanded !== 'ex-toggle5'}>
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
Expand Down Expand Up @@ -276,7 +276,7 @@ class FixedAccordion extends React.Component {
isExpanded={this.state.expanded.includes('ex2-toggle1')}
id="ex2-toggle1"
>
Item One
Item one
</AccordionToggle>
<AccordionContent id="ex2-expand1" isHidden={!this.state.expanded.includes('ex2-toggle1')} isFixed>
<p>
Expand All @@ -291,7 +291,7 @@ class FixedAccordion extends React.Component {
isExpanded={this.state.expanded.includes('ex2-toggle2')}
id="ex2-toggle2"
>
Item Two
Item two
</AccordionToggle>
<AccordionContent id="ex2-expand2" isHidden={!this.state.expanded.includes('ex2-toggle2')} isFixed>
<p>
Expand All @@ -306,7 +306,7 @@ class FixedAccordion extends React.Component {
isExpanded={this.state.expanded.includes('ex2-toggle3')}
id="ex2-toggle3"
>
Item Three
Item three
</AccordionToggle>
<AccordionContent id="ex2-expand3" isHidden={!this.state.expanded.includes('ex2-toggle3')} isFixed>
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
Expand All @@ -318,7 +318,7 @@ class FixedAccordion extends React.Component {
isExpanded={this.state.expanded.includes('ex2-toggle4')}
id="ex2-toggle4"
>
Item Four
Item four
</AccordionToggle>
<AccordionContent id="ex2-expand4" isHidden={!this.state.expanded.includes('ex2-toggle4')} isFixed>
<p>
Expand All @@ -338,7 +338,7 @@ class FixedAccordion extends React.Component {
isExpanded={this.state.expanded.includes('ex2-toggle5')}
id="ex2-toggle5"
>
Item Five
Item five
</AccordionToggle>
<AccordionContent id="ex2-expand5" isHidden={!this.state.expanded.includes('ex2-toggle5')} isFixed>
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
Expand Down Expand Up @@ -393,7 +393,7 @@ class BorderedAccordion extends React.Component {
isExpanded={expanded === 'ex-toggle1'}
id="ex-toggle1"
>
Item One
Item one
</AccordionToggle>
<AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
<p>
Expand All @@ -411,7 +411,7 @@ class BorderedAccordion extends React.Component {
isExpanded={expanded === 'ex-toggle2'}
id="ex-toggle2"
>
Item Two
Item two
</AccordionToggle>
<AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
<p>
Expand All @@ -429,7 +429,7 @@ class BorderedAccordion extends React.Component {
isExpanded={expanded === 'ex-toggle3'}
id="ex-toggle3"
>
Item Three
Item three
</AccordionToggle>
<AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
Expand All @@ -444,7 +444,7 @@ class BorderedAccordion extends React.Component {
isExpanded={expanded === 'ex-toggle4'}
id="ex-toggle4"
>
Item Four
Item four
</AccordionToggle>
<AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
<AccordionExpandedContentBody>
Expand All @@ -471,7 +471,7 @@ class BorderedAccordion extends React.Component {
isExpanded={expanded === 'ex-toggle5'}
id="ex-toggle5"
>
Item Five
Item five
</AccordionToggle>
<AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
Expand Down
21 changes: 10 additions & 11 deletions packages/react-core/src/components/Alert/examples/Alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,7 @@ class StaticLiveRegionAlert extends React.Component {
title="Default live region configuration"
actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />}
>
This Alert uses the recommended <code>isLiveRegion</code> prop to automatically sets ARIA attributes and CSS
classes.
This alert uses the recommended <code>isLiveRegion</code> prop to automatically set ARIA attributes and CSS classes.
</Alert>
<Alert
aria-live="assertive"
Expand Down Expand Up @@ -212,21 +211,21 @@ class DynamicLiveRegionAlert extends React.Component {
const getUniqueId = () => new Date().getTime();
const addSuccessAlert = () => {
addAlert({
title: 'Single Success Alert',
title: 'Single success alert',
variant: 'success',
key: getUniqueId()
});
};
const addInfoAlert = () => {
addAlert({
title: 'Single Info Alert',
title: 'Single info alert',
variant: 'info',
key: getUniqueId()
});
};
const addDangerAlert = () => {
addAlert({
title: 'Single Danger Alert',
title: 'Single danger alert',
variant: 'danger',
key: getUniqueId()
});
Expand All @@ -236,13 +235,13 @@ class DynamicLiveRegionAlert extends React.Component {
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={addSuccessAlert} type="button" className={btnClasses}>
Add Single Success Alert
Add single success alert
</button>
<button onClick={addInfoAlert} type="button" className={btnClasses}>
Add Single Info Alert
Add single info alert
</button>
<button onClick={addDangerAlert} type="button" className={btnClasses}>
Add Single Danger Alert
Add single danger alert
</button>
</InputGroup>
<AlertGroup isLiveRegion aria-live="polite" aria-relevant="additions text" aria-atomic="false">
Expand Down Expand Up @@ -288,7 +287,7 @@ class AsyncLiveRegionAlert extends React.Component {
const startAsyncAlerts = () => {
let timerValue = setInterval(() => {
addAlert({
title: `This is a async alert number ${this.state.alerts.length + 1}`,
title: `Async alert number ${this.state.alerts.length + 1}`,
variant: 'info',
key: getUniqueId()
});
Expand All @@ -300,10 +299,10 @@ class AsyncLiveRegionAlert extends React.Component {
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={startAsyncAlerts} type="button" className={btnClasses}>
Start Async Info Alerts
Start async info alerts
</button>
<button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>
Stop Async Info Alerts
Stop async info alerts
</button>
</InputGroup>
<AlertGroup isLiveRegion>
Expand Down
42 changes: 21 additions & 21 deletions packages/react-core/src/components/AlertGroup/examples/AlertGroup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ class StaticAlertGroup extends React.Component {
return (
<React.Fragment>
<AlertGroup>
<Alert title="Success Alert" variant="success" isInline />
<Alert title="Info Alert" variant="info" isInline/>
<Alert title="Success alert" variant="success" isInline />
<Alert title="Info alert" variant="info" isInline/>
</AlertGroup>
</React.Fragment>
);
Expand Down Expand Up @@ -47,15 +47,15 @@ class ToastAlertGroup extends React.Component {
render() {
const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
const getUniqueId = () => (new Date().getTime());
const addSuccessAlert = () => { this.addAlert('Toast Success Alert', 'success', getUniqueId()) };
const addDangerAlert = () => { this.addAlert('Toast Danger Alert', 'danger', getUniqueId()) };
const addInfoAlert = () => { this.addAlert('Toast Info Alert', 'info', getUniqueId()) };
const addSuccessAlert = () => { this.addAlert('Toast success alert', 'success', getUniqueId()) };
const addDangerAlert = () => { this.addAlert('Toast danger alert', 'danger', getUniqueId()) };
const addInfoAlert = () => { this.addAlert('Toast info alert', 'info', getUniqueId()) };
return (
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={addSuccessAlert} type="button" className={btnClasses}>Add Toast Success Alert</button>
<button onClick={addDangerAlert} type="button" className={btnClasses}>Add Toast Danger Alert</button>
<button onClick={addInfoAlert} type="button" className={btnClasses}>Add Toast Info Alert</button>
<button onClick={addSuccessAlert} type="button" className={btnClasses}>Add toast success alert</button>
<button onClick={addDangerAlert} type="button" className={btnClasses}>Add toast danger alert</button>
<button onClick={addInfoAlert} type="button" className={btnClasses}>Add toast info alert</button>
</InputGroup>
<AlertGroup isToast isLiveRegion>
{this.state.alerts.map(({key, variant, title}) => (
Expand Down Expand Up @@ -96,18 +96,18 @@ class SingularAdditiveAlertGroup extends React.Component {
};
const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
const getUniqueId = () => (new Date().getTime());
const addSuccessAlert = () => { addAlert('Single Success Alert', 'success', getUniqueId()) };
const addDangerAlert = () => { addAlert('Single Danger Alert', 'danger', getUniqueId()) };
const addInfoAlert = () => { addAlert('Single Info Alert', 'info', getUniqueId()) };
const addSuccessAlert = () => { addAlert('Single success alert', 'success', getUniqueId()) };
const addDangerAlert = () => { addAlert('Single danger alert', 'danger', getUniqueId()) };
const addInfoAlert = () => { addAlert('Single info alert', 'info', getUniqueId()) };
this.removeAlert = key => {
this.setState({ alerts: [...this.state.alerts.filter(el => el.key !== key)] });
};
return (
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={addSuccessAlert} type="button" className={btnClasses}>Add Single Success Alert</button>
<button onClick={addDangerAlert} type="button" className={btnClasses}>Add Single Danger Alert</button>
<button onClick={addInfoAlert} type="button" className={btnClasses}>Add Single Info Alert</button>
<button onClick={addSuccessAlert} type="button" className={btnClasses}>Add single success alert</button>
<button onClick={addDangerAlert} type="button" className={btnClasses}>Add single danger alert</button>
<button onClick={addInfoAlert} type="button" className={btnClasses}>Add single info alert</button>
</InputGroup>
<AlertGroup isLiveRegion>
{this.state.alerts.map(({ title, variant, key }) => (
Expand Down Expand Up @@ -153,9 +153,9 @@ class MultipleAdditiveAlertGroup extends React.Component {
const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
const addAlertCollection = () => {
addAlerts([
{ title: 'First Alert Notification.', variant: 'success', key: getUniqueId() },
{ title: 'Second Alert Notification.', variant: 'warning', key: getUniqueId() },
{ title: 'Third Alert Notification.', variant: 'danger', key: getUniqueId() }
{ title: 'First alert notification.', variant: 'success', key: getUniqueId() },
{ title: 'Second alert notification.', variant: 'warning', key: getUniqueId() },
{ title: 'Third alert notification.', variant: 'danger', key: getUniqueId() }
])
};
this.removeAlert = key => {
Expand All @@ -164,7 +164,7 @@ class MultipleAdditiveAlertGroup extends React.Component {
return (
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={addAlertCollection} type="button" className={btnClasses}>Add Alert Collection</button>
<button onClick={addAlertCollection} type="button" className={btnClasses}>Add alert collection</button>
</InputGroup>
<AlertGroup isToast isLiveRegion>
{this.state.alerts.map(({ title, variant, key, action }) => (
Expand Down Expand Up @@ -213,7 +213,7 @@ class AsyncAdditiveAlertGroup extends React.Component {
let timerValue = setInterval(() => {
addAlerts([
{
title: `Async Notification ${this.state.alerts.length + 1} was added to the queue.`,
title: `Async notification ${this.state.alerts.length + 1} was added to the queue.`,
variant: 'danger',
key: getUniqueId()
}
Expand All @@ -224,8 +224,8 @@ class AsyncAdditiveAlertGroup extends React.Component {
return (
<React.Fragment>
<InputGroup style={{ marginBottom: '16px' }}>
<button onClick={startAsyncAlerts} type="button" className={btnClasses}>Start Async Alerts</button>
<button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>Stop Async Alerts</button>
<button onClick={startAsyncAlerts} type="button" className={btnClasses}>Start async alerts</button>
<button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>Stop async alerts</button>
</InputGroup>
<AlertGroup isToast isLiveRegion aria-live="assertive">
{this.state.alerts.map(({ title, variant, key }) => (
Expand Down
Loading