diff --git a/src/components/pill-selector-dropdown/PillSelector.js b/src/components/pill-selector-dropdown/PillSelector.js index 2abe22ea68..a86471a392 100644 --- a/src/components/pill-selector-dropdown/PillSelector.js +++ b/src/components/pill-selector-dropdown/PillSelector.js @@ -47,6 +47,8 @@ type Props = { suggestedPillsData?: Array, suggestedPillsFilter?: SuggestedPillsFilter, suggestedPillsTitle?: string, + /** A CSS class for the tooltip's target wrapper element */ + tooltipWrapperClassName?: string, validator: (option: Option | OptionValue) => boolean, }; @@ -211,6 +213,7 @@ class PillSelectorBase extends React.Component { suggestedPillsData, suggestedPillsFilter, suggestedPillsTitle, + tooltipWrapperClassName, validator, ...rest } = this.props; @@ -231,7 +234,13 @@ class PillSelectorBase extends React.Component { }; return ( - + {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */} { suggestedPillsFilter, suggestedPillsTitle, shouldSetActiveItemOnOpen, + tooltipWrapperClassName, validator, } = this.props; @@ -295,6 +298,7 @@ class PillSelectorDropdown extends React.Component { suggestedPillsData={suggestedPillsData} suggestedPillsFilter={suggestedPillsFilter} suggestedPillsTitle={suggestedPillsTitle} + tooltipWrapperClassName={tooltipWrapperClassName} validator={validator} value={this.state.inputValue} /> diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js index 6b42d6e7f4..e28e7f0851 100644 --- a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js +++ b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js @@ -88,6 +88,20 @@ describe('components/pill-selector-dropdown/PillSelector', () => { expect(wrapper.find('.show-error').length).toBe(0); }); + test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => { + const tooltipWrapperClassName = 'custom-tooltip-wrapper'; + const wrapper = shallow( + , + ); + + expect(wrapper.find('Tooltip').prop('targetWrapperClassName')).toBe(tooltipWrapperClassName); + }); + test('should render pills when there are selected options using legacy text attribute', () => { const options = [ { text: 'test', value: 'test' }, diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js index 90be881378..f88f51077a 100644 --- a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js +++ b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js @@ -56,6 +56,14 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => { expect(pillSelector.dive().instance().props.value).toEqual('value'); }); + test('should pass tooltipWrapperClassName to PillSelector when provided', () => { + const tooltipWrapperClassName = 'custom-tooltip-wrapper'; + const wrapper = getWrapper({ tooltipWrapperClassName }); + const selectorElement = wrapper.find('SelectorDropdown').prop('selector'); + + expect(selectorElement.props.tooltipWrapperClassName).toBe(tooltipWrapperClassName); + }); + test('should render disabled pill selector', () => { const wrapper = getWrapper({ disabled: true }); diff --git a/src/components/text-area/TextArea.js b/src/components/text-area/TextArea.js index a56b9e66b6..16d0382900 100644 --- a/src/components/text-area/TextArea.js +++ b/src/components/text-area/TextArea.js @@ -28,6 +28,8 @@ type Props = { textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements /** A CSS class for the tooltip's tether element component */ tooltipTetherClassName?: string, + /** A CSS class for the tooltip's target wrapper element */ + tooltipWrapperClassName?: string, }; const TextArea = ({ @@ -42,6 +44,7 @@ const TextArea = ({ label, textareaRef, tooltipTetherClassName, + tooltipWrapperClassName, ...rest }: Props) => { const hasError = !!error; @@ -70,6 +73,7 @@ const TextArea = ({ { wrapper.unmount(); }); + test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => { + const tooltipWrapperClassName = 'custom-tooltip-wrapper'; + const wrapper = shallow( +