diff --git a/packages/react-component-library/src/components/Text/Text.test.tsx b/packages/react-component-library/src/components/Text/Text.test.tsx
index d7fdc5027..f13feb276 100644
--- a/packages/react-component-library/src/components/Text/Text.test.tsx
+++ b/packages/react-component-library/src/components/Text/Text.test.tsx
@@ -15,6 +15,16 @@ it('sets the line height', () => {
expect(container.firstChild).toHaveStyleRule('line-height', '24px')
})
+it('sets the arbitrary attribute', () => {
+ const { container } = render(Content)
+ expect(container.firstChild).toHaveAttribute('data-arbitrary', 'value')
+})
+
+it('sets the id attribute', () => {
+ const { container } = render(Content)
+ expect(container.firstChild).toHaveAttribute('id', 'value')
+})
+
it('sets the size for default body text', () => {
const result = getTextStyles('p', 'body')
expect(result.fontSize).toEqual(fontSize('m'))
diff --git a/packages/react-component-library/src/components/Text/Text.tsx b/packages/react-component-library/src/components/Text/Text.tsx
index 60b59a0c6..29b989807 100644
--- a/packages/react-component-library/src/components/Text/Text.tsx
+++ b/packages/react-component-library/src/components/Text/Text.tsx
@@ -19,11 +19,14 @@ export interface TextEProps extends ComponentWithClass {
* The type of element to use for the root node, `'p'` by default.
*/
el?: TextElement
+ /**
+ * Optional id attribute for the root node
+ */
+ id?: string
/*
The display variant to use, 'body' by default
*/
variant?: TextVariant
-
/**
* Optional CSS color value for the text color
*/
@@ -44,9 +47,9 @@ export const TextE = ({
el = 'p',
color,
backgroundColor = 'none',
- className,
variant,
wordWrap = true,
+ ...rest
}: TextEProps) => {
const { fontSize, lineHeight, defaultColor, element, display } =
getTextStyles(el, variant)
@@ -57,7 +60,6 @@ export const TextE = ({
return (
{children}