feat: adds app switcher lab component #2416

michaeltamaki-okta · 2024-11-15T21:33:49Z

Summary

feat: adds app switcher lab component

Building out the presentation layer of the "App Switcher" https://odyssey.okta.design/latest/components/app-switcher/design-mla5Wn5G (now called "Nav Rail").
Figma: https://www.figma.com/design/zh7A9gjaDlI50Hctdvd1OB/Odyssey-Components?node-id=22141-142254&node-type=frame&t=Qc7MjiWUFNtOh9Vd-0
Playground: https://6485e4e33982ca4977fff8d81ef98f680e713a9c.ods.dev/?path=/docs/labs-components-appswitcher--docs

Component checklist

Code structure

Organize code using a modular component architecture.
Use semantic HTML for clear and meaningful structure.
Break down complex components into smaller, reusable parts.

Accessibility implementation

Apply ARIA attributes to indicate roles and relationships.
Test focus management and ensure interactive elements are keyboard accessible.
Provide visual alternatives for auditory elements.

Internationalization (i18n) implementation

Separate any text content from the component's code for translation.
Test RTL support in Storybook

Cross-browser compatibility

Ensure consistent behavior and appearance across browsers.

Chrome

Safari

Firefox

Documentation

Include code snippets, demos, and examples for various use cases.
Provide guidance on customization and handling special cases.

Finalize code

Interaction designers, UI eng and visual designers need to review that the Storybook code matches the intended Figma design
Interaction designers need to confirm Storybook code matches Supernova
Interaction and visual designers merge Figma and code at the same time
Share updates to the #design-system-team

QA

Include necessary unit tests to continuously verify component functionality
Screen reader test error/success states or message
Test edge cases and error scenarios to validate robustness

Testing and validation

Share work in Craft to get feedback from the Odyssey team
Share work to get feedback from pillar design captains or product designers in #design-team as customer feedback is essential to help us validate our assumptions, identify pain points, and improve our user experience

michaeltamaki-okta · 2024-11-15T22:45:17Z

packages/odyssey-react-mui/src/labs/NavRail/OktaAura.tsx

 import { memo } from "react";

