From f61cb26453ea572214d36ebea6c622758af955c1 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Tue, 5 Jul 2022 16:43:11 -0400 Subject: [PATCH 1/6] chore(NotificationDrawer):convert examples to typescript --- .../examples/NotificationDrawer.md | 711 +----------------- .../examples/NotificationDrawerBasic.tsx | 185 +++++ .../examples/NotificationDrawerGroups.tsx | 295 ++++++++ .../NotificationDrawerLightweight.tsx | 189 +++++ 4 files changed, 672 insertions(+), 708 deletions(-) create mode 100644 packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx create mode 100644 packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx create mode 100644 packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md index 402cc4bc0a8..a454feb4d77 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md @@ -23,720 +23,15 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; ### Basic -```js -import React from 'react'; -import { - Dropdown, - DropdownItem, - DropdownPosition, - DropdownDirection, - DropdownSeparator, - KebabToggle, - NotificationDrawer, - NotificationDrawerBody, - NotificationDrawerHeader, - NotificationDrawerList, - NotificationDrawerListItem, - NotificationDrawerListItemBody, - NotificationDrawerListItemHeader, - Title -} from '@patternfly/react-core'; - -class BasicNotificationDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: new Array(6).fill(false), - isDrawerOpen: true - }; - this.onDrawerClose = () => { - this.setState({ - isDrawerOpen: false - }); - }; - this.onToggle = index => isOpen => { - newState = [...this.state.isOpen.slice(0, index), isOpen, ...this.state.isOpen.slice(index + 1)]; - this.setState({ isOpen: newState }); - }; - this.onSelect = event => { - this.setState({ isOpen: new Array(6).fill(false) }); - }; - } - - render() { - const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = this.state.isOpen; - const dropdownItems = [ - Link, - - Action - , - , - - Disabled link - - ]; - return ( - - - } - isOpen={isOpen0} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-0" - position={DropdownPosition.right} - /> - - - - - - } - isOpen={isOpen1} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-1" - /> - - - This is an info notification description. - - - - - } - isOpen={isOpen2} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-2" - /> - - - This is a danger notification description. This is a long description to show how the title will wrap if - it is long and wraps to multiple lines. - - - - - } - isOpen={isOpen3} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-3" - /> - - - This is a danger notification description. This is a long description to show how the title will wrap if - it is long and wraps to multiple lines. - - - - - } - isOpen={isOpen4} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-4" - /> - - - This is a warning notification description. - - - - - } - isOpen={isOpen5} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-5" - /> - - - This is a success notification description. - - - - - } - isOpen={isOpen6} - isPlain - dropdownItems={dropdownItems} - id="basic-notification-6" - /> - - - This is a default notification description. - - - - - - ); - } -} +```ts file="NotificationDrawerBasic.tsx" ``` ### Groups -```js -import React from 'react'; -import { - Button, - Dropdown, - DropdownItem, - DropdownPosition, - DropdownDirection, - DropdownSeparator, - EmptyState, - EmptyStateBody, - EmptyStateIcon, - EmptyStatePrimary, - KebabToggle, - NotificationDrawer, - NotificationDrawerBody, - NotificationDrawerHeader, - NotificationDrawerGroup, - NotificationDrawerGroupList, - NotificationDrawerList, - NotificationDrawerListItem, - NotificationDrawerListItemBody, - NotificationDrawerListItemHeader, - Title -} from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; - -class GroupNotificationDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpenMap: null, - firstGroupExpanded: false, - secondGroupExpanded: false, - thirdGroupExpanded: true - }; - this.onToggle = (id, isOpen) => { - this.setState({ - isOpenMap: { [id]: isOpen } - }); - }; - this.onSelect = event => { - this.setState({ - isOpenMap: null - }); - }; - this.toggleFirstDrawer = (event, value) => { - this.setState({ - firstGroupExpanded: value - }); - }; - this.toggleSecondDrawer = (event, value) => { - this.setState({ - secondGroupExpanded: value - }); - }; - this.toggleThirdDrawer = (event, value) => { - this.setState({ - thirdGroupExpanded: value - }); - }; - } - render() { - const { isOpenMap, firstGroupExpanded, secondGroupExpanded, thirdGroupExpanded } = this.state; - const dropdownItems = [ - Link, - - Action - , - , - - Disabled link - - ]; - return ( - - - this.onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />} - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-1" - position={DropdownPosition.right} - /> - - - - - - - - this.onToggle('groups-notification-kebab-toggle-2', isOpen)} id="groups-kebab-toggle-2" /> - } - isOpen={isOpenMap && isOpenMap['groups-notification-kebab-toggle-2']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-2" - /> - - - This is an info notification description. - - - - - this.onToggle('groups-kebab-toggle-3', isOpen)} id="groups-kebab-toggle-3" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-3" - /> - - - This is a danger notification description. This is a long description to show how the title will - wrap if it is long and wraps to multiple lines. - - - - - this.onToggle('groups-kebab-toggle-4', isOpen)} id="groups-kebab-toggle-4" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-4" - /> - - - This is a warning notification description. - - - - - this.onToggle('groups-kebab-toggle-5', isOpen)} id="groups-kebab-toggle-5" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-5" - /> - - - This is a success notification description. - - - - - - - - - - - No alerts found - - - There are currently no critical alerts firing. There may be firing alerts of other severities or - silenced critical alerts however. - - - - - - - - - - - - this.onToggle('groups-kebab-toggle-6', isOpen)} id="groups-kebab-toggle-6" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-6" - /> - - - This is an info notification description. - - - - - this.onToggle('groups-kebab-toggle-7', isOpen)} id="groups-kebab-toggle-7" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-7" - /> - - - This is a danger notification description. This is a long description to show how the title will - wrap if it is long and wraps to multiple lines. - - - - - this.onToggle('groups-kebab-toggle-8', isOpen)} id="groups-kebab-toggle-8" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-8" - /> - - - This is a warning notification description. - - - - - this.onToggle('groups-kebab-toggle-9', isOpen)} id="groups-kebab-toggle-9" /> - } - isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']} - isPlain - dropdownItems={dropdownItems} - id="grouped-notification-9" - /> - - - This is a success notification description. - - - - - - - - ); - } -} +```ts file="NotificationDrawerGroups.tsx" ``` ### Lightweight -```js -import React from 'react'; -import { - Button, - EmptyState, - EmptyStateBody, - EmptyStateIcon, - EmptyStatePrimary, - EmptyStateVariant, - NotificationDrawer, - NotificationDrawerBody, - NotificationDrawerHeader, - NotificationDrawerGroup, - NotificationDrawerGroupList, - NotificationDrawerList, - NotificationDrawerListItem, - NotificationDrawerListItemBody, - NotificationDrawerListItemHeader, - Title -} from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; - -class LightweightNotificationDrawerDemo extends React.Component { - constructor(props) { - super(props); - this.state = { - firstGroupExpanded: false, - secondGroupExpanded: true, - thirdGroupExpanded: false - }; - - this.onFocus = id => { - if (id) { - const element = document.getElementById(id); - element.focus(); - } - }; - - this.toggleFirstDrawer = (event, value) => { - this.setState({ - firstGroupExpanded: value - }); - }; - - this.toggleSecondDrawer = (event, value) => { - this.setState({ - secondGroupExpanded: value - }); - }; - - this.toggleThirdDrawer = (event, value) => { - this.setState({ - thirdGroupExpanded: value - }); - }; - } - - render() { - const { firstGroupExpanded, secondGroupExpanded, thirdGroupExpanded } = this.state; - - return ( - - - - - - - - - - This is an info notification description. - - - - - - This is a danger notification description. This is a long description to show how the title will - wrap if it is long and wraps to multiple lines. - - - - - - This is a warning notification description. - - - - - - This is a success notification description. - - - - - - - - - - - - This is an info notification description. - - - - - - This is a danger notification description. This is a long description to show how the title will - wrap if it is long and wraps to multiple lines. - - - - - - This is a warning notification description. - - - - - - This is a success notification description. - - - - - - - - - - No alerts found - - - There are currently no critical alerts firing. There may be firing alerts of other severities or - silenced critical alerts however. - - - - - - - - - - - ); - } -} +```ts file="NotificationDrawerLightweight.tsx" ``` diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx new file mode 100644 index 00000000000..711efc170b6 --- /dev/null +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -0,0 +1,185 @@ +import React from 'react'; +import { + Dropdown, + DropdownItem, + DropdownPosition, + DropdownDirection, + DropdownSeparator, + KebabToggle, + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerHeader, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader +} from '@patternfly/react-core'; + +export const NotificationDrawerBasic: React.FunctionComponent = () => { + const [isOpenMap, setIsOpenMap] = React.useState(new Array(6).fill(false)); + + const onToggle = index => isOpen => { + const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)]; + setIsOpenMap(newState); + }; + + const onSelect = () => { + setIsOpenMap(new Array(6).fill(false)); + }; + + const onDrawerClose = () => { + setIsOpenMap(new Array(6).fill(false)); + }; + + const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap; + + const dropdownItems = [ + Link, + + Action + , + , + + Disabled link + + ]; + return ( + + + } + isOpen={isOpen0} + isPlain + dropdownItems={dropdownItems} + id="notification-0" + position={DropdownPosition.right} + /> + + + + + + } + isOpen={isOpen1} + isPlain + dropdownItems={dropdownItems} + id="notification-1" + /> + + + This is an info notification description. + + + + + } + isOpen={isOpen2} + isPlain + dropdownItems={dropdownItems} + id="notification-2" + /> + + + This is a danger notification description. This is a long description to show how the title will wrap if + it is long and wraps to multiple lines. + + + + + } + isOpen={isOpen3} + isPlain + dropdownItems={dropdownItems} + id="notification-3" + /> + + + This is a danger notification description. This is a long description to show how the title will wrap if + it is long and wraps to multiple lines. + + + + + } + isOpen={isOpen4} + isPlain + dropdownItems={dropdownItems} + id="notification-4" + /> + + + This is a warning notification description. + + + + + } + isOpen={isOpen5} + isPlain + dropdownItems={dropdownItems} + id="notification-5" + /> + + + This is a success notification description. + + + + + } + isOpen={isOpen6} + isPlain + dropdownItems={dropdownItems} + id="notification-6" + /> + + + This is a default notification description. + + + + + + ); +}; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx new file mode 100644 index 00000000000..f866ee06a75 --- /dev/null +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -0,0 +1,295 @@ +import React from 'react'; +import { + Button, + Dropdown, + DropdownItem, + DropdownPosition, + DropdownDirection, + DropdownSeparator, + EmptyState, + EmptyStateBody, + EmptyStateIcon, + EmptyStatePrimary, + KebabToggle, + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerHeader, + NotificationDrawerGroup, + NotificationDrawerGroupList, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader, + Title, + EmptyStateVariant +} from '@patternfly/react-core'; +import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; + +export const NotificationDrawerGroups: React.FunctionComponent = () => { + const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false); + const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true); + const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); + const [isOpenMap, setIsOpenMap] = React.useState({}); + + const onToggle = (id, isOpen) => { + setIsOpenMap({ [id]: isOpen }); + }; + + const onSelect = () => { + setIsOpenMap({}); + }; + + const toggleFirstDrawer = (event, value) => { + setFirstGroupExpanded(value); + setSecondGroupExpanded(false); + setThirdGroupExpanded(false); + }; + + const toggleSecondDrawer = (event, value) => { + setSecondGroupExpanded(value); + setFirstGroupExpanded(false); + setThirdGroupExpanded(false); + }; + + const toggleThirdDrawer = (event, value) => { + setThirdGroupExpanded(value); + setSecondGroupExpanded(false); + setFirstGroupExpanded(false); + }; + + const dropdownItems = [ + Link, + + Action + , + , + + Disabled link + + ]; + + return ( + + + onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />} + isOpen={isOpenMap && isOpenMap['toggle-id-0']} + isPlain + dropdownItems={dropdownItems} + id="notification-0" + position={DropdownPosition.right} + /> + + + + + + + + onToggle('toggle-id-5', isOpen)} id="toggle-id-5" />} + isOpen={isOpenMap && isOpenMap['toggle-id-5']} + isPlain + dropdownItems={dropdownItems} + id="notification-5" + /> + + + This is an info notification description. + + + + + onToggle('toggle-id-6', isOpen)} id="toggle-id-6" />} + isOpen={isOpenMap && isOpenMap['toggle-id-6']} + isPlain + dropdownItems={dropdownItems} + id="notification-6" + /> + + + This is a danger notification description. This is a long description to show how the title will wrap + if it is long and wraps to multiple lines. + + + + + onToggle('toggle-id-7', isOpen)} id="toggle-id-7" />} + isOpen={isOpenMap && isOpenMap['toggle-id-7']} + isPlain + dropdownItems={dropdownItems} + id="notification-7" + /> + + + This is a warning notification description. + + + + + onToggle('toggle-id-8', isOpen)} id="toggle-id-8" />} + isOpen={isOpenMap && isOpenMap['toggle-id-8']} + isPlain + dropdownItems={dropdownItems} + id="notification-8" + /> + + + This is a success notification description. + + + + + + + + + onToggle('toggle-id-9', isOpen)} id="toggle-id-9" />} + isOpen={isOpenMap && isOpenMap['toggle-id-9']} + isPlain + dropdownItems={dropdownItems} + id="notification-9" + /> + + + This is an info notification description. + + + + + onToggle('toggle-id-10', isOpen)} id="toggle-id-10" />} + isOpen={isOpenMap && isOpenMap['toggle-id-10']} + isPlain + dropdownItems={dropdownItems} + id="notification-10" + /> + + + This is a danger notification description. This is a long description to show how the title will wrap + if it is long and wraps to multiple lines. + + + + + onToggle('toggle-id-11', isOpen)} id="toggle-id-11" />} + isOpen={isOpenMap && isOpenMap['toggle-id-11']} + isPlain + dropdownItems={dropdownItems} + id="notification-11" + /> + + + This is a warning notification description. + + + + + onToggle('toggle-id-12', isOpen)} id="toggle-id-12" />} + isOpen={isOpenMap && isOpenMap['toggle-id-12']} + isPlain + dropdownItems={dropdownItems} + id="notification-12" + /> + + + This is a success notification description. + + + + + + + + + + No alerts found + + + There are currently no critical alerts firing. There may be firing alerts of other severities or + silenced critical alerts however. + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx new file mode 100644 index 00000000000..e1f7d710481 --- /dev/null +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -0,0 +1,189 @@ +import React from 'react'; +import { + Button, + EmptyState, + EmptyStateBody, + EmptyStateIcon, + EmptyStatePrimary, + EmptyStateVariant, + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerHeader, + NotificationDrawerGroup, + NotificationDrawerGroupList, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader, + Title +} from '@patternfly/react-core'; +import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; + +export const NotificationDrawerLightweight: React.FunctionComponent = () => { + const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false); + const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true); + const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); + /* + const onFocus = id => { + if (id) { + const element = document.getElementById(id); + element.focus(); + } + }; + */ + + const toggleFirstDrawer = (event, value) => { + setFirstGroupExpanded(value); + setSecondGroupExpanded(false); + setThirdGroupExpanded(false); + }; + + const toggleSecondDrawer = (event, value) => { + setSecondGroupExpanded(value); + setFirstGroupExpanded(false); + setThirdGroupExpanded(false); + }; + + const toggleThirdDrawer = (event, value) => { + setThirdGroupExpanded(value); + setSecondGroupExpanded(false); + setFirstGroupExpanded(false); + }; + + return ( + + + + + + + + + + This is an info notification description. + + + + + + This is a danger notification description. This is a long description to show how the title will wrap + if it is long and wraps to multiple lines. + + + + + + This is a warning notification description. + + + + + + This is a success notification description. + + + + + + + + + + + + This is an info notification description. + + + + + + This is a danger notification description. This is a long description to show how the title will wrap + if it is long and wraps to multiple lines. + + + + + + This is a warning notification description. + + + + + + This is a success notification description. + + + + + + + + + + No alerts found + + + There are currently no critical alerts firing. There may be firing alerts of other severities or + silenced critical alerts however. + + + + + + + + + + + ); +}; From 0d9fc807f9d044232d6d6e8112647d70f976d579 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Mon, 25 Jul 2022 13:54:19 -0400 Subject: [PATCH 2/6] resolved merge conflicts with a11y id fixes --- .../examples/NotificationDrawerBasic.tsx | 28 +++--- .../examples/NotificationDrawerGroups.tsx | 96 +++++++++++++------ 2 files changed, 83 insertions(+), 41 deletions(-) diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 711efc170b6..15cb9ee1a48 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -48,11 +48,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen0} isPlain dropdownItems={dropdownItems} - id="notification-0" + id="basic-notification-0" position={DropdownPosition.right} /> @@ -67,11 +67,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen1} isPlain dropdownItems={dropdownItems} - id="notification-1" + id="basic-notification-1" /> @@ -87,11 +87,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen2} isPlain dropdownItems={dropdownItems} - id="notification-2" + id="basic-notification-2" /> @@ -109,11 +109,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen3} isPlain dropdownItems={dropdownItems} - id="notification-3" + id="basic-notification-3" /> @@ -130,11 +130,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen4} isPlain dropdownItems={dropdownItems} - id="notification-4" + id="basic-notification-4" /> @@ -151,11 +151,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { position={DropdownPosition.right} direction={DropdownDirection.up} onSelect={onSelect} - toggle={} + toggle={} isOpen={isOpen5} isPlain dropdownItems={dropdownItems} - id="notification-5" + id="basic-notification-5" /> @@ -167,11 +167,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { } + toggle={} isOpen={isOpen6} isPlain dropdownItems={dropdownItems} - id="notification-6" + id="basic-notification-6" /> diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index f866ee06a75..16862ec94e8 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -73,11 +73,13 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />} - isOpen={isOpenMap && isOpenMap['toggle-id-0']} + toggle={ + onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']} isPlain dropdownItems={dropdownItems} - id="notification-0" + id="grouped-notification-1" position={DropdownPosition.right} /> @@ -99,11 +101,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-5', isOpen)} id="toggle-id-5" />} - isOpen={isOpenMap && isOpenMap['toggle-id-5']} + toggle={ + onToggle('groups-kebab-toggle-2', isOpen)} + id="groups-kebab-toggle-2" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-2']} isPlain dropdownItems={dropdownItems} - id="notification-5" + id="grouped-notification-2" /> @@ -119,11 +126,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-6', isOpen)} id="toggle-id-6" />} - isOpen={isOpenMap && isOpenMap['toggle-id-6']} + toggle={ + onToggle('groups-kebab-toggle-3', isOpen)} + id="groups-kebab-toggle-3" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']} isPlain dropdownItems={dropdownItems} - id="notification-6" + id="grouped-notification-3" /> @@ -140,11 +152,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-7', isOpen)} id="toggle-id-7" />} - isOpen={isOpenMap && isOpenMap['toggle-id-7']} + toggle={ + onToggle('groups-kebab-toggle-4', isOpen)} + id="groups-kebab-toggle-4" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']} isPlain dropdownItems={dropdownItems} - id="notification-7" + id="grouped-notification-7" /> @@ -161,11 +178,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { position={DropdownPosition.right} direction={DropdownDirection.up} onSelect={onSelect} - toggle={ onToggle('toggle-id-8', isOpen)} id="toggle-id-8" />} - isOpen={isOpenMap && isOpenMap['toggle-id-8']} + toggle={ + onToggle('groups-kebab-toggle-5', isOpen)} + id="groups-kebab-toggle-5" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']} isPlain dropdownItems={dropdownItems} - id="notification-8" + id="grouped-notification-5" /> @@ -190,11 +212,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-9', isOpen)} id="toggle-id-9" />} - isOpen={isOpenMap && isOpenMap['toggle-id-9']} + toggle={ + onToggle('groups-kebab-toggle-6', isOpen)} + id="groups-kebab-toggle-6" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']} isPlain dropdownItems={dropdownItems} - id="notification-9" + id="grouped-notification-6" /> @@ -210,11 +237,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-10', isOpen)} id="toggle-id-10" />} - isOpen={isOpenMap && isOpenMap['toggle-id-10']} + toggle={ + onToggle('groups-kebab-toggle-7', isOpen)} + id="groups-kebab-toggle-7" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']} isPlain dropdownItems={dropdownItems} - id="notification-10" + id="gropued-notification-7" /> @@ -231,11 +263,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { onToggle('toggle-id-11', isOpen)} id="toggle-id-11" />} - isOpen={isOpenMap && isOpenMap['toggle-id-11']} + toggle={ + onToggle('groups-kebab-toggle-8', isOpen)} + id="groups-kebab-toggle-8" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']} isPlain dropdownItems={dropdownItems} - id="notification-11" + id="grouped-notification-8" /> @@ -252,11 +289,16 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { position={DropdownPosition.right} direction={DropdownDirection.up} onSelect={onSelect} - toggle={ onToggle('toggle-id-12', isOpen)} id="toggle-id-12" />} - isOpen={isOpenMap && isOpenMap['toggle-id-12']} + toggle={ + onToggle('groups-kebab-toggle-9', isOpen)} + id="groups-kebab-toggle-9" + /> + } + isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']} isPlain dropdownItems={dropdownItems} - id="notification-12" + id="grouped-notification-9" /> From feec3f1b5647cccdcde4885263a3db851704cf26 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Fri, 5 Aug 2022 15:09:31 -0400 Subject: [PATCH 3/6] updated examples with suggestions from Eric --- .../examples/NotificationDrawerBasic.tsx | 8 ++++---- .../examples/NotificationDrawerGroups.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 15cb9ee1a48..99deac637f4 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -16,19 +16,19 @@ import { } from '@patternfly/react-core'; export const NotificationDrawerBasic: React.FunctionComponent = () => { - const [isOpenMap, setIsOpenMap] = React.useState(new Array(6).fill(false)); + const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false)); - const onToggle = index => isOpen => { + const onToggle = (index: number) => (isOpen: boolean) => { const newState = [...isOpenMap.slice(0, index), isOpen, ...isOpenMap.slice(index + 1)]; setIsOpenMap(newState); }; const onSelect = () => { - setIsOpenMap(new Array(6).fill(false)); + setIsOpenMap(new Array(7).fill(false)); }; const onDrawerClose = () => { - setIsOpenMap(new Array(6).fill(false)); + setIsOpenMap(new Array(7).fill(false)); }; const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index 16862ec94e8..bc1e1061d93 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -31,7 +31,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); const [isOpenMap, setIsOpenMap] = React.useState({}); - const onToggle = (id, isOpen) => { + const onToggle = (id: string, isOpen: boolean) => { setIsOpenMap({ [id]: isOpen }); }; @@ -39,19 +39,19 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { setIsOpenMap({}); }; - const toggleFirstDrawer = (event, value) => { + const toggleFirstDrawer = (event: any, value: boolean) => { setFirstGroupExpanded(value); setSecondGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleSecondDrawer = (event, value) => { + const toggleSecondDrawer = (event: any, value: boolean) => { setSecondGroupExpanded(value); setFirstGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleThirdDrawer = (event, value) => { + const toggleThirdDrawer = (event: any, value: boolean) => { setThirdGroupExpanded(value); setSecondGroupExpanded(false); setFirstGroupExpanded(false); From d0525b11dad21da3b8b24b1ec1e4a6d67d6c8410 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Fri, 5 Aug 2022 15:30:33 -0400 Subject: [PATCH 4/6] updated event argument to indicate it should be ignored --- .../examples/NotificationDrawerGroups.tsx | 6 +++--- .../examples/NotificationDrawerLightweight.tsx | 14 +++----------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index bc1e1061d93..68fdf25a061 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -39,19 +39,19 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { setIsOpenMap({}); }; - const toggleFirstDrawer = (event: any, value: boolean) => { + const toggleFirstDrawer = (_event: any, value: boolean) => { setFirstGroupExpanded(value); setSecondGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleSecondDrawer = (event: any, value: boolean) => { + const toggleSecondDrawer = (_event: any, value: boolean) => { setSecondGroupExpanded(value); setFirstGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleThirdDrawer = (event: any, value: boolean) => { + const toggleThirdDrawer = (_event: any, value: boolean) => { setThirdGroupExpanded(value); setSecondGroupExpanded(false); setFirstGroupExpanded(false); diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index e1f7d710481..311189e5396 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -23,28 +23,20 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false); const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true); const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); - /* - const onFocus = id => { - if (id) { - const element = document.getElementById(id); - element.focus(); - } - }; - */ - const toggleFirstDrawer = (event, value) => { + const toggleFirstDrawer = (_event: any, value: boolean) => { setFirstGroupExpanded(value); setSecondGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleSecondDrawer = (event, value) => { + const toggleSecondDrawer = (_event: any, value: boolean) => { setSecondGroupExpanded(value); setFirstGroupExpanded(false); setThirdGroupExpanded(false); }; - const toggleThirdDrawer = (event, value) => { + const toggleThirdDrawer = (_event: any, value: boolean) => { setThirdGroupExpanded(value); setSecondGroupExpanded(false); setFirstGroupExpanded(false); From fc48ed0eacb66e53373b193095b2e7bacef19709 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Mon, 15 Aug 2022 12:08:27 -0400 Subject: [PATCH 5/6] chore(NotificationBadge): updated liteweight example to match openshift usage --- .../examples/NotificationDrawerLightweight.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index 311189e5396..721bd997ce9 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -42,16 +42,20 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { setFirstGroupExpanded(false); }; + const onDrawerClose = () => { + // do something cool in a callback + }; + return ( - + @@ -155,7 +159,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { title="Third notification group" isExpanded={thirdGroupExpanded} count={0} - isRead + isRead={false} onExpand={toggleThirdDrawer} > From 60d896d0df998c58123df2d63d40a9dd37210d33 Mon Sep 17 00:00:00 2001 From: Jan Wright Date: Mon, 22 Aug 2022 15:15:36 -0400 Subject: [PATCH 6/6] chore(NotificationBadge): updated liteweight example to match openshift usage updates from Joe C --- .../examples/NotificationDrawerLightweight.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index 721bd997ce9..9da5d5324e0 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -55,7 +55,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { title="First notification group" isExpanded={firstGroupExpanded} count={4} - isRead={false} + isRead={true} onExpand={toggleFirstDrawer} > @@ -106,7 +106,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { title="Second notification group" isExpanded={secondGroupExpanded} count={4} - isRead={false} + isRead={true} onExpand={toggleSecondDrawer} > @@ -159,7 +159,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { title="Third notification group" isExpanded={thirdGroupExpanded} count={0} - isRead={false} + isRead={true} onExpand={toggleThirdDrawer} >