From 2bf3b8fd3fec2aa56825d66080b4f62db727b003 Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Mon, 4 May 2020 17:42:38 -0400 Subject: [PATCH 1/5] Breaking changes: Alert --- .../react-core/src/components/Alert/Alert.tsx | 40 +- .../src/components/Alert/AlertActionLink.tsx | 2 +- .../src/components/Alert/examples/Alert.md | 401 ++++++------------ .../src/components/Avatar/examples/Avatar.md | 8 +- 4 files changed, 171 insertions(+), 280 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 33292e63e40..79f5394440c 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -5,6 +5,9 @@ import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibili import { AlertIcon } from './AlertIcon'; import { capitalize, getOUIAProps, OUIAProps } from '../../helpers'; import { AlertContext } from './AlertContext'; +import { AlertActionCloseButton } from './AlertActionCloseButton'; +import { AlertActionLink } from './AlertActionLink'; +import { ButtonProps } from '../Button'; export enum AlertVariant { success = 'success', @@ -14,6 +17,10 @@ export enum AlertVariant { default = 'default' } +export interface ActionItem extends ButtonProps { + text: string; +} + export interface AlertProps extends Omit, 'action' | 'title'> { /** Adds Alert variant styles */ variant?: 'success' | 'danger' | 'warning' | 'info' | 'default'; @@ -21,8 +28,10 @@ export interface AlertProps extends Omit, 'actio isInline?: boolean; /** Title of the Alert */ title: React.ReactNode; - /** Action button to put in the Alert. Should be or */ - action?: React.ReactNode; + /** Adds a close button to the alert and defines the callback for when it is clicked */ + onClose?: () => void; + /** Action item links */ + actionItems?: ActionItem[]; /** Content rendered inside the Alert */ children?: React.ReactNode; /** Additional classes added to the Alert */ @@ -41,7 +50,8 @@ export const Alert: React.FunctionComponent = ({ isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, - action = null, + onClose, + actionItems, title, children = '', className = '', @@ -75,12 +85,26 @@ export const Alert: React.FunctionComponent = ({ >

{getHeadingContent}

+ {onClose && ( + +
+ +
+ + )} {children &&
{children}
} - - {action && (typeof action === 'object' || typeof action === 'string') && ( -
{action}
- )} - + {actionItems && ( +
+ {actionItems.map((item: ActionItem, index: number) => { + const { text, ...rest } = item; + return ( + + {text} + + ); + })} +
+ )} ); }; diff --git a/packages/react-core/src/components/Alert/AlertActionLink.tsx b/packages/react-core/src/components/Alert/AlertActionLink.tsx index c947498786f..8f52e6ef055 100644 --- a/packages/react-core/src/components/Alert/AlertActionLink.tsx +++ b/packages/react-core/src/components/Alert/AlertActionLink.tsx @@ -13,7 +13,7 @@ export const AlertActionLink: React.FunctionComponent = ({ children, ...props }: AlertActionLinkProps) => ( - ); diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 9b4ba2959f9..2563070c4e4 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -5,213 +5,67 @@ cssPrefix: 'pf-c-alert' typescript: true propComponents: ['Alert', 'AlertActionCloseButton', 'AlertActionLink'] --- + import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; import './alert.css'; ## Examples -```js title=Default -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; -class DefaultAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } - - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Info alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - {console.log('Default alert title 3')}}>Action Button} - /> - - - ); - } -} -``` - -```js title=Info +```js title=Types import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class InfoAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } +import { Alert } from '@patternfly/react-core'; +class AlertTypes extends React.Component { render() { - const { alertOneVisible, alertTwoVisible } = this.state; return ( - {alertOneVisible && ( - } - > - Info alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} /> - + + + + + ); } } ``` -```js title=Success +```js title=Variations import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; +import { Alert } from '@patternfly/react-core'; -class SuccessAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } +class AlertVariations extends React.Component { render() { - const { alertOneVisible, alertTwoVisible } = this.state; return ( - {alertOneVisible && ( - } - > - Success alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} Action Button} - /> - - - ); - } -} -``` - -```js title=Warning -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class WarningAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Warning alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} + title="Success alert title" + onClose={() => alert('Clicked the close button')} + actionItems={[ + { text: 'View details', onClick: () => alert('Clicked on View details') }, + { text: 'Ignore', onClick: () => alert('Clicked on Ignore') } + ]} + > +

Success alert description. This should tell the user more information about the alert.

+ + alert('Clicked the close button')}> +

+ Success alert description. This should tell the user more information about the alert.{' '} + This is a link. +

