fix: adds id to sidepanel (carbon-design-system#3896)

* fix: adds id to sidepanel * fix: revert required id and add default one * fix: remove is required
lee-chase · Dec 4, 2023 · 4de63a2 · 4de63a2
1 parent 1a0ba55
commit 4de63a2
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 13 deletions.
diff --git a/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.js b/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.js
@@ -38,6 +38,7 @@ export let CreateSidePanel = React.forwardRef(
       disableSubmit,
       formTitle,
       formDescription,
+      id,
       onRequestClose,
       onRequestSubmit,
       open,
@@ -76,6 +77,7 @@ export let CreateSidePanel = React.forwardRef(
         <SidePanel
           {...rest}
           {...{
+            id,
             open,
             ref,
             selectorPageContent,
@@ -147,6 +149,11 @@ CreateSidePanel.propTypes = {
    */
   formTitle: PropTypes.node.isRequired,
 
+  /**
+   * Unique identifier
+   */
+  id: PropTypes.string,
+
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

diff --git a/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.test.js b/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.test.js
@@ -29,6 +29,7 @@ const renderComponent = ({ ...rest } = {}, children = <p>test</p>) =>
     <>
       <CreateSidePanel
         open
+        id="create-sidepanel-id"
         {...{
           title,
           subtitle,

diff --git a/...ages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.js b/...ages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.js
@@ -384,6 +384,7 @@ const ClickableRowWithPanel = ({ ...args }) => {
     >
       <Datagrid datagridState={{ ...datagridState }} />
       <SidePanel
+        id="storybook-id"
         selectorPageContent={true && '.page-content-wrapper'} // Only if SlideIn
         selectorPrimaryFocus="#side-panel-story__view-link"
         open={openSidePanel}

diff --git a/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.js b/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.js
@@ -44,6 +44,7 @@ export let EditSidePanel = React.forwardRef(
       children,
       className,
       disableSubmit,
+      id,
       formTitle,
       formDescription,
       onRequestClose,
@@ -95,6 +96,7 @@ export let EditSidePanel = React.forwardRef(
           title,
           subtitle,
           selectorPrimaryFocus,
+          id,
           ...getDevtoolsProps(componentName),
         }}
         placement={placement}
@@ -168,6 +170,11 @@ EditSidePanel.propTypes = {
    */
   formTitle: PropTypes.node.isRequired,
 
+  /**
+   * Unique identifier
+   */
+  id: PropTypes.string,
+
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

diff --git a/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.js b/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.js
@@ -100,6 +100,7 @@ const Template = (args) => {
       </Grid>
       <EditSidePanel
         {...args}
+        id="storybook-id"
         open={open}
         onRequestClose={() => setOpen(false)}
         onRequestSubmit={() => setOpen(false)}

diff --git a/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.test.js b/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.test.js
@@ -34,6 +34,7 @@ const renderEditPanel = ({ ...rest } = {}, children = childrenContent) =>
   render(
     <EditSidePanel
       open
+      id="edit-sidepanel-id"
       {...{
         title,
         subtitle,

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.js b/packages/ibm-products/src/components/SidePanel/SidePanel.js
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 // Other standard imports.
@@ -60,6 +60,7 @@ export let SidePanel = React.forwardRef(
       closeIconDescription = defaults.closeIconDescription,
       condensedActions,
       currentStep = defaults.currentStep,
+      id = blockClass,
       includeOverlay,
       labelText,
       navigationBackIconDescription = defaults.navigationBackIconDescription,
@@ -104,7 +105,7 @@ export let SidePanel = React.forwardRef(
         const scrollableSection = panelRef.current.querySelector(
           `.${blockClass}__inner-content`
         );
-        const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+        const sidePanelOuter = document.querySelector(`#${id}`);
         const initialTitleHeight = document.querySelector(
           `.${blockClass}__title-container`
         )?.offsetHeight;
@@ -120,7 +121,7 @@ export let SidePanel = React.forwardRef(
           );
         }
       }
-    }, [currentStep, ref, size, previousState?.size]);
+    }, [currentStep, ref, size, previousState?.size, id]);
 
     // set initial focus when side panel opens
     useEffect(() => {
@@ -148,7 +149,7 @@ export let SidePanel = React.forwardRef(
 
     useEffect(() => {
       if (open && actions && actions.length && animationComplete) {
-        const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+        const sidePanelOuter = document.querySelector(`#${id}`);
         const actionsContainer = getActionsContainerElement();
         let actionsHeight = actionsContainer?.offsetHeight + 16; // add additional 1rem spacing to bottom padding
         actionsHeight = `${Math.round(actionsHeight / 16)}rem`;
@@ -157,7 +158,14 @@ export let SidePanel = React.forwardRef(
           actionsHeight
         );
       }
-    }, [actions, condensedActions, open, animationComplete]);
+    }, [
+      actions,
+      condensedActions,
+      open,
+      animationComplete,
+      id,
+      getActionsContainerElement,
+    ]);
 
     // Add console warning if labelText is provided without a title.
     // This combination is not allowed.
@@ -172,7 +180,7 @@ export let SidePanel = React.forwardRef(
     /* istanbul ignore next */
     const handleResize = ({ height }) => {
       setPanelHeight(height);
-      const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+      const sidePanelOuter = document.querySelector(`#${id}`);
       const actionsContainer = getActionsContainerElement();
       let actionsHeight = actionsContainer?.offsetHeight + 16; // add additional 1rem spacing to bottom padding
       actionsHeight = `${Math.round(actionsHeight / 16)}rem`;
@@ -182,13 +190,13 @@ export let SidePanel = React.forwardRef(
       );
     };
 
-    const getActionsContainerElement = () => {
-      const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+    const getActionsContainerElement = useCallback(() => {
+      const sidePanelOuter = document.querySelector(`#${id}`);
       return (
         sidePanelOuter &&
         sidePanelOuter.querySelector(`.${blockClass}__actions-container`)
       );
-    };
+    }, [id]);
 
     // Title and subtitle scroll animation
     useEffect(() => {
@@ -200,9 +208,9 @@ export let SidePanel = React.forwardRef(
         title.length &&
         !reducedMotion.matches
       ) {
-        const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+        const sidePanelOuter = document.querySelector(`#${id}`);
         const sidePanelScrollArea = document.querySelector(
-          `#${blockClass}-outer .${blockClass}__inner-content`
+          `#${id} .${blockClass}__inner-content`
         );
         const sidePanelTitleElement = document.querySelector(
           `.${blockClass}__title-text`
@@ -371,7 +379,7 @@ export let SidePanel = React.forwardRef(
           });
       }
       if (open && !animateTitle) {
-        const sidePanelOuter = document.querySelector(`#${blockClass}-outer`);
+        const sidePanelOuter = document.querySelector(`#${id}`);
         const sidePanelTitleElement = document.querySelector(
           `.${blockClass}__title-container .${blockClass}__title-text`
         );
@@ -413,6 +421,7 @@ export let SidePanel = React.forwardRef(
       title,
       size,
       reducedMotion.matches,
+      id,
     ]);
 
     // click outside functionality if `includeOverlay` prop is set
@@ -714,7 +723,7 @@ export let SidePanel = React.forwardRef(
             <motion.div
               {...getDevtoolsProps(componentName)}
               {...rest}
-              id={`${blockClass}-outer`}
+              id={id}
               className={mainPanelClassNames}
               onBlur={handleBlur}
               ref={contentRef}
@@ -873,6 +882,11 @@ SidePanel.propTypes = {
    */
   currentStep: PropTypes.number,
 
+  /**
+   * Unique identifier
+   */
+  id: PropTypes.string,
+
   /**
    * Determines whether the side panel should render with an overlay
    */

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js
@@ -49,6 +49,7 @@ const defaultStoryProps = {
       <strong>investigate</strong> incident management within this side panel.
     </>
   ),
+  id: 'storybook-sidepanel',
 };
 
 const headerData = [

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js
@@ -35,6 +35,7 @@ const onUnmountFn = jest.fn();
 const renderSidePanel = ({ ...rest } = {}, children = <p>test</p>) =>
   render(
     <SidePanel
+      id="sidepanel-id"
       {...{
         title,
         open: true,
@@ -58,6 +59,7 @@ const SlideIn = ({
   return (
     <div>
       <SidePanel
+        id="sidepanel-id"
         actionToolbarButtons={actionToolbarButtons}
         title={title}
         subtitle={subtitle}
@@ -210,6 +212,7 @@ describe('SidePanel', () => {
         includeOverlay
         open={false}
         onRequestClose={onRequestCloseFn}
+        id="sidepanel-id"
       >
         Content
       </SidePanel>
-Original file line number
+Diff line change
@@ Expand Up @@
         <>
           <CreateSidePanel
             open
+            id="create-sidepanel-id"
             {...{
               title,
               subtitle,
@@ Expand Down @@