feat(AddSelect): add dynamic additional component at start of body

packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap

@@ -2778,10 +2778,18 @@ p.c4p--about-modal__copyright-text:first-child {
   align-items: center;
   justify-content: center;
   padding: 0;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  background-color: unset;
   color: var(--cds-text-primary, #161616);
+  min-block-size: 0;
+  /* stylelint-disable-next-line max-nesting-depth */
 }
-.c4p--side-panel .cds--btn.c4p--side-panel__navigation-back-button .cds--btn__icon,
-.c4p--side-panel .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
+.c4p--side-panel .cds--btn.c4p--side-panel__navigation-back-button:hover,
+.c4p--side-panel .cds--btn.c4p--side-panel__close-button:hover {
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+}
+.c4p--side-panel .cds--btn.c4p--side-panel__navigation-back-button .c4p--side-panel--btn__icon,
+.c4p--side-panel .cds--btn.c4p--side-panel__close-button .c4p--side-panel--btn__icon {
   margin: 0;
 }
 .c4p--side-panel .cds--btn--md.c4p--side-panel__navigation-back-button,
@@ -5954,10 +5962,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: var(--cds-layer-02, #ffffff);
 }
 
+.c4p--add-select__supplemental-header {
+  padding: 1rem;
+  padding-bottom: 0;
+}
+
 .c4p--add-select__header {
   padding: 1rem;
   padding-bottom: 0;
-  border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
 }
 
 .c4p--add-select__body {

packages/ibm-products-styles/src/components/AddSelect/_add-select.scss

@@ -17,10 +17,14 @@
 $block-class: #{$pkg-prefix}--add-select;
 $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
+.#{$block-class}__supplemental-header {
+  padding: $spacing-05;
+  padding-bottom: 0;
+}
+
 .#{$block-class}__header {
   padding: $spacing-05;
   padding-bottom: 0;
-  border-top: 1px solid $layer-accent-01;
 }
 
 .#{$block-class}__body {

packages/ibm-products/src/components/AddSelect/AddSelect.tsx

