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);