Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: okta/odyssey
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.28.1
Choose a base ref
...
head repository: okta/odyssey
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.28.2
Choose a head ref
  • 3 commits
  • 38 files changed
  • 2 contributors

Commits on Dec 3, 2024

  1. Redo react 17 compatibility (#2433)

    * Revert "React 17 compatibility (as patch to 1.28) (#2431)"
    
    This reverts commit 8a51b78.
    
    * fix: move UiShell, renderReactInWebComponent into separate export for React 17 compatibility
    
    * fix: related storybook updates
    benschell-okta authored Dec 3, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    129114f View commit details
  2. Copy the full SHA
    d1b5ad5 View commit details
  3. Copy the full SHA
    275437e View commit details
Showing with 135 additions and 98 deletions.
  1. +4 −0 CHANGELOG.md
  2. +1 −1 lerna.json
  3. +4 −0 packages/browserslist-config-odyssey/CHANGELOG.md
  4. +1 −1 packages/browserslist-config-odyssey/package.json
  5. +4 −0 packages/odyssey-babel-preset/CHANGELOG.md
  6. +1 −1 packages/odyssey-babel-preset/package.json
  7. +4 −0 packages/odyssey-design-tokens/CHANGELOG.md
  8. +1 −1 packages/odyssey-design-tokens/package.json
  9. +4 −0 packages/odyssey-react-mui/CHANGELOG.md
  10. +8 −1 packages/odyssey-react-mui/package.json
  11. +1 −1 packages/odyssey-react-mui/src/labs/PageTemplate.tsx
  12. +0 −1 packages/odyssey-react-mui/src/labs/index.ts
  13. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/UiShell.test.tsx
  14. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/UiShell.tsx
  15. +3 −3 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/UiShellContent.tsx
  16. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/bufferLatest.test.ts
  17. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/bufferLatest.ts
  18. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/createMessageBus.test.ts
  19. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/createMessageBus.ts
  20. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/createStore.test.ts
  21. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/createStore.ts
  22. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/index.ts
  23. +16 −22 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/renderUiShell.test.tsx
  24. +2 −3 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/renderUiShell.tsx
  25. +1 −1 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/useHasUiShell.ts
  26. 0 packages/odyssey-react-mui/src/{labs → ui-shell}/UiShell/useScrollState.ts
  27. +14 −0 packages/odyssey-react-mui/src/ui-shell/index.ts
  28. +1 −1 packages/odyssey-react-mui/src/{web-component → ui-shell}/renderReactInWebComponent.test.tsx
  29. +9 −45 packages/odyssey-react-mui/src/{web-component → ui-shell}/renderReactInWebComponent.ts
  30. +0 −1 packages/odyssey-react-mui/src/web-component/index.ts
  31. +36 −3 packages/odyssey-react-mui/src/web-component/shadow-dom.ts
  32. +1 −0 packages/odyssey-storybook/.storybook/preview.ts
  33. +4 −0 packages/odyssey-storybook/CHANGELOG.md
  34. +1 −1 packages/odyssey-storybook/package.json
  35. +8 −9 ...es/odyssey-storybook/src/components/{odyssey-labs → odyssey-ui-shell}/UiShell/UiShell.stories.tsx
  36. +1 −1 packages/odyssey-storybook/src/installation/ShadowDom.mdx
  37. +4 −0 packages/odyssey-svgr/CHANGELOG.md
  38. +1 −1 packages/odyssey-svgr/package.json
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)

**Note:** Version bump only for package odyssey

## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)

**Note:** Version bump only for package odyssey
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -4,5 +4,5 @@
"npmClient": "yarn",
"packages": ["packages/*"],
"useNx": false,
"version": "1.28.1"
"version": "1.28.2"
}
4 changes: 4 additions & 0 deletions packages/browserslist-config-odyssey/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)

**Note:** Version bump only for package @okta/browserslist-config-odyssey

## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)

**Note:** Version bump only for package @okta/browserslist-config-odyssey
2 changes: 1 addition & 1 deletion packages/browserslist-config-odyssey/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@okta/browserslist-config-odyssey",
"version": "1.28.1",
"version": "1.28.2",
"description": "Browserslist config for Odyssey, Okta's design system",
"author": "Okta, Inc.",
"license": "Apache-2.0",
4 changes: 4 additions & 0 deletions packages/odyssey-babel-preset/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)

**Note:** Version bump only for package @okta/odyssey-babel-preset

## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)

**Note:** Version bump only for package @okta/odyssey-babel-preset
2 changes: 1 addition & 1 deletion packages/odyssey-babel-preset/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@okta/odyssey-babel-preset",
"version": "1.28.1",
"version": "1.28.2",
"description": "Babel preset for Odyssey, Okta's design system",
"author": "Okta, Inc.",
"license": "Apache-2.0",
4 changes: 4 additions & 0 deletions packages/odyssey-design-tokens/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)

