-
-
@@ -26,6 +24,26 @@ The headers seen when in our CONNECT Portal environment. A header sits at the to
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.
+## Types
+
+### Full Header
+
+
+
+
+
+### Slim Header
+
+
+
+
+
+### Center Content
+
+
+
+
+
Header with circular callouts, numbered from 1 to 8.
- Services menu
diff --git a/examples/Header.center.tsx b/examples/Header.center.tsx
new file mode 100644
index 00000000000..c1449d27660
--- /dev/null
+++ b/examples/Header.center.tsx
@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import {
+ Avatar,
+ Header,
+ HeaderBreadcrumbs,
+ HeaderButton,
+ HeaderLogo,
+ IconButton,
+ MenuItem,
+ Input,
+} from '@itwin/itwinui-react';
+
+export default () => {
+ const menuItems = (close: () => void) => [
+ ,
+ ,
+ ,
+ ];
+
+ const searchBar = (
+ <>
+
+
+
+ );
+
+ return (
+
+
+
+ }
+ />
+ }
+ breadcrumbs={
+ {}}
+ menuItems={menuItems}
+ />,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
+ ]}
+ />
+ }
+ actions={[
+
+
+ }
+ title='Terry Rivers'
+ />
+ ,
+ ]}
+ >
+ {searchBar}
+
+ );
+};
diff --git a/examples/Header.full.tsx b/examples/Header.full.tsx
new file mode 100644
index 00000000000..7182bf2501a
--- /dev/null
+++ b/examples/Header.full.tsx
@@ -0,0 +1,100 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { action } from '@storybook/addon-actions';
+import {
+ DropdownMenu,
+ getUserColor,
+ Header,
+ HeaderBreadcrumbs,
+ HeaderButton,
+ HeaderLogo,
+ IconButton,
+ MenuItem,
+ Avatar,
+} from '@itwin/itwinui-react';
+import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
+import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
+
+export default () => {
+ const menuItems = (close: () => void) => [
+ ,
+ ,
+ ,
+ ];
+
+ return (
+
+
+
+ }
+ >
+ Microstation
+
+ }
+ breadcrumbs={
+ {}}
+ menuItems={menuItems}
+ />,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
+ ]}
+ />
+ }
+ actions={[
+ action('Clicked on the notification bell')()}
+ styleType='borderless'
+ >
+
+ ,
+
+
+ ,
+
+
+ }
+ title='Terry Rivers'
+ />
+ ,
+ ]}
+ menuItems={menuItems}
+ />
+ );
+};
diff --git a/examples/Header.slim.tsx b/examples/Header.slim.tsx
new file mode 100644
index 00000000000..921faa64e36
--- /dev/null
+++ b/examples/Header.slim.tsx
@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import {
+ Avatar,
+ Header,
+ HeaderBreadcrumbs,
+ HeaderButton,
+ HeaderLogo,
+ IconButton,
+ MenuItem,
+} from '@itwin/itwinui-react';
+
+export default () => {
+ const menuItems = (close: () => void) => [
+ ,
+ ,
+ ,
+ ];
+
+ return (
+
+
+
+ }
+ />
+ }
+ breadcrumbs={
+ {}}
+ menuItems={menuItems}
+ />,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
+ ]}
+ />
+ }
+ actions={[
+
+
+ }
+ title='Terry Rivers'
+ />
+ ,
+ ]}
+ />
+ );
+};
diff --git a/examples/index.tsx b/examples/index.tsx
index 3e33d39c09c..86141e7aedb 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -622,6 +622,18 @@ import { default as HeaderMainExampleRaw } from './Header.main';
const HeaderMainExample = withThemeProvider(HeaderMainExampleRaw);
export { HeaderMainExample };
+import { default as HeaderFullExampleRaw } from './Header.full';
+const HeaderFullExample = withThemeProvider(HeaderFullExampleRaw);
+export { HeaderFullExample };
+
+import { default as HeaderSlimExampleRaw } from './Header.slim';
+const HeaderSlimExample = withThemeProvider(HeaderSlimExampleRaw);
+export { HeaderSlimExample };
+
+import { default as HeaderCenterExampleRaw } from './Header.center';
+const HeaderCenterExample = withThemeProvider(HeaderCenterExampleRaw);
+export { HeaderCenterExample };
+
// ----------------------------------------------------------------------------
import { default as InformationPanelMainExampleRaw } from './InformationPanel.main';
From 8f543b318939c02b366f17838e89fa8189ea26d7 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:59:47 -0400
Subject: [PATCH 02/15] added info to subheadings.
---
apps/website/src/pages/docs/header.mdx | 46 +++++++++++++++-----------
1 file changed, 26 insertions(+), 20 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index ad52e98c4e7..92e539451dd 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -24,26 +24,6 @@ The headers seen when in our CONNECT Portal environment. A header sits at the to
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.
-## Types
-
-### Full Header
-
-
-
-
-
-### Slim Header
-
-
-
-
-
-### Center Content
-
-
-
-
-
Header with circular callouts, numbered from 1 to 8.
- Services menu
@@ -89,6 +69,32 @@ Secondary header with circular callouts, numbered from 1 to 5.
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.
+## Customizations
+
+### Full Header
+
+Have default header with additional elements.
+
+
+
+
+
+### Slim Header
+
+Make header slim using `isSlim` property.
+
+
+
+
+
+### Center Content
+
+Have header with content placed in center.
+
+
+
+
+
## 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.
From 02a5e8a2b6e5fd303cef9b4b7bdf970f76327c64 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Mon, 23 Oct 2023 12:08:55 -0400
Subject: [PATCH 03/15] updated information and layout.
---
apps/website/src/pages/docs/header.mdx | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 92e539451dd..c5223fbe5f5 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,15 +14,13 @@ import * as AllExamples from 'examples';
{frontmatter.description}
+## Main CONNECT Portal header
+
-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 above header is visible within our CONNECT Portal environment. It 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.
Header with circular callouts, numbered from 1 to 8.
From 959db355eb10933a97031ea4c3e7198fc056940d Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Tue, 24 Oct 2023 10:34:24 -0400
Subject: [PATCH 04/15] updating info inside header docs.
---
apps/website/src/pages/docs/header.mdx | 63 ++++--------------
examples/Header.center.tsx | 16 +----
examples/Header.main.tsx | 66 +++++--------------
.../{Header.full.tsx => Header.menuitems.tsx} | 14 ----
examples/Header.slim.tsx | 27 ++++----
examples/index.tsx | 2 +-
6 files changed, 43 insertions(+), 145 deletions(-)
rename examples/{Header.full.tsx => Header.menuitems.tsx} (86%)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index c5223fbe5f5..b3cde649624 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -14,66 +14,21 @@ import * as AllExamples from 'examples';
{frontmatter.description}
-## Main CONNECT Portal header
-
-The above header is visible within our CONNECT Portal environment. It 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.
-
-Header with circular callouts, numbered from 1 to 8.
-
-- Services menu
-- Home page
-- Enterprise portal
-- Assets menu
-- Projects menu
-- Notifications
-- Help
-- User icon
-
-### 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.
-
-Secondary header with circular callouts, numbered from 1 to 5.
-
-- Product icon
-- Product name
-- iModel name
-- View name
-- Settings
-
-### Actions
-
-- 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.
-
-## Consolidated header
-
-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.
+The first thing most people look at when they arrive at a new web page is the header. It is usually sticked at the top of the page. The header contains vital information about your company's name and function, as well as the purpose of the specific page.
## Customizations
-### Full Header
+Alter standard header section by adding new custom elements and content.
-Have default header with additional elements.
+### Header with MenuItems
-
+Have default header with menu items using `breadcrumbs` prop.
+
+
@@ -93,11 +48,15 @@ Have header with content placed in center.
+## Consolidated header
+
+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, read the Skip to main content [article](https://www.freecodecamp.org/news/how-to-add-skip-to-main-content-links-to-a-website/), and check out the Skip to main content [component](https://itwin.github.io/iTwinUI/react/?path=/story/core-skiptocontentlink--basic).
## Props
diff --git a/examples/Header.center.tsx b/examples/Header.center.tsx
index c1449d27660..d9e532257ff 100644
--- a/examples/Header.center.tsx
+++ b/examples/Header.center.tsx
@@ -30,7 +30,7 @@ export default () => {
const searchBar = (
<>
-
-
- );
-
- return (
-
-
-
- }
- />
- }
- breadcrumbs={
- {}}
- menuItems={menuItems}
- />,
- ]}
- />
- }
- actions={[
-
-
- }
- title='Terry Rivers'
- />
- ,
- ]}
- >
- {searchBar}
-
- );
-};
diff --git a/examples/Header.menuitems.tsx b/examples/Header.full.tsx
similarity index 100%
rename from examples/Header.menuitems.tsx
rename to examples/Header.full.tsx
diff --git a/examples/Header.main.tsx b/examples/Header.main.tsx
index 76ea93ad93c..c1381f8c96d 100644
--- a/examples/Header.main.tsx
+++ b/examples/Header.main.tsx
@@ -3,12 +3,29 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Avatar, Header, HeaderLogo, IconButton } from '@itwin/itwinui-react';
-import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
-import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
+import {
+ Avatar,
+ Header,
+ HeaderBreadcrumbs,
+ HeaderButton,
+ HeaderLogo,
+ IconButton,
+ MenuItem,
+} from '@itwin/itwinui-react';
export default () => {
+ const menuItems = (close: () => void) => [
+ ,
+ ,
+ ,
+ ];
+
return (
{
}
- >
- Microstation
-
+ />
+ }
+ breadcrumbs={
+ {}}
+ menuItems={menuItems}
+ />,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
+ ]}
+ />
}
actions={[
- action('Clicked on the notification bell')()}
- styleType='borderless'
- >
-
- ,
-
-
- ,
{
const menuItems = (close: () => void) => [
@@ -51,20 +48,24 @@ export default () => {
onClick={() => {}}
menuItems={menuItems}
/>,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
]}
/>
}
actions={[
- action('Clicked on the notification bell')()}
- styleType='borderless'
- >
-
- ,
-
-
- ,
Date: Wed, 25 Oct 2023 17:15:51 -0400
Subject: [PATCH 07/15] fixing grammatical errors.
---
apps/website/src/pages/docs/header.mdx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 74c08e90447..2e3a53e1192 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -22,10 +22,10 @@ The first thing most people look at when they arrive at a new web page is the he
## Usage
-The main `` compnent is consisted of various subcomponents and can be customized accordingly by modifying its props.
+`` consists of various subcomponents and can be customized by modifying its props.
- 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, allowing users to interact. For the dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` properties for handling actions.
+- Breadcrumbs trail can be implemented using the `breadcrumbs` prop and `` subcomponent. Individual buttons can be added within the breadcrumbs trail using the `` subcomponent. For a dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` properties for handling actions.
- Buttons/Icons/Content can be displayed towards the left of menuitems using the `actions` prop.
## Customizations
@@ -34,7 +34,7 @@ Alter standard header section by adding new custom elements and content.
### Full Header
-Have default header with additional items.
+Default header with additional items.
@@ -52,7 +52,7 @@ Make header slim using `isSlim` property. This can be used when working in a 3D
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 article, and check out the Skip to main content component.
+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 Skip to main content component.
## Props
From 3b525819d94fb8e075afa83b28a04b16b31eeb74 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Sun, 29 Oct 2023 22:27:17 -0400
Subject: [PATCH 08/15] updated examples, text and added more info.
---
apps/website/src/pages/docs/header.mdx | 22 +++++------
examples/Header.full.tsx | 53 +++++++++-----------------
examples/Header.main.tsx | 36 ++---------------
examples/Header.slim.tsx | 22 ++---------
4 files changed, 38 insertions(+), 95 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 2e3a53e1192..7b2344cba79 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -25,24 +25,24 @@ The first thing most people look at when they arrive at a new web page is the he
`` consists of various subcomponents and can be customized by modifying its props.
- 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. For a dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` properties for handling actions.
-- Buttons/Icons/Content can be displayed towards the left of menuitems using the `actions` prop.
+- Breadcrumbs trail can be implemented using the `breadcrumbs` prop and `` subcomponent. Individual buttons can be added within the breadcrumbs trail using the `` subcomponent. For a dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` property for handling actions.
+- Buttons/Icons/Content can be displayed towards the left of menuItems using the `actions` prop. `menuItems` expects a list of MenuItems components. They are the items shown in the dropdown menu.
-## Customizations
+`` subcomponent is designed to offer a range of behaviors that are dependent on the props that are passed to it.
-Alter standard header section by adding new custom elements and content.
-
-### Full Header
-
-Default header with additional items.
+- `onClick` prop: behaves like a standard button.
+- When set as='a' and `href` prop: behaves like a regular anchor link.
+- `menuItems` prop: behaves like a dropdown button.
+- Both `menuItems` and `onClick/href` prop: behaves like a split button, where the left part is the main button/link and the right part opens a dropdown menu.
+- `isActive` prop: behaves as an active button.
-### Slim Header
+## Slim Header
-Make header slim using `isSlim` property. This can be used when working in a 3D environment.
+Make header slim using `isSlim` property. This property is helpful when the header takes too much space or when working in a 3D environment.
@@ -52,7 +52,7 @@ Make header slim using `isSlim` property. This can be used when working in a 3D
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, check out the Skip to main content component.
+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
index eea042793ec..c128ab68f47 100644
--- a/examples/Header.full.tsx
+++ b/examples/Header.full.tsx
@@ -3,10 +3,7 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React from 'react';
-import { action } from '@storybook/addon-actions';
import {
- DropdownMenu,
- getUserColor,
Header,
HeaderBreadcrumbs,
HeaderButton,
@@ -15,8 +12,7 @@ import {
MenuItem,
Avatar,
} from '@itwin/itwinui-react';
-import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
-import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
+import { SvgNotification, SvgImodel } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
@@ -33,51 +29,40 @@ export default () => {
return (
-
-
- }
- >
- Microstation
-
- }
+ appLogo={} placeholder='Acme' />}
breadcrumbs={
{}}
menuItems={menuItems}
/>,
+
+ }
+ onClick={() => {}}
+ />,
+ ,
]}
/>
}
actions={[
- action('Clicked on the notification bell')()}
- styleType='borderless'
- >
+ ,
-
-
- ,
-
- }
- title='Terry Rivers'
- />
+ ,
]}
menuItems={menuItems}
diff --git a/examples/Header.main.tsx b/examples/Header.main.tsx
index c1381f8c96d..1d0e98711c5 100644
--- a/examples/Header.main.tsx
+++ b/examples/Header.main.tsx
@@ -12,6 +12,7 @@ import {
IconButton,
MenuItem,
} from '@itwin/itwinui-react';
+import { SvgImodel } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
@@ -28,52 +29,23 @@ export default () => {
return (
-
-
- }
- />
- }
+ appLogo={} placeholder='Acme' />}
breadcrumbs={
{}}
menuItems={menuItems}
/>,
-
- }
- onClick={() => {}}
- />,
- ,
]}
/>
}
actions={[
-
- }
- title='Terry Rivers'
- />
+ ,
]}
/>
diff --git a/examples/Header.slim.tsx b/examples/Header.slim.tsx
index 921faa64e36..a452101d77e 100644
--- a/examples/Header.slim.tsx
+++ b/examples/Header.slim.tsx
@@ -12,6 +12,7 @@ import {
IconButton,
MenuItem,
} from '@itwin/itwinui-react';
+import { SvgNotification, SvgImodel } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
@@ -29,21 +30,13 @@ export default () => {
return (
-
-
- }
- />
- }
+ appLogo={} placeholder='Acme' />}
breadcrumbs={
{}}
menuItems={menuItems}
@@ -67,14 +60,7 @@ export default () => {
}
actions={[
-
- }
- title='Terry Rivers'
- />
+ ,
]}
/>
From 7ba2cb10d6bc15209d996b2b60c4326f272fdfd6 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Mon, 30 Oct 2023 09:15:18 -0400
Subject: [PATCH 09/15] removed extra import.
---
examples/Header.slim.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/Header.slim.tsx b/examples/Header.slim.tsx
index a452101d77e..4b0dc6da144 100644
--- a/examples/Header.slim.tsx
+++ b/examples/Header.slim.tsx
@@ -12,7 +12,7 @@ import {
IconButton,
MenuItem,
} from '@itwin/itwinui-react';
-import { SvgNotification, SvgImodel } from '@itwin/itwinui-icons-react';
+import { SvgImodel } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
From b2c0871ef77f1dead35f1eb0883c7b01b230f0d4 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Mon, 30 Oct 2023 12:25:16 -0400
Subject: [PATCH 10/15] update icon, text and fixed a11y violation.
---
apps/website/src/pages/docs/header.mdx | 11 ++++++++---
examples/Header.full.tsx | 10 +++++++---
examples/Header.main.tsx | 4 ++--
examples/Header.slim.tsx | 4 ++--
4 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 7b2344cba79..100e8db79ed 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -22,13 +22,18 @@ The first thing most people look at when they arrive at a new web page is the he
## Usage
-`` consists of various subcomponents and can be customized by modifying its props.
+### `` component
+
+It consists of various subcomponents and can be customized by modifying its props.
- 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. For a dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` property for handling actions.
-- Buttons/Icons/Content can be displayed towards the left of menuItems using the `actions` prop. `menuItems` expects a list of MenuItems components. They are the items shown in the dropdown menu.
+- Buttons/Icons/Content can be displayed towards the left of menuItems using the `actions` prop.
+- `menuItems` are typically an array of items used to create dropdown menus, allowing users to select from a list of options or perform specific actions. When passed as a prop, it expects a list of MenuItems components. Each `MenuItem` has a `value` (the label displayed) and an `onClick` function that takes the `close` argument (for closing).
+
+### `` subcomponent
-`` subcomponent is designed to offer a range of behaviors that are dependent on the props that are passed to it.
+It is designed to offer a range of behaviors that are dependent on the props that are passed to it.
- `onClick` prop: behaves like a standard button.
- When set as='a' and `href` prop: behaves like a regular anchor link.
diff --git a/examples/Header.full.tsx b/examples/Header.full.tsx
index c128ab68f47..bf2bcc52cda 100644
--- a/examples/Header.full.tsx
+++ b/examples/Header.full.tsx
@@ -12,7 +12,7 @@ import {
MenuItem,
Avatar,
} from '@itwin/itwinui-react';
-import { SvgNotification, SvgImodel } from '@itwin/itwinui-icons-react';
+import { SvgNotification, SvgPlaceholder } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
@@ -29,7 +29,7 @@ export default () => {
return (
} placeholder='Acme' />}
+ appLogo={}>Acme}
breadcrumbs={
{
/>
}
actions={[
-
+ ,
diff --git a/examples/Header.main.tsx b/examples/Header.main.tsx
index 1d0e98711c5..6e189e92e2e 100644
--- a/examples/Header.main.tsx
+++ b/examples/Header.main.tsx
@@ -12,7 +12,7 @@ import {
IconButton,
MenuItem,
} from '@itwin/itwinui-react';
-import { SvgImodel } from '@itwin/itwinui-icons-react';
+import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
export default () => {
const menuItems = (close: () => void) => [
@@ -29,7 +29,7 @@ export default () => {
return (
} placeholder='Acme' />}
+ appLogo={}>Acme}
breadcrumbs={
{
const menuItems = (close: () => void) => [
@@ -30,7 +30,7 @@ export default () => {
return (
} placeholder='Acme' />}
+ appLogo={}>Acme}
breadcrumbs={
Date: Mon, 6 Nov 2023 09:51:02 -0500
Subject: [PATCH 11/15] updated text and example related to comments.
---
apps/website/src/pages/docs/header.mdx | 19 +++++++++----------
examples/Header.full.tsx | 2 ++
2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 100e8db79ed..c7d69710e35 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -22,24 +22,23 @@ The first thing most people look at when they arrive at a new web page is the he
## Usage
-### `` component
-
-It consists of various subcomponents and can be customized by modifying its props.
+`Header` consists of various subcomponents and can be customized by modifying its props.
- 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. For a dropdown menu, the `menuItems` prop can be used inside the `` for showing items and `onClick()` property for handling actions.
-- Buttons/Icons/Content can be displayed towards the left of menuItems using the `actions` prop.
-- `menuItems` are typically an array of items used to create dropdown menus, allowing users to select from a list of options or perform specific actions. When passed as a prop, it expects a list of MenuItems components. Each `MenuItem` has a `value` (the label displayed) and an `onClick` function that takes the `close` argument (for closing).
+- 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`.
### `` subcomponent
-It is designed to offer a range of behaviors that are dependent on the props that are passed to it.
+`HeaderButton` is designed to offer a range of behaviors that are dependent on the props that are passed to it.
- `onClick` prop: behaves like a standard button.
-- When set as='a' and `href` prop: behaves like a regular anchor link.
+- as='a' and `href` props: behaves like a regular anchor link.
- `menuItems` prop: behaves like a dropdown button.
-- Both `menuItems` and `onClick/href` prop: behaves like a split button, where the left part is the main button/link and the right part opens a dropdown menu.
-- `isActive` prop: behaves as an active 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.
+
+The `isActive` prop can be used to indicate the current breadcrumb.
diff --git a/examples/Header.full.tsx b/examples/Header.full.tsx
index bf2bcc52cda..adebef99d7a 100644
--- a/examples/Header.full.tsx
+++ b/examples/Header.full.tsx
@@ -41,6 +41,8 @@ export default () => {
menuItems={menuItems}
/>,
Date: Mon, 6 Nov 2023 10:44:20 -0500
Subject: [PATCH 12/15] updated backticks.
---
apps/website/src/pages/docs/header.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index c7d69710e35..2b4774f8010 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -34,7 +34,7 @@ The first thing most people look at when they arrive at a new web page is the he
`HeaderButton` is designed to offer a range of behaviors that are dependent on the props that are passed to it.
- `onClick` prop: behaves like a standard button.
-- as='a' and `href` props: behaves like a regular anchor link.
+- `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.
From ed689d446e7e29841661d10999c3a782aeddb297 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Mon, 6 Nov 2023 11:15:49 -0500
Subject: [PATCH 13/15] removed redundant text.
Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
---
apps/website/src/pages/docs/header.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index 2b4774f8010..b54243cde46 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -18,7 +18,7 @@ import * as AllExamples from 'examples';
-The first thing most people look at when they arrive at a new web page is the header. It is usually stuck at the top of the page. The header contains vital information about your company's name and function, as well as the purpose of the specific page.
+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.
## Usage
From cee2d83be8346cff0f6f0eb85a10b9f5189d59f4 Mon Sep 17 00:00:00 2001
From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com>
Date: Mon, 6 Nov 2023 11:16:50 -0500
Subject: [PATCH 14/15] removed extra onClick() from example.
Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
---
examples/Header.full.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/examples/Header.full.tsx b/examples/Header.full.tsx
index adebef99d7a..dd6f3e594d3 100644
--- a/examples/Header.full.tsx
+++ b/examples/Header.full.tsx
@@ -48,7 +48,6 @@ export default () => {
startIcon={
}
- onClick={() => {}}
/>,
Date: Mon, 6 Nov 2023 11:23:56 -0500
Subject: [PATCH 15/15] updated header example and placement.
---
apps/website/src/pages/docs/header.mdx | 8 ++++----
examples/Header.main.tsx | 21 ++++++++-------------
2 files changed, 12 insertions(+), 17 deletions(-)
diff --git a/apps/website/src/pages/docs/header.mdx b/apps/website/src/pages/docs/header.mdx
index b54243cde46..20720056bbd 100644
--- a/apps/website/src/pages/docs/header.mdx
+++ b/apps/website/src/pages/docs/header.mdx
@@ -29,6 +29,10 @@ The first thing most people look at when they arrive at a new web page is the he
- 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`.
+
+
+
+
### `` subcomponent
`HeaderButton` is designed to offer a range of behaviors that are dependent on the props that are passed to it.
@@ -40,10 +44,6 @@ The first thing most people look at when they arrive at a new web page is the he
The `isActive` prop can be used to indicate the current breadcrumb.
-
-
-
-
## Slim 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.
diff --git a/examples/Header.main.tsx b/examples/Header.main.tsx
index 6e189e92e2e..5055aa92c41 100644
--- a/examples/Header.main.tsx
+++ b/examples/Header.main.tsx
@@ -15,18 +15,6 @@ import {
import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
export default () => {
- const menuItems = (close: () => void) => [
- ,
- ,
- ,
- ];
-
return (
}>Acme}
@@ -38,7 +26,14 @@ export default () => {
name='Project A'
description='YJC-2249'
onClick={() => {}}
- menuItems={menuItems}
+ />,
+
+ }
+ onClick={() => {}}
/>,
]}
/>
}
- onClick={() => {}}
/>,