From 57b81b48f4c9b090dc0f600c849a1b07fd0a4319 Mon Sep 17 00:00:00 2001 From: Ramakrishnan Raman Date: Fri, 2 Dec 2022 22:51:09 +0530 Subject: [PATCH] fix : SubwayNav width (#146) * fix:custom page width issue (#145) --- .../SubwayNav/components/CanvasSubwayNav.tsx | 13 +++--- SubwayNav/package-lock.json | 40 +++++-------------- SubwayNav/package.json | 2 +- 3 files changed, 18 insertions(+), 37 deletions(-) diff --git a/SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx b/SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx index ffc9f0e4..1df26db6 100644 --- a/SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx +++ b/SubwayNav/SubwayNav/components/CanvasSubwayNav.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useState } from 'react'; -import { ThemeProvider, createTheme, ITheme, IFocusZoneProps } from '@fluentui/react'; +import { ThemeProvider, createTheme, ITheme, IFocusZoneProps, mergeStyles } from '@fluentui/react'; import { ISubwayNavNodeProps, SubwayNavNodeState } from '../utilities/subway-nav/subway-node.types'; import { goToStepById, completeAllSteps, errorAllSteps } from '../utilities/utilities'; import { SubwayNav as CustomSubwayNav } from '../utilities/subway-nav/subway-nav'; @@ -10,6 +10,7 @@ import { M365Styles, IM365ExtendedSemanticColors } from '../utilities/customizat import { useAsync, usePrevious } from '@fluentui/react-hooks'; import { getSubwayNavNodeState } from './DatasetMapping'; import { PPACActualLightTheme, PPACActualDarkTheme } from '../utilities/themes'; +import { subwayNavWidth, wizardContentMaxWidth } from '../utilities/wizard'; // reference : https://admincontrolsdemoapps.blob.core.windows.net/demo-app/latest/DemoApp/index.html#/examples/subwaynav @@ -50,10 +51,10 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem } return themeJSON ? createTheme({ - palette: { ...JSON.parse(themeJSON).palette }, - semanticColors: semanticColorsCopy, - components: M365Styles, - }) + palette: { ...JSON.parse(themeJSON).palette }, + semanticColors: semanticColorsCopy, + components: M365Styles, + }) : copyofM365Theme; } catch (ex) { /* istanbul ignore next */ @@ -155,6 +156,8 @@ export const CanvasSubwayNav = React.memo((props: ISubNavProps): React.ReactElem focusZoneProps={focusZoneProps} stateAriaLabels={ariaLabelStrings} steps={steps} + //This is required to override width styles in custom pages + styles={{ root: { width: props.width } }} {...(wizardComplete !== 'None' && { wizardComplete: isNavCompleteOrError })} /> diff --git a/SubwayNav/package-lock.json b/SubwayNav/package-lock.json index c2738c6d..39918dab 100644 --- a/SubwayNav/package-lock.json +++ b/SubwayNav/package-lock.json @@ -20,7 +20,7 @@ "@types/powerapps-component-framework": "^1.3.0", "@types/ramda": "^0.28.8", "@types/react": "^16.8", - "@types/react-dom": "^18.0.9", + "@types/react-dom": "^16.8.6", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^4.29.0", "@typescript-eslint/parser": "^4.29.0", @@ -1705,21 +1705,11 @@ } }, "node_modules/@types/react-dom": { - "version": "18.0.9", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz", - "integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==", + "version": "16.9.17", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.17.tgz", + "integrity": "sha512-qSRyxEsrm5btPXnowDOs5jSkgT8ldAA0j6Qp+otHUh+xHzy3sXmgNfyhucZjAjkgpdAUw9rJe0QRtX/l+yaS4g==", "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/react-dom/node_modules/@types/react": { - "version": "17.0.52", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.52.tgz", - "integrity": "sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==", - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" + "@types/react": "^16" } }, "node_modules/@types/react-test-renderer": { @@ -12178,23 +12168,11 @@ } }, "@types/react-dom": { - "version": "18.0.9", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz", - "integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==", + "version": "16.9.17", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.17.tgz", + "integrity": "sha512-qSRyxEsrm5btPXnowDOs5jSkgT8ldAA0j6Qp+otHUh+xHzy3sXmgNfyhucZjAjkgpdAUw9rJe0QRtX/l+yaS4g==", "requires": { - "@types/react": "*" - }, - "dependencies": { - "@types/react": { - "version": "17.0.52", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.52.tgz", - "integrity": "sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==", - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - } + "@types/react": "^16" } }, "@types/react-test-renderer": { diff --git a/SubwayNav/package.json b/SubwayNav/package.json index 64a69c61..d024addf 100644 --- a/SubwayNav/package.json +++ b/SubwayNav/package.json @@ -25,7 +25,7 @@ "@types/powerapps-component-framework": "^1.3.0", "@types/ramda": "^0.28.8", "@types/react": "^16.8", - "@types/react-dom": "^18.0.9", + "@types/react-dom": "^16.8.6", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^4.29.0", "@typescript-eslint/parser": "^4.29.0",