Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Text] Remove headingXs and heading4xl and migrate usage #10771

Merged
merged 3 commits into from
Sep 28, 2023
Merged

[Text] Remove headingXs and heading4xl and migrate usage #10771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56463fa
[Text] Remove `headingXs` and `heading4xl` types on `variant` prop
laurkim Sep 28, 2023
beeaea0
Manually migrate `Text` variant `headingXs` to `headingSm`
laurkim Sep 28, 2023
5b4121d
Manually migrate `Text` variant `heading4xl` to `heading3xl`
laurkim Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions polaris-react/src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function All() {
<Box paddingBlockEnd="200">
<BlockStack gap="300">
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
Default
</Text>
<InlineStack gap="200" blockAlign="center">
Expand All @@ -74,7 +74,7 @@ export function All() {
</InlineStack>
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With customer
</Text>
<InlineStack gap="200" blockAlign="center">
Expand All @@ -84,33 +84,33 @@ export function All() {
</InlineStack>
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With image
</Text>
<InlineStack gap="200" blockAlign="center">
<Image />
</InlineStack>
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With icon (all styles)
</Text>
<IconColorsSizes />
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With default initials (all styles)
</Text>
<InitialsColorsSizes />
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With long initials (all styles)
</Text>
<InitialsLong />
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
With long and wide initials
</Text>
<BlockStack gap="200">
Expand Down
8 changes: 4 additions & 4 deletions polaris-react/src/components/Badge/Badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export function All() {
Size: {sizeLabel}
</Text>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
Tone only
</Text>
<InlineStack gap="200">
Expand All @@ -155,7 +155,7 @@ export function All() {
</InlineStack>
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
Tone with progress
</Text>
{progressEntries.map(([progress]) => (
Expand All @@ -176,7 +176,7 @@ export function All() {
{/* Remove `size` condition when micro icons are available */}
{size === 'large' && (
<BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
Tone with icon
</Text>
<InlineStack gap="200">
Expand All @@ -195,7 +195,7 @@ export function All() {
)}
{/* TODO: Re-enable the following examples when designs are available (post se23) */}
{/* <BlockStack gap="200">
<Text as="h2" variant="headingXs">
<Text as="h2" variant="headingSm">
Tone with icon only
</Text>
<InlineStack gap="200">
Expand Down
8 changes: 4 additions & 4 deletions polaris-react/src/components/Divider/Divider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ export function Default() {
export function WithBorderStyles() {
return (
<BlockStack gap="500">
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Default
</Text>
<Divider />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Border
</Text>
<Divider borderColor="border" />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Border inverse
</Text>
<Divider borderColor="border-inverse" />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Transparent
</Text>
<Divider borderColor="transparent" />
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/Listbox/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function Header({children}: HeaderProps) {
paddingBlockEnd="200"
paddingInlineEnd="400"
>
<Text as="span" variant="headingXs" tone="subdued">
<Text as="span" variant="headingSm" tone="subdued">
{children}
</Text>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('Header', () => {
expect(header).toContainReactComponent(Box);
expect(header.find(Box)).toContainReactComponent(Text, {
as: 'span',
variant: 'headingXs',
variant: 'headingSm',
tone: 'subdued',
});
});
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/OptionList/OptionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export function OptionList({
paddingInlineEnd="150"
borderColor="border-subdued"
>
<Text as={titleLevel} variant="headingXs">
<Text as={titleLevel} variant="headingSm">
{title}
</Text>
</Box>
Expand Down
4 changes: 2 additions & 2 deletions polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
}}
>
<div className={styles.OutputBubble}>
<Text as="span" variant="headingXs" alignment="center">
<Text as="span" variant="headingSm" alignment="center">
{value[0]}
</Text>
</div>
Expand All @@ -208,7 +208,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
}}
>
<div className={styles.OutputBubble}>
<Text as="span" variant="headingXs" alignment="center">
<Text as="span" variant="headingSm" alignment="center">
{value[1]}
</Text>
</div>
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function SingleThumb(props: SingleThumbProps) {
const outputMarkup = !disabled && output && (
<output htmlFor={id} className={styles.Output}>
<div className={styles.OutputBubble}>
<Text as="span" variant="headingXs" alignment="center">
<Text as="span" variant="headingSm" alignment="center">
{clampedValue}
</Text>
</div>
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/Sheet/Sheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ export function WithSearchableListbox() {
marginBottom: 'var(--p-space-200)',
}}
>
<Text as="h3" variant="headingXs" tone="subdued">
<Text as="h3" variant="headingSm" tone="subdued">
Action
</Text>
<Button
Expand Down
9 changes: 0 additions & 9 deletions polaris-react/src/components/Text/Text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,6 @@
line-height: var(--p-text-heading-sm-font-line-height);
}

.headingXs {
font-weight: var(--p-font-weight-semibold);
@include _headingSm;
}

.headingSm {
font-weight: var(--p-text-heading-sm-font-weight);
@include _headingSm;
Expand Down Expand Up @@ -125,10 +120,6 @@
@include _heading3xl;
}

.heading4xl {
@include _heading3xl;
}

.bodySm {
font-size: var(--p-text-body-sm-font-size);
font-weight: var(--p-text-body-sm-font-weight);
Expand Down
6 changes: 0 additions & 6 deletions polaris-react/src/components/Text/Text.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ export default {

export const Variants = () => (
<LegacyStack vertical>
<Text as="h1" variant="heading4xl">
Text with Heading4xl variant
</Text>
<Text as="h2" variant="heading3xl">
Text with Heading3xl variant
</Text>
Expand All @@ -29,9 +26,6 @@ export const Variants = () => (
<Text as="h6" variant="headingSm">
Text with HeadingSm variant
</Text>
<Text as="h6" variant="headingXs">
Text with HeadingXs variant
</Text>
<Text as="p" variant="bodyLg">
Text with BodyLg variant
</Text>
Expand Down
2 changes: 0 additions & 2 deletions polaris-react/src/components/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,12 @@ type Element =
| 'legend';

type Variant =
| 'headingXs'
| 'headingSm'
| 'headingMd'
| 'headingLg'
| 'headingXl'
| 'heading2xl'
| 'heading3xl'
| 'heading4xl'
| 'bodySm'
| 'bodyMd'
| 'bodyLg';
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/Text/tests/Text.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('<Text />', () => {

it('renders its children', () => {
const headingText = mountWithApp(
<Text as="h1" variant="heading4xl">
<Text as="h1" variant="heading3xl">
{text}
</Text>,
);
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/content/components/deprecated/display-text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ Display styles make a bold visual statement. Use them to create impact when the

```diff
- <DisplayText size="extraLarge">Sales this year</DisplayText>
+ <Text variant="heading4xl" as="p">Sales this year</Text>
+ <Text variant="heading3xl" as="p">Sales this year</Text>
```

---
2 changes: 1 addition & 1 deletion polaris.shopify.com/content/components/deprecated/subheading.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Subheadings are used for the title of any sub-sections in top-level page section

```diff
- <Subheading>Accounts</Subheading>
+ <Text variant="headingXs" as="h3">Accounts</Text>
+ <Text variant="headingSm" as="h3">Accounts</Text>
```

---
6 changes: 2 additions & 4 deletions polaris.shopify.com/content/components/typography/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,12 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font)

| Variant | Font size token | px value | rem value | Font line height token | Font weight token | Reponsive |
| ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | --------- |
| `heading4Xl` | `--p-font-size-700` | 40 | 2.5 | `--p-line-height-7` | `--p-font-weight-bold` | Yes |
| `heading3Xl` | `--p-font-size-600` | 32 | 2 | `--p-line-height-6` | `--p-font-weight-semibold` | Yes |
| `heading2Xl` | `--p-font-size-500` | 28 | 1.75 | `--p-line-height-5` | `--p-font-weight-semibold` | Yes |
| `headingXl` | `--p-font-size-400` | 24 | 1.5 | `--p-line-height-4` | `--p-font-weight-semibold` | Yes |
| `headingLg` | `--p-font-size-300` | 20 | 1.25 | `--p-line-height-3` | `--p-font-weight-semibold` | Yes |
| `headingMd` | `--p-font-size-200` | 16 | 1 | `--p-line-height-3` | `--p-font-weight-semibold` | No |
| `headingSm` | `--p-font-size-100` | 14 | 0.875 | `--p-line-height-2` | `--p-font-weight-semibold` | No |
| `headingXs` | `--p-font-size-75` | 12 | 0.75 | `--p-line-height-1` | `--p-font-weight-semibold` | No |
| `bodyLg` | `--p-font-size-200` | 16 | 1 | `--p-line-height-2` | `--p-font-weight-regular` | No |
| `bodyMd` | `--p-font-size-100` | 14 | 0.875 | `--p-line-height-2` | `--p-font-weight-regular` | No |
| `bodySm` | `--p-font-size-75` | 12 | 0.75 | `--p-line-height-1` | `--p-font-weight-regular` | No |
Expand Down Expand Up @@ -113,7 +111,7 @@ These are suggested replacements for existing text style components, but ultimat

```diff
- <DisplayText size="extraLarge">Sales this year</DisplayText>
+ <Text variant="heading4xl" as="p">Sales this year</Text>
+ <Text variant="heading3xl" as="p">Sales this year</Text>
```

### Heading
Expand All @@ -127,7 +125,7 @@ These are suggested replacements for existing text style components, but ultimat

```diff
- <Subheading>Accounts</Subheading>
+ <Text variant="headingXs" as="h3">Accounts</Text>
+ <Text variant="headingSm" as="h3">Accounts</Text>
```

### Caption
Expand Down
8 changes: 4 additions & 4 deletions polaris.shopify.com/content/design/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,19 +119,19 @@ Body styles are used within components and blocks of text.

Heading styles are used to create various levels of hierarchy on the page. These styles range in size and weight. Using a blend of the two can help distinguish content and guide merchants through the page.

`headingXl` - `heading4xl` styles are typically used for numerals and key moments in the merchant’s journey. As the largest text on the screen, use these styles sparingly within a single page. These styles should draw the merchant’s attention to important key pieces of information.
`headingXl` - `heading3xl` styles are typically used for numerals and key moments in the merchant’s journey. As the largest text on the screen, use these styles sparingly within a single page. These styles should draw the merchant’s attention to important key pieces of information.

![An image showing how heading styles are applied](/images/design/typography/text-heading-example-01@2x.png)

`headingXs` - `headingLg` styles are most commonly used for card, section, or page titles.
`headingSm` - `headingLg` styles are most commonly used for card, section, or page titles.

![An image showing how large heading styles are applied](/images/design/typography/text-heading-example-02@2x.png)

### Responsive styles

Large heading styles, `headingLg` - `heading4xl`, are responsive and will change size at different breakpoints.
Large heading styles, `headingLg` - `heading3xl`, are responsive and will change size at different breakpoints.

Small heading styles, `headingXs` - `headingMd`, and body styles will remain the same size regardless of breakpoint unless specified. You can choose to adjust the size of these styles at specific breakpoints when needed. For instance, you may need to increase the size of important body text on smaller screens.
Small heading styles, `headingSm` - `headingMd`, and body styles will remain the same size regardless of breakpoint unless specified. You can choose to adjust the size of these styles at specific breakpoints when needed. For instance, you may need to increase the size of important body text on smaller screens.

<video width="100%" height="auto" controls autoPlay muted loop>
<source
Expand Down
8 changes: 4 additions & 4 deletions polaris.shopify.com/pages/examples/divider-with-border-color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ function DividerWithBorderColorExample() {
return (
<Card>
<BlockStack gap="500">
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Default
</Text>
<Divider />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Border
</Text>
<Divider borderColor="border" />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Border inverse
</Text>
<Divider borderColor="border-inverse" />
<Text as="h1" variant="headingXs">
<Text as="h1" variant="headingSm">
Transparent
</Text>
<Divider borderColor="transparent" />
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function LegacyCardExample() {
title={
<LegacyStack>
<Icon source={ProductsMajor} />
<Text variant="headingXs" as="h3">
<Text variant="headingSm" as="h3">
New Products
</Text>
</LegacyStack>
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ function SheetWithSearchableListboxExample() {
marginBottom: 'var(--p-space-200)',
}}
>
<Text variant="headingXs" as="h3" tone="subdued">
<Text variant="headingSm" as="h3" tone="subdued">
Action
</Text>
<Button
Expand Down
6 changes: 0 additions & 6 deletions polaris.shopify.com/pages/examples/text-heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
function TextExample() {
return (
<LegacyStack vertical>
<Text variant="heading4xl" as="h1">
Online store dashboard
</Text>
<Text variant="heading3xl" as="h2">
Online store dashboard
</Text>
Expand All @@ -26,9 +23,6 @@ function TextExample() {
<Text variant="headingSm" as="h6">
Online store dashboard
</Text>
<Text variant="headingXs" as="h6">
Online store dashboard
</Text>
</LegacyStack>
);
}
Expand Down