feat(OutputField): add truncate prop for overflowing values

src/components/OutputField/OutputField.scss

@@ -8,4 +8,13 @@
   .p-form__control {
     margin-top: 0.25rem;
   }
+
+  // "output" is inline by default, text-overflow needs a block box to clip against.
+  .output-field-truncate {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

src/components/OutputField/OutputField.stories.tsx

@@ -31,6 +31,11 @@ const meta: Meta<typeof OutputField> = {
         type: "boolean",
       },
     },
+    truncate: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 
   args: {
@@ -63,3 +68,12 @@ export const Required: Story = {
     required: true,
   },
 };
+
+export const Truncate: Story = {
+  name: "Truncate",
+  args: {
+    value:
+      "a-very-long-value-that-should-be-truncated-with-an-ellipsis-when-it-overflows",
+    truncate: true,
+  },
+};

src/components/OutputField/OutputField.test.tsx

@@ -15,3 +15,17 @@ it("renders an OutputField", () => {
   );
   expect(screen.getByRole("status", { name: "Label" })).toBeInTheDocument();
 });
+
+it("truncates the value and shows it in a title attribute", () => {
+  render(
+    <OutputField
+      label="Label"
+      id="output-field"
+      value="Output value"
+      truncate
+    />,
+  );
+  const output = screen.getByRole("status", { name: "Label" });
+  expect(output).toHaveClass("output-field-truncate");
+  expect(output).toHaveAttribute("title", "Output value");
+});

src/components/OutputField/OutputField.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from "react";
 import Field from "../Field";
 import "./OutputField.scss";
+import classNames from "classnames";
 
 export type Props = {
   /**
@@ -23,6 +24,10 @@ export type Props = {
    * Whether the output field is required.
    */
   required?: boolean;
+  /**
+   * Whether the value should be truncated with an ellipsis when it overflows, showing the full value in a title tooltip.
+   */
+  truncate?: boolean;
 };
 
 /**
@@ -35,6 +40,7 @@ export const OutputField: FC<Props> = ({
   value,
   help,
   required,
+  truncate,
 }) => {
   return (
     <Field
@@ -45,7 +51,13 @@ export const OutputField: FC<Props> = ({
       className="output-field"
       required={required}
     >
-      <output id={id} className="mono-font u-sv2">
+      <output
+        id={id}
+        title={truncate ? value : undefined}
+        className={classNames("mono-font", "u-sv2", {
+          "output-field-truncate": truncate,
+        })}
+      >
         <b>{value}</b>
       </output>
     </Field>