Skip to content

Commit 20c8cad

Browse files
laurkimsam-b-rose
laurkim
and
sam-b-rose
authored
Replace typography component in stories with Text (#7572)
### WHY are these changes introduced? Resolves #6588. ### WHAT is this pull request doing? Runs the `replace-text-component` migration without the relative flag to update and replace instances where text components are imported from `@shopify/polaris` in the `polaris-react` directory. Related to the [PR](#7530) that replaces relative imports. Co-authored-by: Sam Rose <sam.rose@shopify.com>
1 parent 9f8b651 commit 20c8cad

File tree

19 files changed

+267
-143
lines changed

19 files changed

+267
-143
lines changed

‎.changeset/breezy-rivers-wink.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Replaced usage of text components in component stories with `Text` component

‎polaris-react/src/components/AppProvider/AppProvider.stories.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Page,
1010
ResourceList,
1111
SettingToggle,
12-
TextStyle,
12+
Text,
1313
} from '@shopify/polaris';
1414

1515
export default {
@@ -63,7 +63,9 @@ export function Default() {
6363
return (
6464
<ResourceList.Item id={id} url={url} media={media}>
6565
<h3>
66-
<TextStyle variation="strong">{name}</TextStyle>
66+
<Text variant="bodyMd" fontWeight="bold" as="span">
67+
{name}
68+
</Text>
6769
</h3>
6870
<div>{location}</div>
6971
</ResourceList.Item>
@@ -121,7 +123,9 @@ export function WithI18n() {
121123
return (
122124
<ResourceList.Item id={id} url={url} media={media}>
123125
<h3>
124-
<TextStyle variation="strong">{name}</TextStyle>
126+
<Text variant="bodyMd" fontWeight="bold" as="span">
127+
{name}
128+
</Text>
125129
</h3>
126130
<div>{location}</div>
127131
</ResourceList.Item>

‎polaris-react/src/components/Combobox/Combobox.stories.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
Stack,
99
Tag,
1010
TextContainer,
11-
TextStyle,
11+
Text,
1212
} from '@shopify/polaris';
1313
import {SearchMinor} from '@shopify/polaris-icons';
1414

@@ -481,7 +481,9 @@ export function WithMultiSelectAndVerticalContent() {
481481
return (
482482
<p>
483483
{start}
484-
<TextStyle variation="strong">{highlight}</TextStyle>
484+
<Text variant="bodyMd" fontWeight="bold" as="span">
485+
{highlight}
486+
</Text>
485487
{end}
486488
</p>
487489
);

‎polaris-react/src/components/DropZone/DropZone.stories.tsx‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
22
import type {ComponentMeta} from '@storybook/react';
33
import {
44
Banner,
5-
Caption,
5+
Text,
66
Card,
77
DropZone,
88
List,
@@ -44,7 +44,10 @@ export function Default() {
4444
}
4545
/>
4646
<div>
47-
{file.name} <Caption>{file.size} bytes</Caption>
47+
{file.name}{' '}
48+
<Text variant="bodySm" as="p">
49+
{file.size} bytes
50+
</Text>
4851
</div>
4952
</Stack>
5053
))}
@@ -93,7 +96,10 @@ export function WithImageFileUpload() {
9396
source={window.URL.createObjectURL(file)}
9497
/>
9598
<div>
96-
{file.name} <Caption>{file.size} bytes</Caption>
99+
{file.name}{' '}
100+
<Text variant="bodySm" as="p">
101+
{file.size} bytes
102+
</Text>
97103
</div>
98104
</Stack>
99105
))}
@@ -151,7 +157,10 @@ export function WithSingleFileUpload() {
151157
}
152158
/>
153159
<div>
154-
{file.name} <Caption>{file.size} bytes</Caption>
160+
{file.name}{' '}
161+
<Text variant="bodySm" as="p">
162+
{file.size} bytes
163+
</Text>
155164
</div>
156165
</Stack>
157166
);
@@ -190,7 +199,10 @@ export function WithDropOnPage() {
190199
}
191200
/>
192201
<div>
193-
{file.name} <Caption>{file.size} bytes</Caption>
202+
{file.name}{' '}
203+
<Text variant="bodySm" as="p">
204+
{file.size} bytes
205+
</Text>
194206
</div>
195207
</Stack>
196208
))}
@@ -245,7 +257,10 @@ export function AcceptsOnlySVGFiles() {
245257
source={window.URL.createObjectURL(file)}
246258
/>
247259
<div>
248-
{file.name} <Caption>{file.size} bytes</Caption>
260+
{file.name}{' '}
261+
<Text variant="bodySm" as="p">
262+
{file.size} bytes
263+
</Text>
249264
</div>
250265
</Stack>
251266
))}
@@ -309,7 +324,10 @@ export function Nested() {
309324
}
310325
/>
311326
<div>
312-
{file.name} <Caption>{file.size} bytes</Caption>
327+
{file.name}{' '}
328+
<Text variant="bodySm" as="p">
329+
{file.size} bytes
330+
</Text>
313331
</div>
314332
</Stack>
315333
))}
@@ -378,7 +396,10 @@ export function WithCustomFileUploadText() {
378396
}
379397
/>
380398
<div>
381-
{file.name} <Caption>{file.size} bytes</Caption>
399+
{file.name}{' '}
400+
<Text variant="bodySm" as="p">
401+
{file.size} bytes
402+
</Text>
382403
</div>
383404
</Stack>
384405
))}
@@ -424,7 +445,10 @@ export function WithCustomFileDialogTrigger() {
424445
}
425446
/>
426447
<div>
427-
{file.name} <Caption>{file.size} bytes</Caption>
448+
{file.name}{' '}
449+
<Text variant="bodySm" as="p">
450+
{file.size} bytes
451+
</Text>
428452
</div>
429453
</Stack>
430454
))}