**Note:** Version bump only for package @okta/odyssey-design-tokens

## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)

**Note:** Version bump only for package @okta/odyssey-design-tokens
2 changes: 1 addition & 1 deletion packages/odyssey-design-tokens/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@okta/odyssey-design-tokens",
"version": "1.28.1",
"version": "1.28.2",
"description": "Design tokens for Odyssey, Okta's design system",
"author": "Okta, Inc.",
"license": "Apache-2.0",
4 changes: 4 additions & 0 deletions packages/odyssey-react-mui/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)

**Note:** Version bump only for package @okta/odyssey-react-mui

## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)

**Note:** Version bump only for package @okta/odyssey-react-mui
9 changes: 8 additions & 1 deletion packages/odyssey-react-mui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@okta/odyssey-react-mui",
"version": "1.28.1",
"version": "1.28.2",
"description": "React MUI components for Odyssey, Okta's design system",
"author": "Okta, Inc.",
"license": "Apache-2.0",
@@ -19,6 +19,9 @@
"labs": [
"./dist/src/labs/index.d.ts"
],
"ui-shell": [
"./dist/src/ui-shell/index.d.ts"
],
"test-selectors": [
"./dist/src/test-selectors/index.d.ts"
]
@@ -33,6 +36,10 @@
"types": "./dist/src/labs/index.d.ts",
"default": "./dist/labs/index.js"
},
"./ui-shell": {
"types": "./dist/src/ui-shell/index.d.ts",
"default": "./dist/ui-shell/index.js"
},
"./test-selectors": {
"types": "./dist/src/test-selectors/index.d.ts",
"default": "./dist/test-selectors/index.js"
2 changes: 1 addition & 1 deletion packages/odyssey-react-mui/src/labs/PageTemplate.tsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ import {
import { DocumentationIcon } from "../icons.generated";
import { Heading4, Subordinate } from "../Typography";
import { Link } from "../Link";
import { useHasUiShell } from "./UiShell";
import { useHasUiShell } from "../ui-shell/UiShell/useHasUiShell";

export type PageTemplateProps = {
/**
1 change: 0 additions & 1 deletion packages/odyssey-react-mui/src/labs/index.ts
Original file line number Diff line number Diff line change
@@ -44,4 +44,3 @@ export * from "./AppSwitcher";
export * from "./SideNav/NavAccordion";
export * from "./SideNav";
export * from "./TopNav";
export * from "./UiShell";
Original file line number Diff line number Diff line change
@@ -14,9 +14,9 @@ import styled from "@emotion/styled";
import { memo, type ReactElement, type ReactNode } from "react";
import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";

import { AppSwitcher, type AppSwitcherProps } from "../AppSwitcher";
import { SideNav, type SideNavProps } from "../SideNav";
import { TopNav, type TopNavProps } from "../TopNav";
import { AppSwitcher, type AppSwitcherProps } from "../../labs/AppSwitcher";
import { SideNav, type SideNavProps } from "../../labs/SideNav";
import { TopNav, type TopNavProps } from "../../labs/TopNav";
import {
useOdysseyDesignTokens,
type DesignTokens,
Original file line number Diff line number Diff line change
@@ -10,13 +10,13 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { act, waitFor } from "@testing-library/react";
import { act } from "@testing-library/react";

import { renderUiShell } from "./renderUiShell";
import {
ReactInWebComponentElement,
reactWebComponentElementName,
} from "../../web-component/renderReactInWebComponent";
} from "../renderReactInWebComponent";

describe("renderUiShell", () => {
afterEach(() => {
@@ -126,11 +126,9 @@ describe("renderUiShell", () => {
});
});

await waitFor(() => {
expect(
rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
).toHaveTextContent(appName);
});
expect(
rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
).toHaveTextContent(appName);
});

test("renders `UiShell` with immediately updated props", async () => {
@@ -155,11 +153,9 @@ describe("renderUiShell", () => {
});
});

await waitFor(() => {
expect(
rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
).toHaveTextContent(appName);
});
expect(
rootElement.querySelector(reactWebComponentElementName)!.shadowRoot,
).toHaveTextContent(appName);
});

test("renders `<slot>` in the event of an error", async () => {
@@ -188,16 +184,14 @@ describe("renderUiShell", () => {
);
});

await waitFor(() => {
expect(onError).toHaveBeenCalledTimes(1);
expect(consoleError).toHaveBeenCalledTimes(1);
expect(
rootElement
.querySelector(reactWebComponentElementName)!
.shadowRoot?.querySelector("slot"),
).toBeInstanceOf(HTMLSlotElement);
});

consoleErrorSpy.mockRestore();

expect(onError).toHaveBeenCalledTimes(1);
expect(consoleError).toHaveBeenCalledTimes(1);
expect(
rootElement
.querySelector(reactWebComponentElementName)!
.shadowRoot?.querySelector("slot"),
).toBeInstanceOf(HTMLSlotElement);
});
});
Original file line number Diff line number Diff line change
@@ -16,10 +16,9 @@ import { ErrorBoundary } from "react-error-boundary";
import { bufferLatest } from "./bufferLatest";
import { createMessageBus } from "./createMessageBus";
import { UiShell, UiShellProps } from "./UiShell";
import { renderReactInWebComponent } from "../../web-component/renderReactInWebComponent";
import { renderReactInWebComponent } from "../renderReactInWebComponent";
import { type UiShellNavComponentProps } from "./UiShellContent";

export const uiShellDataAttribute = "data-unified-ui-shell";
import { uiShellDataAttribute } from "./useHasUiShell";

export const optionalComponentSlotNames: Record<
keyof Required<UiShellProps>["optionalComponents"],
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@

import { useEffect, useState } from "react";

import { uiShellDataAttribute } from "./renderUiShell";
export const uiShellDataAttribute = "data-unified-ui-shell";

export const useHasUiShell = () => {
const [hasUiShell, setHasUiShell] = useState(false);
14 changes: 14 additions & 0 deletions packages/odyssey-react-mui/src/ui-shell/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*!
* Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
*
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*
* See the License for the specific language governing permissions and limitations under the License.
*/

export * from "./UiShell";
export * from "./renderReactInWebComponent";
Original file line number Diff line number Diff line change
@@ -12,8 +12,8 @@

import { waitFor } from "@testing-library/dom";

import { createReactRootElements } from "../web-component";
import {
createReactRootElements,
ReactInWebComponentElement,
reactWebComponentElementName,
renderReactInWebComponent,
Original file line number Diff line number Diff line change
@@ -11,42 +11,11 @@
*/

import { type ReactNode } from "react";
import type { Root } from "react-dom/client";

/**
* Creates elements for a Shadow DOM that Odyssey will render into.
* The Emotion root is for `<style>` tags and the app root is for an app to render into.
* These are bare elements that
*/
export const createReactRootElements = () => {
const appRootElement = document.createElement("div");
const stylesRootElement = document.createElement("div");

// This `div` may cause layout issues unless it inherits the parent's height.
appRootElement.style.setProperty("height", "inherit");

appRootElement.setAttribute("id", "app-root");
stylesRootElement.setAttribute("id", "style-root");
stylesRootElement.setAttribute("nonce", window.cspNonce);

return {
/**
* The element your React root component renders into.
* React has to render or portal somewhere, and this element can be used for that root element.
*
* In the case of a web component, there is no defined root element, so you have to define it yourself.
*/
appRootElement,
/**
* In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.
*
* Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
*/
stylesRootElement,
};
};

export type ReactRootElements = ReturnType<typeof createReactRootElements>;
import { createRoot, type Root } from "react-dom/client";
import {
createReactRootElements,
type ReactRootElements,
} from "../web-component";

export const reactWebComponentElementName = "odyssey-react-web-component";

@@ -56,8 +25,8 @@ export type GetReactComponentInWebComponent = (

export class ReactInWebComponentElement extends HTMLElement {
getReactComponent: GetReactComponentInWebComponent;
reactRoot: Root;
reactRootElements: ReactRootElements;
reactRootPromise: Promise<Root>;

constructor(getReactComponent: GetReactComponentInWebComponent) {
super();
@@ -81,20 +50,15 @@ export class ReactInWebComponentElement extends HTMLElement {
shadowRoot.appendChild(this.reactRootElements.stylesRootElement);
shadowRoot.appendChild(this.reactRootElements.appRootElement);

// If we want to support React v17 in the future, we can use a try-catch on the import to grab the old `ReactDOM.render` function if `react-dom/client` errors. --Kevin Ghadyani
this.reactRootPromise = import("react-dom/client").then(({ createRoot }) =>
createRoot(this.reactRootElements.appRootElement),
);
this.reactRoot = createRoot(this.reactRootElements.appRootElement);
}

connectedCallback() {
this.reactRootPromise.then((reactRoot) =>
reactRoot.render(this.getReactComponent(this.reactRootElements)),
);
this.reactRoot.render(this.getReactComponent(this.reactRootElements));
}

disconnectedCallback() {
this.reactRootPromise.then((reactRoot) => reactRoot.unmount());
this.reactRoot.unmount();
}
}

1 change: 0 additions & 1 deletion packages/odyssey-react-mui/src/web-component/index.ts
Original file line number Diff line number Diff line change
@@ -10,5 +10,4 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

export * from "./renderReactInWebComponent";
export * from "./shadow-dom";
Loading