[Typography foundations] Add README for new Text component

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

@@ -1,8 +1,8 @@
 .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);
 }

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

@@ -31,66 +31,72 @@ Typography helps establish hierarchy and communicate important content by creati
 
 ## Examples
 
-### Display small
+### Heading small
 
-Use to create a small display text.
+Use to create a small heading text.
 
 ```jsx
-<Text variant="displaySm">Good evening, Dominic.</Text>
+<Text variant="headingSm" as="h6">
+  Online store dashboard
+</Text>
 ```
 
-### Display medium
+### Heading medium
 
-Use to create a medium display text.
+Use to create a medium heading text.
 
 ```jsx
-<Text variant="displayMd">Good evening, Dominic.</Text>
+<Text variant="headingMd" as="h6">
+  Online store dashboard
+</Text>
 ```
 
-### Display large
+### Heading large
 
-Use to create a large display text.
+Use to create a large heading text.
 
 ```jsx
-<Text variant="displayLg">Good evening, Dominic.</Text>
+<Text variant="headingLg" as="h5">
+  Online store dashboard
+</Text>
 ```
 
-### Heading small
+### Heading extra large
 
-Use to create a small heading text.
+Use to create an extra large heading text.
 
 ```jsx
-<Text variant="headingSm" as="h6">
+<Text variant="headingXl" as="h4">
   Online store dashboard
 </Text>
 ```
 
-### Heading medium
+### Heading 2xl
 
-Use to create a medium heading text.
+Use to create a 2xl heading text.
 
 ```jsx
-<Text variant="headingMd" as="h5">
+<Text variant="heading2xl" as="h3">
   Online store dashboard
 </Text>
 ```
 
-### Heading large
+### Heading 3xl
 
-Use to create a large heading text.
+Use to create a 3xl heading text.
 
 ```jsx
-<Text variant="headingLg" as="h4">
+<Text variant="heading3xl" as="h2">
   Online store dashboard
 </Text>
 ```
 
-### Heading extra large
+### Heading 4xl
 
-Use to create an extra large heading text.
+Use to create a 4xl heading text.
 
 ```jsx
-<Text variant="headingXl" as="h3">
+<Text variant="heading4xl" as="h1">
   Online store dashboard
 </Text>
 ```

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

@@ -67,22 +67,6 @@
   font-weight: var(--p-font-weight-bold);
 }
 
-.displaySm {
-  font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-5);
-}
-
-.displayMd {
-  font-size: var(--p-font-size-600);
-  line-height: var(--p-font-line-height-6);
-}
-
-.displayLg {
-  font-size: var(--p-font-size-700);
-  font-weight: var(--p-font-weight-semibold);
-  line-height: var(--p-font-line-height-7);
-}
-
 .headingSm {
   font-size: var(--p-font-size-75);
   line-height: var(--p-font-line-height-1);
@@ -103,6 +87,21 @@
   line-height: var(--p-font-line-height-3);
 }
 
