[polaris.shopify.com] Clean up example titles

.changeset/warm-clouds-drive.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Migrate content to polaris.shopify.com, automate example titles

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

@@ -96,7 +96,7 @@ Connect to app
 
 ## Examples
 
-### Default account connection
+### Default
 
 Use to let merchants connect or disconnect their store to their third-party accounts, like Facebook.
 

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

@@ -80,7 +80,7 @@ Each item in an action list should be scannable avoiding unnecessary words and a
 
 ## Examples
 
-### Action list in a popover
+### In a popover
 
 Use for the least important actions so merchants aren’t distracted by secondary tasks. Can also be used for a set of actions that won’t fit in the available screen space.
 
@@ -133,7 +133,7 @@ function ActionListInPopoverExample() {
 }
 ```
 
-### Action list with icons or image
+### With icons or image
 
 Use when the items benefit from an associated action or image, such as a list of products.
 
@@ -170,7 +170,7 @@ function ActionListWithMediaExample() {
 }
 ```
 
-### Action list with an icon and a suffix
+### With an icon and a suffix
 
 Use when the items benefit from an associated action or image, such as a list of products.
 
@@ -212,7 +212,7 @@ function ActionListWithSuffixExample() {
 }
 ```
 
-### Sectioned action list
+### With sections
 
 Use when the items benefit from sections to help differentiate actions.
 
@@ -261,7 +261,7 @@ function SectionedActionListExample() {
 }
 ```
 
-### Action list with destructive item
+### With destructive item
 
 Use to visually indicate that an action list item is destructive.
 
@@ -312,7 +312,7 @@ function ActionListWithDestructiveItemExample() {
 }
 ```
 
-### Action list with help text
+### With help text
 
 Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.
 
@@ -359,7 +359,7 @@ function ActionListWithHelpTextExample() {
 }
 ```
 
-### Action list with a prefix and a suffix
+### With a prefix and a suffix
 
 Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.
 

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

