Module: Center the collapse/expand icon (#3142)

pinterest · Aug 18, 2023 · 392235a · 392235a
1 parent 7e38aab
commit 392235a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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}