diff --git a/.changeset/twelve-lizards-act.md b/.changeset/twelve-lizards-act.md
new file mode 100644
index 00000000000..8fa35f9b170
--- /dev/null
+++ b/.changeset/twelve-lizards-act.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added optional prop `TextDecorationLine` to `Text` to include a line-through decoration
diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
index d210b5fbff0..992907b1da5 100644
--- a/polaris-react/src/components/Text/Text.scss
+++ b/polaris-react/src/components/Text/Text.scss
@@ -241,3 +241,7 @@
.numeric {
font-variant-numeric: tabular-nums lining-nums;
}
+
+.line-through {
+ text-decoration-line: line-through;
+}
diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx
index b222f8b8191..d0b5c26af0b 100644
--- a/polaris-react/src/components/Text/Text.stories.tsx
+++ b/polaris-react/src/components/Text/Text.stories.tsx
@@ -146,3 +146,11 @@ export const InADefinitionList = () => (
);
+
+export const WithTextDecoration = () => (
+
+
+ $100.00
+
+
+);
diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx
index 44f642744c8..af1078a125e 100644
--- a/polaris-react/src/components/Text/Text.tsx
+++ b/polaris-react/src/components/Text/Text.tsx
@@ -37,6 +37,8 @@ type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
type Color = 'success' | 'critical' | 'warning' | 'subdued' | 'text-inverse';
+type TextDecorationLine = 'line-through';
+
export interface TextProps {
/** Adjust horizontal alignment of text */
alignment?: Alignment;
@@ -60,6 +62,8 @@ export interface TextProps {
variant?: Variant;
/** Visually hide the text */
visuallyHidden?: boolean;
+ /** Add a line-through to the text */
+ textDecorationLine?: TextDecorationLine;
}
export const Text = ({
@@ -74,6 +78,7 @@ export const Text = ({
truncate = false,
variant,
visuallyHidden = false,
+ textDecorationLine,
}: TextProps) => {
const Component = as || (visuallyHidden ? 'span' : 'p');
@@ -88,6 +93,7 @@ export const Text = ({
numeric && styles.numeric,
truncate && styles.truncate,
visuallyHidden && styles.visuallyHidden,
+ textDecorationLine && styles[textDecorationLine],
);
return (
diff --git a/polaris-react/src/components/Text/tests/Text.test.tsx b/polaris-react/src/components/Text/tests/Text.test.tsx
index f09c666bd41..8062b4dfdde 100644
--- a/polaris-react/src/components/Text/tests/Text.test.tsx
+++ b/polaris-react/src/components/Text/tests/Text.test.tsx
@@ -112,4 +112,18 @@ describe('', () => {
});
});
});
+
+ describe('textDecoration', () => {
+ it('adds text decoration line-through when passed', () => {
+ const headingText = mountWithApp(
+
+ {text}
+ ,
+ );
+
+ expect(headingText).toContainReactComponent('p', {
+ className: expect.stringContaining('line-through'),
+ });
+ });
+ });
});
diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md
index e1a06c08cac..d692b560841 100644
--- a/polaris.shopify.com/content/components/typography/text.md
+++ b/polaris.shopify.com/content/components/typography/text.md
@@ -44,6 +44,10 @@ examples:
title: Inheritance
description: >-
Inherits props from a parent Text container
+ - fileName: text-decoration.tsx
+ title: Decoration
+ description: >-
+ Use to define text decoration
---
## Variant tokens
diff --git a/polaris.shopify.com/pages/examples/text-decoration.tsx b/polaris.shopify.com/pages/examples/text-decoration.tsx
new file mode 100644
index 00000000000..4937a736cb9
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/text-decoration.tsx
@@ -0,0 +1,15 @@
+import {Text, LegacyStack} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function TextExample() {
+ return (
+
+
+ $100.00
+
+
+ );
+}
+
+export default withPolarisExample(TextExample);