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 index d71e9736f3..ad22ff27f3 100644 --- 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,7 +12,7 @@ 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', @@ -20,29 +20,35 @@ const RowSizeDropdown = ({ ...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 ( @@ -51,7 +57,7 @@ const RowSizeDropdown = ({ kind="ghost" onClick={onClickHandler} label={legendText} - className={`${blockClass}__row-size-button`} + className={`${blockClass}-button`} > 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 index 4788225b6c..c045c80574 100644 --- 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 ( -
{ - e.stopPropagation(); - }} - > +