fix: datagrid row height click (carbon-design-system#3480)

lee-chase · Sep 15, 2023 · be38b68 · be38b68
1 parent bf9de0c
commit be38b68
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js
@@ -12,37 +12,43 @@ import { IconButton, Layer, Popover, PopoverContent } from '@carbon/react';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
 
-const blockClass = `${pkg.prefix}--datagrid`;
+const blockClass = `${pkg.prefix}--datagrid__row-size`;
 
 const RowSizeDropdown = ({
   align = 'bottom-right',
   legendText = 'Row height',
   ...props
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+
   const onCloseHandler = () => {
     setIsOpen(false);
   };
+
   const onKeyHandler = (e) => {
     if (e.key === 'Escape') {
       onCloseHandler();
     }
   };
+
   const onBlurHandler = (e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       onCloseHandler();
     }
   };
+
   const onClickHandler = () => {
     setIsOpen(!isOpen);
   };
+
   return (
     <Popover
+      tabIndex={-1}
       isTabTip
       align="bottom-right"
       open={isOpen}
       onRequestClose={onCloseHandler}
-      className={`${blockClass}__row-size-options-container`}
+      className={`${blockClass}-options-container`}
       onKeyDown={onKeyHandler}
       onBlur={onBlurHandler}
     >
@@ -51,7 +57,7 @@ const RowSizeDropdown = ({
         kind="ghost"
         onClick={onClickHandler}
         label={legendText}
-        className={`${blockClass}__row-size-button`}
+        className={`${blockClass}-button`}
       >
         <Settings size={16} />
       </IconButton>

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js
@@ -11,7 +11,7 @@ import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
 
-const blockClass = `${pkg.prefix}--datagrid`;
+const blockClass = `${pkg.prefix}--datagrid__row-size`;
 
 const RowSizeRadioGroup = ({
   rowSizes,
@@ -28,13 +28,7 @@ const RowSizeRadioGroup = ({
   },
 }) => {
   return (
-    <div
-      className={`${blockClass}__row-size-dropdown`}
-      role="presentation"
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
+    <div className={`${blockClass}-dropdown`} role="presentation">
       <RadioButtonGroup
         legendText={legendText}
         name="row-height-group"
@@ -53,7 +47,7 @@ const RowSizeRadioGroup = ({
             }
             return (
               <RadioButton
-                className={`${blockClass}__row-size-radio-button`}
+                className={`${blockClass}-radio-button`}
                 key={option.value}
                 labelText={labelText}
                 value={option.value}