@@ -200,7 +200,7 @@ function AppProviderLinkExample() {
 
 ### With color scheme
 
-With a `colorScheme`, the app provider component will set the root color scheme for the App (such as: light or dark).For `colorScheme` configuration, see the [CustomProperties](https://polaris.shopify.com/components/custom-properties) component documentation.
+With a `colorScheme`, the app provider component will set the root color scheme for the App (such as light or dark). For `colorScheme` configuration, see the [CustomProperties](https://polaris.shopify.com/components/custom-properties) component documentation.
 
 ```jsx
 function AppProviderThemeExample() {

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

@@ -34,7 +34,7 @@ The input field for autocomplete should follow the [content guidelines](https://
 
 ## Examples
 
-### Basic autocomplete
+### Default
 
 Use to help merchants complete text input quickly from a list of options.
 
@@ -107,7 +107,7 @@ function AutocompleteExample() {
 }
 ```
 
-### Multiple tags autocomplete
+### With multiple tags
 
 Use to help merchants select multiple options from a list curated by the text input.
 
@@ -210,7 +210,7 @@ function MultiAutocompleteExample() {
 }
 ```
 
-### Multiple sections autocomplete
+### With multiple sections
 
 Use to help merchants complete text input quickly from a multiple sections list of options.
 
@@ -314,7 +314,7 @@ function AutocompleteExample() {
 }
 ```
 
-### Autocomplete with loading
+### With loading
 
 Use to indicate loading state to merchants while option data is processing.
 
@@ -395,7 +395,7 @@ function AutocompleteExample() {
 }
 ```
 
-### Autocomplete with lazy loading
+### With lazy loading
 
 ```jsx
 function AutoCompleteLazyLoadExample() {
@@ -524,7 +524,7 @@ function AutoCompleteLazyLoadExample() {
 }
 ```
 
-### Autocomplete with empty state
+### With empty state
 
 Use to indicate there are no search results.
 
@@ -615,7 +615,7 @@ function AutocompleteExample() {
 }
 ```
 
-### Autocomplete with action
+### With action
 
 Use to help merchants complete an action quickly.
 
@@ -708,7 +708,7 @@ function AutocompleteActionBeforeExample() {
 }
 ```
 
-### Autocomplete with wrapping action
+### With wrapping action
 
 Use to help merchants complete an action quickly with wrapping lines of text.
 
@@ -803,7 +803,7 @@ function AutocompleteActionBeforeExample() {
 }
 ```
 
-### Autocomplete with destructive action
+### With destructive action
 
 Use to help merchants complete a destructive action quickly.
 

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

@@ -50,15 +50,15 @@ For avatars, we recommend using a format that describes what will show in the im
 
 ## Examples
 
-### Default avatar
+### Default
 
 Use to present an avatar for a merchant, customer, or business.
 
 ```jsx
 <Avatar customer name="Farrah" />
 ```
 
-### Extra small avatar
+### Extra small
 
 Use to present an avatar in a condensed layout, such as a data table cell or an action list item.
 
@@ -95,7 +95,7 @@ function ExtraSmallAvatarExample() {
 }
 ```
 
-### Square avatar
+### Square
 
 Use a `square` shape when the avatar represents a non-person entity like an app, channel, or store.
 

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

@@ -73,67 +73,63 @@ Don’t use alternatives to existing badge options. Only create a new badge opti
 
 ## Examples
 
-### Default badge
+### Default
 
 Use to give a non-critical status update on a piece of information or action.
 
 ```jsx
 <Badge>Fulfilled</Badge>
 ```
 
-### Small badge
+### Small
 
 Use in layouts with minimal space, like inside of an `IndexTable` cell.
 
 ```jsx
 <Badge size="small">Fulfilled</Badge>
 ```
 
-### Informational badge
+### Informational
 
 Use to call out an object or action as having an important attribute. For example, marking an option as “Recommended” or marking a theme as “Published”.
 
 ```jsx
 <Badge status="info">Published</Badge>
 ```
 
-### Success badge
+### Success
 
 Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to merchants. For example, when merchants successfully dispute a chargeback, a success badge shows that says “Funds recovered”.
 
 ```jsx
 <Badge status="success">Funds recovered</Badge>
 ```
 
-### Attention badge
+### Attention
 
 Use when something requires merchants’ attention but the issue isn’t critical. For example, this badge would show next to an order that needs to be reviewed by merchants.
 
 ```jsx
 <Badge status="attention">Inactive</Badge>
 ```
 
-### Warning badge
+### Warning
 
-Use for critical and time-sensitive issues that require merchants’ attention and potential action. Warning events are often reversible.
-
-Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.
+Use for warnings and time-sensitive issues that require merchants’ attention and potential action. Warning events are often reversible. Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.
 
 ```jsx
 <Badge status="warning">Expired</Badge>
 ```
 
-### Critical badge
-
-Use for critical and irreversible issues that require merchants’ attention and potential action.
+### Critical
 
-Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.
+Use for critical and irreversible issues that require merchants’ attention and potential action. Keep in mind that seeing this badge can feel stressful for merchants so it should only be used when absolutely necessary.
 
 ```jsx
 <Badge status="critical">Action required</Badge>
 ```
 
-### Incomplete badge
+### Incomplete
 
 Use to indicate when a given task has not yet been completed. For example, when merchants haven’t fulfilled an order.
 
@@ -143,7 +139,7 @@ Use to indicate when a given task has not yet been completed. For example, when
 </Badge>
 ```
 
-### Partially complete badge
+### Partially complete
 
 Use to indicate when a given task has been partially completed. For example, when merchants have partially fulfilled an order.
 
@@ -153,15 +149,15 @@ Use to indicate when a given task has been partially completed. For example, whe
 </Badge>
 ```
 
-### Complete badge
+### Complete
 
 Use to indicate when a given task has been completed. For example, when merchants have fulfilled an order.
 
 ```jsx
 <Badge progress="complete">Fulfilled</Badge>
 ```
 
-### Badge with statusAndProgressLabelOverride
+### With statusAndProgressLabelOverride
 
 Use when the status and progress accessibilityLabels are not appropriate to a given context.