+.heading2xl {
+  font-size: var(--p-font-size-500);
+  line-height: var(--p-font-line-height-5);
+}
+
+.heading3xl {
+  font-size: var(--p-font-size-600);
+  line-height: var(--p-font-line-height-6);
+}
+
+.heading4xl {
+  font-size: var(--p-font-size-700);
+  line-height: var(--p-font-line-height-7);
+}
+
 .bodySm {
   font-size: var(--p-font-size-75);
   line-height: var(--p-font-line-height-1);

polaris-react/src/components/Text/Text.tsx

@@ -7,13 +7,13 @@ import styles from './Text.scss';
 type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
 
 type Variant =
-  | 'displaySm'
-  | 'displayMd'
-  | 'displayLg'
   | 'headingSm'
   | 'headingMd'
   | 'headingLg'
   | 'headingXl'
+  | 'heading2xl'
+  | 'heading3xl'
+  | 'heading4xl'
   | 'bodySm'
   | 'bodyMd'
   | 'bodyLg';
@@ -24,6 +24,19 @@ type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 type Color = 'success' | 'critical' | 'warning' | 'subdued';
 
+const VariantFontWeightMapping: {[V in Variant]: FontWeight} = {
+  headingSm: 'bold',
+  headingMd: 'semibold',
+  headingLg: 'semibold',
+  headingXl: 'semibold',
+  heading2xl: 'semibold',
+  heading3xl: 'semibold',
+  heading4xl: 'bold',
+  bodySm: 'regular',
+  bodyMd: 'regular',
+  bodyLg: 'regular',
+};
+
 export interface TextProps {
   /** Adjust horizontal alignment of text */
   alignment?: Alignment;
@@ -48,7 +61,7 @@ export const Text = ({
   as,
   children,
   color,
-  fontWeight = 'regular',
+  fontWeight,
   truncate = false,
   variant,
   visuallyHidden = false,
@@ -58,7 +71,7 @@ export const Text = ({
   const className = classNames(
     styles.root,
     styles[variant],
-    fontWeight && styles[fontWeight],
+    fontWeight ? styles[fontWeight] : styles[VariantFontWeightMapping[variant]],
     (alignment || truncate) && styles.block,
     alignment && styles[alignment],
     color && styles[color],

polaris.shopify.com/content/components/text.md

@@ -22,18 +22,6 @@ status:
   value: Alpha
   message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
 examples:
-  - fileName: text-display-small.tsx
-    title: Display small
-    description: >-
-      Use to create a small display text.
-  - fileName: text-display-medium.tsx
-    title: Display medium
-    description: >-
-      Use to create a medium display text.
-  - fileName: text-display-large.tsx
-    title: Display large
-    description: >-
-      Use to create a large display text.
   - fileName: text-heading-small.tsx
     title: Heading small
     description: >-
@@ -50,6 +38,18 @@ examples:
     title: Heading extra large
     description: >-
       Use to create an extra large heading text.
+  - fileName: text-heading-2xl.tsx
+    title: Heading 2xl
+    description: >-
+      Use to create a 2xl heading text.
+  - fileName: text-heading-3xl.tsx
+    title: Heading 3xl
+    description: >-
+      Use to create a 3xl heading text.
+  - fileName: text-heading-4xl.tsx
+    title: Heading 4xl
+    description: >-
+      Use to create a 4xl heading text.
   - fileName: text-body-small.tsx
     title: Body small
     description: >-

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

@@ -0,0 +1,14 @@
+import { Text } from "@shopify/polaris";
+import React from "react";
+import { withPolarisExample } from "../../components/PolarisExamplePage";
+
+function TextExample() {
+  return (
+    <Text variant="heading2xl" as="h3">
+      {" "}
+      Online store dashboard
+    </Text>
+  );
+}
+
+export default withPolarisExample(TextExample);

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

@@ -0,0 +1,14 @@
+import { Text } from "@shopify/polaris";
+import React from "react";
+import { withPolarisExample } from "../../components/PolarisExamplePage";
+
+function TextExample() {
+  return (
+    <Text variant="heading3xl" as="h2">
+      {" "}
+      Online store dashboard
+    </Text>
+  );
+}
+
+export default withPolarisExample(TextExample);

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

@@ -0,0 +1,14 @@
+import { Text } from "@shopify/polaris";
+import React from "react";
+import { withPolarisExample } from "../../components/PolarisExamplePage";
+
+function TextExample() {
+  return (
+    <Text variant="heading4xl" as="h1">
+      {" "}
+      Online store dashboard
+    </Text>
+  );
+}
+
+export default withPolarisExample(TextExample);

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

@@ -4,7 +4,7 @@ import { withPolarisExample } from "../../components/PolarisExamplePage";
 
 function TextExample() {
   return (
-    <Text variant="headingXl" as="h6">
+    <Text variant="headingXl" as="h4">
       {" "}
       Online store dashboard
     </Text>

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

@@ -4,7 +4,7 @@ import { withPolarisExample } from "../../components/PolarisExamplePage";
 
 function TextExample() {
   return (
-    <Text variant="headingLg" as="h6">
+    <Text variant="headingLg" as="h5">
       {" "}
       Online store dashboard
     </Text>