‎polaris-react/src/components/Filters/Filters.stories.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
RangeSlider,
1111
ResourceList,
1212
TextField,
13-
TextStyle,
13+
Text,
1414
} from '@shopify/polaris';
1515

1616
export default {
@@ -187,9 +187,9 @@ export function WithAResourceList() {
187187
media={media}
188188
accessibilityLabel={`View details for ${name}`}
189189
>
190-
<h3>
191-
<TextStyle variation="strong">{name}</TextStyle>
192-
</h3>
190+
<Text as="h3" variant="bodyMd" fontWeight="bold">
191+
{name}
192+
</Text>
193193
<div>{location}</div>
194194
</ResourceList.Item>
195195
);
@@ -498,9 +498,9 @@ export function WithChildrenContent() {
498498
media={media}
499499
accessibilityLabel={`View details for ${name}`}
500500
>
501-
<h3>
502-
<TextStyle variation="strong">{name}</TextStyle>
503-
</h3>
501+
<Text as="h3" variant="bodyMd" fontWeight="bold">
502+
{name}
503+
</Text>
504504
<div>{location}</div>
505505
</ResourceList.Item>
506506
);
@@ -625,9 +625,9 @@ export function Disabled() {
625625
media={media}
626626
accessibilityLabel={`View details for ${name}`}
627627
>
628-
<h3>
629-
<TextStyle variation="strong">{name}</TextStyle>
630-
</h3>
628+
<Text as="h3" variant="bodyMd" fontWeight="bold">
629+
{name}
630+
</Text>
631631
<div>{location}</div>
632632
</ResourceList.Item>
633633
);
@@ -771,9 +771,9 @@ export function SomeDisabled() {
771771
media={media}
772772
accessibilityLabel={`View details for ${name}`}
773773
>
774-
<h3>
775-
<TextStyle variation="strong">{name}</TextStyle>
776-
</h3>
774+
<Text as="h3" variant="bodyMd" fontWeight="bold">
775+
{name}
776+
</Text>
777777
<div>{location}</div>
778778
</ResourceList.Item>
779779
);
@@ -899,9 +899,9 @@ export function WithoutClearButton() {
899899
media={media}
900900
accessibilityLabel={`View details for ${name}`}
901901
>
902-
<h3>
903-
<TextStyle variation="strong">{name}</TextStyle>
904-
</h3>
902+
<Text as="h3" variant="bodyMd" fontWeight="bold">
903+
{name}
904+
</Text>
905905
<div>{location}</div>
906906
</ResourceList.Item>
907907
);
@@ -1092,9 +1092,9 @@ export function WithHelpText() {
10921092
media={media}
10931093
accessibilityLabel={`View details for ${name}`}
10941094
>
1095-
<h3>
1096-
<TextStyle variation="strong">{name}</TextStyle>
1097-
</h3>
1095+
<Text as="h3" variant="bodyMd" fontWeight="bold">
1096+
{name}
1097+
</Text>
10981098
<div>{location}</div>
10991099
</ResourceList.Item>
11001100
);
@@ -1288,9 +1288,9 @@ export function WithQueryFieldHidden() {
12881288
media={media}
12891289
accessibilityLabel={`View details for ${name}`}
12901290
>
1291-
<h3>
1292-
<TextStyle variation="strong">{name}</TextStyle>
1293-
</h3>
1291+
<Text as="h3" variant="bodyMd" fontWeight="bold">
1292+
{name}
1293+
</Text>
12941294
<div>{location}</div>
12951295
</ResourceList.Item>
12961296
);
@@ -1484,9 +1484,9 @@ export function WithQueryFieldDisabled() {
14841484
media={media}
14851485
accessibilityLabel={`View details for ${name}`}
14861486
>
1487-
<h3>
1488-
<TextStyle variation="strong">{name}</TextStyle>
1489-
</h3>
1487+
<Text as="h3" variant="bodyMd" fontWeight="bold">
1488+
{name}
1489+
</Text>
14901490
<div>{location}</div>
14911491
</ResourceList.Item>
14921492
);

‎polaris-react/src/components/Frame/Frame.stories.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
TextField,
2020
Toast,
2121
TopBar,
22-
VisuallyHidden,
22+
Text,
2323
} from '@shopify/polaris';
2424
import {
2525
ArrowLeftMinor,
@@ -218,7 +218,7 @@ export function InAnApplication() {
218218
const loadingMarkup = isLoading ? <Loading /> : null;
219219

220220
const skipToContentTarget = (
221-
<VisuallyHidden>
221+
<Text variant="bodySm" as="span" visuallyHidden>
222222
<a
223223
id="SkipToContentTarget"
224224
ref={skipToContentRef}
@@ -227,7 +227,7 @@ export function InAnApplication() {
227227
>
228228
Account details
229229
</a>
230-
</VisuallyHidden>
230+
</Text>
231231
);
232232

233233
const actualPageMarkup = (
@@ -557,7 +557,7 @@ export function WithAnOffset() {
557557
const loadingMarkup = isLoading ? <Loading /> : null;
558558

559559
const skipToContentTarget = (
560-
<VisuallyHidden>
560+
<Text variant="bodySm" as="span" visuallyHidden>
561561
<a
562562
id="SkipToContentTarget"
563563
ref={skipToContentRef}
@@ -566,7 +566,7 @@ export function WithAnOffset() {
566566
>
567567
Account details
568568
</a>
569-
</VisuallyHidden>
569+
</Text>
570570
);
571571

572572
const actualPageMarkup = (

0 commit comments

Comments
 (0)