From 701ef9c30091de9490b8dc92393631cf6f57ee02 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 29 Jun 2023 16:31:40 -0400 Subject: [PATCH 1/8] update to new selectable card variant --- packages/react-core/src/demos/Card/Card.md | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index c5669cfbd54..78d33510da7 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -652,17 +652,14 @@ class CardViewBasic extends React.Component { {filtered.map((product, key) => ( this.onKeyDown(e, product.id)} onClick={() => this.onClick(product.id)} - onSelectableInputChange={() => this.onClick(product.id)} - isSelected={selectedItems.includes(product.id)} > - @@ -674,7 +671,8 @@ class CardViewBasic extends React.Component { ref={toggleRef} aria-label={`${product.name} actions`} variant="plain" - onClick={(e) => this.onCardKebabDropdownToggle(key, e)} + style={{ zIndex: "1" }} + onClick={(e) => {this.onCardKebabDropdownToggle(key, e)}} isExpanded={this.state[key]} > @@ -688,14 +686,7 @@ class CardViewBasic extends React.Component { Delete - - + ) }} From 9c4db526305ce7ec7e40640bcd25aea8d7ce2b16 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 29 Jun 2023 16:53:20 -0400 Subject: [PATCH 2/8] add primary detail updates --- packages/react-core/src/demos/PrimaryDetail.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 32be47f1363..d5fabb827bb 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -535,9 +535,8 @@ class PrimaryDetailCardView extends React.Component { onKeyDown={this.onKeyDown} onClick={this.onCardClick} onSelectableInputChange={this.onChange} - isSelectableRaised isSelected={activeCard === 'card-view-' + key} - hasSelectableInput + isSelectable > this.onCardKebabDropdownToggle(key)} > From 1f3a923f903a8bb29a381ff83307d15b0131c77b Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:54:08 -0400 Subject: [PATCH 3/8] PR feedback from Eric --- packages/react-core/src/demos/Card/Card.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index 78d33510da7..719d75b7814 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -653,7 +653,9 @@ class CardViewBasic extends React.Component { {filtered.map((product, key) => ( this.onKeyDown(e, product.id)} @@ -671,7 +673,6 @@ class CardViewBasic extends React.Component { ref={toggleRef} aria-label={`${product.name} actions`} variant="plain" - style={{ zIndex: "1" }} onClick={(e) => {this.onCardKebabDropdownToggle(key, e)}} isExpanded={this.state[key]} > From 67e79d224696da1143cfd2a1a53d97ca3e4fe174 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 6 Jul 2023 15:07:49 -0400 Subject: [PATCH 4/8] update primary detail demo --- packages/react-core/src/demos/Card/Card.md | 2 +- packages/react-core/src/demos/PrimaryDetail.md | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index 719d75b7814..aef65fae422 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -661,7 +661,7 @@ class CardViewBasic extends React.Component { onKeyDown={(e) => this.onKeyDown(e, product.id)} onClick={() => this.onClick(product.id)} > - diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index d5fabb827bb..2153c4bb2af 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -534,9 +534,9 @@ class PrimaryDetailCardView extends React.Component { id={'card-view-' + key} onKeyDown={this.onKeyDown} onClick={this.onCardClick} - onSelectableInputChange={this.onChange} - isSelected={activeCard === 'card-view-' + key} + isClickable isSelectable + isSelected={activeCard?.charAt(activeCard.length - 1) === key.toString()} > this.onCardKebabDropdownToggle(key)} > From 3315e168fb9c630c665b3c6c386bd7dc165b76e6 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Tue, 11 Jul 2023 11:43:23 -0400 Subject: [PATCH 5/8] fix a11y --- packages/react-core/src/demos/Card/Card.md | 2 +- packages/react-core/src/demos/PrimaryDetail.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index aef65fae422..a27258f5031 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -661,7 +661,7 @@ class CardViewBasic extends React.Component { onKeyDown={(e) => this.onKeyDown(e, product.id)} onClick={() => this.onClick(product.id)} > - diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 2153c4bb2af..ff60b166661 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -569,7 +569,7 @@ class PrimaryDetailCardView extends React.Component { ) }} - selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, name: `check-${product.id}`, onChange: this.state.onCardClick }} + selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: this.state.onCardClick }} > {`${product.name} From b8db2674351bfab89fffc537cf4935a5bf4bbb0c Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Tue, 25 Jul 2023 13:40:42 -0400 Subject: [PATCH 6/8] PR feedback from Margot --- packages/react-core/src/demos/Card/Card.md | 97 ++++++++++------------ 1 file changed, 45 insertions(+), 52 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index a27258f5031..deb342ee886 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -5,7 +5,6 @@ section: patterns import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; -import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import pfIcon from './pf-logo-small.svg'; @@ -37,7 +36,6 @@ import { CardHeader, CardTitle, CardBody, - Checkbox, Divider, Dropdown, DropdownItem, @@ -60,7 +58,6 @@ import { Pagination, TextContent, Text, - Title, Toolbar, ToolbarItem, ToolbarFilter, @@ -71,8 +68,6 @@ import { } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; - -import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import pfIcon from './pf-logo-small.svg'; @@ -143,13 +138,13 @@ class CardViewBasic extends React.Component { })); }; - this.onCardKebabDropdownSelect = (key, event) => { + this.onCardKebabDropdownSelect = (key) => { this.setState({ [key]: !this.state[key] }); }; - this.deleteItem = (item) => (event) => { + this.deleteItem = (item) => () => { const filter = (getter) => (val) => getter(val) !== item.id; this.setState({ cardData: this.state.cardData.filter(filter(({ id }) => id)), @@ -185,7 +180,7 @@ class CardViewBasic extends React.Component { this.onNameSelect = (event, selection) => { const checked = event.target.checked; this.setState((prevState) => { - const prevSelections = prevState.filters['products']; + const prevSelections = prevState.filters.products; return { filters: { ...prevState.filters, @@ -220,8 +215,8 @@ class CardViewBasic extends React.Component { } if ([' ', 'Enter'].includes(event.key)) { event.preventDefault(); - this.setState((prevState) => { - return prevState.selectedItems.includes(productId * 1) + this.setState((prevState) => + prevState.selectedItems.includes(productId * 1) ? { selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) @@ -229,14 +224,14 @@ class CardViewBasic extends React.Component { : { selectedItems: [...prevState.selectedItems, productId * 1], areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) - }; - }); + } + ); } }; this.onClick = (productId) => { - this.setState((prevState) => { - return prevState.selectedItems.includes(productId * 1) + this.setState((prevState) => + prevState.selectedItems.includes(productId * 1) ? { selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) @@ -244,8 +239,8 @@ class CardViewBasic extends React.Component { : { selectedItems: [...prevState.selectedItems, productId * 1], areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) - }; - }); + } + ); }; } @@ -268,17 +263,19 @@ class CardViewBasic extends React.Component { splitCheckboxSelectAll(e) { const { checked } = e.target; - const { isChecked, cardData } = this.state; + const { isChecked } = this.state; let collection = []; if (checked) { - for (var i = 0; i <= 9; i++) collection = [...collection, i]; + for (let i = 0; i <= 9; i++) { + collection = [...collection, i]; + } } this.setState( { selectedItems: collection, - isChecked: isChecked, + isChecked, areAllSelected: checked }, this.updateSelected @@ -287,7 +284,7 @@ class CardViewBasic extends React.Component { selectPage(e) { const { checked } = e.target; - const { isChecked, totalItemCount, perPage } = this.state; + const { totalItemCount, perPage } = this.state; let collection = []; collection = this.getAllItems(); @@ -302,12 +299,12 @@ class CardViewBasic extends React.Component { ); } - selectAll(e) { - const { checked } = e.target; - const { isChecked } = this.state; + selectAll() { let collection = []; - for (var i = 0; i <= 9; i++) collection = [...collection, i]; + for (let i = 0; i <= 9; i++) { + collection = [...collection, i]; + } this.setState( { @@ -319,9 +316,7 @@ class CardViewBasic extends React.Component { ); } - selectNone(e) { - const { checked } = e.target; - const { isChecked, selectedItems } = this.state; + selectNone() { this.setState( { selectedItems: [], @@ -344,7 +339,7 @@ class CardViewBasic extends React.Component { updateSelected() { const { cardData, selectedItems } = this.state; - let rows = cardData.map((post) => { + const rows = cardData.map((post) => { post.selected = selectedItems.includes(post.id); return post; }); @@ -355,7 +350,7 @@ class CardViewBasic extends React.Component { } renderPagination() { - const { page, perPage, totalItemCount, cardData } = this.state; + const { page, perPage, totalItemCount } = this.state; const defaultPerPageOptions = [ { @@ -387,7 +382,7 @@ class CardViewBasic extends React.Component { } buildSelectDropdown() { - const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state; + const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state; const numSelected = selectedItems.length; const allSelected = areAllSelected; const anySelected = numSelected > 0; @@ -524,19 +519,13 @@ class CardViewBasic extends React.Component { render() { const { - isUpperToolbarDropdownOpen, - isLowerToolbarDropdownOpen, - isUpperToolbarKebabDropdownOpen, isLowerToolbarKebabDropdownOpen, - isCardKebabDropdownOpen, - splitButtonDropdownIsOpen, - activeItem, filters, cardData, - checked, selectedItems, - areAllSelected, - isChecked, + totalItemCount, + onPerPageSelect, + onSetPage, page, perPage } = this.state; @@ -615,9 +604,7 @@ class CardViewBasic extends React.Component { const filtered = filters.products.length > 0 - ? data.filter((card) => { - return filters.products.length === 0 || filters.products.includes(card.name); - }) + ? data.filter((card) => filters.products.length === 0 || filters.products.includes(card.name)) : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1); return ( @@ -655,13 +642,18 @@ class CardViewBasic extends React.Component { isCompact isClickable isSelectable - isSelected={selectedItems.includes(product.id)} key={product.name} id={product.name.replace(/ /g, '-')} onKeyDown={(e) => this.onKeyDown(e, product.id)} - onClick={() => this.onClick(product.id)} > - this.onClick(product.id) + }} actions={{ actions: ( <> @@ -673,7 +665,9 @@ class CardViewBasic extends React.Component { ref={toggleRef} aria-label={`${product.name} actions`} variant="plain" - onClick={(e) => {this.onCardKebabDropdownToggle(key, e)}} + onClick={(e) => { + this.onCardKebabDropdownToggle(key, e); + }} isExpanded={this.state[key]} > @@ -687,7 +681,7 @@ class CardViewBasic extends React.Component { Delete - + ) }} @@ -702,12 +696,11 @@ class CardViewBasic extends React.Component { From cb84cf07586fc791760c0c9414b0336cac7cecf4 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 27 Jul 2023 14:38:59 -0400 Subject: [PATCH 7/8] update primary detail demo --- .../react-core/src/demos/PrimaryDetail.md | 31 +++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index ff60b166661..b23c2cd20f5 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -50,7 +50,6 @@ import { CardHeader, CardBody, CardTitle, - Checkbox, Divider, Drawer, DrawerActions, @@ -72,15 +71,12 @@ import { PageSectionVariants, Pagination, Progress, - Select, - SelectOption, TextContent, Text, Title, Toolbar, ToolbarItem, - ToolbarContent, - ToolbarFilter + ToolbarContent } from '@patternfly/react-core'; import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; @@ -208,6 +204,20 @@ class PrimaryDetailCardView extends React.Component { ); }; + this.onClick = (productId) => { + this.setState((prevState) => + prevState.selectedItems.includes(productId * 1) + ? { + selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 !== id)], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) + } + : { + selectedItems: [...prevState.selectedItems, productId * 1], + areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) + } + ); + }; + this.onCardClick = (event) => { if (event.currentTarget.id === this.state.activeCard) { this.setState({ @@ -312,7 +322,7 @@ class PrimaryDetailCardView extends React.Component { }; this.onSplitButtonSelect = () => { - this.setState((prevState) => ({ + this.setState(() => ({ splitButtonDropdownIsOpen: false, isDrawerExpanded: false, activeCard: null @@ -533,7 +543,6 @@ class PrimaryDetailCardView extends React.Component { key={product.name} id={'card-view-' + key} onKeyDown={this.onKeyDown} - onClick={this.onCardClick} isClickable isSelectable isSelected={activeCard?.charAt(activeCard.length - 1) === key.toString()} @@ -569,11 +578,15 @@ class PrimaryDetailCardView extends React.Component { ) }} - selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: this.state.onCardClick }} + selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }} > {`${product.name} - {product.name} + + + {product.description} ))} From c0fd4b83c3de4a51130c035bef5d22d888349409 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 28 Jul 2023 10:43:50 -0400 Subject: [PATCH 8/8] PR feedback from Eric test push --- packages/react-core/src/demos/Card/Card.md | 22 ---------- .../react-core/src/demos/PrimaryDetail.md | 44 ++++--------------- 2 files changed, 9 insertions(+), 57 deletions(-) diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md index deb342ee886..451ad6a3e15 100644 --- a/packages/react-core/src/demos/Card/Card.md +++ b/packages/react-core/src/demos/Card/Card.md @@ -132,7 +132,6 @@ class CardViewBasic extends React.Component { }; this.onCardKebabDropdownToggle = (key, event) => { - event?.stopPropagation(); this.setState((prevState) => ({ [key]: !prevState[key] })); @@ -209,26 +208,6 @@ class CardViewBasic extends React.Component { } }; - this.onKeyDown = (event, productId) => { - if (event.target !== event.currentTarget) { - return; - } - if ([' ', 'Enter'].includes(event.key)) { - event.preventDefault(); - this.setState((prevState) => - prevState.selectedItems.includes(productId * 1) - ? { - selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount) - } - : { - selectedItems: [...prevState.selectedItems, productId * 1], - areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount) - } - ); - } - }; - this.onClick = (productId) => { this.setState((prevState) => prevState.selectedItems.includes(productId * 1) @@ -644,7 +623,6 @@ class CardViewBasic extends React.Component { isSelectable key={product.name} id={product.name.replace(/ /g, '-')} - onKeyDown={(e) => this.onKeyDown(e, product.id)} > { - event.stopPropagation(); this.setState((prevState) => prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1) ? { @@ -218,8 +217,9 @@ class PrimaryDetailCardView extends React.Component { ); }; - this.onCardClick = (event) => { - if (event.currentTarget.id === this.state.activeCard) { + this.onCardClick = (productId) => { + + if (productId === this.state.activeCard) { this.setState({ isDrawerExpanded: !this.state.isDrawerExpanded, activeCard: null @@ -227,10 +227,8 @@ class PrimaryDetailCardView extends React.Component { return; } - const newSelected = event.currentTarget.id; - this.setState({ - activeCard: newSelected, + activeCard: productId, isDrawerExpanded: true }); }; @@ -348,7 +346,6 @@ class PrimaryDetailCardView extends React.Component { }; this.deleteItem = (event, item) => { - event.stopPropagation(); const filter = (getter) => (val) => getter(val) !== item.id; const filteredCards = this.state.cardData.filter(filter(({ id }) => id)); this.setState({ @@ -359,28 +356,6 @@ class PrimaryDetailCardView extends React.Component { activeCard: null }); }; - - this.onKeyDown = (event) => { - if (event.target !== event.currentTarget) { - return; - } - - if (['Enter', ' '].includes(event.key)) { - if (event.currentTarget.id === this.state.activeCard) { - this.setState({ - isDrawerExpanded: !this.state.isDrawerExpanded, - activeCard: null - }); - return; - } - event.preventDefault(); - const newSelected = event.currentTarget.id; - this.setState({ - activeCard: newSelected, - isDrawerExpanded: true - }); - } - }; } getAllItems() { @@ -542,10 +517,9 @@ class PrimaryDetailCardView extends React.Component { - @@ -597,7 +571,7 @@ class PrimaryDetailCardView extends React.Component { - node-{activeCard && activeCard.charAt(activeCard.length - 1)} + node-{activeCard} @@ -613,10 +587,10 @@ class PrimaryDetailCardView extends React.Component {

- + - +