From 5e532b0ed7c900b3ddfbef3f2b30613af3b54b65 Mon Sep 17 00:00:00 2001 From: Casey Dexter Date: Thu, 19 Oct 2023 11:16:45 -0400 Subject: [PATCH 1/5] feat: Add support for secondary header content in expansion panel --- .../ExpansionPanel/ExpansionPanel.tsx | 101 +++++++++++------- 1 file changed, 65 insertions(+), 36 deletions(-) diff --git a/src/components/ExpansionPanel/ExpansionPanel.tsx b/src/components/ExpansionPanel/ExpansionPanel.tsx index ec47d35f..ad6a818f 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.tsx +++ b/src/components/ExpansionPanel/ExpansionPanel.tsx @@ -5,6 +5,8 @@ import { makeStyles } from '../../styles'; import { GetClasses } from '../../typeUtils'; import { generateUniqueId } from '../_private/UniqueId'; import { Text } from '../Text'; +import { Box } from '../Box'; +import { IconButton } from '../IconButton'; export const ExpansionPanelStylesKey = 'ChromaExpansionPanel'; @@ -17,9 +19,17 @@ export const useStyles = makeStyles( rootOpen: { maxHeight: 'inherit', }, + header: { + background: theme.palette.common.white, + position: 'relative', + zIndex: 2, + }, + headerShadow: { + boxShadow: theme.boxShadows.table, + }, button: { - width: '100%', background: theme.palette.common.white, + width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', @@ -40,9 +50,6 @@ export const useStyles = makeStyles( transform: 'translate3d(2px, 0, 0)', }, }, - buttonShadow: { - boxShadow: theme.boxShadows.table, - }, leadingIcon: { marginRight: theme.spacing(1), minWidth: theme.pxToRem(18), @@ -63,10 +70,16 @@ export const useStyles = makeStyles( overflow: 'hidden', textOverflow: 'ellipsis', }, - icon: { + iconButton: { transition: 'transform 0.25s ease', color: theme.palette.primary.main, minWidth: theme.pxToRem(18), + paddingRight: theme.spacing(2), + paddingLeft: theme.spacing(2), + '& > svg': { + maxHeight: theme.pxToRem(18), + maxWidth: theme.pxToRem(18), + }, }, rotate: { transform: 'rotate(45deg)', @@ -110,6 +123,8 @@ export interface ExpansionPanelProps leadingIconClassName?: string; title: string; leadingIcon?: React.ComponentType>; + secondaryHeaderClassName?: string; + secondaryHeaderChildren?: React.ReactNode; truncateTitle?: boolean; onToggle?: (isExpanded: boolean) => void; isOpen?: boolean; @@ -150,6 +165,8 @@ export const ExpansionPanel = React.forwardRef< contentDirection = 'column', title, leadingIcon: LeadingIcon, + secondaryHeaderClassName, + secondaryHeaderChildren, truncateTitle = false, ...rootProps }, @@ -206,39 +223,51 @@ export const ExpansionPanel = React.forwardRef< ref={ref} {...rootProps} > - + + {secondaryHeaderChildren} + + - +
Date: Thu, 19 Oct 2023 11:17:06 -0400 Subject: [PATCH 2/5] docs: Add story for secondary header content --- .../ExpansionPanel/ExpansionPanel.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/ExpansionPanel/ExpansionPanel.stories.tsx b/src/components/ExpansionPanel/ExpansionPanel.stories.tsx index a8261b91..99e9a235 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.stories.tsx +++ b/src/components/ExpansionPanel/ExpansionPanel.stories.tsx @@ -3,6 +3,7 @@ import { StoryObj, StoryFn, Meta } from '@storybook/react'; import { ExpansionPanel } from './ExpansionPanel'; import { Check, ArrowRight } from '@lifeomic/chromicons'; +import { Button } from '../Button'; const meta: Meta = { title: 'Components/ExpansionPanel', @@ -48,3 +49,20 @@ export const TruncatedTitle: Story = { }, }, }; + +export const SecondaryHeader: Story = { + render: Template, + args: { + title: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ex ea commodo consequat.', + secondaryHeaderChildren: , + truncateTitle: true, + }, + parameters: { + docs: { + description: { + story: `Secondary content or actions can be placed in the expansion panel header.`, + }, + }, + }, +}; From 36835497abb847ba1a58699b03ab388e0517d53d Mon Sep 17 00:00:00 2001 From: Casey Dexter Date: Thu, 19 Oct 2023 12:38:42 -0400 Subject: [PATCH 3/5] style: Refactor styles using flex box vs maxWidth calc to get text overflow working chore: Rename secondaryHeader style: Add gap and align to secondary header box --- .../ExpansionPanel/ExpansionPanel.tsx | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/components/ExpansionPanel/ExpansionPanel.tsx b/src/components/ExpansionPanel/ExpansionPanel.tsx index ad6a818f..c76466d6 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.tsx +++ b/src/components/ExpansionPanel/ExpansionPanel.tsx @@ -28,20 +28,21 @@ export const useStyles = makeStyles( boxShadow: theme.boxShadows.table, }, button: { + alignItems: 'center', background: theme.palette.common.white, - width: '100%', + border: 'none', + cursor: 'pointer', display: 'flex', + flex: 1, justifyContent: 'space-between', - alignItems: 'center', - position: 'relative', - textAlign: 'left', - border: 'none', outline: 'none', + overflow: 'hidden', paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), paddingTop: theme.spacing(1.25), paddingBottom: theme.spacing(1.25), - cursor: 'pointer', + position: 'relative', + textAlign: 'left', '&:focus': { outline: 'none', }, @@ -50,15 +51,11 @@ export const useStyles = makeStyles( transform: 'translate3d(2px, 0, 0)', }, }, - leadingIcon: { - marginRight: theme.spacing(1), - minWidth: theme.pxToRem(18), - }, titleContainer: { alignItems: 'center', display: 'flex', - maxWidth: `calc(100% - ${theme.pxToRem(34)})`, // 34 = icon width of 18px + 16px padding - flexGrow: 1, + flex: 1, + minWidth: 0, }, title: { color: theme.palette.text.secondary, @@ -70,6 +67,10 @@ export const useStyles = makeStyles( overflow: 'hidden', textOverflow: 'ellipsis', }, + leadingIcon: { + marginRight: theme.spacing(1), + minWidth: theme.pxToRem(18), + }, iconButton: { transition: 'transform 0.25s ease', color: theme.palette.primary.main, @@ -124,7 +125,7 @@ export interface ExpansionPanelProps title: string; leadingIcon?: React.ComponentType>; secondaryHeaderClassName?: string; - secondaryHeaderChildren?: React.ReactNode; + secondaryHeader?: React.ReactNode; truncateTitle?: boolean; onToggle?: (isExpanded: boolean) => void; isOpen?: boolean; @@ -166,7 +167,7 @@ export const ExpansionPanel = React.forwardRef< title, leadingIcon: LeadingIcon, secondaryHeaderClassName, - secondaryHeaderChildren, + secondaryHeader, truncateTitle = false, ...rootProps }, @@ -230,7 +231,7 @@ export const ExpansionPanel = React.forwardRef<
- - {secondaryHeaderChildren} + + {secondaryHeader} Date: Thu, 19 Oct 2023 12:39:51 -0400 Subject: [PATCH 4/5] docs: Add secondary header content --- src/components/ExpansionPanel/ExpansionPanel.stories.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ExpansionPanel/ExpansionPanel.stories.tsx b/src/components/ExpansionPanel/ExpansionPanel.stories.tsx index 99e9a235..c0d29a82 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.stories.tsx +++ b/src/components/ExpansionPanel/ExpansionPanel.stories.tsx @@ -54,8 +54,9 @@ export const SecondaryHeader: Story = { render: Template, args: { title: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ex ea commodo consequat.', - secondaryHeaderChildren: , + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', + leadingIcon: ArrowRight, + secondaryHeader: , truncateTitle: true, }, parameters: { From 441aa796d0fdb517bf8424881883ed98484603f3 Mon Sep 17 00:00:00 2001 From: Casey Dexter Date: Thu, 19 Oct 2023 13:42:20 -0400 Subject: [PATCH 5/5] style: Maximize space for title --- src/components/ExpansionPanel/ExpansionPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ExpansionPanel/ExpansionPanel.tsx b/src/components/ExpansionPanel/ExpansionPanel.tsx index c76466d6..1fd6136d 100644 --- a/src/components/ExpansionPanel/ExpansionPanel.tsx +++ b/src/components/ExpansionPanel/ExpansionPanel.tsx @@ -38,7 +38,7 @@ export const useStyles = makeStyles( outline: 'none', overflow: 'hidden', paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), + paddingRight: 0, paddingTop: theme.spacing(1.25), paddingBottom: theme.spacing(1.25), position: 'relative',