From 392235a6438d438180d7808732c8148b01ab306c Mon Sep 17 00:00:00 2001
From: Raviteja Lingineni <rlingineni@pinterest.com>
Date: Fri, 18 Aug 2023 14:50:52 -0500
Subject: [PATCH] Module: Center the collapse/expand icon  (#3142)

---
 packages/gestalt/src/Module/ExpandableItem.js |  3 +-
 .../__snapshots__/ExpandableItem.test.js.snap |  7 ++-
 .../ModuleExpandable.test.js.snap             | 49 ++++++++++++++++---
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/packages/gestalt/src/Module/ExpandableItem.js b/packages/gestalt/src/Module/ExpandableItem.js
index 1721b5c64d..e7a955c2d1 100644
--- a/packages/gestalt/src/Module/ExpandableItem.js
+++ b/packages/gestalt/src/Module/ExpandableItem.js
@@ -84,8 +84,9 @@ export default function ModuleExpandableItem({
               )}
             </Box>
 
+            {/* Adding a max height because the line height is 24, and we don't want the icon container to expand */}
             {Boolean(children) && (
-              <Box id={id} padding={1}>
+              <Box id={id} padding={1} display="flex" alignItems="center" maxHeight={24}>
                 <Icon
                   accessibilityLabel={
                     isCollapsed ? accessibilityExpandLabel : accessibilityCollapseLabel
diff --git a/packages/gestalt/src/Module/__snapshots__/ExpandableItem.test.js.snap b/packages/gestalt/src/Module/__snapshots__/ExpandableItem.test.js.snap
index 667349b403..60f893c739 100644
--- a/packages/gestalt/src/Module/__snapshots__/ExpandableItem.test.js.snap
+++ b/packages/gestalt/src/Module/__snapshots__/ExpandableItem.test.js.snap
@@ -777,8 +777,13 @@ exports[`ModuleExpandableItem renders correctly with when expanded 1`] = `
             </div>
           </div>
           <div
-            className="box paddingX1 paddingY1"
+            className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
             id="uniqueTestID"
+            style={
+              Object {
+                "maxHeight": 24,
+              }
+            }
           >
             <svg
               aria-hidden={null}
diff --git a/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap b/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
index 9f5ce67b79..4b3401ef63 100644
--- a/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
@@ -94,8 +94,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -209,8 +214,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-1"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -346,8 +356,13 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-2"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -495,8 +510,13 @@ exports[`Module Expandable renders correctly with one item 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -591,8 +611,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-0"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -711,8 +736,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-1"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}
@@ -848,8 +878,13 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               </div>
             </div>
             <div
-              className="box paddingX1 paddingY1"
+              className="box paddingX1 paddingY1 xsDisplayFlex xsItemsCenter"
               id="uniqueTestID-2"
+              style={
+                Object {
+                  "maxHeight": 24,
+                }
+              }
             >
               <svg
                 aria-hidden={null}