@okta/odyssey-react-mui 1.27.0 → 1.28.1

package/src/labs/AppTile.tsx

@@ -25,16 +25,19 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { Button } from ".././Button";
+import { Button } from "../Buttons";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from ".././OdysseyDesignTokensContext";
-import { Heading5, Paragraph, Subordinate, Support } from ".././Typography";
+import { Heading5, Paragraph, Subordinate } from ".././Typography";
 import { Box } from ".././Box";
 
-export const APP_TILE_IMAGE_HEIGHT = "64px";
-export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "64px";
+export const APP_TILE_COMPACT_IMAGE_HEIGHT = "2.85714286rem"; // 40px
+export const APP_TILE_IMAGE_HEIGHT = "4.57142857rem"; // 64px
+export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "4.57142857rem"; // 64px
+
+export const appTileVariantValues = ["comfortable", "compact"] as const;
 
 export type AppTileProps = {
   // Text that appears in the upper right corner of the tile
@@ -49,10 +52,10 @@ export type AppTileProps = {
   isLoading?: boolean;
   // Event handler for when the user clicks the tile
   onClick: MouseEventHandler;
-  // An 'eyebrow' of text above the title
-  overline?: string;
   // A string for the tile title
   title?: string;
+  // Whether the tile is comfortable or compact
+  variant?: (typeof appTileVariantValues)[number];
 } & (
   | {
       // Event that fires when the user clicks the action button in the upper-right corner
@@ -85,106 +88,203 @@ type LoadingTileProps = {
   description: boolean;
   hasTopSection: boolean;
   image: boolean;
-  overline: boolean;
   title: boolean;
+  variant: AppTileProps["variant"];
 };
 
 const ImageContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "variant",
 })<{
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+  variant: AppTileProps["variant"];
+}>(({ odysseyDesignTokens, variant }) => ({
   display: "flex",
   alignItems: "flex-start",
-  maxHeight: APP_TILE_IMAGE_HEIGHT,
-  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  justifyContent: variant === "compact" ? "center" : "flex-start",
+  maxHeight:
+    variant === "compact"
+      ? APP_TILE_COMPACT_IMAGE_HEIGHT
+      : APP_TILE_IMAGE_HEIGHT,
+  marginBlockEnd:
+    variant === "compact"
+      ? odysseyDesignTokens.Spacing4
+      : odysseyDesignTokens.Spacing3,
 
   ["img"]: {
-    height: APP_TILE_IMAGE_HEIGHT,
+    height:
+      variant === "compact"
+        ? APP_TILE_COMPACT_IMAGE_HEIGHT
+        : APP_TILE_IMAGE_HEIGHT,
+    width: variant === "compact" ? "100%" : "auto",
     maxWidth: "100%",
   },
 }));
 
 const ActionContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  alignItems: "center",
-  display: "flex",
-  minHeight: odysseyDesignTokens.Spacing6,
-  position: "absolute",
-  right: odysseyDesignTokens.Spacing2,
-  top: odysseyDesignTokens.Spacing2,
-  gap: odysseyDesignTokens.Spacing1,
-  zIndex: 1,
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "variant",
+})<{ odysseyDesignTokens: DesignTokens; variant: AppTileProps["variant"] }>(
+  ({ odysseyDesignTokens, variant = "comfortable" }) => ({
+    alignItems: "center",
+    display: "flex",
+    minHeight: odysseyDesignTokens.Spacing6,
+    position: "absolute",
+    right: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
+    top: variant === "compact" ? 0 : odysseyDesignTokens.Spacing2,
+    gap: odysseyDesignTokens.Spacing1,
+    zIndex: 1,
 
-  ["& > .MuiTypography-root:last-child"]: {
-    marginInlineEnd: odysseyDesignTokens.Spacing2,
-  },
-}));
+    ["& > .MuiTypography-root:last-child"]: {
+      marginInlineEnd: odysseyDesignTokens.Spacing2,
+    },
+  }),
+);
 
 const ContentContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "hasTopSection",
