Skip to content

Conversation

@laurkim
Copy link
Contributor

@laurkim laurkim commented Jul 8, 2022

Typography foundations feature branch for alpha release.

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

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

@github-actions
Copy link
Contributor

github-actions bot commented Jul 8, 2022

size-limit report 📦

Path Size
polaris-react-cjs 199.25 KB (+0.21% 🔺)
polaris-react-esm 128.63 KB (+0.33% 🔺)
polaris-react-esnext 182.64 KB (+0.61% 🔺)
polaris-react-css 40.47 KB (+0.88% 🔺)

@alex-page alex-page force-pushed the main branch 7 times, most recently from a3a40bb to 0281d22 Compare July 14, 2022 05:31
@aveline aveline changed the title [Typography foundations] Add Text component [Typography foundations] Release alpha Text component Jul 14, 2022
@aveline aveline changed the base branch from main to next July 19, 2022 20:54
@aveline aveline changed the base branch from next to main July 19, 2022 20:54
@aveline aveline changed the base branch from main to next July 19, 2022 21:07
@sam-b-rose sam-b-rose force-pushed the next branch 2 times, most recently from 5a60c65 to 7de0596 Compare July 19, 2022 21:35
@laurkim laurkim force-pushed the typography-foundations-text-component branch 4 times, most recently from dc2fb62 to 6ad7601 Compare July 20, 2022 18:42
@chazdean
Copy link
Contributor

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @chazdean! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@aveline
Copy link
Contributor

aveline commented Jul 27, 2022

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @aveline! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@laurkim
Copy link
Contributor Author

laurkim commented Jul 29, 2022

Failure re: CustomProperties UI test will be resolved once this PR is merged and our feature branch is updated

@laurkim laurkim force-pushed the typography-foundations-text-component branch from 5e90fe1 to f142efb Compare July 29, 2022 16:12
laurkim and others added 14 commits July 29, 2022 12:15
* [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]>
* 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
…` 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]>
* 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]>
…ents (#6747)

* [Typography foundations] Add tests for `Text` component

* [Typography foundations] Add tests for `InlineCode` component
* Update `README` with mapping guidance

* Move text mappings to styleguide

* Add `VisuallyHidden` to `Text` mapping

Co-authored-by: Alex Page <[email protected]>
* 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]>
…#6797)

* Update Text.tsx

* Remove forced 'block' styling

* Delete changeset
@laurkim laurkim force-pushed the typography-foundations-text-component branch from f142efb to 6339164 Compare July 29, 2022 16:16
@laurkim laurkim marked this pull request as ready for review July 29, 2022 16:42
@laurkim laurkim merged commit c9c940c into next Jul 29, 2022
@laurkim laurkim deleted the typography-foundations-text-component branch July 29, 2022 18:17
aaronccasanova added a commit that referenced this pull request Aug 2, 2022
laurkim added a commit that referenced this pull request Aug 23, 2022
* [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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants