diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a6608b..b50d093 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.6.4] + +### Fixed + +- Improve DashboardTemplate component. + ## [1.6.3] ### Fixed diff --git a/package.json b/package.json index a23c092..b3c1f07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.3-2", + "version": "1.6.4", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx index 3ab1f3b..2bcac23 100644 --- a/src/templates/DashboardTemplate/DashboardTemplate.tsx +++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx @@ -11,7 +11,13 @@ import { import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types'; const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => { - const { headerProps, siderProps, footerProps, fitScreen = false, ...restProps } = props; + const { + headerProps = null, + siderProps = null, + footerProps = null, + fitScreen = false, + ...restProps + } = props; return ( @@ -24,7 +30,7 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop {props.children} - {footerProps !== false && ( + {footerProps && ( )} diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx index 0b6aba0..e133e39 100644 --- a/src/templates/DashboardTemplate/styles.tsx +++ b/src/templates/DashboardTemplate/styles.tsx @@ -4,10 +4,12 @@ import { Layout } from '../../molecules'; import { getAliasToken, getComponentToken } from '../../utils'; export const DashboardTemplateStyles = styled(Layout, { - label: 'rd-dashboard-template', + target: 'rd-dashboard-template', })<{ fitScreen: boolean; }>` + min-height: 100vh; + ${() => css` background: ${getAliasToken('DashboardTemplate', 'colorBgLayout')}; `} @@ -20,14 +22,15 @@ export const DashboardTemplateStyles = styled(Layout, { `; export const DashboardTemplateSkeletonLayout = styled(Layout, { - label: 'rd-dashboard-template-skeleton', + target: 'rd-dashboard-template-skeleton', })``; export const DashboardTemplateContent = styled(Layout.Content, { - label: 'rd-dashboard-template-content', + target: 'rd-dashboard-template-content', })<{ fitScreen: boolean; }>` + height: 0; ${() => css` padding: ${getComponentToken('DashboardTemplate', 'contentPadding') || '32px 32px'}; `} diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts index 704cdd3..cffec4c 100644 --- a/src/templates/DashboardTemplate/types.ts +++ b/src/templates/DashboardTemplate/types.ts @@ -13,9 +13,9 @@ type DashboardTemplateComponentTokenExtend = { //#region Define extended types type DashboardTemplatePropsExtend = { - headerProps?: RdDashboardTemplateHeaderProps | false; - siderProps?: RdDashboardTemplateSiderProps | false; - footerProps?: RdDashboardTemplateFooterProps | false; + headerProps?: RdDashboardTemplateHeaderProps | null; + siderProps?: RdDashboardTemplateSiderProps | null; + footerProps?: RdDashboardTemplateFooterProps | null; fitScreen?: boolean; };