feat(expandable): make Expandable accept custom title

Fixes alignment of chevron when title prop is a React element; supports custom style and content in title
fabric-ds · Jun 22, 2022 · 24725f0 · 24725f0
1 parent d8044ca
commit 24725f0
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 26 deletions.
diff --git a/packages/expandable/docs/Expandable.mdx b/packages/expandable/docs/Expandable.mdx
@@ -1,3 +1,4 @@
+import { IconBag16 } from '@fabric-ds/icons/react';
 import { Expandable } from '../src';
 
 # Expandable
@@ -37,6 +38,23 @@ import { Expandable } from '@fabric-ds/react';
 </Expandable>
 ```
 
+### Expandable info box with custom title
+
+```jsx example
+<Expandable
+  title={
+    <div className="flex flex-row items-center">
+      <IconBag16 />
+      <p className="ml-8 mb-0">This is a title with an icon</p>
+    </div>
+  }
+  box
+  info
+>
+  <p>Expandable contents go here.</p>
+</Expandable>
+```
+
 ### Expandable animated box
 
 ```jsx example

diff --git a/packages/expandable/src/component.tsx b/packages/expandable/src/component.tsx
@@ -50,33 +50,39 @@ export function Expandable(props: ExpandableProps) {
         })}
         onClick={() => toggleExpandable(stateExpanded)}
       >
-        {title && <span className="h4">{title}</span>}
-        {chevron && (
-          <div
-            className={classNames({
-              'inline-block align-middle transform transition-transform': true,
-              '-rotate-180': expanded,
-              'relative left-8': !box,
-              'box-chevron absolute right-16': box,
-            })}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="none"
-              viewBox="0 0 16 16"
+        <div className="flex justify-between align-center">
+          {typeof title === 'string' ? (
+            <span className="h4">{title}</span>
+          ) : (
+            title
+          )}
+          {chevron && (
+            <div
+              className={classNames({
+                'self-center transform transition-transform': true,
+                '-rotate-180': expanded,
+                'relative left-8': !box,
+                'box-chevron': box,
+              })}
             >
-              <path
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1.5"
-                d="M2.5 5.5L8 11l5.5-5.5"
-              />
-            </svg>
-          </div>
-        )}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="none"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                  d="M2.5 5.5L8 11l5.5-5.5"
+                />
+              </svg>
+            </div>
+          )}
+        </div>
       </button>
 
       <ExpansionBehaviour animated={animated} stateExpanded={stateExpanded}>

diff --git a/packages/expandable/stories/Expandable.stories.tsx b/packages/expandable/stories/Expandable.stories.tsx
@@ -1,3 +1,4 @@
+import { IconBag16 } from '@fabric-ds/icons/react';
 import * as React from 'react';
 import { Expandable } from '../src';
 
@@ -16,6 +17,21 @@ export const Box = () => (
   </Expandable>
 );
 
+export const BoxWithCustomTitle = () => (
+  <Expandable
+    title={
+      <div className="flex flex-row items-center">
+        <IconBag16 />
+        <p className="ml-8 mb-0">This is a title with an icon</p>
+      </div>
+    }
+    box
+    info
+  >
+    <h1>I am expandable</h1>
+  </Expandable>
+);
+
 export const InfoBox = () => (
   <Expandable title="This is a title" box info>
     <h1>I am expandable</h1>