chore(hasCheckbox): rename hasCheck to hasCheckbox (#8403)

* chore(hasCheckbox): rename hasCheck to hasCheckbox * fix(hasCheckbox): refactor based on feedback * fix(hasCheckbox): refactor hasPartialCheck to hasCheck * fix(hasCheckbox): refactor for lint * fix(hasCheckbox): fixing linting issues
patternfly · Jan 5, 2023 · ce551a3 · ce551a3
1 parent 70844f9
commit ce551a3
Show file tree

Hide file tree

Showing 17 changed files with 90 additions and 81 deletions.
diff --git 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<React.HTMLProps<HTMLLIElement>, '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<MenuItemProps> = ({
   className,
   itemId = null,
   to,
-  hasCheck = false,
+  hasCheckbox = false,
   isActive = null,
   isFavorited = null,
   isLoadButton = false,
@@ -117,7 +117,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     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<MenuItemProps> = ({
       onMouseOver={onMouseOver}
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
-      role={!hasCheck ? 'none' : 'menuitem'}
+      role={!hasCheckbox ? 'none' : 'menuitem'}
       {...props}
     >
       <GenerateId>
         {randomId => (
           <Component
             tabIndex={-1}
-            className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
+            className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
-            {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
+            {...(!hasCheckbox && { disabled: isDisabled })}
+            {...(!hasCheckbox && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
-            {...(!hasCheck && {
+            {...(!hasCheckbox && {
               onClick: (event: any) => {
                 onItemSelect(event, onSelect);
                 _drill && _drill();
                 flyoutMenu && handleFlyout(event);
               }
             })}
-            {...(hasCheck && { htmlFor: randomId })}
+            {...(hasCheckbox && { htmlFor: randomId })}
             {...additionalProps}
           >
             <span className={css(styles.menuItemMain)}>
@@ -334,7 +334,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                 </span>
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
-              {hasCheck && (
+              {hasCheckbox && (
                 <span className={css('pf-c-menu__item-check')}>
                   <Checkbox
                     id={randomId}

diff --git a/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx b/packages/react-core/src/components/Menu/__tests__/Menu.test.tsx
@@ -52,13 +52,13 @@ describe('Menu', () => {
     });
   });
 
-  describe('with hasCheck', () => {
+  describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
       const { asFragment } = render(
         <Menu>
           <MenuContent>
             <MenuList>
-              <MenuItem hasCheck itemId={0}>
+              <MenuItem hasCheckbox itemId={0}>
                 Checkbox 1
               </MenuItem>
             </MenuList>

diff --git 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 = () => {
     <Menu onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Checkbox 1
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Checkbox 2
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isDisabled>
+          <MenuItem hasCheckbox itemId={2} isDisabled>
             Checkbox 3
           </MenuItem>
         </MenuList>

diff --git 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<TreeViewProps> = ({
   data,
   isNested = false,
-  hasChecks = false,
+  hasCheckboxes = false,
   hasBadges = false,
   hasGuides = false,
   hasSelectableNodes = false,
@@ -124,7 +124,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           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<TreeViewProps> = ({
                 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<TreeViewProps> = ({
       ) : (
         <TreeViewRoot
           hasSelectableNodes={hasSelectableNodes}
-          hasChecks={hasChecks}
+          hasCheckboxes={hasCheckboxes}
           hasGuides={hasGuides}
           variant={variant}
           className={className}

diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
@@ -32,7 +32,7 @@ export interface TreeViewListItemProps {
   /** 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. */
@@ -75,7 +75,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   children = null,
   onSelect,
   onCheck,
-  hasCheck = false,
+  hasCheckbox = false,
   checkProps = {
     checked: false
   },
@@ -104,26 +104,26 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   }, [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) => (
     <ToggleComponent
       className={css(styles.treeViewNodeToggle)}
       onClick={(evt: React.MouseEvent) => {
-        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}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -196,7 +196,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheck) && styles.modifiers.selectable,
+                children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&
@@ -205,19 +205,19 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                   : ''
               )}
               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}` })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {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
@@ -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<TreeViewRootProps> {
     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<TreeViewRootProps> {
     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<TreeViewRootProps> {
 
   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 (
       <div
         className={css(

diff --git a/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx b/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx
@@ -67,7 +67,7 @@ const flagOptions = [
   {
     name: 'ApplicationLauncher',
     id: 'AppLaunch',
-    hasCheck: true,
+    hasCheckbox: true,
     icon: <FolderIcon />,
     expandedIcon: <FolderOpenIcon />,
     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(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasChecks />);
+    const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasCheckboxes />);
     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
@@ -560,7 +560,7 @@ class CheckboxTreeView extends React.Component {
 
   render() {
     const mapped = this.options.map(item => this.mapTree(item));
-    return <TreeView data={mapped} onCheck={this.onCheck} hasChecks />;
+    return <TreeView data={mapped} onCheck={this.onCheck} hasCheckboxes />;
   }
 }
 ```

diff --git 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 = () => {
     <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Debug
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Info
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isSelected={selectedItems.includes(2)}>
+          <MenuItem hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
             Warn
           </MenuItem>
-          <MenuItem hasCheck isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+          <MenuItem hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
             Error
           </MenuItem>
         </MenuList>

diff --git 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 = () => {
             <TreeView
               data={statusMapped}
               hasBadges
-              hasChecks
+              hasCheckboxes
               onCheck={(event, item) => onCheck(event, item, 'status')}
             />
           </PanelMainBody>
@@ -255,7 +255,12 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
             </Title>
           </PanelMainBody>
           <PanelMainBody style={{ padding: 0 }}>
-            <TreeView data={roleMapped} hasBadges hasChecks onCheck={(event, item) => onCheck(event, item, 'role')} />
+            <TreeView
+              data={roleMapped}
+              hasBadges
+              hasCheckboxes
+              onCheck={(event, item) => onCheck(event, item, 'role')}
+            />
           </PanelMainBody>
         </section>
       </PanelMain>

diff --git 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 = () => {
     >
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>