diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 484ab70a90a..a019068a270 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -25,7 +25,7 @@ export interface MenuItemProps extends Omit, 'onC /** Target navigation link. Should not be used if the flyout prop is defined. */ to?: string; /** @beta Flag indicating the item has a checkbox */ - hasCheck?: boolean; + hasCheckbox?: boolean; /** Flag indicating whether the item is active */ isActive?: boolean; /** Flag indicating if the item is favorited */ @@ -79,7 +79,7 @@ const MenuItemBase: React.FunctionComponent = ({ className, itemId = null, to, - hasCheck = false, + hasCheckbox = false, isActive = null, isFavorited = null, isLoadButton = false, @@ -117,7 +117,7 @@ const MenuItemBase: React.FunctionComponent = ({ disableHover } = React.useContext(MenuContext); let Component = (to ? 'a' : component) as any; - if (hasCheck && !to) { + if (hasCheckbox && !to) { Component = 'label' as any; } const [flyoutTarget, setFlyoutTarget] = React.useState(null); @@ -305,26 +305,26 @@ const MenuItemBase: React.FunctionComponent = ({ onMouseOver={onMouseOver} {...(flyoutMenu && { onKeyDown: handleFlyout })} ref={ref} - role={!hasCheck ? 'none' : 'menuitem'} + role={!hasCheckbox ? 'none' : 'menuitem'} {...props} > {randomId => ( { onItemSelect(event, onSelect); _drill && _drill(); flyoutMenu && handleFlyout(event); } })} - {...(hasCheck && { htmlFor: randomId })} + {...(hasCheckbox && { htmlFor: randomId })} {...additionalProps} > @@ -334,7 +334,7 @@ const MenuItemBase: React.FunctionComponent = ({ )} {icon && {icon}} - {hasCheck && ( + {hasCheckbox && ( { }); }); - describe('with hasCheck', () => { + describe('with hasCheckbox', () => { test('should render Menu with checkbox items', () => { const { asFragment } = render( - + Checkbox 1 diff --git a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx index 0980d539388..b57c228d643 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx @@ -18,13 +18,13 @@ export const MenuWithCheckbox: React.FunctionComponent = () => { - + Checkbox 1 - + Checkbox 2 - + Checkbox 3 diff --git a/packages/react-core/src/components/TreeView/TreeView.tsx b/packages/react-core/src/components/TreeView/TreeView.tsx index 997f35fcbea..bb796a7130f 100644 --- a/packages/react-core/src/components/TreeView/TreeView.tsx +++ b/packages/react-core/src/components/TreeView/TreeView.tsx @@ -26,7 +26,7 @@ export interface TreeViewDataItem { /** Flag indicating if a tree view item has a badge. */ hasBadge?: boolean; /** Flag indicating if a tree view item has a checkbox. */ - hasCheck?: boolean; + hasCheckbox?: boolean; /** Default icon of a tree view item. */ icon?: React.ReactNode; /** ID of a tree view item. */ @@ -59,7 +59,7 @@ export interface TreeViewProps { /** Flag indicating if all nodes in the tree view should have badges. */ hasBadges?: boolean; /** Flag indicating if all nodes in the tree view should have checkboxes. */ - hasChecks?: boolean; + hasCheckboxes?: boolean; /** Flag indicating if the tree view has guide lines. */ hasGuides?: boolean; /** Flag indicating if the tree view is nested. */ @@ -92,7 +92,7 @@ export interface TreeViewProps { export const TreeView: React.FunctionComponent = ({ data, isNested = false, - hasChecks = false, + hasCheckboxes = false, hasBadges = false, hasGuides = false, hasSelectableNodes = false, @@ -124,7 +124,7 @@ export const TreeView: React.FunctionComponent = ({ defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded} onSelect={onSelect} onCheck={onCheck} - hasCheck={item.hasCheck !== undefined ? item.hasCheck : hasChecks} + hasCheckbox={item.hasCheckbox !== undefined ? item.hasCheckbox : hasCheckboxes} checkProps={item.checkProps} hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges} customBadgeContent={item.customBadgeContent} @@ -144,7 +144,7 @@ export const TreeView: React.FunctionComponent = ({ data={item.children} isNested parentItem={item} - hasChecks={hasChecks} + hasCheckboxes={hasCheckboxes} hasBadges={hasBadges} hasGuides={hasGuides} hasSelectableNodes={hasSelectableNodes} @@ -170,7 +170,7 @@ export const TreeView: React.FunctionComponent = ({ ) : ( = ({ children = null, onSelect, onCheck, - hasCheck = false, + hasCheckbox = false, checkProps = { checked: false }, @@ -104,26 +104,26 @@ const TreeViewListItemBase: React.FunctionComponent = ({ }, [isExpanded, defaultExpanded]); let Component: 'label' | 'div' | 'button' = 'button'; - if (hasCheck) { + if (hasCheckbox) { Component = 'label'; } else if (isSelectable) { Component = 'div'; } - const ToggleComponent = hasCheck || isSelectable ? 'button' : 'span'; + const ToggleComponent = hasCheckbox || isSelectable ? 'button' : 'span'; const renderToggle = (randomId: string) => ( { - if (isSelectable || hasCheck) { + if (isSelectable || hasCheckbox) { setIsExpanded(!internalIsExpanded); } if (isSelectable) { evt.stopPropagation(); } }} - {...((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` })} + {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })} tabIndex={-1} > @@ -196,7 +196,7 @@ const TreeViewListItemBase: React.FunctionComponent = ({ 0 && @@ -205,19 +205,19 @@ const TreeViewListItemBase: React.FunctionComponent = ({ : '' )} onClick={(evt: React.MouseEvent) => { - if (!hasCheck) { + if (!hasCheckbox) { onSelect && onSelect(evt, itemData, parentItem); if (!isSelectable && children && evt.isDefaultPrevented() !== true) { setIsExpanded(!internalIsExpanded); } } }} - {...(hasCheck && { htmlFor: randomId })} - {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })} + {...(hasCheckbox && { htmlFor: randomId })} + {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })} > {children && renderToggle(randomId)} - {hasCheck && renderCheck(randomId)} + {hasCheckbox && renderCheck(randomId)} {icon && iconRendered} {renderNodeContent()} {badgeRendered} @@ -262,7 +262,7 @@ export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nex prevProps.defaultExpanded !== nextProps.defaultExpanded || prevProps.onSelect !== nextProps.onSelect || prevProps.onCheck !== nextProps.onCheck || - prevProps.hasCheck !== nextProps.hasCheck || + prevProps.hasCheckbox !== nextProps.hasCheckbox || prevProps.checkProps !== nextProps.checkProps || prevProps.hasBadge !== nextProps.hasBadge || prevProps.customBadgeContent !== nextProps.customBadgeContent || diff --git a/packages/react-core/src/components/TreeView/TreeViewRoot.tsx b/packages/react-core/src/components/TreeView/TreeViewRoot.tsx index 4f2ffea0f24..27ee3a46c46 100644 --- a/packages/react-core/src/components/TreeView/TreeViewRoot.tsx +++ b/packages/react-core/src/components/TreeView/TreeViewRoot.tsx @@ -9,7 +9,7 @@ export interface TreeViewRootProps { /** Child nodes of the tree view */ children: React.ReactNode; /** Flag indicating if the tree view has checkboxes. */ - hasChecks?: boolean; + hasCheckboxes?: boolean; /** Flag indicating if tree view has guide lines. */ hasGuides?: boolean; /** Variant presentation styles for the tree view. */ @@ -28,15 +28,15 @@ export class TreeViewRoot extends React.Component { if (canUseDOM) { window.addEventListener( 'keydown', - this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys + this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys ); } - if (this.props.hasChecks || this.props.hasSelectableNodes) { + if (this.props.hasCheckboxes || this.props.hasSelectableNodes) { const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement; if (firstToggle) { firstToggle.tabIndex = 0; } - if (this.props.hasChecks) { + if (this.props.hasCheckboxes) { const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement; if (firstInput) { firstInput.tabIndex = 0; @@ -59,7 +59,7 @@ export class TreeViewRoot extends React.Component { if (canUseDOM) { window.removeEventListener( 'keydown', - this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys + this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys ); } } @@ -188,7 +188,7 @@ export class TreeViewRoot extends React.Component { render() { // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { children, hasChecks, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props; + const { children, hasCheckboxes, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props; return (
, expandedIcon: , children: [ @@ -84,7 +84,7 @@ const flagOptions = [ id: 'App2', hasBadge: true, children: [ - { name: 'Settings', id: 'App2Settings', hasCheck: true }, + { name: 'Settings', id: 'App2Settings', hasCheckbox: true }, { name: 'Loader', id: 'App2Loader', @@ -168,7 +168,7 @@ describe('tree view', () => { }); test('renders checkboxes successfully', () => { - const { asFragment } = render(); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md index a677b3c99e2..5f7ca77fccc 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeView.md +++ b/packages/react-core/src/components/TreeView/examples/TreeView.md @@ -560,7 +560,7 @@ class CheckboxTreeView extends React.Component { render() { const mapped = this.options.map(item => this.mapTree(item)); - return ; + return ; } } ``` diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx index cc9ae0c0ab6..27fb5cbebd2 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx @@ -81,16 +81,16 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => { - + Debug - + Info - + Warn - + Error diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx index 1f62ee392bf..e4d71ee7bd6 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx @@ -243,7 +243,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => { onCheck(event, item, 'status')} /> @@ -255,7 +255,12 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => { - onCheck(event, item, 'role')} /> + onCheck(event, item, 'role')} + /> diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx index 2577afd8901..d4abdcfa3ca 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx @@ -438,19 +438,19 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { > - + Bangalore - + Boston - + Brno - + Raleigh - + Westford diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx index 5a0c5ecd6c6..be766d0aebb 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx @@ -307,19 +307,19 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { - + Bangalore - + Boston - + Brno - + Raleigh - + Westford diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx index 88c7355aa40..ba9dc20b0d3 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx @@ -339,36 +339,40 @@ export const FilterFaceted: React.FunctionComponent = () => { - + Degraded - + Down - + Needs Maintenance - + Running - + Stopped - + Bangalore - + Boston - + Brno - + Raleigh - + Westford diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx index bae04faef82..77402e59ce3 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx @@ -410,19 +410,19 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { > - + Bangalore - + Boston - + Brno - + Raleigh - + Westford diff --git a/packages/react-core/src/next/components/Select/SelectOption.tsx b/packages/react-core/src/next/components/Select/SelectOption.tsx index d731bc59ed4..c1c5b5dee79 100644 --- a/packages/react-core/src/next/components/Select/SelectOption.tsx +++ b/packages/react-core/src/next/components/Select/SelectOption.tsx @@ -10,7 +10,7 @@ export interface SelectOptionProps extends Omit { /** Identifies the component in the Select onSelect callback */ itemId?: any; /** Indicates the option has a checkbox */ - hasCheck?: boolean; + hasCheckbox?: boolean; /** Indicates the option is disabled */ isDisabled?: boolean; /** Indicates the option is selected */ diff --git a/packages/react-core/src/next/components/Select/examples/SelectCheckbox.tsx b/packages/react-core/src/next/components/Select/examples/SelectCheckbox.tsx index 5ddc5e8dc2f..67fb3db0dd0 100644 --- a/packages/react-core/src/next/components/Select/examples/SelectCheckbox.tsx +++ b/packages/react-core/src/next/components/Select/examples/SelectCheckbox.tsx @@ -49,16 +49,16 @@ export const SelectCheckbox: React.FunctionComponent = () => { toggle={toggle} > - + Debug - + Info - + Warn - + Error diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx index 82d1af21b0a..64c09bdf2f6 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx @@ -197,7 +197,7 @@ export class TreeViewDemo extends Component { { name: 'ApplicationLauncher', id: 'FAppLaunch', - hasCheck: true, + hasCheckbox: true, icon: , expandedIcon: , children: [ @@ -214,7 +214,7 @@ export class TreeViewDemo extends Component { id: 'FApp2', hasBadge: true, children: [ - { name: 'Settings', id: 'FApp2Settings', hasCheck: true }, + { name: 'Settings', id: 'FApp2Settings', hasCheckbox: true }, { name: 'Loader', id: 'FApp2Loader',