+ Action Button} + variant="success" + title="Success alert title" + onClose={() => alert('Clicked the close button')} + actionItems={[ + { text: 'View details', onClick: () => alert('Clicked on View details') }, + { text: 'Ignore', onClick: () => alert('Clicked on Ignore') } + ]} /> - - - ); - } -} -``` - -```js title=Danger -import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; - -class DangerAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - - {alertOneVisible && ( - } - > - Danger alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} - Action Button} /> - + alert('Clicked the close button')} /> + ); } @@ -226,8 +80,8 @@ class InlineAlert extends React.Component { render() { return ( - - + + @@ -239,45 +93,47 @@ class InlineAlert extends React.Component { ```js title=Inline-variations import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; +import { Alert } from '@patternfly/react-core'; class InlineAlertVariations extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true, renderPropsAlertVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - this.hideRenderPropsAlertVisible = () => this.setState({ renderPropsAlertVisible: false }); - } render() { - const { alertOneVisible, alertTwoVisible, renderPropsAlertVisible } = this.state; return ( - {alertOneVisible && ( - } - > - Success alert description. This is a link. - - )} - {alertTwoVisible && ( - } - /> - )} alert('Clicked the close button')} + actionItems={[ + { text: 'View details', onClick: () => alert('Clicked on View details') }, + { text: 'Ignore', onClick: () => alert('Clicked on Ignore') } + ]} + > +

Success alert description. This should tell the user more information about the alert.

+ + alert('Clicked the close button')}> +

+ Success alert description. This should tell the user more information about the alert.{' '} + This is a link. +

+ + Action Button} + variant="success" + title="Success alert title" + onClose={() => alert('Clicked the close button')} + actionItems={[ + { text: 'View details', onClick: () => alert('Clicked on View details') }, + { text: 'Ignore', onClick: () => alert('Clicked on Ignore') } + ]} /> - + alert('Clicked the close button')} + /> + ); } @@ -286,41 +142,32 @@ class InlineAlertVariations extends React.Component { ```js title=Static-live-region-alert import React from 'react'; -import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core'; +import { Alert } from '@patternfly/react-core'; class StaticLiveRegionAlert extends React.Component { - constructor(props) { - super(props); - this.state = { alertOneVisible: true, alertTwoVisible: true }; - this.hideAlertOne = () => this.setState({ alertOneVisible: false }); - this.hideAlertTwo = () => this.setState({ alertTwoVisible: false }); - } - render() { - const { alertOneVisible, alertTwoVisible } = this.state; - return ( - {alertOneVisible && ( - }> - This Alert uses the recommended isLiveRegion prop to automatically sets ARIA attributes and CSS classes. - - )} - {alertTwoVisible && ( - }> - You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on the containing element. - - )} + alert('Clicked the close button')} + > + This Alert uses the recommended isLiveRegion prop to automatically sets ARIA attributes and CSS + classes. + + alert('Clicked the close button')} + > + You can alternatively omit the isLiveRegion prop to specify ARIA attributes and CSS manually on + the containing element. + ); } @@ -336,19 +183,21 @@ class DynamicLiveRegionAlert extends React.Component { super(); this.state = { alerts: [] - } + }; } render() { - const addAlert = (alertProps) => { this.setState({ alerts: [...this.state.alerts, alertProps] }); }; - const getUniqueId = () => (new Date().getTime()); + const addAlert = alertProps => { + this.setState({ alerts: [...this.state.alerts, alertProps] }); + }; + const getUniqueId = () => new Date().getTime(); const addSuccessAlert = () => { addAlert({ title: 'Single Success Alert', variant: 'success', isLiveRegion: true, - key: getUniqueId(), - }) + key: getUniqueId() + }); }; const addInfoAlert = () => { addAlert({ @@ -357,8 +206,8 @@ class DynamicLiveRegionAlert extends React.Component { ariaLive: 'polite', ariaRelevant: 'additions text', ariaAtomic: 'false', - key: getUniqueId(), - }) + key: getUniqueId() + }); }; const addDangerAlert = () => { addAlert({ @@ -367,16 +216,22 @@ class DynamicLiveRegionAlert extends React.Component { ariaLive: 'assertive', ariaRelevant: 'additions text', ariaAtomic: 'false', - key: getUniqueId(), - }) + key: getUniqueId() + }); }; const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' '); return ( - - - + + + {this.state.alerts.map(({ title, variant, isLiveRegion, ariaLive, ariaRelevant, ariaAtomic, key }) => ( + /> ))} ); @@ -405,13 +260,19 @@ class AsyncLiveRegionAlert extends React.Component { this.state = { alerts: [], timer: null - } - this.stopAsyncAlerts = () => { clearInterval(this.state.timer); } + }; + this.stopAsyncAlerts = () => { + clearInterval(this.state.timer); + }; + } + componentWillUnmount() { + this.stopAsyncAlerts(); } - componentWillUnmount() { this.stopAsyncAlerts(); } render() { - const addAlert = (incomingAlerts) => { this.setState({ alerts: [...this.state.alerts, incomingAlerts] }); }; - const getUniqueId = () => (new Date().getTime()); + const addAlert = incomingAlerts => { + this.setState({ alerts: [...this.state.alerts, incomingAlerts] }); + }; + const getUniqueId = () => new Date().getTime(); const startAsyncAlerts = () => { let timerValue = setInterval(() => { addAlert({ @@ -421,21 +282,21 @@ class AsyncLiveRegionAlert extends React.Component { key: getUniqueId() }); }, 1500); - this.setState({timer: timerValue}); + this.setState({ timer: timerValue }); }; const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' '); return ( - - + + {this.state.alerts.map(({ title, variant, isLiveRegion, key }) => ( - + ))} ); diff --git a/packages/react-core/src/components/Avatar/examples/Avatar.md b/packages/react-core/src/components/Avatar/examples/Avatar.md index 9a335befbba..cd308c1568a 100644 --- a/packages/react-core/src/components/Avatar/examples/Avatar.md +++ b/packages/react-core/src/components/Avatar/examples/Avatar.md @@ -15,5 +15,11 @@ import React from 'react'; import { Avatar } from '@patternfly/react-core'; import avatarImg from './examples/avatarImg.svg'; - +class AvatarExample extends React.Component { + render() { + return ( + + ); + } +} ``` From 95302f4544a909e734e2660ee6eed1deb24f6968 Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Tue, 5 May 2020 12:15:05 -0400 Subject: [PATCH 2/5] api and tests --- .../react-core/src/components/Alert/Alert.tsx | 42 +-- .../Alert/AlertActionCloseButton.tsx | 2 +- .../components/Alert/__tests__/Alert.test.tsx | 8 +- .../Alert/__tests__/Generated/Alert.test.tsx | 3 +- .../Generated/AlertActionCloseButton.test.tsx | 7 +- .../Generated/AlertActionLink.test.tsx | 2 +- .../__snapshots__/Alert.test.tsx.snap | 11 +- .../AlertActionLink.test.tsx.snap | 3 +- .../__snapshots__/Alert.test.tsx.snap | 345 +++++++++++------- .../src/components/Alert/examples/Alert.md | 48 +-- .../AlertGroup/__tests__/AlertGroup.test.tsx | 2 +- .../__snapshots__/AlertGroup.test.tsx.snap | 6 +- .../components/demos/AlertDemo/AlertDemo.tsx | 4 +- .../demos/AlertGroupDemo/AlertGroupDemo.tsx | 2 +- 14 files changed, 278 insertions(+), 207 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 79f5394440c..3da4ba5665b 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -5,9 +5,8 @@ import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibili import { AlertIcon } from './AlertIcon'; import { capitalize, getOUIAProps, OUIAProps } from '../../helpers'; import { AlertContext } from './AlertContext'; -import { AlertActionCloseButton } from './AlertActionCloseButton'; -import { AlertActionLink } from './AlertActionLink'; -import { ButtonProps } from '../Button'; +import { AlertActionCloseButton, AlertActionCloseButtonProps } from './AlertActionCloseButton'; +import { AlertActionLink, AlertActionLinkProps } from './AlertActionLink'; export enum AlertVariant { success = 'success', @@ -17,10 +16,6 @@ export enum AlertVariant { default = 'default' } -export interface ActionItem extends ButtonProps { - text: string; -} - export interface AlertProps extends Omit, 'action' | 'title'> { /** Adds Alert variant styles */ variant?: 'success' | 'danger' | 'warning' | 'info' | 'default'; @@ -28,10 +23,10 @@ export interface AlertProps extends Omit, 'actio isInline?: boolean; /** Title of the Alert */ title: React.ReactNode; - /** Adds a close button to the alert and defines the callback for when it is clicked */ - onClose?: () => void; - /** Action item links */ - actionItems?: ActionItem[]; + /** Close button; either use an object like { onClose: () => {} } or use the AlertActionCloseButton component */ + actionClose?: AlertActionCloseButtonProps; + /** Action links; either use an object like { children: 'Action', onClick: () => {} } or use the AlertActionCloseButton component */ + actionLinks?: AlertActionLinkProps[]; /** Content rendered inside the Alert */ children?: React.ReactNode; /** Additional classes added to the Alert */ @@ -50,8 +45,8 @@ export const Alert: React.FunctionComponent = ({ isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, - onClose, - actionItems, + actionClose, + actionLinks, title, children = '', className = '', @@ -85,23 +80,24 @@ export const Alert: React.FunctionComponent = ({ >

{getHeadingContent}

- {onClose && ( + {actionClose && (
- + {React.isValidElement(actionClose) ? actionClose : }
)} {children &&
{children}
} - {actionItems && ( + {actionLinks && (
- {actionItems.map((item: ActionItem, index: number) => { - const { text, ...rest } = item; - return ( - - {text} - - ); + {actionLinks.map((item: AlertActionLinkProps, index: number) => { + if (React.isValidElement(item)) { + return React.cloneElement(item, { + key: item.key || index + }); + } else { + return ; + } })}
)} diff --git a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx index 023edb31001..30352f52b60 100644 --- a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx +++ b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx @@ -3,7 +3,7 @@ import { Button, ButtonVariant, ButtonProps } from '../Button'; import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon'; import { AlertContext } from './AlertContext'; -interface AlertActionCloseButtonProps extends ButtonProps { +export interface AlertActionCloseButtonProps extends ButtonProps { /** Additional classes added to the AlertActionCloseButton */ className?: string; /** A callback for when the close button is clicked */ diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx index d8e247385e2..b4c4ff3ba83 100644 --- a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx @@ -37,7 +37,7 @@ Object.values(AlertVariant).forEach(variant => { test('Action Link', () => { const view = mount( - test} title=""> + test]} title=""> Some alert ); @@ -49,7 +49,7 @@ Object.values(AlertVariant).forEach(variant => { const view = mount( } + actionClose={} title={`Sample ${variant} alert`} > Some alert @@ -62,7 +62,7 @@ Object.values(AlertVariant).forEach(variant => { test('Action and Title', () => { const view = mount( - test} title="Some title"> + test]} title="Some title"> Some alert ); @@ -74,7 +74,7 @@ Object.values(AlertVariant).forEach(variant => { test} + actionLinks={[test]} title="Some title" > Some alert diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/Alert.test.tsx index 6f14fac4c3b..65d864cfb9c 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/Alert.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/Alert.test.tsx @@ -13,7 +13,8 @@ it('Alert should match snapshot (auto-generated)', () => { variant={'success'} isInline={false} title={
ReactNode
} - action={null} + actionClose={undefined} + actionLinks={[]} children={''} className={"''"} aria-label={'string'} diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx index c5746f35a17..5c0379a6353 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionCloseButton.test.tsx @@ -9,7 +9,12 @@ import {} from '../..'; it('AlertActionCloseButton should match snapshot (auto-generated)', () => { const view = shallow( - undefined as any} aria-label={"''"} variantLabel={"''"} /> + undefined as any} + aria-label={"''"} + variantLabel={'string'} + /> ); expect(view).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx index cb1265c845d..35ca1fd9f51 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/Generated/AlertActionLink.test.tsx @@ -8,6 +8,6 @@ import { AlertActionLink } from '../../AlertActionLink'; import {} from '../..'; it('AlertActionLink should match snapshot (auto-generated)', () => { - const view = shallow(); + const view = shallow(); expect(view).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/Alert.test.tsx.snap index ec0605b8725..6ed66580c87 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/Alert.test.tsx.snap @@ -23,15 +23,8 @@ exports[`Alert should match snapshot (auto-generated) 1`] = ` ReactNode - - ReactNode - , - "variantLabel": "string", - } - } +
`; diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap index cf4b274ff48..99614afacf5 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap @@ -3,8 +3,9 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = ` `; diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap index f7e88d5046e..26b28c904d8 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Alert - danger Action Close Button 1`] = ` Sample danger alert -
- Some alert -
@@ -119,16 +114,23 @@ exports[`Alert - danger Action Close Button 1`] = `
+
+ Some alert +
`; exports[`Alert - danger Action Link 1`] = ` - test - + actionLinks={ + Array [ + + test + , + ] } title="" variant="danger" @@ -188,17 +190,20 @@ exports[`Alert - danger Action Link 1`] = ` Some alert
- +
- +
- +
+
+ Some alert +
`; exports[`Alert - default Action Link 1`] = ` - test - + actionLinks={ + Array [ + + test + , + ] } title="" variant="default" @@ -850,17 +867,20 @@ exports[`Alert - default Action Link 1`] = ` Some alert
- +
- +
- +
+
+ Some alert +
`; exports[`Alert - info Action Link 1`] = ` - test - + actionLinks={ + Array [ + + test + , + ] } title="" variant="info" @@ -1512,17 +1544,20 @@ exports[`Alert - info Action Link 1`] = ` Some alert
- +
- +
- +
+
+ Some alert +
`; exports[`Alert - success Action Link 1`] = ` - test - + actionLinks={ + Array [ + + test + , + ] } title="" variant="success" @@ -2174,17 +2221,20 @@ exports[`Alert - success Action Link 1`] = ` Some alert
- +
- +
- +
+
+ Some alert +
`; exports[`Alert - warning Action Link 1`] = ` - test - + actionLinks={ + Array [ + + test + , + ] } title="" variant="warning" @@ -2836,17 +2898,20 @@ exports[`Alert - warning Action Link 1`] = ` Some alert
- +
- +
- +
+ @@ -375,7 +375,6 @@ exports[`alertgroup closes when alerts are closed 1`] = ` Test Alert -
@@ -402,6 +401,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
+ @@ -418,7 +418,7 @@ exports[`alertgroup closes when alerts are closed 1`] = ` key="0" > { id="info-alert" variant="info" title="Info alert title" - action={} + actionClose={} > Info alert description. This is a link. @@ -39,7 +39,7 @@ export class AlertDemo extends React.Component<{}, AlertDemoState> { id="info-alert" variant="info" title="Info alert title" - action={} + actionClose={} > Info alert description. This is a link. diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx index b50cd9bf3e0..10a1c4bb25d 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx @@ -68,7 +68,7 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> { variant={AlertVariant[variant]} title={title} key={key} - action={ this.removeAlert(key)} id="test-button" />} + actionClose={ this.removeAlert(key)} id="test-button" />} /> ))} From 0edbf90fcfd940ca53b113c7d9ec0be157a34d0b Mon Sep 17 00:00:00 2001 From: Joachim Schuler Date: Wed, 6 May 2020 10:52:38 -0400 Subject: [PATCH 3/5] simpler api --- .../react-core/src/components/Alert/Alert.tsx | 28 ++------ .../__snapshots__/Alert.test.tsx.snap | 60 +++++------------ .../src/components/Alert/examples/Alert.md | 66 +++++++++++-------- .../AlertGroup/examples/AlertGroup.md | 6 +- 4 files changed, 61 insertions(+), 99 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 3da4ba5665b..3055d95dcf9 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -5,8 +5,6 @@ import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibili import { AlertIcon } from './AlertIcon'; import { capitalize, getOUIAProps, OUIAProps } from '../../helpers'; import { AlertContext } from './AlertContext'; -import { AlertActionCloseButton, AlertActionCloseButtonProps } from './AlertActionCloseButton'; -import { AlertActionLink, AlertActionLinkProps } from './AlertActionLink'; export enum AlertVariant { success = 'success', @@ -23,10 +21,10 @@ export interface AlertProps extends Omit, 'actio isInline?: boolean; /** Title of the Alert */ title: React.ReactNode; - /** Close button; either use an object like { onClose: () => {} } or use the AlertActionCloseButton component */ - actionClose?: AlertActionCloseButtonProps; - /** Action links; either use an object like { children: 'Action', onClick: () => {} } or use the AlertActionCloseButton component */ - actionLinks?: AlertActionLinkProps[]; + /** Close button; use the AlertActionCloseButton component */ + actionClose?: React.ReactNode; + /** Action links; use a single AlertActionLink component or multiple wrapped in React.Fragment */ + actionLinks?: React.ReactNode; /** Content rendered inside the Alert */ children?: React.ReactNode; /** Additional classes added to the Alert */ @@ -82,25 +80,11 @@ export const Alert: React.FunctionComponent = ({

{getHeadingContent}

{actionClose && ( -
- {React.isValidElement(actionClose) ? actionClose : } -
+
{actionClose}
 )} {children &&
{children}
} - {actionLinks && ( -
- {actionLinks.map((item: AlertActionLinkProps, index: number) => { - if (React.isValidElement(item)) { - return React.cloneElement(item, { - key: item.key || index - }); - } else { - return ; - } - })} -
- )} + {actionLinks &&
{actionLinks}
} ); }; diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap index 26b28c904d8..3874720fc22 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap @@ -192,9 +192,7 @@ exports[`Alert - danger Action Link 1`] = `
- +