feat(OutputField): add truncate prop for overflowing values

[omarelkashef]

Done

• Added an optional truncate prop to OutputField.
• Applied a dedicated truncation class to the <output> element when enabled.
• Set the full output value as the title attribute when truncation is enabled.
• Added a Storybook Truncate example and test coverage for the class and title attribute.
• Fixed overflowing values by making the normally inline <output> a bounded block box, allowing text-overflow: ellipsis to apply.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

Open the OutputField Truncate story and verify a long value is displayed on one line, clipped with an ellipsis when constrained, and exposes the complete value in its native title tooltip.

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Render an OutputField with a long value and truncate.
• Constrain the field container to a width narrower than the value.
• Verify the value is displayed with an ellipsis rather than overflowing.
• Hover the value and verify the native title tooltip shows the complete value.
• Render the same field without truncate and verify its existing display behavior is unchanged.

Percy steps

• The new OutputField Truncate Storybook story is expected to display a single-line, ellipsized long value.

[edlerd]

Suggested change

	"output-field-truncate": truncate,
	"u-truncate": truncate,

Can we use the existing helper from vanilla?