Add action icon examples (#11779)

### WHY are these changes introduced?

We want to encourage the use of icons only for commonly used buttons as
stated in the Patterns section, and also encourage more use of icons in
buttons with text to show what the verb of the button does.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

This PR adds some extra examples and changes others to encourage use of
icons in Page and Card actions.
<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>

.changeset/silly-hairs-look.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added examples for `Card` and `Page` with icon actions

polaris.shopify.com/content/components/layout-and-structure/card.mdx

@@ -79,6 +79,10 @@ examples:
     title: With header actions
     description: >-
       Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address.
+  - fileName: card-with-header-icon-actions.tsx
+    title: With header icon actions
+    description: >-
+      Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to export items in a list.
   - fileName: card-with-footer-actions.tsx
     title: With footer actions
     description: >-

polaris.shopify.com/pages/examples/card-with-all-elements.tsx

@@ -15,6 +15,7 @@ import {
   Text,
 } from '@shopify/polaris';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {ExportIcon} from '@shopify/polaris-icons';
 
 function CardWithAllElements() {
   const [actionActive, toggleAction] = useState(false);
@@ -132,6 +133,7 @@ function CardWithAllElements() {
               <Button
                 variant="primary"
                 onClick={() => {}}
+                icon={ExportIcon}
                 accessibilityLabel="Export Report"
               >
                 Export Report

polaris.shopify.com/pages/examples/card-with-header-actions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {BlockStack, Button, Card, InlineGrid, Text} from '@shopify/polaris';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {PlusIcon} from '@shopify/polaris-icons';
 
 function CardWithHeaderActions() {
   return (
@@ -11,9 +12,9 @@ function CardWithHeaderActions() {
             Variants
           </Text>
           <Button
-            variant="plain"
             onClick={() => {}}
             accessibilityLabel="Add variant"
+            icon={PlusIcon}
           >
             Add variant
           </Button>

polaris.shopify.com/pages/examples/card-with-header-icon-actions.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {BlockStack, Button, Card, InlineGrid, Text} from '@shopify/polaris';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {ExportIcon} from '@shopify/polaris-icons';
+
+function CardWithHeaderIconActions() {
+  return (
+    <Card roundedAbove="sm">
+      <BlockStack gap="200">
+        <InlineGrid columns="1fr auto">
+          <Text as="h2" variant="headingSm">
+            Variants
+          </Text>
+          <Button
+            onClick={() => {}}
+            accessibilityLabel="Export variants"
+            icon={ExportIcon}
+          />
+        </InlineGrid>
+        <Text as="p" variant="bodyMd">
+          Export variants
+        </Text>
+      </BlockStack>
+    </Card>
+  );
+}
+
+export default withPolarisExample(CardWithHeaderIconActions);

polaris.shopify.com/pages/examples/page-full-width.tsx

@@ -1,5 +1,5 @@
-import {Page, LegacyCard} from '@shopify/polaris';
-import {PlusIcon} from '@shopify/polaris-icons';
+import {Page, Card, Text, BlockStack} from '@shopify/polaris';
+import {ExportIcon, PlusIcon} from '@shopify/polaris-icons';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -8,15 +8,28 @@ function PageExample() {
     <Page
       fullWidth
       title="Orders"
-      primaryAction={{content: 'Create order', icon: PlusIcon}}
-      secondaryActions={[{content: 'Export'}]}
+      primaryAction={{
+        content: 'Create order',
+        icon: PlusIcon,
+        accessibilityLabel: 'Create order',
+      }}
+      secondaryActions={[
+        {accessibilityLabel: 'Export orders', icon: ExportIcon},
+      ]}
       pagination={{
         hasNext: true,
       }}
     >
-      <LegacyCard title="Credit card" sectioned>
-        <p>Credit card information</p>
-      </LegacyCard>
+      <Card>
+        <BlockStack gap="200">
+          <Text as="h2" variant="headingSm">
+            Credit card
+          </Text>
+          <Text as="p" variant="bodyMd">
+            Credit card information
+          </Text>
+        </BlockStack>
+      </Card>
     </Page>
   );
 }

polaris.shopify.com/pages/examples/page-narrow-width.tsx

@@ -1,6 +1,7 @@
-import {Page, LegacyCard, PageActions} from '@shopify/polaris';
+import {Page, PageActions, Card, Text, BlockStack} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {DeleteIcon} from '@shopify/polaris-icons';
 
 function PageExample() {
   return (
@@ -10,12 +11,19 @@ function PageExample() {
       title="Add payment method"
       primaryAction={{content: 'Save', disabled: true}}
     >
-      <LegacyCard title="Credit card" sectioned>
-        <p>Credit card information</p>
-      </LegacyCard>
+      <Card>
+        <BlockStack gap="200">
+          <Text as="h2" variant="headingSm">
+            Credit card
+          </Text>
+          <Text as="p" variant="bodyMd">
+            Credit card information
+          </Text>
+        </BlockStack>
+      </Card>
       <PageActions
         primaryAction={{content: 'Save', disabled: true}}
-        secondaryActions={[{content: 'Delete'}]}
+        secondaryActions={[{content: 'Delete', icon: DeleteIcon}]}
       />
     </Page>
   );

polaris.shopify.com/pages/examples/page-with-destructive-secondary-action.tsx

@@ -1,12 +1,15 @@
 import {Page} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {DeleteIcon} from '@shopify/polaris-icons';
 
 function PageExample() {
   return (
     <Page
       title="General"
-      secondaryActions={[{content: 'Delete', destructive: true}]}
+      secondaryActions={[
+        {content: 'Delete', destructive: true, icon: DeleteIcon},
+      ]}
     >
       <p>Page content</p>
     </Page>