-})<{ odysseyDesignTokens: DesignTokens; hasTopSection: boolean }>(
-  ({ odysseyDesignTokens, hasTopSection }) => ({
-    alignItems: "flex-start",
-    paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,
-  }),
-);
+    prop !== "odysseyDesignTokens" &&
+    prop !== "hasTopSection" &&
+    prop !== "variant",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  hasTopSection: boolean;
+  variant: AppTileProps["variant"];
+}>(({ odysseyDesignTokens, hasTopSection, variant }) => ({
+  alignItems: "flex-start",
+  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,
+  height: "100%",
+
+  [".MuiTypography-root"]: {
+    fontSize:
+      variant === "compact"
+        ? odysseyDesignTokens.TypographySizeSubordinate
+        : "auto",
+    textAlign: variant === "compact" ? "center" : "left",
+  },
+
+  ["& :last-child"]: {
+    marginBlockEnd: "0 !important",
+  },
+}));
 
 const ChildrenContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   ["&:not(:first-child)"]: {
-    marginBlockStart: odysseyDesignTokens.Spacing3,
+    marginBlockStart: odysseyDesignTokens.Spacing4,
+  },
+}));
+
+const StyledMuiCard = styled(MuiCard, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isPlaceholder" &&
+    prop !== "isCompact",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isPlaceholder?: boolean;
+  isCompact: boolean;
+}>(({ odysseyDesignTokens, isPlaceholder = false, isCompact = false }) => ({
+  position: "relative",
+  boxShadow: "none",
+  overflow: "unset",
+  display: "flex",
+  justifyContent: isPlaceholder && isCompact ? "center" : "flex-start",
+  padding: odysseyDesignTokens.Spacing4,
+  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.HueNeutral200} ${odysseyDesignTokens.BorderStyleMain}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `border ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+
+  "&::after": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    boxShadow: odysseyDesignTokens.DepthMedium,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+    zIndex: "-1",
+    content: '""',
   },
+
+  "&:hover": {
+    borderColor: "transparent",
+
+    "&::after": {
+      opacity: 1,
+    },
+  },
+}));
+
+const StyledMuiCardActionArea = styled(MuiCardActionArea, {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  margin: `-${odysseyDesignTokens.Spacing4}`,
+  padding: odysseyDesignTokens.Spacing4,
 }));
 
 const LoadingTile = ({
   image,
-  overline,
   title,
   description,
   children,
   hasTopSection,
+  variant,
 }: LoadingTileProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   return (
-    <MuiCard className="isClickable">
+    <StyledMuiCard
+      odysseyDesignTokens={odysseyDesignTokens}
+      isPlaceholder
+      isCompact={variant === "compact"}
+    >
       <ContentContainer
         odysseyDesignTokens={odysseyDesignTokens}
         hasTopSection={hasTopSection}
+        variant={variant}
       >
         {hasTopSection && (
-          <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <ActionContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            variant={variant}
+          >
             <Subordinate>
-              <MuiSkeleton width={50} />
+              {variant !== "compact" && <MuiSkeleton width={50} />}
             </Subordinate>
           </ActionContainer>
         )}
         <Box sx={{ width: "100%" }}>
           {image && (
-            <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <ImageContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              variant={variant}
+            >
               <MuiSkeleton
-                height={APP_TILE_IMAGE_HEIGHT}
-                width={APP_TILE_PLACEHOLDER_IMAGE_WIDTH}
+                height={
+                  variant === "compact"
+                    ? APP_TILE_COMPACT_IMAGE_HEIGHT
+                    : APP_TILE_IMAGE_HEIGHT
+                }
+                width={
+                  variant === "compact"
+                    ? APP_TILE_COMPACT_IMAGE_HEIGHT
+                    : APP_TILE_PLACEHOLDER_IMAGE_WIDTH
+                }
                 variant="rectangular"
               />
             </ImageContainer>
           )}
 
-          {overline && (
-            <Support>
-              <MuiSkeleton />
-            </Support>
-          )}
           {title && (
             <Heading5>
               <MuiSkeleton />
             </Heading5>
           )}
-          {description && (
+          {description && variant !== "compact" && (
             <Paragraph>
               <MuiSkeleton />
             </Paragraph>
@@ -200,38 +300,10 @@ const LoadingTile = ({
           )}
         </Box>
       </ContentContainer>
-    </MuiCard>
+    </StyledMuiCard>
   );
 };
 
-const StyledMuiCard = styled(MuiCard, {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
-  position: "relative",
-  boxShadow: "none",
-  overflow: "unset",
-
-  "&::after": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    opacity: 0,
-    boxShadow: odysseyDesignTokens.DepthMedium,
-    borderRadius: odysseyDesignTokens.BorderRadiusOuter,
-    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
-    zIndex: "-1",
-    content: '""',
-  },
-
-  "&:hover": {
-    "&::after": {
-      opacity: 1,
-    },
-  },
-}));
-
 const AppTile = ({
   actionAriaControls,
   actionAriaHasPopup,
@@ -245,8 +317,8 @@ const AppTile = ({
   isLoading,
   onActionClick,
   onClick,
-  overline,
   title,
+  variant = "comfortable",
 }: AppTileProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
@@ -255,16 +327,19 @@ const AppTile = ({
       <ContentContainer
         odysseyDesignTokens={odysseyDesignTokens}
         hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+        variant={variant}
       >
         {image && (
-          <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <ImageContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            variant={variant}
+          >
             {image}
           </ImageContainer>
         )}
 
-        {overline && <Support component="div">{overline}</Support>}
         {title && <Heading5 component="div">{title}</Heading5>}
-        {description && (
+        {description && variant !== "compact" && (
           <Paragraph color="textSecondary">{description}</Paragraph>
         )}
         {children && (
@@ -279,26 +354,32 @@ const AppTile = ({
       auxiliaryText,
       onActionClick,
       odysseyDesignTokens,
-      overline,
       title,
       description,
       children,
+      variant,
     ],
   );
 
   return isLoading ? (
     <LoadingTile
       image={Boolean(image)}
-      overline={Boolean(overline)}
       title={Boolean(title)}
       description={Boolean(description)}
       children={Boolean(children)}
       hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+      variant={variant}
     />
   ) : (
-    <StyledMuiCard odysseyDesignTokens={odysseyDesignTokens}>
+    <StyledMuiCard
+      odysseyDesignTokens={odysseyDesignTokens}
+      isCompact={variant === "compact"}
+    >
       {(onActionClick || auxiliaryText) && (
-        <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <ActionContainer
+          odysseyDesignTokens={odysseyDesignTokens}
+          variant={variant}
+        >
           {auxiliaryText && !isLoading && (
             <Subordinate>{auxiliaryText}</Subordinate>
           )}
@@ -318,7 +399,12 @@ const AppTile = ({
         </ActionContainer>
       )}
 
-      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>
+      <StyledMuiCardActionArea
+        odysseyDesignTokens={odysseyDesignTokens}
+        onClick={onClick}
+      >
+        {tileContent}
+      </StyledMuiCardActionArea>
     </StyledMuiCard>
   );
 };

package/src/labs/DataFilters.tsx

@@ -33,7 +33,7 @@ import styled from "@emotion/styled";
 
 import { Autocomplete } from "../Autocomplete";
 import { Box } from "../Box";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { CheckboxGroup } from "../CheckboxGroup";
 import { Checkbox } from "../Checkbox";
 import {

package/src/labs/DataTable.tsx

@@ -53,7 +53,7 @@ import {
   paginationTypeValues,
 } from "./DataTablePagination";
 import { DataFilter, DataFilters } from "./DataFilters";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { Box } from "../Box";
 import { MenuButton, MenuItem } from "..";
 import { ArrowUnsortedIcon } from "../icons.generated";

package/src/labs/DataTablePagination.tsx

@@ -12,7 +12,7 @@
 
 import { memo } from "react";
 import { Box } from "../Box";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { Support } from "../Typography";
 import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
 

package/src/labs/DataView/BulkActionsMenu.tsx

@@ -16,9 +16,8 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
+import { Button, MenuButton } from "../../Buttons";
 import { ChevronDownIcon } from "../../icons.generated";
-import { MenuButton } from "../../MenuButton";
 import { UniversalProps } from "./componentTypes";
 import {
   DesignTokens,

package/src/labs/DataView/DataCard.tsx

@@ -29,14 +29,17 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
-import { ButtonContext } from "../../ButtonContext";
+import {
+  Button,
+  ButtonContext,
+  MenuButton,
+  MenuButtonProps,
+} from "../../Buttons";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "../../Typography";
-import { MenuButton, MenuButtonProps } from "../../MenuButton";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -114,7 +117,10 @@ const MenuButtonContainer = styled("div", {
 }>(({ odysseyDesignTokens, variant }) => ({
   position: "absolute",
   right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3,
+  top:
+    variant === "compact"
+      ? odysseyDesignTokens.Spacing4
+      : odysseyDesignTokens.Spacing3,
   height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
   display: "flex",
   alignItems: "center",
@@ -128,11 +134,14 @@ const CardInnerContainer = styled("div", {
 }));
 
 const CardImageAndContentContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "variant",
-})<{ variant: (typeof cardVariantValues)[number] }>(({ variant }) => ({
-  display: "flex",
-  flexDirection: variant === "tile" ? "column" : "row",
-}));
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "centerContent",
+})<{ variant: (typeof cardVariantValues)[number]; centerContent: boolean }>(
+  ({ variant, centerContent }) => ({
+    display: "flex",
+    flexDirection: variant === "tile" ? "column" : "row",
+    alignItems: centerContent ? "center" : "flex-start",
+  }),
+);
 
 const CardContent = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -140,9 +149,12 @@ const CardContent = styled("div", {
   odysseyDesignTokens: DesignTokens;
   variant: (typeof cardVariantValues)[number];
 }>(({ odysseyDesignTokens, variant }) => ({
-  "& > .MuiTypography-h5": {
+  "& > .MuiTypography-h5:not(:last-child)": {
     marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,
   },
+  "& > *:last-child": {
+    marginBlockEnd: 0,
+  },
 }));
 
 const CardChildrenContainer = styled("div", {
@@ -221,11 +233,25 @@ const DataCard = ({
     variant,
   ]);
 
-  const cardContent = useMemo(
-    () => (
+  const cardContent = useMemo(() => {
+    const countDefinedProps = (
+      props: Array<string | ReactNode | undefined>,
+    ) => {
+      return props.filter((prop) => prop !== undefined).length;
+    };
+
+    const shouldCenterContent =
+      variant === "compact" &&
+      (!renderDetailPanel || !isDetailPanelOpen) &&
+      countDefinedProps([title, description, overline, button, children]) <= 2;
+
+    return (
       <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>
         {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}
-        <CardImageAndContentContainer variant={variant}>
+        <CardImageAndContentContainer
+          variant={variant}
+          centerContent={shouldCenterContent}
+        >
           {image && (
             <ImageContainer
               odysseyDesignTokens={odysseyDesignTokens}
@@ -268,24 +294,23 @@ const DataCard = ({
           </CardContent>
         </CardImageAndContentContainer>
       </CardInnerContainer>
-    ),
-    [
-      odysseyDesignTokens,
-      AccessoryProp,
-      renderDetailPanel,
-      Accessory,
-      variant,
-      image,
-      menuButtonChildren,
-      overline,
-      title,
-      description,
-      button,
-      children,
-      isDetailPanelOpen,
-      row,
-    ],
-  );
+    );
+  }, [
+    odysseyDesignTokens,
+    AccessoryProp,
+    renderDetailPanel,
+    Accessory,
+    variant,
+    image,
+    menuButtonChildren,
+    overline,
+    title,
+    description,
+    button,
+    children,
+    isDetailPanelOpen,
+    row,
+  ]);
 
   return (
     <MuiCard

package/src/labs/DataView/DataView.tsx

@@ -35,7 +35,7 @@ import { DataFilters } from "../DataFilters";
 import { EmptyState } from "../../EmptyState";
 import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
-import { MenuButton } from "../../MenuButton";
+import { MenuButton } from "../../Buttons";
 import { MoreIcon } from "../../icons.generated";
 import { TableSettings } from "./TableSettings";
 import { Pagination, usePagination } from "../../Pagination";

package/src/labs/DataView/LayoutSwitcher.tsx

@@ -14,8 +14,7 @@ import { Dispatch, memo, useCallback, SetStateAction, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { AvailableLayouts, DataLayout } from "./componentTypes";
-import { MenuButton } from "../../MenuButton";
-import { MenuItem } from "../../MenuItem";
+import { MenuButton, MenuItem } from "../../Buttons";
 
 export type LayoutSwitcherProps = {
   availableLayouts: AvailableLayouts;

package/src/labs/DataView/RowActions.tsx

@@ -20,10 +20,8 @@ import {
   ArrowTopIcon,
   ArrowUpIcon,
 } from "../../icons.generated";
-import { Button } from "../../Button";
-import { MenuItem } from "../../MenuItem";
+import { Button, MenuButtonProps, MenuItem } from "../../Buttons";
 import { DataTableProps } from "./DataTable";
-import { MenuButtonProps } from "../../MenuButton";
 
 export type RowActionsProps = {
   isRowReorderingDisabled?: boolean;

package/src/labs/DataView/TableLayoutContent.tsx

@@ -41,7 +41,7 @@ import {
   DragIndicatorIcon,
 } from "../../icons.generated";
 import { Box } from "../../Box";
-import { Button } from "../../Button";
+import { Button, MenuButton } from "../../Buttons";
 import { TableLayoutProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
@@ -49,7 +49,6 @@ import {
   displayColumnDefOptions,
   ScrollableTableContainer,
 } from "./tableConstants";
-import { MenuButton } from "../../MenuButton";
 import { MoreIcon } from "../../icons.generated";
 import { RowActions } from "./RowActions";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";

package/src/labs/DataView/TableSettings.tsx

@@ -17,8 +17,7 @@ import { useTranslation } from "react-i18next";
 
 import { densityValues } from "./constants";
 import { ListIcon, ShowIcon } from "../../icons.generated";
-import { MenuButton } from "../../MenuButton";
-import { MenuItem } from "../../MenuItem";
+import { MenuButton, MenuItem } from "../../Buttons";
 import { TableLayoutProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {

package/src/labs/DatePicker.tsx

@@ -32,7 +32,7 @@ import { DateTime } from "luxon";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import styled from "@emotion/styled";
 
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,