From c078d5d85420fe30f3cd19d2e801ae5b2ad4484c Mon Sep 17 00:00:00 2001 From: Natalia Ramirez Ostos Date: Tue, 1 Aug 2023 13:56:41 -0400 Subject: [PATCH] [Text] Add optional decoration prop to Text for underline and line-through styles (#9697) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? To avoid adding custom CSS in web for this common use-case. ### WHAT is this pull request doing? - Adds the optional prop `textDecorationLine` to the `Text` component to allow passing the line-through style to the text which is a common custom CSS case in the web repo (32 cases of line-through). - Adds tests for these new style and the storybook story. - Adds example to the style guide. ![Screenshot 2023-07-18 at 5 13 01 PM](https://github.com/Shopify/polaris/assets/22918527/11fa23ea-9cae-4d84-8c3c-da6ed875fa75) ![Screenshot 2023-07-19 at 1 28 05 PM](https://github.com/Shopify/polaris/assets/22918527/66f2d21c-d07d-409e-a912-90939a793626) ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)
Copy-paste this code in playground/Playground.tsx: ```jsx import React from 'react'; import {Page, LegacyStack, Text} from '../src'; export function Playground() { return ( Sales this year ); } ```
### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide Co-authored-by: Ananya Neogi --- .changeset/twelve-lizards-act.md | 5 +++++ polaris-react/src/components/Text/Text.scss | 4 ++++ .../src/components/Text/Text.stories.tsx | 8 ++++++++ polaris-react/src/components/Text/Text.tsx | 6 ++++++ .../src/components/Text/tests/Text.test.tsx | 14 ++++++++++++++ .../content/components/typography/text.md | 4 ++++ .../pages/examples/text-decoration.tsx | 15 +++++++++++++++ 7 files changed, 56 insertions(+) create mode 100644 .changeset/twelve-lizards-act.md create mode 100644 polaris.shopify.com/pages/examples/text-decoration.tsx 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);