Release/10.4.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "10.4.0",
+  "version": "10.4.1-2",
   "description": "React UI component library for IPG web applications",
   "author": {
     "name": "IPG-Automotive-UK"

src/Card/DetailCard/DetailCard.tsx

@@ -1,12 +1,12 @@
-import { Box, Card, Stack } from "@mui/material";
+import { Box, Card, Stack, Typography } from "@mui/material";
 import { DetailCardHeaderProps, DetailCardProps } from "./DetailCard.types";
 import { FileDetails, Infographic } from "../../CardContent";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 
 import LabelChipGroup from "../../LabelSelector/LabelChipGroup/LabelChipGroup";
 import type { LabelChipGroupProps } from "../../LabelSelector/LabelChipGroup/LabelChipGroup.types";
-import NoWrapTypography from "../../NoWrapTypography/NoWrapTypography";
 import { ResizeObserver } from "@juggle/resize-observer";
+import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 
 // TODO: add tests in browser once we are done with the migration to cypress. The old tests live in a txt file in this folder until then.
 
@@ -29,13 +29,13 @@ function DetailCard({
   return (
     <Stack
       className="detail-card-container"
-      mt={1}
-      mb={3}
       sx={{
         display: "flex",
         flexDirection: "column",
         flexGrow: 1,
         height: "100%",
+        mb: 3,
+        mt: 1,
         width
       }}
     >
@@ -55,7 +55,7 @@ function DetailCard({
           overflow: "auto"
         }}
       >
-        <Box ml={0.5}>
+        <Box sx={{ ml: 0.5 }}>
           <Card>
             <Infographic media={media} />
             <FileDetails
@@ -69,9 +69,8 @@ function DetailCard({
           </Card>
         </Box>
         <Stack
-          ml={2}
           spacing={2}
-          sx={{ display: "flex", flexGrow: 1, mr: 0.5, width: "100%" }}
+          sx={{ display: "flex", flexGrow: 1, ml: 2, mr: 0.5, width: "100%" }}
         >
           {content}
         </Stack>
@@ -133,33 +132,37 @@ function DetailCardHeader({
   return (
     <Fragment>
       <Box
-        m={1}
         sx={{
           display: "flex",
           flexDirection: "row",
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          m: 1
         }}
       >
         <Box sx={{ width: headerContentWidth }}>
-          <NoWrapTypography
-            sx={{
-              color: theme =>
-                theme.palette.mode === "dark" ? "white" : "black",
+          <TruncatedTooltip
+            component={Typography}
+            sx={theme => ({
+              color: "black",
               fontSize: 20,
-              fontWeight: 700
-            }}
+              fontWeight: 700,
+              ...theme.applyStyles("dark", {
+                color: "white"
+              })
+            })}
           >
             {title}
-          </NoWrapTypography>
-          <NoWrapTypography
-            sx={{
-              color: theme => theme.palette.text.secondary,
+          </TruncatedTooltip>
+          <TruncatedTooltip
+            component={Typography}
+            sx={theme => ({
+              color: theme.palette.text.secondary,
               fontSize: 14,
               fontWeight: 400
-            }}
+            })}
           >
             {subtitle}
-          </NoWrapTypography>
+          </TruncatedTooltip>
         </Box>
         <Box
           sx={{ display: "flex", flexDirection: "row", gap: 2 }}
@@ -168,7 +171,7 @@ function DetailCardHeader({
           {buttonsStack}
         </Box>
       </Box>
-      <Box mx={1}>
+      <Box sx={{ mx: 1 }}>
         {labels && labels.length > 0 && <LabelChipGroup chips={labelChips} />}
       </Box>
     </Fragment>

src/Card/SummaryCard/SummaryCard.tsx

@@ -7,6 +7,7 @@ import {
   IconButton,
   Popover,
   Stack,
+  Typography,
   cardHeaderClasses
 } from "@mui/material";
 import React, { useState } from "react";
@@ -15,8 +16,8 @@ import { Infographic } from "../../CardContent";
 import LabelChipGroup from "../../LabelSelector/LabelChipGroup/LabelChipGroup";
 import type { LabelChipGroupProps } from "../../LabelSelector/LabelChipGroup/LabelChipGroup.types";
 import { MoreVert } from "@mui/icons-material";
-import NoWrapTypography from "../../NoWrapTypography/NoWrapTypography";
 import { SummaryCardProps } from "./SummaryCard.types";
+import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 
 // TODO: add tests in browser once we are done with the migration to cypress. The old tests live in a txt file in this folder until then.
 
@@ -99,24 +100,26 @@ function SummaryCard({
           }
           disableTypography
           title={
-            <NoWrapTypography
+            <TruncatedTooltip
+              component={Typography}
               sx={{
                 fontSize: 20,
                 fontWeight: 500
               }}
             >
               {title}
-            </NoWrapTypography>
+            </TruncatedTooltip>
           }
           subheader={
-            <NoWrapTypography
+            <TruncatedTooltip
+              component={Typography}
               sx={{
                 fontSize: 14,
                 fontWeight: 400
               }}
             >
               {subtitle}
-            </NoWrapTypography>
+            </TruncatedTooltip>
           }
         />
         <Box

src/Filter/CheckboxFilter/CheckboxFilter.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 
-import { Box, Checkbox, TextField } from "@mui/material";
+import { Box, Checkbox, TextField, Typography } from "@mui/material";
 import { CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
 
 import Autocomplete from "../../Autocomplete/Autocomplete";
 import { CheckboxFilterProps } from "./CheckboxFilter.types";
 import { HTMLAttributes } from "react";
-import NoWrapTypography from "../../NoWrapTypography";
+import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 import { sortFilterOptions } from "../sortFilterOptions";
 
 /**
@@ -84,9 +84,12 @@ function Option(
         icon={<CheckBoxOutlineBlank fontSize="small" />}
         value={option}
       />
-      <NoWrapTypography data-testid="filter-option-label">
+      <TruncatedTooltip
+        component={Typography}
+        data-testid="filter-option-label"
+      >
         {option}
-      </NoWrapTypography>
+      </TruncatedTooltip>
     </Box>
   );
 }

src/Filter/LabelFilter/LabelFilter.tsx

@@ -5,13 +5,14 @@ import {
   AutocompleteRenderGetTagProps,
   Checkbox,
   Stack,
-  TextField
+  TextField,
+  Typography
 } from "@mui/material";
 
 import { Label } from "../../LabelSelector/Label.types";
 import LabelChip from "../../LabelSelector/LabelChip/LabelChip";
 import { LabelFilterProps } from "./LabelFilter.types";
-import NoWrapTypography from "../../NoWrapTypography";
+import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 import { VirtualizedAutocomplete } from "../../Autocomplete/Autocomplete";
 import { sortLabelOptions } from "../sortLabelOptions";
 
@@ -120,10 +121,12 @@ function Option(
         }}
       />
       <Stack direction="column" flexGrow={1} overflow="hidden">
-        <NoWrapTypography>{option.name}</NoWrapTypography>
-        <NoWrapTypography variant="caption">
+        <TruncatedTooltip component={Typography}>
+          {option.name}
+        </TruncatedTooltip>
+        <TruncatedTooltip component={Typography} variant="caption">
           {option.description || "No description"}
-        </NoWrapTypography>
+        </TruncatedTooltip>
       </Stack>
     </li>
   );

src/LabelSelector/LabelChip/LabelChip.tsx

@@ -1,9 +1,16 @@
-import { Chip, Tooltip, alpha, chipClasses, darken } from "@mui/material";
+import {
+  Chip,
+  Tooltip,
+  Typography,
+  alpha,
+  chipClasses,
+  darken
+} from "@mui/material";
 
 import DoneIcon from "@mui/icons-material/Done";
 import { LabelChipProps } from "./LabelChip.types";
-import NoWrapTypography from "../../NoWrapTypography";
 import React from "react";
+import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 
 // component to display a chip with custom colors
 export default function LabelChip({
@@ -26,7 +33,11 @@ export default function LabelChip({
         className="label-chip"
         clickable={clickable}
         icon={selected ? <DoneIcon color="inherit" /> : undefined}
-        label={<NoWrapTypography variant="inherit">{label}</NoWrapTypography>}
+        label={
+          <TruncatedTooltip component={Typography} variant="inherit">
+            {label}
+          </TruncatedTooltip>
+        }
         onClick={clickable ? onClick : undefined}
         sx={{
           "&:hover": {

src/LabelSelector/LabelSelector.jsx

@@ -5,7 +5,8 @@ import {
   Paper,
   Stack,
   TextField,
-  Tooltip
+  Tooltip,
+  Typography
 } from "@mui/material";
 import { Delete, Edit } from "@mui/icons-material";
 import React, { useState } from "react";
@@ -14,8 +15,8 @@ import Checkbox from "../Checkbox";
 import DeleteLabelDialog from "./DeleteLabelDialog/DeleteLabelDialog";
 import EditLabelDialog from "../EditLabelDialog/EditLabelDialog";
 import LabelChip from "./LabelChip/LabelChip";
-import NoWrapTypography from "../NoWrapTypography/NoWrapTypography";
 import PropTypes from "prop-types";
+import TruncatedTooltip from "../TruncatedTooltip/TruncatedTooltip";
 import { VirtualizedAutocomplete } from "../Autocomplete/Autocomplete";
 import { createFilterOptions } from "@mui/material/Autocomplete";
 
@@ -215,11 +216,19 @@ export default function LabelSelector({
                   color: option.color
                 }}
               />
-              <Stack direction="column" flexGrow={1} overflow="hidden">
-                <NoWrapTypography>{option.name}</NoWrapTypography>
-                <NoWrapTypography variant="caption">
+              <Stack
+                direction="column"
+                sx={{
+                  flexGrow: 1,
+                  overflow: "hidden"
+                }}
+              >
+                <TruncatedTooltip component={Typography}>
+                  {option.name}
+                </TruncatedTooltip>
+                <TruncatedTooltip component={Typography} variant="caption">
                   {option.description}
-                </NoWrapTypography>
+                </TruncatedTooltip>
               </Stack>
               <>
                 {editEnabled && (

src/LazyLoadImage/LazyLoadImage.stories.tsx

@@ -3,8 +3,8 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import LazyLoadImage from "./LazyLoadImage";
 import { LazyLoadImageProps } from "./LazyLoadImage.types";
-import NoWrapTypography from "../NoWrapTypography/NoWrapTypography";
 import React from "react";
+import TruncatedTooltip from "../TruncatedTooltip/TruncatedTooltip";
 
 /**
  * Wrapper to lazy load an image
@@ -126,7 +126,7 @@ const FlexSizeComponent: StoryFn<LazyLoadImageProps> = args => {
           transition: "color 0.1s"
         },
         backgroundColor: theme.palette.background.paper,
-        border: `1px solid`,
+        border: `1px solid ${theme.palette.divider}`,
         borderRadius: "6px",
         cursor: "pointer",
         height: "238px",
@@ -144,15 +144,21 @@ const FlexSizeComponent: StoryFn<LazyLoadImageProps> = args => {
         }}
       >
         <Box>
-          <NoWrapTypography
+          <TruncatedTooltip
+            component={Typography}
             variant="h5"
             sx={{
               fontWeight: 700
             }}
           >
             {"Example project code"}
-          </NoWrapTypography>
-          <Typography color="text.secondary" variant="body2">
+          </TruncatedTooltip>
+          <Typography
+            sx={{
+              color: "text.secondary"
+            }}
+            variant="body2"
+          >
             11 Prototype
           </Typography>
         </Box>

src/TextField/TextField.tsx

@@ -4,14 +4,15 @@ import React from "react";
 import { TextFieldProps } from "./TextField.types";
 
 // masked input
-const MaskedTextField = React.forwardRef((props, ref) => (
-  <MaskedInput
-    {...props}
-    mask={[/[1-9]/, /\d/, /\d/, "/", /[1-9]/, /\d/, "R", /[1-9]/, /\d/]}
-    keepCharPositions={true}
-  />
-));
-MaskedTextField.displayName = "MaskedTextField";
+const MaskedTextField = React.forwardRef(function MaskedTextField(props, ref) {
+  return (
+    <MaskedInput
+      {...props}
+      mask={[/[1-9]/, /\d/, /\d/, "/", /[1-9]/, /\d/, "R", /[1-9]/, /\d/]}
+      keepCharPositions={true}
+    />
+  );
+});
 
 /**
  * TextField components are used for collecting user provided information as a string.