From 01104ac3209547243ab70f68e0cfb4d19a47e9d0 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:51:49 -0500 Subject: [PATCH] updated header documentation. (#1646) Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/header.mdx | 67 ++++++++--------------- examples/Header.full.tsx | 76 ++++++++++++++++++++++++++ examples/Header.main.tsx | 41 ++------------ examples/Header.slim.tsx | 68 +++++++++++++++++++++++ examples/index.tsx | 8 +++ 5 files changed, 180 insertions(+), 80 deletions(-) create mode 100644 examples/Header.full.tsx create mode 100644 examples/Header.slim.tsx diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx index 26c229a328c..20720056bbd 100644 --- a/apps/website/src/pages/docs/header.mdx +++ b/apps/website/src/pages/docs/header.mdx @@ -1,6 +1,6 @@ --- title: Header -description: An overview of the CONNECT Portal headers +description: Header sits at the top of a page and is part of a consistent user experience and navigation. layout: ./_layout.astro propsPath: '@itwin/itwinui-react/esm/core/Header/Header.d.ts' thumbnail: Header @@ -14,68 +14,49 @@ import * as AllExamples from 'examples';

{frontmatter.description}

- - -The headers seen when in our CONNECT Portal environment. A header sits at the top of a page and is part of a consistent user experience. - -## Main CONNECT Portal header - -The CONNECT portal header contains the services menu, home, enterprise, assets and projects links beginning from left to right. From right to left there is the user profile, help, and notification links. +The first thing most people look at when they arrive at a new web page is the header. The header contains vital information about your company's name and function, as well as the purpose of the specific page. -Header with circular callouts, numbered from 1 to 8. +## Usage -- Services menu -- Home page -- Enterprise portal -- Assets menu -- Projects menu -- Notifications -- Help -- User icon +`Header` consists of various subcomponents and can be customized by modifying its props. -### Actions +- Logo can be added using the `appLogo` prop and specifying the desired logo under the `` subcomponent. +- Breadcrumbs trail can be implemented using the `breadcrumbs` prop and `` subcomponent. Individual buttons can be added within the breadcrumbs trail using the [`` subcomponent](#headerbutton-subcomponent). +- The `actions` prop can be used to add any arbitrary buttons and content near the right end of the header. +- The `menuItems` prop can be used to show any additional actions inside an overflow menu located to the right of `actions`. -- Services menu pops up a list of services available to the user. -- Home page takes you to CONNECT Center. -- Enterprise Portal takes you to the Subscription Services Portal. -- Assets menu takes you to the assets page. -- Projects menu takes you to the ProjectWise Projects page. -- Notifications pops up your list of notifications. -- Help takes you to Bentley Communities for Bentley Cloud and Web Services. -- User profile is a drop down with options for your user profile. - -## Secondary header + + + -The secondary header contains the product icon, product name, iModel name and the name of the initially opened view. On the right side of the bar is the settings menu. +### `` subcomponent -Secondary header with circular callouts, numbered from 1 to 5. +`HeaderButton` is designed to offer a range of behaviors that are dependent on the props that are passed to it. -- Product icon -- Product name -- iModel name -- View name -- Settings +- `onClick` prop: behaves like a standard button. +- `as='a'` and `href` props: behaves like a regular anchor link. +- `menuItems` prop: behaves like a dropdown button. +- Both `menuItems` and `onClick`/`href` props: behaves like a split button, where the left part is the main button/link and the right part opens a dropdown menu. -### Actions +The `isActive` prop can be used to indicate the current breadcrumb. -- Click the product name to get to the iModel Manager and display a list of iModels in the current project. -- Click the iModel name to take you to the iModel manager > iModel details page. -- Clicking on the view name will take you to the iModel index page. -- Clicking on the settings icon will open the settings menu. +## Slim Header -## Consolidated header +Make header slim using `isSlim` property. This property is helpful when the header takes too much space or when working in a 3D environment. -One of the top complaints we received was that our headers visibly takes up too much space on the screen. When the user is focusing on their work, we use the consolidated header. Additional data can be displayed based on hover and/or where you are located within the app. For example, when in a 3D working environment you’ll see the consolidated header, but when you switch to the backstage you see the normal header. + + + ## Accessibility For accessibility reasons, certain users strictly use their keyboard for navigating digital interfaces. We need to ensure the header doesn’t get in the way of these users every time they want to access a page’s main content. To make their experience more efficient, include a Skip to main content link to allow keyboard users to bypass the navigation header and skip directly to the page’s content. -Without such a link, keyboard users will need to tab through the entire header every time they land on a new page. This makes their experience tedious and time-consuming. For more information, read the Skip to main content link article, and check out the Skip to main content component demo. +Without such a link, keyboard users will need to tab through the entire header every time they land on a new page. This makes their experience tedious and time-consuming. For more information, check out the `SkipToContentLink` component. ## Props diff --git a/examples/Header.full.tsx b/examples/Header.full.tsx new file mode 100644 index 00000000000..dd6f3e594d3 --- /dev/null +++ b/examples/Header.full.tsx @@ -0,0 +1,76 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import React from 'react'; +import { + Header, + HeaderBreadcrumbs, + HeaderButton, + HeaderLogo, + IconButton, + MenuItem, + Avatar, +} from '@itwin/itwinui-react'; +import { SvgNotification, SvgPlaceholder } from '@itwin/itwinui-icons-react'; + +export default () => { + const menuItems = (close: () => void) => [ + + Item #1 + , + + Item #2 + , + + Item #3 + , + ]; + + return ( +
}>Acme} + breadcrumbs={ + {}} + menuItems={menuItems} + />, + + } + />, + , + ]} + /> + } + actions={[ + + + , + + + , + ]} + menuItems={menuItems} + /> + ); +}; diff --git a/examples/Header.main.tsx b/examples/Header.main.tsx index c1381f8c96d..5055aa92c41 100644 --- a/examples/Header.main.tsx +++ b/examples/Header.main.tsx @@ -12,40 +12,20 @@ import { IconButton, MenuItem, } from '@itwin/itwinui-react'; +import { SvgPlaceholder } from '@itwin/itwinui-icons-react'; export default () => { - const menuItems = (close: () => void) => [ - - Item #1 - , - - Item #2 - , - - Item #3 - , - ]; - return (