@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/src/Tag.tsx

@@ -12,9 +12,27 @@
 
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
+import styled from "@emotion/styled";
 import { TagListContext } from "./TagListContext";
 import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import { HtmlProps } from "./HtmlProps";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { CloseCircleFilledIcon } from "./icons.generated";
+import { useContrastContext, ContrastMode } from "./ContrastModeProvider";
+
+export const tagColorVariants = [
+  "default",
+  "info",
+  "accentOne",
+  "accentTwo",
+  "accentThree",
+  "accentFour",
+] as const;
+
+type TagColorVariant = (typeof tagColorVariants)[number];
 
 export type TagProps = {
   icon?: ReactElement;
@@ -31,9 +49,157 @@ export type TagProps = {
    * Callback fired when the remove button of the Tag is clicked
    */
   onRemove?: MuiChipProps["onDelete"];
+  /**
+   * Color variant of the Tag, affecting its appearance
+   */
+  colorVariant?: TagColorVariant;
 } & Pick<HtmlProps, "testId" | "translate">;
 
+const getChipColors = (
+  colorVariant: TagColorVariant,
+  odysseyDesignTokens: DesignTokens,
+  contrastMode: ContrastMode,
+) => {
+  const colors = {
+    default: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueNeutral200,
+        text: odysseyDesignTokens.HueNeutral700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueNeutral100,
+        text: odysseyDesignTokens.HueNeutral700,
+      }),
+      hover: odysseyDesignTokens.HueNeutral200,
+      active: odysseyDesignTokens.HueNeutral300,
+      border: odysseyDesignTokens.HueNeutral200,
+      deleteIcon: odysseyDesignTokens.HueNeutral500,
+      deleteIconHover: odysseyDesignTokens.HueNeutral700,
+    },
+    info: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueBlue200,
+        text: odysseyDesignTokens.HueBlue700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueBlue100,
+        text: odysseyDesignTokens.HueBlue700,
+      }),
+      hover: odysseyDesignTokens.HueBlue200,
+      active: odysseyDesignTokens.HueBlue300,
+      border: odysseyDesignTokens.HueBlue200,
+      deleteIcon: odysseyDesignTokens.HueBlue500,
+      deleteIconHover: odysseyDesignTokens.HueBlue700,
+    },
+    accentOne: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentOne200,
+        text: odysseyDesignTokens.HueAccentOne700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentOne100,
+        text: odysseyDesignTokens.HueAccentOne700,
+      }),
+      hover: odysseyDesignTokens.HueAccentOne200,
+      active: odysseyDesignTokens.HueAccentOne300,
+      border: odysseyDesignTokens.HueAccentOne200,
+      deleteIcon: odysseyDesignTokens.HueAccentOne500,
+      deleteIconHover: odysseyDesignTokens.HueAccentOne700,
+    },
+    accentTwo: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo200,
+        text: odysseyDesignTokens.HueAccentTwo800,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo100,
+        text: odysseyDesignTokens.HueAccentTwo700,
+      }),
+      hover: odysseyDesignTokens.HueAccentTwo200,
+      active: odysseyDesignTokens.HueAccentTwo300,
+      border: odysseyDesignTokens.HueAccentTwo200,
+      deleteIcon: odysseyDesignTokens.HueAccentTwo500,
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
+    },
+    accentThree: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentThree200,
+        text: odysseyDesignTokens.HueAccentThree700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentThree100,
+        text: odysseyDesignTokens.HueAccentThree700,
+      }),
+      hover: odysseyDesignTokens.HueAccentThree200,
+      active: odysseyDesignTokens.HueAccentThree300,
+      border: odysseyDesignTokens.HueAccentThree200,
+      deleteIcon: odysseyDesignTokens.HueAccentThree500,
+      deleteIconHover: odysseyDesignTokens.HueAccentThree700,
+    },
+    accentFour: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentFour200,
+        text: odysseyDesignTokens.HueAccentFour700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentFour100,
+        text: odysseyDesignTokens.HueAccentFour700,
+      }),
+      hover: odysseyDesignTokens.HueAccentFour200,
+      active: odysseyDesignTokens.HueAccentFour300,
+      border: odysseyDesignTokens.HueAccentFour200,
+      deleteIcon: odysseyDesignTokens.HueAccentFour500,
+      deleteIconHover: odysseyDesignTokens.HueAccentFour700,
+    },
+  };
+
+  return colors[colorVariant] || colors.default;
+};
+
+const StyledTag = styled(MuiChip, {
+  shouldForwardProp: (prop) =>
+    !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(
+      prop as string,
+    ),
+})<{
+  colorVariant: TagColorVariant;
+  contrastMode: ContrastMode;
+  odysseyDesignTokens: DesignTokens;
+  as?: React.ElementType; // Allow the 'as' prop to be forwarded
+}>(({ colorVariant, contrastMode, odysseyDesignTokens }) => {
+  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
+
+  return {
+    backgroundColor: colors.background,
+    color: colors.text,
+    borderColor: colors.border,
+
+    "&.MuiChip-clickable:hover": {
+      backgroundColor: colors.hover,
+    },
+
+    "&.MuiChip-clickable:active": {
+      backgroundColor: colors.active,
+    },
+
+    "&.Mui-disabled": {
+      "& .MuiChip-deleteIcon": {
+        color: odysseyDesignTokens.HueNeutral300,
+      },
+    },
+
+    "& .MuiChip-deleteIcon": {
+      color: colors.deleteIcon,
+
+      "&:hover": {
+        color: colors.deleteIconHover,
+      },
+    },
+  };
+});
+
 const Tag = ({
+  colorVariant = "default",
   icon,
   isDisabled,
   label,
@@ -42,21 +208,27 @@ const Tag = ({
   testId,
   translate,
 }: TagProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
+  const { contrastMode } = useContrastContext();
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
-      <MuiChip
+      <StyledTag
         {...muiProps}
+        as={chipElementType}
         aria-disabled={isDisabled}
-        clickable={onClick ? true : false}
-        component={chipElementType}
+        clickable={Boolean(onClick)}
         data-se={testId}
+        colorVariant={colorVariant}
+        odysseyDesignTokens={odysseyDesignTokens}
+        contrastMode={contrastMode}
         disabled={isDisabled}
         icon={icon}
         label={label}
         onClick={onClick}
         onDelete={onRemove}
+        deleteIcon={<CloseCircleFilledIcon />}
         translate={translate}
       />
     ),
@@ -69,6 +241,9 @@ const Tag = ({
       onRemove,
       testId,
       translate,
+      colorVariant,
+      odysseyDesignTokens,
+      contrastMode,
     ],
   );
 

package/src/TextField.tsx

@@ -30,56 +30,33 @@ import {
 import { Field } from "./Field";
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TextFieldTestSelectors = {
-  feature: {
-    description: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["hint"],
-        text: "${hint}",
-      },
-    },
-    errorMessage: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["errorMessage"],
-        text: "${errorMessage}",
-      },
-    },
-    input: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "textbox",
-        templateVariableNames: ["label"],
-      },
-    },
-    label: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "LabelText",
-        templateVariableNames: ["label"],
-      },
-    },
+export const TextFieldTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "link",
       },
     },
   },
