updated itwinui-react version & breaking changes (#87)

Co-authored-by: Rohan Kadkol <[email protected]>
Co-authored-by: Mayank <[email protected]>

.changeset/forty-gifts-attack.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-layouts-css': minor
+'@itwin/itwinui-layouts-react': minor
+---
+
+Added support for `@itwin/itwinui-react` v3 and removed dependency on `@itwin/itwinui-variables`.

demo/package.json

@@ -35,7 +35,7 @@
     "@itwin/itwinui-icons-react": "^1.7.0",
     "@itwin/itwinui-layouts-css": "workspace:*",
     "@itwin/itwinui-layouts-react": "workspace:*",
-    "@itwin/itwinui-react": "^2.0.0",
+    "@itwin/itwinui-react": "^3.0.0",
     "prism-react-renderer": "^1.3.3",
     "react-router-dom": "6",
     "vite-plugin-svgr": "^1.0.1"

demo/src/App.scss

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import '@itwin/itwinui-variables';
 
 .app {
   padding: var(--iui-size-l) unquote('max(var(--iui-size-l), var(--iui-size-l) + env(safe-area-inset-right))') var(--iui-size-l) unquote('max(var(--iui-size-l), var(--iui-size-l) + env(safe-area-inset-left))');

demo/src/common/CodeSample.scss

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import '@itwin/itwinui-variables';
 
 .code-sample {
   text-align: left;

demo/src/common/DemoHeader.tsx

@@ -11,11 +11,11 @@ import {
   MenuDivider,
   MenuExtraContent,
   MenuItem,
-  UserIcon,
   IconButton,
   DropdownMenu,
   Select,
   Text,
+  Avatar,
 } from '@itwin/itwinui-react';
 import {
   SvgCheckmark,
@@ -66,29 +66,29 @@ export const DemoHeader = ({ isSlim = false }: DemoHeaderProps) => {
                 <MenuItem
                   key='projectA'
                   sublabel='0x0123456789'
-                  icon={
+                  startIcon={
                     <img
                       src='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png'
                       alt='Project thumbnail'
                       draggable='false'
                     />
                   }
-                  badge={<SvgCheckmark />}
+                  endIcon={<SvgCheckmark />}
                   isSelected
                 >
                   Project Alpha
                 </MenuItem>,
                 <MenuItem
                   key='projectB'
                   sublabel='0x0987654321'
-                  icon={<SvgProject />}
+                  startIcon={<SvgProject />}
                 >
                   Project Beta
                 </MenuItem>,
                 <MenuItem
                   key='projectC'
                   sublabel='0x0001337420'
-                  icon={<SvgProject />}
+                  startIcon={<SvgProject />}
                 >
                   Project Charlie
                 </MenuItem>,
@@ -107,23 +107,23 @@ export const DemoHeader = ({ isSlim = false }: DemoHeaderProps) => {
                 <MenuItem
                   key='iModelA'
                   sublabel='0x0123456789'
-                  icon={<SvgModel />}
+                  startIcon={<SvgModel />}
                 >
                   iModel Alpha
                 </MenuItem>,
                 <MenuItem
                   key='iModelB'
                   sublabel='0x0987654321'
-                  icon={<SvgModel />}
+                  startIcon={<SvgModel />}
                   isSelected
-                  badge={<SvgCheckmark />}
+                  endIcon={<SvgCheckmark />}
                 >
                   iModel Beta
                 </MenuItem>,
                 <MenuItem
                   key='iModelC'
                   sublabel='0x0001337420'
-                  icon={<SvgModel />}
+                  startIcon={<SvgModel />}
                 >
                   iModel Charlie
                 </MenuItem>,
@@ -150,8 +150,6 @@ export const DemoHeader = ({ isSlim = false }: DemoHeaderProps) => {
             <SvgHelpCircular />
           </IconButton>
         </DropdownMenu>,
-      ]}
-      userIcon={
         <DropdownMenu
           key='profile'
           role='menu'
@@ -174,13 +172,13 @@ export const DemoHeader = ({ isSlim = false }: DemoHeaderProps) => {
             </MenuExtraContent>,
             <MenuDivider key={1} />,
             <MenuItem key='view-profile'>View profile</MenuItem>,
-            <MenuItem key='sign-out' badge={<SvgExit />}>
+            <MenuItem key='sign-out' endIcon={<SvgExit />}>
               Sign out
             </MenuItem>,
           ]}
         >
           <IconButton styleType='borderless'>
-            <UserIcon
+            <Avatar
               size='medium'
               image={
                 <img
@@ -190,19 +188,19 @@ export const DemoHeader = ({ isSlim = false }: DemoHeaderProps) => {
               }
             />
           </IconButton>
-        </DropdownMenu>
-      }
+        </DropdownMenu>,
+      ]}
       menuItems={() => [
-        <MenuItem key='settings' icon={<SvgSettings />}>
+        <MenuItem key='settings' startIcon={<SvgSettings />}>
           Settings
         </MenuItem>,
-        <MenuItem key='feedback' icon={<SvgSmileyHappy />}>
+        <MenuItem key='feedback' startIcon={<SvgSmileyHappy />}>
           Feedback
         </MenuItem>,
-        <MenuItem key='whats-new' icon={<SvgNews />}>
+        <MenuItem key='whats-new' startIcon={<SvgNews />}>
           {`What's new`}
         </MenuItem>,
-        <MenuItem key='about' icon={<SvgInfoCircular />}>
+        <MenuItem key='about' startIcon={<SvgInfoCircular />}>
           About
         </MenuItem>,
       ]}

demo/src/common/DemoHomePageInfoCard.scss

@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@import '@itwin/itwinui-variables';
 
 .demo-home-page-info-card {
   display: flex;

demo/src/common/DemoSideNav.tsx

@@ -14,7 +14,6 @@ import { SidenavButton, SideNavigation } from '@itwin/itwinui-react';
 export const DemoSideNav = ({ activeItemKey = 'Home' }) => {
   return (
     <SideNavigation
-      className='app-sidenav'
       expanderPlacement='bottom'
       items={[
         <SidenavButton
@@ -44,6 +43,9 @@ export const DemoSideNav = ({ activeItemKey = 'Home' }) => {
           Configuration
         </SidenavButton>,
       ]}
+      wrapperProps={{
+        className: 'app-sidenav',
+      }}
     />
   );
 };

demo/src/common/DemoSurfaceCard.scss

@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@import '@itwin/itwinui-variables';
 
 .demo-surface-card {
   height: 100%;

demo/src/common/DemoTemplate.scss

@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@import '@itwin/itwinui-variables';
 
 .demo-template-container {
   display: flex;

demo/src/common/DemoTemplate.tsx

@@ -9,7 +9,6 @@ import {
   ButtonGroup,
   Button,
   Text,
-  ThemeType,
   InformationPanel,
   InformationPanelHeader,
   InformationPanelWrapper,
@@ -18,7 +17,6 @@ import {
 import { SvgDeveloper } from '@itwin/itwinui-icons-react';
 import { ThemeButton } from '../common/ThemeButton';
 import { Link } from 'react-router-dom';
-import { ThemeContext } from './ThemeContext';
 import CodeSample from './CodeSample';
 
 export type DemoTemplateProps = {
@@ -36,11 +34,6 @@ export const DemoTemplate = (props: DemoTemplateProps) => {
 
   const [showCodeDemo, setShowCodeDemo] = React.useState(false);
   const [copyTooltipVisible, setCopyTooltipVisible] = React.useState(false);
-  const [theme, setTheme] = React.useState<ThemeType>(() =>
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light',
-  );
 
   const showCopiedTooltip = () => {
     setCopyTooltipVisible(true);
@@ -49,62 +42,60 @@ export const DemoTemplate = (props: DemoTemplateProps) => {
     }, 500);
   };
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      <InformationPanelWrapper>
-        <div className='demo-template-container'>
-          <div className='demo-template-content'>
-            {children}
-            {!isTestRun() && (
-              <ButtonGroup className='demo-template-button-overlay'>
-                <ThemeButton />
-                <IconButton onClick={() => setShowCodeDemo((f) => !f)}>
-                  <SvgDeveloper />
-                </IconButton>
-              </ButtonGroup>
-            )}
-          </div>
+    <InformationPanelWrapper>
+      <div className='demo-template-container'>
+        <div className='demo-template-content'>
+          {children}
+          {!isTestRun() && (
+            <ButtonGroup className='demo-template-button-overlay'>
+              <ThemeButton />
+              <IconButton onClick={() => setShowCodeDemo((f) => !f)}>
+                <SvgDeveloper />
+              </IconButton>
+            </ButtonGroup>
+          )}
+        </div>
 
-          <InformationPanel style={{ width: '40%' }} isOpen={showCodeDemo}>
-            <InformationPanelHeader
-              actions={
-                <div className='demo-template-code-header-actions'>
-                  <Tooltip
-                    content='Copied to clipboard'
-                    visible={copyTooltipVisible}
+        <InformationPanel style={{ width: '40%' }} isOpen={showCodeDemo}>
+          <InformationPanelHeader
+            actions={
+              <div className='demo-template-code-header-actions'>
+                <Tooltip
+                  content='Copied to clipboard'
+                  visible={copyTooltipVisible}
+                >
+                  <Button
+                    onClick={() => {
+                      navigator.clipboard.writeText(codeExample);
+                      showCopiedTooltip();
+                    }}
+                    styleType='high-visibility'
                   >
-                    <Button
-                      onClick={() => {
-                        navigator.clipboard.writeText(codeExample);
-                        showCopiedTooltip();
-                      }}
-                      styleType='high-visibility'
-                    >
-                      Copy
-                    </Button>
-                  </Tooltip>
-                </div>
-              }
+                    Copy
+                  </Button>
+                </Tooltip>
+              </div>
+            }
+          >
+            <Link to='../' className='iui-anchor'>
+              ..
+            </Link>
+            <Text
+              as='h1'
+              variant='title'
+              className='demo-template-code-header-title'
             >
-              <Link to='../' className='iui-anchor'>
-                ..
-              </Link>
-              <Text
-                as='h1'
-                variant='title'
-                className='demo-template-code-header-title'
-              >
-                {title}
-              </Text>
-            </InformationPanelHeader>
-            <CodeSample
-              showLineNumbers
-              style={{ height: '100%', border: 'none', margin: '0' }}
-              code={codeExample}
-            />
-          </InformationPanel>
-        </div>
-      </InformationPanelWrapper>
-    </ThemeContext.Provider>
+              {title}
+            </Text>
+          </InformationPanelHeader>
+          <CodeSample
+            showLineNumbers
+            style={{ height: '100%', border: 'none', margin: '0' }}
+            code={codeExample}
+          />
+        </InformationPanel>
+      </div>
+    </InformationPanelWrapper>
   );
 };
 

demo/src/common/ThemeButton.tsx

@@ -3,23 +3,22 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { useTheme, IconButton } from '@itwin/itwinui-react';
+import { IconButton } from '@itwin/itwinui-react';
 import { SvgSun, SvgMoon } from '@itwin/itwinui-icons-react';
 import { useThemeContext } from './ThemeContext';
 
 export const ThemeButton = () => {
   const { theme, setTheme } = useThemeContext();
-
-  useTheme(theme);
-
   const changeTheme = () => {
     setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
   return (
-    <IconButton styleType='default' onClick={changeTheme}>
-      {theme === 'light' ? <SvgMoon /> : <SvgSun />}
-    </IconButton>
+    <>
+      <IconButton styleType='default' onClick={changeTheme}>
+        {theme === 'light' ? <SvgMoon /> : <SvgSun />}
+      </IconButton>
+    </>
   );
 };
 

demo/src/demos/Grid/FluidGridDemo.tsx

@@ -124,7 +124,6 @@ export const GridLayoutDemo = () => {
             right={
               <LabeledInput
                 key='search'
-                iconDisplayStyle='inline'
                 placeholder='Search…'
                 svgIcon={<SvgSearch />}
               />

demo/src/index.scss

@@ -2,10 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+.custom-theme {
+  height: 100dvh;
 }
 
 html,