feat: 1020: Shellbar pass popoverProps to SearchInput (#1091)

With this change
+ Shellbar passes popoverProps to SearchInput
  + SearchInput popoverProps default to `placement='bottom'` and `disableEdgeDetection=true`
+ Product Switch button gets aria-label from `productSwitch.label`
   + `productSwitch.label` prop is now required
   + `productSwitch.label` prop documented
+ Popover `widthSizingType ` prop documentation markdown is fixed.

src/Popover/Popover.js

@@ -237,11 +237,11 @@ Popover.propTypes = {
      * This value is attached to aria-haspopup and is useful to assistive tech. Defaulted to boolean true*/
     type: PropTypes.oneOf(POPOVER_TYPES),
     useArrowKeyNavigation: PropTypes.bool,
-    /** `<ul>
-<li>"matchTarget" - left and right edges align with the target</li>
-<li>"minTarget" - right edge aligns with target unless Popover content is bigger</li>
-<li>"maxTarget" - right edge aligns with target unless Popover content is smaller</li>
-</ul>`'none', 'matchTarget', 'minTarget', 'maxTarget' */
+    /** 'none', 'matchTarget', 'minTarget', 'maxTarget'
+     * - "matchTarget" - left and right edges align with the target
+     * - "minTarget" - right edge aligns with target unless Popover content is bigger
+     * - "maxTarget" - right edge aligns with target unless Popover content is smaller
+     */
     widthSizingType: PropTypes.oneOf(POPPER_SIZING_TYPES),
     /** Callback for consumer clicking outside of popover body */
     onClickOutside: PropTypes.func,

src/Shellbar/Shellbar.js

@@ -61,7 +61,9 @@ class Shellbar extends Component {
         if (this.props.productSwitch) {
             let collapsedProductSwitch = this.props.productSwitch;
 
+            // eslint-disable-next-line react/prop-types
             collapsedProductSwitch.glyph = 'grid';
+            // eslint-disable-next-line react/prop-types
             collapsedProductSwitch.callback = () => {
                 this.setState(prevState => ({
                     showCollapsedProductSwitchMenu: !prevState.showCollapsedProductSwitchMenu
@@ -206,6 +208,11 @@ class Shellbar extends Component {
                                 inputProps={{ className: 'fd-shellbar__input-group__input' }}
                                 onEnter={searchInput.onSearch}
                                 placeholder={searchInput.placeholder}
+                                popoverProps={{
+                                    placement: searchInput?.popoverProps?.placement || 'bottom',
+                                    disableEdgeDetection: searchInput?.popoverProps?.disableEdgeDetection || true,
+                                    ...searchInput.popoverProps
+                                }}
                                 searchBtnProps={{ className: 'fd-shellbar__button' }}
                                 searchList={searchInput.searchList} />
                         </div>
@@ -452,7 +459,9 @@ class Shellbar extends Component {
                                             </ul>
                                         </div>
                                     }
-                                    control={<Button className='fd-product-switch__control fd-shellbar__button'
+                                    control={<Button
+                                        aria-label={productSwitch.label}
+                                        className='fd-product-switch__control fd-shellbar__button'
                                         disableStyles={disableStyles}
                                         glyph='grid' />}
                                     disableEdgeDetection
@@ -499,8 +508,11 @@ Shellbar.propTypes = {
     notifications: PropTypes.object,
     /** Holds product titles and navigation */
     productMenu: PropTypes.array,
-    /** For navigating between products */
-    productSwitch: PropTypes.object,
+    /** For navigating between products. An object that contains an accessible and localized label for product switch button. */
+    productSwitch: PropTypes.shape({
+        /** Accessible and localized label for product switch button */
+        label: PropTypes.string.isRequired
+    }),
     /** Array of objects containing data about the products.
      * Callback, title, and glyph are required; subtitle is optional. */
     productSwitchList: PropTypes.arrayOf(
@@ -519,7 +531,7 @@ Shellbar.propTypes = {
     profile: PropTypes.object,
     /** List of items for the profile menu */
     profileMenu: PropTypes.array,
-    /** Holds `searchInput` properties */
+    /** Holds `searchInput` [properties](?id=component-api-searchinput--compact&viewMode=docs#properties) */
     searchInput: PropTypes.object,
     /** Displays an application context. Should be used rarely */
     subtitle: PropTypes.string

src/TreeView/__stories__/__snapshots__/TreeView.visual.storyshot

@@ -17184,6 +17184,7 @@ exports[`Storyshots Visual Shellbar 1`] = `
                     aria-controls="fd-shellbar-product-switch-popover"
                     aria-expanded={false}
                     aria-haspopup={true}
+                    aria-label="Product Switch"
                     className="fd-button sap-icon--grid fd-product-switch__control fd-shellbar__button"
                     onClick={[Function]}
                     onKeyPress={[Function]}