TASK: Distribute prefixed ids across DropDown* components used by Sel…

…ectBox This allows us to target every part of a select box specifically in E2E tests.
neos · Jul 12, 2024 · 9e83031 · 9e83031
1 parent 479f9df
commit 9e83031
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/react-ui-components/src/DropDown/contents.tsx b/packages/react-ui-components/src/DropDown/contents.tsx
@@ -50,6 +50,11 @@ interface ShallowDropDownContentsTheme {
 }
 
 export interface ShallowDropDownContentsProps {
+    /**
+     * An optional `id` to attach to the wrapper.
+     */
+    readonly id?: string;
+
     /**
      * An optional `className` to attach to the wrapper.
      */
@@ -198,6 +203,7 @@ export default class ShallowDropDownContents extends PureComponent<ShallowDropDo
 
     public render(): JSX.Element | null {
         const {
+            id,
             className,
             children,
             theme,
@@ -217,6 +223,7 @@ export default class ShallowDropDownContents extends PureComponent<ShallowDropDo
         if (isOpen) {
             const contents = (
                 <ul
+                    id={id}
                     className={finalClassName}
                     aria-hidden={isOpen ? 'false' : 'true'}
                     aria-label="dropdown"

diff --git a/packages/react-ui-components/src/DropDown/header.tsx b/packages/react-ui-components/src/DropDown/header.tsx
@@ -14,6 +14,11 @@ interface ShallowDropDownHeaderTheme {
 }
 
 export interface ShallowDropDownHeaderProps {
+    /**
+     * An optional `id` to attach to the wrapper.
+     */
+    readonly id?: string;
+
     /**
      * An optional `className` to attach to the wrapper.
      */
@@ -93,6 +98,7 @@ class ShallowDropDownHeader extends PureComponent<ShallowDropDownHeaderProps> {
 
     public render(): JSX.Element {
         const {
+            id,
             className,
             children,
             theme,
@@ -115,6 +121,7 @@ class ShallowDropDownHeader extends PureComponent<ShallowDropDownHeaderProps> {
 
         return (
             <div
+                id={id}
                 role="button"
                 onClick={disabled ? undefined : toggleDropDown}
                 ref={this.handleReferenceHandler}

diff --git a/packages/react-ui-components/src/DropDown/wrapper.tsx b/packages/react-ui-components/src/DropDown/wrapper.tsx
@@ -9,6 +9,11 @@ import ShallowDropDownContents from './contents';
 import PropTypes from 'prop-types';
 
 export interface DropDownWrapperProps {
+    /**
+     * An optional `id` to attach to the wrapper.
+     */
+    readonly id?: string;
+
     /**
      * An optional `className` to attach to the wrapper.
      */
@@ -95,7 +100,7 @@ class StatelessDropDownWrapperWithoutClickOutsideBehavior extends PureComponent<
     }
 
     public render(): JSX.Element {
-        const {children, className, theme, style, padded, ...restProps} = this.props;
+        const {id, children, className, theme, style, padded, ...restProps} = this.props;
         const rest = omit(restProps, ['isOpen', 'onToggle', 'onClose']);
         const styleClassName: string = style ? `dropDown--${style}` : '';
         const finalClassName = mergeClassNames(
@@ -109,7 +114,7 @@ class StatelessDropDownWrapperWithoutClickOutsideBehavior extends PureComponent<
         );
 
         return (
-            <div ref={this.ref} {...rest} className={finalClassName}>
+            <div id={id} ref={this.ref} {...rest} className={finalClassName}>
                 {React.Children.map(
                     children,
                     // @ts-ignore

diff --git a/packages/react-ui-components/src/SelectBox/selectBox.js b/packages/react-ui-components/src/SelectBox/selectBox.js
@@ -195,6 +195,7 @@ export default class SelectBox extends PureComponent {
 
     render() {
         const {
+            id,
             options,
             theme,
             showDropDownToggle,
@@ -231,11 +232,11 @@ export default class SelectBox extends PureComponent {
         });
 
         return (
-            <DropDown.Stateless className={theme.selectBox} isOpen={isExpanded} onToggle={this.handleToggleExpanded} onClose={this.handleClose}>
-                <DropDown.Header className={headerClassName} shouldKeepFocusState={false} showDropDownToggle={showDropDownToggle && Boolean(options.length)}>
+            <DropDown.Stateless id={id} className={theme.selectBox} isOpen={isExpanded} onToggle={this.handleToggleExpanded} onClose={this.handleClose}>
+                <DropDown.Header id={id ? `${id}-header` : undefined} className={headerClassName} shouldKeepFocusState={false} showDropDownToggle={showDropDownToggle && Boolean(options.length)}>
                     {this.renderHeader()}
                 </DropDown.Header>
-                <DropDown.Contents className={dropDownContentsClassName} scrollable={true}>
+                <DropDown.Contents id={id ? `${id}-contents` : undefined} className={dropDownContentsClassName} scrollable={true}>
                     {!plainInputMode && <ul className={theme.selectBox__list}>
                         <SelectBox_ListPreview
                             {...this.props}