@@ -13,6 +13,7 @@ import { Filter, Item, Theme } from './types';
 const componentName = 'AddSelect';
 
 export interface AddSelectProps {
+  supplementalHeader?: ReactNode;
   className?: string;
   clearFiltersText?: string;
   closeIconDescription?: string;
@@ -96,6 +97,7 @@ export const AddSelect = forwardRef(
 );
 
 AddSelect.propTypes = {
+  supplementalHeader: PropTypes.node,
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
   closeIconDescription: PropTypes.string.isRequired,

packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js

@@ -7,6 +7,7 @@
 
 import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
+import { TextInput } from '@carbon/react';
 import { AddSelectBody } from './AddSelectBody';
 import { pkg, carbon } from '../../settings';
 import { getGlobalFilterValues, normalize } from './add-select-utils';
@@ -215,6 +216,10 @@ const itemWithAvatar = {
   ],
 };
 
+const supplementalHeaderTextInput = (
+  <TextInput id="text-input-1" type="text" labelText="Text input label" />
+);
+
 describe(componentName, () => {
   const { ResizeObserver } = window;
   let warn;
@@ -463,4 +468,17 @@ describe(componentName, () => {
     fireEvent.change(globalSearch, { target: { value: 'florida' } });
     fireEvent.change(globalSearch, { target: { value: '' } });
   });
+
+  it('handle supplemental header', async () => {
+    const newProps = {
+      ...multiProps,
+      supplementalHeader: supplementalHeaderTextInput,
+    };
+    render(<AddSelectBody {...newProps} />);
+    const suppHeader = document.querySelectorAll(
+      `.${blockClass}__supplemental-header`
+    )[0];
+    expect(suppHeader);
+    fireEvent.click(suppHeader);
+  });
 });

packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx

@@ -28,6 +28,7 @@ const blockClass = `${pkg.prefix}--add-select`;
 const componentName = 'AddSelectBody';
 
 export interface AddSelectBodyProps {
+  supplementalHeader?: ReactNode;
   className?: string;
   clearFiltersText?: string;
   closeIconDescription?: string;
@@ -72,6 +73,7 @@ export interface AddSelectBodyProps {
 export const AddSelectBody = forwardRef(
   (
     {
+      supplementalHeader,
       className,
       clearFiltersText,
       closeIconDescription,
@@ -275,6 +277,12 @@ export const AddSelectBody = forwardRef(
     // main content
     const body = (
       <>
+        {supplementalHeader && (
+          <div className={`${blockClass}__supplemental-header`}>
+            {supplementalHeader}
+          </div>
+        )}
+
         <div id="add-select" className={`${blockClass}__header`}>
           <AddSelectFilter
             inputLabel={globalSearchLabel}

packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.stories.jsx

@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 // import styles from './_storybook-styles.scss?inline'; // import index in case more files are added later.
 import { MultiAddSelect } from '.';
-import { Button } from '@carbon/react';
+import { Button, TextInput } from '@carbon/react';
 import image from '../UserProfileImage/headshot.jpg'; // cspell:disable-line
 import { Group, Document } from '@carbon/react/icons';
 
@@ -27,6 +27,26 @@ export default {
     },
   },
   argTypes: {
+    supplementalHeader: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'no supplemental header',
+          1: 'Text Input',
+        },
+      },
+      options: [0, 1],
+      mapping: {
+        0: null,
+        1: (
+          <TextInput
+            id="text-input-1"
+            type="text"
+            labelText="Text input label"
+          />
+        ),
+      },
+    },
     items: {
       control: {
         type: 'select',
@@ -263,6 +283,7 @@ const Template = (args, context) => {
 export const Default = Template.bind({});
 Default.args = {
   items: 1,
+  supplementalHeader: 0,
   ...defaultProps,
 };
 
@@ -303,3 +324,10 @@ WithAvatars.args = {
   items: 4,
   ...defaultProps,
 };
+
+export const WithSupplementalHeader = Template.bind({});
+WithSupplementalHeader.args = {
+  items: 1,
+  supplementalHeader: 1,
+  ...defaultProps,
+};

packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.tsx

@@ -49,6 +49,11 @@ type ItemType = {
 };
 
 interface MultiAddSelectProps {
+  /**
+   * option to display supplemental component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  supplementalHeader?: ReactNode;
   /**
    * optional class name
    */
@@ -168,6 +173,11 @@ export let MultiAddSelect = forwardRef(
 MultiAddSelect = pkg.checkComponentEnabled(MultiAddSelect, componentName);
 
 MultiAddSelect.propTypes = {
+  /**
+   * option to display supplemental component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  supplementalHeader: PropTypes.node,
   /**
    * optional class name
    */

packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.stories.jsx

@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 // import styles from './_storybook-styles.scss?inline'; // import index in case more files are added later.
 import { SingleAddSelect } from '.';
-import { Button } from '@carbon/react';
+import { Button, TextInput } from '@carbon/react';
 import DocsPage from './SingleAddSelect.docs-page';
 // import { action } from '@storybook/addon-actions';
 
@@ -23,6 +23,26 @@ export default {
     },
   },
   argTypes: {
+    supplementalHeader: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'no supplemental header',
+          1: 'Text Input',
+        },
+      },
+      options: [0, 1],
+      mapping: {
+        0: null,
+        1: (
+          <TextInput
+            id="text-input-1"
+            type="text"
+            labelText="Text input label"
+          />
+        ),
+      },
+    },
     items: {
       control: {
         type: 'select',
@@ -146,6 +166,7 @@ const Template = (args, context) => {
 export const Default = Template.bind({});
 Default.args = {
   items: 1,
+  supplementalHeader: 0,
   ...defaultProps,
 };
 
@@ -154,3 +175,11 @@ WithHierarchy.args = {
   items: 2,
   ...defaultProps,
 };
+
+export const WithSupplementalHeader = Template.bind({});
+WithSupplementalHeader.args = {
+  items: 1,
+  supplementalHeader: 1,
+  ...defaultProps,
+};
+

packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.tsx

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, ReactNode, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { AddSelect } from '../AddSelect';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
@@ -17,6 +17,11 @@ import { Entry } from '../AddSelect/types';
 const componentName = 'SingleAddSelect';
 
 interface SingleAddSelectProps {
+  /**
+   * option to display supplemental component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  supplementalHeader?: ReactNode;
   /**
    * optional class name
    */
@@ -115,6 +120,11 @@ export let SingleAddSelect = forwardRef(
 SingleAddSelect = pkg.checkComponentEnabled(SingleAddSelect, componentName);
 
 SingleAddSelect.propTypes = {
+  /**
+   * option to display supplemental component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  supplementalHeader: PropTypes.node,
   /**
    * optional class name
    */