diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index d1a03e615b..ced17ac016 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/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 { diff --git a/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss b/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss index e471889060..08404b5f0d 100644 --- a/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss +++ b/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 { diff --git a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx b/packages/ibm-products/src/components/AddSelect/AddSelect.tsx index de3a3aa11f..4b1ed75468 100644 --- a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx +++ b/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, diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js b/packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js index 0669a151d2..89b15326cc 100644 --- a/packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js +++ b/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 = ( + +); + 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(); + const suppHeader = document.querySelectorAll( + `.${blockClass}__supplemental-header` + )[0]; + expect(suppHeader); + fireEvent.click(suppHeader); + }); }); diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx b/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx index 6774f2a95a..57b90436bd 100644 --- a/packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx +++ b/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 && ( +
+ {supplementalHeader} +
+ )} +
+ ), + }, + }, 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, +}; diff --git a/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.tsx b/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.tsx index bcb065efd3..4d63ae8411 100644 --- a/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.tsx +++ b/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 */ diff --git a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.stories.jsx b/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.stories.jsx index 84b38b51ea..7ca3c5f4c1 100644 --- a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.stories.jsx +++ b/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: ( + + ), + }, + }, 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, +}; + diff --git a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.tsx b/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.tsx index 0fb9c6ea24..0a97b3836d 100644 --- a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.tsx +++ b/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 */