+const OktaAuraSvgComponent = styled("svg")(() => ({


Copied over from the other PR
@bryancunningham-okta #2415 (comment)

@michaeltamaki-okta I think we can use the svg that currently lives in the SideNav folder. We can just wrap it in a styled component and apply these sizes to it. Rather than duplicate the SVG with a different size.

The SVG in the SideNav folder isn't being used (at least as far as I can tell), so I actually moved it to the NavRail folder here.

michaeltamaki-okta · 2024-11-15T22:47:54Z

packages/odyssey-react-mui/src/labs/NavRail/NavRailApp.tsx

+  }),
+);
+
+const NavRailAppImgComponent = styled("img")(() => ({


Copied from the other PR @bryancunningham-okta #2415 (comment)

IMHO, It would be great if we could render the SVGs inline, rather than using images here

The plan is to load the SVGs from monolith/CDN (https://github.com/atko-eng/okta-ui/pull/8012 https://github.com/atko-eng/okta-core/pull/103856). The pros of this approach is that any app icon changes/additions/removals don't require an Odyssey version bump since it all comes from the backend. The downside is that we can't do inline SVGs like you suggested.

michaeltamaki-okta

Added notes from meeting with @KevinGhadyani-Okta

michaeltamaki-okta · 2024-11-18T19:10:19Z

packages/odyssey-react-mui/src/labs/NavRail/NavRailApp.tsx

+  const renderAppIconLink = useCallback(
+    (muiProps: MuiPropsContextType) => {
+      return (
+        <NavRailAppLinkComponent


Add aria-current

michaeltamaki-okta · 2024-11-18T19:12:05Z

packages/odyssey-react-mui/src/labs/NavRail/NavRail.tsx

+      >
+        <OktaAura />
+      </NavRailOktaAuraWrapperComponent>
+      {appIcons.map((appIcon) => (


Add nav (Add to the NavRail wrapper), ul (Add a wrapper over all the apps), li (Add to NavRailApp component)

michaeltamaki-okta · 2024-11-18T19:21:17Z

packages/odyssey-react-mui/src/labs/NavRail/NavRail.tsx

+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  width: "100%",
+  height: NAV_RAIL_WIDTH,


See if we can import a shared value between top nav

michaeltamaki-okta · 2024-11-18T19:25:54Z

packages/odyssey-react-mui/src/labs/NavRail/NavRailApp.tsx

+const APP_SIDE_LENGTH = "36px";
+const APP_ICON_SIDE_LENGTH = "32px";


Change to rem

michaeltamaki-okta · 2024-11-18T19:28:58Z

packages/odyssey-react-mui/src/labs/NavRail/NavRail.tsx

+const NAV_RAIL_WIDTH = "64px";
+
+export type NavRailProps = {
+  appIcons?: Omit<NavRailAppProps, "selectedAppName">[];


Prefer using Pick instead of Omit

michaeltamaki-okta · 2024-11-18T19:29:41Z

packages/odyssey-react-mui/src/labs/NavRail/NavRailApp.tsx

+    (muiProps: MuiPropsContextType) => {
+      return (


implicit return

michaeltamaki-okta · 2024-11-18T19:31:32Z

packages/odyssey-react-mui/src/labs/NavRail/NavRailApp.tsx

+        >
+          <NavRailAppImgComponent
+            src={isSelected ? appIconSelectedUrl : appIconDefaultUrl}
+            alt="" // Tell screen reader to ignore the image; the Tooltip describes the link


role=presentation

michaeltamaki-okta · 2024-11-18T19:48:19Z

packages/odyssey-react-mui/src/labs/NavRail/NavRail.tsx

+
+const NAV_RAIL_WIDTH = "64px";
+
+export type NavRailProps = {


Add visibilityState = invisible | loading | loaded

How should we handle the loading state?

Skeleton

Enduser: Skeleton shows, then disappears (pop in during load)

Admin: Skeleton shows, then gets populated

No Skeleton ✅

Enduser: Skeleton does not show, then disappears

Admin: Skeleton does not show, then nav rail pops in

Could we mitigate this via storing in local storage to prevent pop in? Would pop in the first load, but would not pop in after that.

Also consider that this is just for the MVP where it is only shown for the admin. In the future, when it is shown to all users, we could switch to skeleton.

Full screen loading screen (prevents pop in)

Would block showing the app until we get the data. Unacceptable to downstream teams.

Keep side nav the same width regardless of app switcher

No, would break design assumptions

michaeltamaki-okta · 2024-11-18T19:56:17Z

packages/odyssey-storybook/src/components/odyssey-labs/NavRail/NavRail.stories.tsx

+  play: async ({ canvasElement, step }: PlaywrightProps<NavRailProps>) => {
+    const canvas = within(canvasElement);
+
+    await step("Nav rail successfully loads", async () => {


shows all items

michaeltamaki-okta · 2024-11-18T19:56:33Z

packages/odyssey-storybook/src/components/odyssey-labs/NavRail/NavRail.stories.tsx

+  play: async ({ canvasElement, step }: PlaywrightProps<NavRailProps>) => {
+    const canvas = within(canvasElement);
+
+    await step("Nav rail does not load", async () => {


hides when no items

michaeltamaki-okta requested a review from a team as a code owner November 15, 2024 21:33

michaeltamaki-okta mentioned this pull request Nov 15, 2024

feat: adds nav rail lab component #2415

Closed

20 tasks

michaeltamaki-okta commented Nov 15, 2024

View reviewed changes

michaeltamaki-okta commented Nov 18, 2024

View reviewed changes

michaeltamaki-okta changed the title ~~feat: adds nav rail lab component~~ feat: adds app switcher lab component Nov 18, 2024

michaeltamaki-okta force-pushed the mt-nav-rail branch 2 times, most recently from 1c58609 to 6485e4e Compare November 19, 2024 19:20

michaeltamaki-okta added 2 commits November 19, 2024 15:17

feat: adds nav rail lab component

159bfc0

fix: initialVisibleSections

503f6d7

michaeltamaki-okta force-pushed the mt-nav-rail branch from 6485e4e to 503f6d7 Compare November 20, 2024 01:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adds app switcher lab component #2416

feat: adds app switcher lab component #2416

michaeltamaki-okta commented Nov 15, 2024 •

edited

Loading

michaeltamaki-okta Nov 15, 2024

michaeltamaki-okta Nov 15, 2024

michaeltamaki-okta left a comment

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

michaeltamaki-okta Nov 18, 2024

		import { memo } from "react";

		const OktaAuraSvgComponent = styled("svg")(() => ({

		const APP_SIDE_LENGTH = "36px";
		const APP_ICON_SIDE_LENGTH = "32px";

feat: adds app switcher lab component #2416

Are you sure you want to change the base?

feat: adds app switcher lab component #2416

Conversation

michaeltamaki-okta commented Nov 15, 2024 • edited Loading

Summary

Component checklist

Code structure

Accessibility implementation

Internationalization (i18n) implementation

Cross-browser compatibility

Chrome

Safari

Firefox

Documentation

Finalize code

QA

Testing and validation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaeltamaki-okta left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

How should we handle the loading state?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaeltamaki-okta commented Nov 15, 2024 •

edited

Loading