-} as const satisfies FeatureTestSelector;
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "textbox",
+  },
+} as const satisfies TestSelector;
 
 export const textFieldTypeValues = [
   "email",

package/src/Toast.tsx

@@ -130,7 +130,7 @@ const Toast = ({
         >
           <AlertTitle translate={translate}>
             <ScreenReaderText translate={translate}>
-              {t(`severity.${severity}:`)}
+              {t(`severity.${severity}`)}:
             </ScreenReaderText>
             {text}
           </AlertTitle>

package/src/{test-selectors/odysseyTestSelectors.ts → Typography.test.tsx}

@@ -10,13 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { type FeatureTestSelector } from "./featureTestSelector";
-import { CalloutTestSelectors } from "../Callout";
-import { TabsTestSelectors } from "../Tabs";
-import { TextFieldTestSelectors } from "../TextField";
+import { render, screen } from "@testing-library/react";
+import { Typography } from "./Typography";
 
-export const odysseyTestSelectors = {
-  Callout: CalloutTestSelectors,
-  Tabs: TabsTestSelectors,
-  TextField: TextFieldTestSelectors,
-} as const satisfies Record<string, FeatureTestSelector>;
+describe("Typography", () => {
+  test("renders Overline", () => {
+    render(
+      <Typography ariaLabel="overline" variant="overline">
+        Overline test
+      </Typography>,
+    );
+
+    expect(screen.getByLabelText("overline")).toBeVisible();
+  });
+});

package/src/Typography.tsx

@@ -34,9 +34,10 @@ export type TypographyVariantValue =
   | "h5"
   | "h6"
   | "body"
+  | "legend"
+  | "overline"
   | "subordinate"
-  | "support"
-  | "legend";
+  | "support";
 
 export const typographyVariantMapping: Record<
   TypographyVariantValue,
@@ -49,9 +50,10 @@ export const typographyVariantMapping: Record<
   h5: "h5",
   h6: "h6",
   body: "body1",
+  legend: "legend",
+  overline: "overline",
   subordinate: "subtitle1",
   support: "subtitle2",
-  legend: "legend",
 } as const;
 
 export const typographyColorValues = [
@@ -102,9 +104,12 @@ const Typography = ({
 }: TypographyProps) => {
   const component = useMemo(() => {
     if (!componentProp) {
-      if (variant === "body") {
-        return "p";
-      } else if (variant === "subordinate" || variant === "support") {
+      if (
+        variant === "body" ||
+        variant === "subordinate" ||
+        variant === "support" ||
+        variant === "overline"
+      ) {
         return "p";
       } else {
         return variant;
@@ -406,6 +411,32 @@ const Legend = ({
 const MemoizedLegend = memo(Legend);
 MemoizedLegend.displayName = "Legend";
 
+const Overline = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  color,
+  component,
+  testId,
+  translate,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    color={color}
+    component={component}
+    testId={testId}
+    translate={translate}
+    variant="overline"
+  />
+);
+
+const MemoizedOverline = memo(Overline);
+MemoizedOverline.displayName = "Overline";
+
 export {
   MemoizedTypography as Typography,
   MemoizedHeading1 as Heading1,
@@ -415,6 +446,7 @@ export {
   MemoizedHeading5 as Heading5,
   MemoizedHeading6 as Heading6,
   MemoizedLegend as Legend,
+  MemoizedOverline as Overline,
   MemoizedParagraph as Paragraph,
   MemoizedSubordinate as Subordinate,
   MemoizedSupport as Support,

package/src/createShadowDomElements.ts

@@ -21,6 +21,9 @@ export const createShadowDomElements = (containerElement: HTMLElement) => {
   // React app root component.
   const shadowRootElement = document.createElement("div");
   shadowRootElement.setAttribute("id", "shadow-root");
+  // This div could cause issues with layout of children.
+  // For flexibility, make it inherit its parent's height
+  shadowRootElement.style.setProperty("height", "inherit");
 
   shadowRoot.appendChild(emotionRootElement);
   shadowRoot.appendChild(shadowRootElement);

package/src/i18n.ts

@@ -44,7 +44,7 @@ import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh_CN";
 import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh_TW";
 
 export const defaultLNG = "en";
-export const defaultNS = "translations";
+export const defaultNS = "odyssey";
 
 // Note: This is type "string" to allow translation overrides from other languages
 export type I18nResources = Record<string, Partial<typeof en>>;
@@ -78,7 +78,7 @@ export const resources: I18nResources = {
   vi,
   zh_CN: zhCN,
   zh_TW: znTW,
-};
+} as const;
 
 i18n.use(initReactI18next).init({
   defaultNS,
@@ -94,7 +94,7 @@ i18n.use(initReactI18next).init({
     useSuspense: false,
     bindI18nStore: "added",
   },
-});
+} as const);
 
 Object.entries(resources).forEach(([locale, property]) => {
   i18n.addResourceBundle(locale, defaultNS, property);

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   Paper,
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ScopedCssBaseline,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ThemeProvider,
 } from "@mui/material";
 
@@ -49,6 +50,7 @@ export type {
   MenuListProps,
   PaperProps,
   ScopedCssBaselineProps,
+  StackProps,
   ThemeOptions,
 } from "@mui/material";
 
@@ -68,6 +70,7 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
+export * from "./ContrastModeProvider";
 export * from "./CssBaseline";
 export * from "./createShadowDomElements";
 export * from "./createUniqueId";
@@ -77,6 +80,11 @@ export * from "./Drawer";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FieldComponentProps";
+export {
+  FileUploader,
+  fileUploadTypes,
+  fileUploadVariants,
+} from "./FileUploader";
 export * from "./Form";
 export * from "./HintLink";
 export * from "./IconWithTooltip";
@@ -95,6 +103,7 @@ export * from "./RadioGroup";
 export * from "./ScreenReaderText";
 export * from "./SearchField";
 export * from "./Select";
+export * from "./Stack";
 export * from "./Status";
 export * from "./Surface";
 export * from "./Tabs";
@@ -104,7 +113,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
-export * from "./labs/Switch";
+export * from "./Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";

package/src/labs/DataView/DataView.test.tsx

@@ -0,0 +1,158 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { DataView } from "./index";
+import {
+  data,
+  columns,
+} from "@okta/odyssey-storybook/src/components/odyssey-labs/DataView/personData";
+import { filterData } from "@okta/odyssey-storybook/src/components/odyssey-labs/DataView/dataFunctions";
+
+const getData = ({ ...props }) => {
+  return filterData({ data, ...props });
+};
+
+describe("DataView", () => {
+  it("displays the expected number of rows by default", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+  });
+
+  it("displays the expected number of rows on load more", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+
+    waitFor(() => {
+      fireEvent.click(screen.getByText("Show more"));
+
+      const loadedRows = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(loadedRows.length).toBe(41);
+    });
+  });
+
+  it("resets the rows when searching", async () => {
+    render(
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+        }}
+        hasSearch
+        hasPagination
+        // virtualization has to be false for the tests to work properly
+        enableVirtualization={false}
+        paginationType="loadMore"
+        resultsPerPage={20}
+      />,
+    );
+
+    const tableElement = await screen.findByRole("table", { name: "" });
+    const rowElements = within(tableElement).getAllByRole("row", {
+      hidden: false,
+    });
+    expect(rowElements.length).toBe(21);
+
+    fireEvent.click(screen.getByText("Show more"));
+
+    waitFor(() => {
+      const loadedRows = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(loadedRows.length).toBe(41);
+    });
+
+    const searchField = screen.getByPlaceholderText("Search");
+    fireEvent.change(searchField, { target: { value: "John" } });
+
+    waitFor(() => {
+      const rowsAfterFilter = within(tableElement).getAllByRole("row", {
+        hidden: false,
+      });
+      expect(rowsAfterFilter.length).toBeLessThanOrEqual(21);
+    });
+  });
+
+  it("fires onPaginationChange when pagination changes", async () => {
+    let currentPage = 1;
+    const onPaginationChange = (pagination: {
+      pageIndex: number;
+      pageSize: number;
+    }) => {
+      currentPage = pagination.pageIndex;
+    };
+
+    render(
+      <>
+        <DataView
+          getData={getData}
+          hasPagination
+          onPaginationChange={onPaginationChange}
+        />
+      </>,
+    );
+
+    const nextButton = screen.getByLabelText("Next page");
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(currentPage).toBe(2);
+    });
+  });
+});