diff --git a/package.json b/package.json index 18f77ff9..73c1a227 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@the-deep/deep-ui", - "version": "1.5.14-beta.1", + "version": "1.5.14-beta.2", "description": "React component library by Deep", "files": [ "/build" diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index f91d118d..d24818a7 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -47,6 +47,7 @@ export interface Props { headingContainerClassName?: HeaderProps['headingContainerClassName']; inlineHeadingDescription?: boolean; footerContentClassName?: string; + headingSectionClassName?: string; footerActionsContainerClassName?: string; footerIconsContainerClassName?: string; footerQuickActionsContainerClassName?: string; @@ -81,6 +82,7 @@ function Container(props: Props) { footerClassName, footerIconsContainerClassName, footerActionsContainerClassName, + headingSectionClassName, footerContentClassName, footerQuickActionsContainerClassName, containerElementProps, @@ -136,6 +138,7 @@ function Container(props: Props) { iconsContainerClassName={headerIconsContainerClassName} actionsContainerClassName={headerActionsContainerClassName} descriptionClassName={_cs(styles.headerDescription, headerDescriptionClassName)} + headingSectionClassName={headingSectionClassName} headingClassName={headingClassName} elementProps={headerElementProps} headingContainerClassName={headingContainerClassName} diff --git a/src/components/ListView/index.tsx b/src/components/ListView/index.tsx index b7859e1e..b257f175 100644 --- a/src/components/ListView/index.tsx +++ b/src/components/ListView/index.tsx @@ -20,7 +20,8 @@ const spacingToStyleMap: { loose: styles.looseSpacing, }; -type MessagePropOmission = 'className' | 'message' | 'compact' | 'icon' | 'empty' | 'pendingContainerClassName'; +type MessagePropOmission = 'className' | 'message' +| 'compact' | 'icon' | 'empty' | 'pendingContainerClassName' | 'messageHidden' | 'messageIconHidden'; export type Props< D, P, @@ -33,6 +34,8 @@ export type Props< compactAndVerticalEmptyMessage?: boolean; compactPendingMessage?: boolean; direction?: 'horizontal' | 'vertical'; + messageShown?: boolean; + messageIconShown?: boolean; }; function ListView< @@ -59,6 +62,8 @@ function ListView< compactAndVerticalEmptyMessage, spacing = 'none', direction = 'horizontal', + messageShown = false, + messageIconShown = false, ...otherListProps } = props; @@ -87,6 +92,8 @@ function ListView< compactPendingMessage={empty || compactPendingMessage} compact={compactEmptyMessage} compactAndVertical={compactAndVerticalEmptyMessage} + messageHidden={!messageShown} + messageIconHidden={!messageIconShown} /> -
- {icon} -
-
- { message } -
+ {!messageHidden && ( +
+ {icon} +
+ )} + {!messageIconHidden && ( +
+ { message } +
+ )} ); } diff --git a/src/components/TableView/index.tsx b/src/components/TableView/index.tsx index 34dcc0c3..f56662f8 100644 --- a/src/components/TableView/index.tsx +++ b/src/components/TableView/index.tsx @@ -9,7 +9,8 @@ import Table, { import Message, { Props as MessageProps } from '../Message'; import styles from './styles.css'; -type MessagePropOmission = 'className' | 'message' | 'compact' | 'icon' | 'empty' | 'pendingContainerClassName'; +type MessagePropOmission = 'className' | 'message' +| 'compact' | 'icon' | 'empty' | 'pendingContainerClassName' | 'messageHidden' | 'messageIconHidden'; export type Props< D, K extends string | number, @@ -24,6 +25,8 @@ export type Props< contentClassName?: string, compactEmptyMessage?: boolean; compactPendingMessage?: boolean; + messageShown?: boolean; + messageIconShown?: boolean; }; function TableView< @@ -47,6 +50,8 @@ function TableView< contentClassName, compactEmptyMessage, compactPendingMessage, + messageShown = false, + messageIconShown = false, ...otherTableProps } = props; @@ -77,6 +82,8 @@ function TableView< filteredEmptyMessage={filteredEmptyMessage} compactPendingMessage={empty || compactPendingMessage} compactEmptyMessage={compactEmptyMessage} + messageHidden={!messageShown} + messageIconHidden={!messageIconShown} /> ); diff --git a/src/stories/ListView.stories.tsx b/src/stories/ListView.stories.tsx index 84678fc7..09443fda 100644 --- a/src/stories/ListView.stories.tsx +++ b/src/stories/ListView.stories.tsx @@ -79,6 +79,10 @@ const Template: Story {...args} pending={pending} filtered={filtered} + direction="vertical" + spacing="comfortable" + messageShown + messageIconShown // eslint-disable-next-line react/destructuring-assignment data={empty ? [] : args.data} /> diff --git a/src/stories/TableView.stories.tsx b/src/stories/TableView.stories.tsx index e90d0a16..0d802b29 100644 --- a/src/stories/TableView.stories.tsx +++ b/src/stories/TableView.stories.tsx @@ -117,6 +117,8 @@ const Template: Story< // eslint-disable-next-line react/destructuring-assignment data={empty ? [] : args.data} columns={columns} + messageShown + messageIconShown />