[Typography foundations] Add `README` for new Text component #6715

chazdean · 2022-07-21T15:02:18Z

WHY are these changes introduced?

WHAT is this pull request doing?

Creates a README in polaris-react for the new Text component
Adds Text (Alpha) to the list of components in polaris.shopify.com
Adds a Text component page with examples to polaris.shopify.com

Heads-Up!

🛠 The Text component examples currently load without styling as the global style-guide used for polaris.shopify.com has not yet been updated and won't be until the release of the new Text component 🛠

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

github-actions · 2022-07-21T15:06:11Z

size-limit report 📦

Path	Size
polaris-react-cjs	198.78 KB (0%)
polaris-react-esm	128.35 KB (0%)
polaris-react-esnext	182.99 KB (0%)
polaris-react-css	41.1 KB (0%)

…ity (#6700)

polaris-react/src/components/Text/README.md

…hopify/polaris into chaz/add-text-component-readme

polaris.shopify.com/src/pages/examples/text-heading-4xl.tsx

polaris.shopify.com/src/pages/examples/text-heading-3xl.tsx

polaris.shopify.com/src/pages/examples/text-heading-2xl.tsx

Co-authored-by: Alex Page <[email protected]>

polaris.shopify.com/src/pages/examples/text-heading-extra-large.tsx

polaris.shopify.com/src/pages/examples/text-heading-large.tsx

polaris.shopify.com/src/pages/examples/text-heading-medium.tsx

polaris.shopify.com/src/pages/examples/text-heading-small.tsx

…e.tsx Co-authored-by: Alex Page <[email protected]>

Co-authored-by: Alex Page <[email protected]>

alex-page · 2022-07-22T19:53:02Z

polaris-react/src/components/InlineCode/InlineCode.scss

 .Code {
-  background-color: var(--p-surface-subdued);
-  border-radius: var(--p-border-radius-base);
-  border: var(--p-border-base);
+  background-color: var(--p-surface-neutral);
+  border-radius: var(--p-border-radius-05);
  font-family: var(--p-font-family-mono);
-  font-size: 0.9em;
-  padding: 0 var(--p-space-1);
+  font-size: 0.85em;
+  font-weight: var(--p-font-weight-medium);
+  padding: var(--p-space-025) var(--p-space-1);


Should these changes be in this PR or should we just have changes for the site?

It feels like they shouldn't be 🤔 What do you think @laurkim?

These changes shouldn't be, I believe they are part of #6700
Not sure why they snuck in here.

alex-page · 2022-07-22T19:54:16Z

polaris.shopify.com/src/pages/examples/text-body-large.tsx

+import { Text } from "@shopify/polaris";
+import React from "react";
+import { withPolarisExample } from "../../components/PolarisExamplePage";
+
+function TextExample() {
+  return (
+    <Text variant="bodyLg" as="p">
+      Shopify POS is the easiest way to sell your products in person. Available
+      for iPad, iPhone, and Android.
+    </Text>
+  );
+}
+
+export default withPolarisExample(TextExample);


One piece of feedback I have is that "we have too many examples everywhere". I wonder if we could instead of doing an example for each prop, render a couple of useful elements together. @sarahill @laurkim @aveline @chazdean @nayeob-kim

Let's leave this as is for now so we can reconcile it with the mapping guide branch which also has examples. Then we think on how to best approach them.

polaris.shopify.com/src/pages/examples/text-display-large.tsx

…hopify/polaris into chaz/add-text-component-readme

* Create README.md * Add new Text component page * Add Text component examples * Add changeset * Use existing changeset * Update Syntax * [Typography foundations] Update `<InlineCode>` styling for accessibility (#6700) * [Typography foundations] Add fontweight to Text variants (#6698) * Update polaris-readme-loader.js * Update README.md * Update text.md * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris.shopify.com/src/data/components.json Co-authored-by: Lo Kim <[email protected]> * Update component example titles * Update component example file names * [Typography foundations] Refactor `display` variants to `heading2xl-4xl` (#6735) * Create README.md * Add new Text component page * Add Text component examples * Add changeset * Use existing changeset * Update Syntax * Update polaris-readme-loader.js * Update README.md * Update text.md * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris.shopify.com/src/data/components.json Co-authored-by: Lo Kim <[email protected]> * Update component example titles * Update component example file names * Refactor `display` variants to `heading2xl-4xl` * Update polaris.shopify.com/src/pages/examples/text-heading-4xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-3xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-2xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-extra-large.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-large.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-medium.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-small.tsx Co-authored-by: Alex Page <[email protected]> * Remove Text Display examples Co-authored-by: Lo Kim <[email protected]> Co-authored-by: Alex Page <[email protected]>

* [Typography foundations] Add Text component (#6521) * [Typography foundations] Add Text component Co-authored-by: Aveline Thelen <[email protected]> * [Typography foundations] Add changeset * [Typography foundations] Remove variant mapping We expect users to determine element type even if `variant` is passed in, so as to decouple styling from element type. * [Typography foundations] Clean up exports * [Typography foundations] Add color options * [Typography foundations] Add defaults for `as`/`variant` and make `as` required * [Typography foundations] Add support for `visuallyHidden` prop * [Typography foundations] Add prop descriptions * [Typography foundations] Remove `a` as element type * [Typography foundations] Make `variant` required prop * [Typography foundations] Rename colors to align with tokens Co-authored-by: Aveline Thelen <[email protected]> * [Typography foundations] Update type scale and font size tokens (#6574) * Update type scale and font size tokens * Fix font size values * Update line-height tokens * Update token names * Rename typography group to font * Update `font` token group name * [Typography foundations] Add support for code blocks with `InlineCode` component (#6623) * [Typography foundations] Add support for `monospaced` variant and `InlineCode` component * [Typography foundations] Update changeset * [Typography foundations] Use new font tokens * [Typography foundations] Remove InlineCode component * [Typography foundations] Add `code` variant to `Text` * [Typography foundations] Remove `text-style-body` mixin from AppProvider The mixin was causing font-size issues for the Text `code` variation on Safari. * [Typography foundations] Add InlineCode component and remove non-typographic styling from Text Co-authored-by: Alex Page <[email protected]> * [Typography foundations] Remove style changes from AppProvider * Update changeset * [Typography foundations] Update font-size in InlineCode Co-authored-by: Alex Page <[email protected]> * Update changeset * [Typography foundations] Update `<InlineCode>` styling for accessibility (#6700) * [Typography foundations] Add fontweight to Text variants (#6698) * [Typography foundations] Refactor `display` variants to `heading2xl-4xl` (#6735) * [Typography foundations] Add `README` for new Text component (#6715) * Create README.md * Add new Text component page * Add Text component examples * Add changeset * Use existing changeset * Update Syntax * [Typography foundations] Update `<InlineCode>` styling for accessibility (#6700) * [Typography foundations] Add fontweight to Text variants (#6698) * Update polaris-readme-loader.js * Update README.md * Update text.md * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris.shopify.com/src/data/components.json Co-authored-by: Lo Kim <[email protected]> * Update component example titles * Update component example file names * [Typography foundations] Refactor `display` variants to `heading2xl-4xl` (#6735) * Create README.md * Add new Text component page * Add Text component examples * Add changeset * Use existing changeset * Update Syntax * Update polaris-readme-loader.js * Update README.md * Update text.md * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris-react/src/components/Text/README.md Co-authored-by: Lo Kim <[email protected]> * Update polaris.shopify.com/src/data/components.json Co-authored-by: Lo Kim <[email protected]> * Update component example titles * Update component example file names * Refactor `display` variants to `heading2xl-4xl` * Update polaris.shopify.com/src/pages/examples/text-heading-4xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-3xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-2xl.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-extra-large.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-large.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-medium.tsx Co-authored-by: Alex Page <[email protected]> * Update polaris.shopify.com/src/pages/examples/text-heading-small.tsx Co-authored-by: Alex Page <[email protected]> * Remove Text Display examples Co-authored-by: Lo Kim <[email protected]> Co-authored-by: Alex Page <[email protected]> * [Typography foundations] Add tests for `Text` and `InlineCode` components (#6747) * [Typography foundations] Add tests for `Text` component * [Typography foundations] Add tests for `InlineCode` component * Add mappings for `DisplayText` to `Text` component `README` (#6702) * Update `README` with mapping guidance * Move text mappings to styleguide * Add `VisuallyHidden` to `Text` mapping Co-authored-by: Alex Page <[email protected]> * Group text examples on styleguide (#6800) * Group `Text` heading examples * Group `Text` body examples * Group `Text` align examples * Group `font-weight` examples * Group `color` text examples * Update polaris.shopify.com/content/components/text.md Co-authored-by: Sara Hill <[email protected]> * Update polaris.shopify.com/content/components/text.md Co-authored-by: Sara Hill <[email protected]> * Update text color examples * Update text weight examples order Co-authored-by: Sara Hill <[email protected]> * [Typography foundations] Feat/Update Text component to support Labels (#6797) * Update Text.tsx * Remove forced 'block' styling * Delete changeset * Resolve merge conflicts * Fix references to `font` tokens * Update font tokens in styleguide * [Typography foundations] Fix outdated font size token Co-authored-by: Aveline Thelen <[email protected]> Co-authored-by: aveline <[email protected]> Co-authored-by: Alex Page <[email protected]> Co-authored-by: Chaz Dean <[email protected]> Co-authored-by: Sara Hill <[email protected]>

chazdean added 5 commits July 21, 2022 10:57

Create README.md

3c6d4d7

Add new Text component page

6213bdb

Add Text component examples

a766c83

Add changeset

f28e2b2

Use existing changeset

6a1df86

chazdean added #gsd:25298 labels Jul 21, 2022

chazdean self-assigned this Jul 21, 2022

chazdean requested review from aveline, laurkim and sarahill July 21, 2022 15:05

chazdean marked this pull request as ready for review July 21, 2022 15:06

chazdean and others added 3 commits July 21, 2022 11:26

Update Syntax

94d112f

[Typography foundations] Update <InlineCode> styling for accessibil…

436d617

…ity (#6700)

[Typography foundations] Add fontweight to Text variants (#6698)

9bf69f2

chazdean requested a review from alex-page July 21, 2022 17:44

laurkim added the polaris.shopify.com label Jul 22, 2022

chazdean added 3 commits July 22, 2022 09:29

Update polaris-readme-loader.js

602fa58

Update README.md

5fcbf33

Update text.md

8548b86