From 233cfe1a70b0a160e0cdd22e25e4dbd47e41b578 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 8 Jun 2022 13:25:03 +0200 Subject: [PATCH 01/10] Paper: removed max/min width --- packages/eds-core-react/src/components/Paper/Paper.tokens.tsx | 2 -- packages/eds-core-react/src/components/Paper/Paper.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx b/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx index 6d3cb9c3ba..ae4db3d3c3 100644 --- a/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx +++ b/packages/eds-core-react/src/components/Paper/Paper.tokens.tsx @@ -14,7 +14,5 @@ export type ElevationTypes = keyof Elevations export { elevation } export const paper: ComponentToken = { - maxWidth: 'calc(100% - 32px)', - minWidth: '96px', background, } diff --git a/packages/eds-core-react/src/components/Paper/Paper.tsx b/packages/eds-core-react/src/components/Paper/Paper.tsx index b7fa6e7ddd..f8f4f965b5 100644 --- a/packages/eds-core-react/src/components/Paper/Paper.tsx +++ b/packages/eds-core-react/src/components/Paper/Paper.tsx @@ -11,8 +11,6 @@ type StyledProps = { } const StyledPaper = styled.div` - min-width: ${tokens.minWidth}; - max-width: ${tokens.maxWidth}; background: ${tokens.background}; box-shadow: ${({ elevation }) => elevation}; ` From 007ab6e1377b1ec1d128cb1041bad2a8999ab056 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 8 Jun 2022 13:25:59 +0200 Subject: [PATCH 02/10] Paper: expose ElevationTypes to add elevation prop to other components --- packages/eds-core-react/src/components/Paper/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eds-core-react/src/components/Paper/index.ts b/packages/eds-core-react/src/components/Paper/index.ts index 5c76c5337c..111d359176 100644 --- a/packages/eds-core-react/src/components/Paper/index.ts +++ b/packages/eds-core-react/src/components/Paper/index.ts @@ -1 +1,2 @@ export * from './Paper' +export type { ElevationTypes } from './Paper.tokens' From d0d1f4b66334fe87f8f53552c73ee538435b47a4 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 8 Jun 2022 13:29:23 +0200 Subject: [PATCH 03/10] made topbar story not so tall --- .../eds-core-react/src/components/TopBar/TopBar.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx index 12dd6de627..d2feb1d40d 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx @@ -38,12 +38,12 @@ const icons = { Icon.add(icons) const Wrapper = styled.div.attrs({ tabIndex: 0 })` - height: 100vh; + height: 65vh; overflow: auto; ` const BodyWrapper = styled.div` - height: 1500px; + height: 1000px; background: #ebebeb; display: flex; flex-direction: column; From 7a430a9c0c269a99101045db5b49bb34b08b4ab6 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 8 Jun 2022 13:30:05 +0200 Subject: [PATCH 04/10] added elevation prop to topbar --- .../src/components/TopBar/TopBar.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.tsx index 81fadf46bd..20678588a6 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.tsx @@ -6,12 +6,15 @@ import { bordersTemplate, useToken, } from '@equinor/eds-utils' +import { Paper, ElevationTypes } from '../Paper' import { topbar as topbarToken } from './TopBar.tokens' import { useEds } from '../EdsProvider' -export type TopbarProps = HTMLAttributes +export type TopbarProps = { + elevation?: ElevationTypes +} & HTMLAttributes -const StyledTopBar = styled.header(({ theme }) => { +const StyledTopBar = styled(Paper)(({ theme }) => { return css` height: ${theme.height}; top: 0; @@ -30,15 +33,19 @@ const StyledTopBar = styled.header(({ theme }) => { ` }) -export const TopBar = forwardRef(function TopBar( - { children, ...props }, +export const TopBar = forwardRef(function TopBar( + { children, elevation = 'none', ...props }, ref, ) { const { density } = useEds() const token = useToken({ density }, topbarToken) + const rest = { + ...props, + ref, + } return ( - + {children} From c9cbb49eaacb506f1c42a0a1ab418196e0b88b48 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 15 Jun 2022 16:16:32 +0200 Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20elevation=20options=20to=20Ca?= =?UTF-8?q?rd/Banner/TopBar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Banner/Banner.stories.tsx | 4 ++-- .../src/components/Banner/Banner.tsx | 16 ++++++++++++---- .../eds-core-react/src/components/Card/Card.tsx | 12 +++++++++--- .../eds-core-react/src/components/Paper/index.ts | 1 - .../src/components/TopBar/TopBar.stories.tsx | 3 +++ .../src/components/TopBar/TopBar.tsx | 7 +++++-- 6 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/eds-core-react/src/components/Banner/Banner.stories.tsx b/packages/eds-core-react/src/components/Banner/Banner.stories.tsx index f9793f9d61..eb9a0c7fe3 100644 --- a/packages/eds-core-react/src/components/Banner/Banner.stories.tsx +++ b/packages/eds-core-react/src/components/Banner/Banner.stories.tsx @@ -28,11 +28,11 @@ export default { }, } as ComponentMeta -export const Introduction: Story = () => { +export const Introduction: Story = (args) => { // Note: This example is not interactive, as Storybook // doesn't yet support to manipulate subcomponents via Storybook Args return ( - + This tag is not being preserved yet. Click start preservation to enable writing preservation records. diff --git a/packages/eds-core-react/src/components/Banner/Banner.tsx b/packages/eds-core-react/src/components/Banner/Banner.tsx index b5c0b64ff0..e2057dafd0 100644 --- a/packages/eds-core-react/src/components/Banner/Banner.tsx +++ b/packages/eds-core-react/src/components/Banner/Banner.tsx @@ -7,12 +7,14 @@ import { } from 'react' import styled, { css, ThemeProvider } from 'styled-components' import { spacingsTemplate, useToken } from '@equinor/eds-utils' +import { Paper } from '../Paper' +import type { Elevations } from '@equinor/eds-tokens' import { enabled as bannerToken } from './Banner.tokens' import { Divider } from '../Divider' import { BannerIcon } from './BannerIcon' import { useEds } from '../EdsProvider' -const StyledBanner = styled.div`` +type allowedElevations = keyof Pick type ContentProps = { hasIcon: boolean @@ -35,11 +37,12 @@ const NonMarginDivider = styled(Divider)` ` export type BannerProps = { + elevation?: allowedElevations children: ReactNode } & HTMLAttributes export const Banner = forwardRef(function Banner( - { children, className, ...rest }, + { children, className, elevation = 'none', ...rest }, ref, ) { const childrenWhereBannerIcon: boolean[] = ReactChildren.map( @@ -60,10 +63,15 @@ export const Banner = forwardRef(function Banner( return ( - + {children} - + ) }) diff --git a/packages/eds-core-react/src/components/Card/Card.tsx b/packages/eds-core-react/src/components/Card/Card.tsx index 6ac54ba91c..60eaaabb35 100644 --- a/packages/eds-core-react/src/components/Card/Card.tsx +++ b/packages/eds-core-react/src/components/Card/Card.tsx @@ -1,10 +1,14 @@ import { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' +import { Paper } from '../Paper' +import type { Elevations } from '@equinor/eds-tokens' import * as tokens from './Card.tokens' import { bordersTemplate } from '@equinor/eds-utils' const { primary } = tokens +type allowedElevations = keyof Pick + type StyledCardProps = { background: string cursor: string @@ -13,9 +17,11 @@ type StyledCardProps = { export type CardProps = { /** Variant */ variant?: 'default' | 'info' | 'warning' | 'danger' + /** Elevation */ + elevation?: allowedElevations } & HTMLAttributes -const StyledCard = styled.div` +const StyledCard = styled(Paper)` width: 100%; position: relative; background-color: ${({ background }) => background}; @@ -28,7 +34,7 @@ const StyledCard = styled.div` ` export const Card = forwardRef(function Card( - { children, variant = 'default', onClick, ...rest }, + { children, variant = 'default', elevation = 'none', onClick, ...rest }, ref, ) { const cursor = onClick ? 'pointer' : 'default' @@ -45,7 +51,7 @@ export const Card = forwardRef(function Card( } return ( - + {children} ) diff --git a/packages/eds-core-react/src/components/Paper/index.ts b/packages/eds-core-react/src/components/Paper/index.ts index 111d359176..5c76c5337c 100644 --- a/packages/eds-core-react/src/components/Paper/index.ts +++ b/packages/eds-core-react/src/components/Paper/index.ts @@ -1,2 +1 @@ export * from './Paper' -export type { ElevationTypes } from './Paper.tokens' diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx index d2feb1d40d..bfca128f43 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx @@ -15,6 +15,9 @@ import { export default { title: 'Navigation/TopBar', component: TopBar, + args: { + elevation: 'raised', + }, subcomponents: { Header: TopBar.Header, CustomContent: TopBar.CustomContent, diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.tsx index 20678588a6..13a415d582 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.tsx @@ -6,12 +6,15 @@ import { bordersTemplate, useToken, } from '@equinor/eds-utils' -import { Paper, ElevationTypes } from '../Paper' +import { Paper } from '../Paper' +import type { Elevations } from '@equinor/eds-tokens' import { topbar as topbarToken } from './TopBar.tokens' import { useEds } from '../EdsProvider' +type allowedElevations = keyof Pick + export type TopbarProps = { - elevation?: ElevationTypes + elevation?: allowedElevations } & HTMLAttributes const StyledTopBar = styled(Paper)(({ theme }) => { From 73088cafa8cfb6763be2e35a2148ec6e7a3a0eb8 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 15 Jun 2022 16:22:46 +0200 Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=93=B8=20Update=20snapshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Banner/__snapshots__/Banner.test.tsx.snap | 26 +++++++----- .../Card/__snapshots__/Card.test.tsx.snap | 42 +++++++++++-------- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap index e63fe67338..45a040b6c4 100644 --- a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap +++ b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap @@ -2,7 +2,12 @@ exports[`Banner Matches snapshot 1`] = ` - .c3 { + .c0 { + background: var(--eds_ui_background__default,rgba(255,255,255,1)); + box-shadow: 0 0 1px rgba(0,0,0,0.14); +} + +.c4 { border: none; background-color: var(--eds_ui_background__light,rgba(247,247,247,1)); margin-top: 16px; @@ -10,7 +15,7 @@ exports[`Banner Matches snapshot 1`] = ` height: 1px; } -.c1 { +.c2 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -33,7 +38,7 @@ exports[`Banner Matches snapshot 1`] = ` margin-right: 16px; } -.c0 { +.c1 { padding-left: 16px; padding-top: 16px; padding-right: 16px; @@ -47,12 +52,12 @@ exports[`Banner Matches snapshot 1`] = ` background-color: var(--eds_ui_background__default,rgba(255,255,255,1)); } -.c4 { +.c5 { margin: 0; height: 2px; } -.c2 { +.c3 { margin: 0; color: rgba(61,61,61,1); font-family: Equinor; @@ -63,14 +68,15 @@ exports[`Banner Matches snapshot 1`] = ` }

Banner message

diff --git a/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap index 4defe58d60..8f26924a37 100644 --- a/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap +++ b/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Card Matches snapshot 1`] = ` - .c4 { + .c5 { margin: 0; color: rgba(61,61,61,1); font-family: Equinor; @@ -16,7 +16,7 @@ exports[`Card Matches snapshot 1`] = ` text-align: left; } -.c5 { +.c6 { margin: 0; color: rgba(61,61,61,1); font-family: Equinor; @@ -27,6 +27,11 @@ exports[`Card Matches snapshot 1`] = ` } .c0 { + background: var(--eds_ui_background__default,rgba(255,255,255,1)); + box-shadow: 0 0 1px rgba(0,0,0,0.14); +} + +.c1 { width: 100%; position: relative; background-color: var(--eds_ui_background__default,rgba(255,255,255,1)); @@ -43,7 +48,7 @@ exports[`Card Matches snapshot 1`] = ` border-radius: 4px; } -.c1 { +.c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -51,21 +56,21 @@ exports[`Card Matches snapshot 1`] = ` width: auto; } -.c1 > * { +.c2 > * { width: 100%; } -.c1:first-child img { +.c2:first-child img { border-top-right-radius: 4px; border-top-left-radius: 4px; } -.c1:last-child img { +.c2:last-child img { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } -.c2 { +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -81,19 +86,19 @@ exports[`Card Matches snapshot 1`] = ` padding: 0 16px 0 16px; } -.c2 > :not(:first-child) { +.c3 > :not(:first-child) { margin-left: 16px; } -.c2:first-child { +.c3:first-child { padding-top: 16px; } -.c2:last-child { +.c3:last-child { padding-bottom: 16px; } -.c3 { +.c4 { display: grid; -webkit-box-flex: 2; -webkit-flex-grow: 2; @@ -103,11 +108,12 @@ exports[`Card Matches snapshot 1`] = ` }
cat
Another interactive example

Unfortunately you cannot control children in storybook yet

Leading images are full width, and go straight to the top - ignoring spacings

From 653383784979179718ccd07a3ace3f6afe8f51e4 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 15 Jun 2022 16:38:06 +0200 Subject: [PATCH 07/10] =?UTF-8?q?=F0=9F=93=B8=20Update=20more=20snapshots?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Dialog/__snapshots__/Dialog.test.tsx.snap | 2 -- .../src/components/Popover/__snapshots__/Popover.test.tsx.snap | 2 -- .../components/Snackbar/__snapshots__/Snackbar.test.tsx.snap | 2 -- 3 files changed, 6 deletions(-) diff --git a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap index f64f1641fb..ad07683cb6 100644 --- a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap +++ b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap @@ -2,8 +2,6 @@ exports[`Dialog Matches snapshot 1`] = ` .c0 { - min-width: 96px; - max-width: calc(100% - 32px); background: var(--eds_ui_background__default,rgba(255,255,255,1)); box-shadow: 0 11px 15px rgba(0,0,0,0.2),0 9px 46px rgba(0,0,0,0.12),0 24px 38px rgba(0,0,0,0.14); } diff --git a/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap index 377cf1dd71..cc2de8a8aa 100644 --- a/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap +++ b/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap @@ -2,8 +2,6 @@ exports[`Popover Matches snapshot 1`] = ` .c0 { - min-width: 96px; - max-width: calc(100% - 32px); background: var(--eds_ui_background__default,rgba(255,255,255,1)); box-shadow: 0 1px 10px rgba(0,0,0,0.2),0 4px 5px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.14); } diff --git a/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap b/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap index 4055fd5a47..082ad22ea6 100644 --- a/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap +++ b/packages/eds-core-react/src/components/Snackbar/__snapshots__/Snackbar.test.tsx.snap @@ -2,8 +2,6 @@ exports[`Snackbar Matches snapshot 1`] = ` .c0 { - min-width: 96px; - max-width: calc(100% - 32px); background: var(--eds_ui_background__default,rgba(255,255,255,1)); box-shadow: 0 1px 10px rgba(0,0,0,0.2),0 4px 5px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,0.14); } From 4d609df149fda3bd885768c0bf2d88acd969b6b2 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 16 Jun 2022 10:29:06 +0200 Subject: [PATCH 08/10] rename type to AvailableElevations --- packages/eds-core-react/src/components/Banner/Banner.tsx | 4 ++-- packages/eds-core-react/src/components/Card/Card.tsx | 4 ++-- packages/eds-core-react/src/components/TopBar/TopBar.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/eds-core-react/src/components/Banner/Banner.tsx b/packages/eds-core-react/src/components/Banner/Banner.tsx index e2057dafd0..179d6bdff7 100644 --- a/packages/eds-core-react/src/components/Banner/Banner.tsx +++ b/packages/eds-core-react/src/components/Banner/Banner.tsx @@ -14,7 +14,7 @@ import { Divider } from '../Divider' import { BannerIcon } from './BannerIcon' import { useEds } from '../EdsProvider' -type allowedElevations = keyof Pick +type AvailableElevations = keyof Pick type ContentProps = { hasIcon: boolean @@ -37,7 +37,7 @@ const NonMarginDivider = styled(Divider)` ` export type BannerProps = { - elevation?: allowedElevations + elevation?: AvailableElevations children: ReactNode } & HTMLAttributes diff --git a/packages/eds-core-react/src/components/Card/Card.tsx b/packages/eds-core-react/src/components/Card/Card.tsx index 60eaaabb35..48d781c9e9 100644 --- a/packages/eds-core-react/src/components/Card/Card.tsx +++ b/packages/eds-core-react/src/components/Card/Card.tsx @@ -7,7 +7,7 @@ import { bordersTemplate } from '@equinor/eds-utils' const { primary } = tokens -type allowedElevations = keyof Pick +type AvailableElevations = keyof Pick type StyledCardProps = { background: string @@ -18,7 +18,7 @@ export type CardProps = { /** Variant */ variant?: 'default' | 'info' | 'warning' | 'danger' /** Elevation */ - elevation?: allowedElevations + elevation?: AvailableElevations } & HTMLAttributes const StyledCard = styled(Paper)` diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.tsx index 13a415d582..cfb8a62482 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.tsx @@ -11,10 +11,10 @@ import type { Elevations } from '@equinor/eds-tokens' import { topbar as topbarToken } from './TopBar.tokens' import { useEds } from '../EdsProvider' -type allowedElevations = keyof Pick +type AvailableElevations = keyof Pick export type TopbarProps = { - elevation?: allowedElevations + elevation?: AvailableElevations } & HTMLAttributes const StyledTopBar = styled(Paper)(({ theme }) => { From 48520b79299dc30ffa7e064053977852081185cd Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 16 Jun 2022 13:35:56 +0200 Subject: [PATCH 09/10] TopBar: render paper as header --- packages/eds-core-react/src/components/TopBar/TopBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.tsx index cfb8a62482..e98613ea8a 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.tsx @@ -48,7 +48,7 @@ export const TopBar = forwardRef(function TopBar( } return ( - + {children} From ac4bef9031966284c0725dca3fd33b984c3f1732 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 16 Jun 2022 13:37:06 +0200 Subject: [PATCH 10/10] TopBar: Removed raised arg from default story --- .../eds-core-react/src/components/TopBar/TopBar.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx index bfca128f43..d2feb1d40d 100644 --- a/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx +++ b/packages/eds-core-react/src/components/TopBar/TopBar.stories.tsx @@ -15,9 +15,6 @@ import { export default { title: 'Navigation/TopBar', component: TopBar, - args: { - elevation: 'raised', - }, subcomponents: { Header: TopBar.Header, CustomContent: TopBar.CustomContent,