[polaris.shopify.com] Add common action pattern guidelines (Shopify#1…

…1720)

Fixes https://github.com/Shopify/polaris-internal/issues/1454

### What's in the PR
- Common action guidelines scoped a subset of actions mainly focused
within cards and list
- Best practices that apply to all common actions
- Actions: `Add`, `Copy`, `Delete`, `Edit`, `Pin`, `More actions`,
`Remove`


### 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)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Jess Telford <[email protected]>

.changeset/little-nails-hang.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Added common action guidance.

polaris.shopify.com/content/patterns/common-actions/index.mdx

@@ -0,0 +1,19 @@
+---
+title: Common actions
+description: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
+lede: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
+icon: ColorIcon
+previewImg: /images/patterns/common-actions/common-actions-cover-image.png
+keywords:
+  - common actions
+  - actions
+hideChildren: true
+showTOC: true
+status: New
+url: /patterns/common-actions
+variants:
+  - 'variants/overview.mdx'
+  - 'variants/best-practices.mdx'
+---
+
+<Variants variants={frontmatter.variants} />

polaris.shopify.com/content/patterns/common-actions/variants/best-practices.mdx

@@ -0,0 +1,217 @@
+---
+title: Best practices
+url: /patterns/common-actions/best-practices
+description: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
+lede: Standardizing recurring actions gives merchants a predictable way to complete common tasks.
+keywords:
+  - common actions
+  - actions
+---
+
+<LayoutSection card>
+
+  <Text>
+
+    <Stack gap="400">
+
+    ## Icons and labels
+
+    Actions should always clearly communicate their purpose by using a text label, an icon, or a combination of both.
+
+    </Stack>
+
+  </Text>
+
+  <Large variant="do">
+
+    ![An image showing icons used for common actions add, edit, delete, remove, copy.](/images/patterns/common-actions/[email protected])
+
+    Use icons in place of text for common actions. Leveraging pre-existing knowledge will improve clarity and help reduce clutter, since these icons require no text label.
+
+  </Large>
+
+  <Medium variant="do">
+
+    ![An image showing a list with a short label that describes the content in the list: "Add payment method".](/images/patterns/common-actions/[email protected])
+
+    Keep labels short and concise.
+
+  </Medium>
+
+  <Medium variant="dont">
+
+    ![An image showing a list with a long label: "Add options like size and color.](/images/patterns/common-actions/[email protected])
+
+    Add unnecessary words to the action label. Instead, use the surrounding context and placement to communicate the outcome of an action.
+
+  </Medium>
+
+    <Medium variant="do">
+
+    ![An image showing two actions with the icon aligned to the left of the label.](/images/patterns/common-actions/[email protected])
+
+    Place icons to the left of an action’s label.
+
+  </Medium>
+
+  <Medium variant="do">
+
+    ![An image showing three buttons with the icons representing the action verb.](/images/patterns/common-actions/[email protected])
+
+    Use an icon that represents the verb when a label includes multiple words.
+
+  </Medium>
+
+    <Medium variant="do">
+
+    ![An image showing two buttons: "Print shipping label" and "Send account invite" with both using specialized icons to represent complex concepts.](/images/patterns/common-actions/[email protected])
+
+    Use the appropriate icon to reinforce the message when referring to a specialized or complex action.
+
+  </Medium>
+
+  <Medium variant="do">
+
+    ![An image showing text labels following the verb noun formatting and highlighting what the object type is for each; "Add customer", "Edit address", "Delete products", "Copy email".](/images/patterns/common-actions/[email protected])
+
+    Reflect the object type in the action’s label using the verb + noun format.
+
+  </Medium>
+
+  <Medium variant="do">
+
+    ![An image showing a list of actions with the most common actions paired with an icon and appropriate sytling.](/images/patterns/common-actions/[email protected])
+
+    Use an icon along with the text label for common actions displayed within an action list.
+
+  </Medium>
+
+</LayoutSection>
+
+<LayoutSection card>
+
+  <Text>
+
+    <Stack gap="400">
+
+    ## Visual hierarchy
+
+      Style and placement help visually communicate the importance of an action on the page.
+
+    </Stack>
+
+  </Text>
+
+  <Large variant="do">
+
+    ![An image showing secondary and tertiary buttons in a card and a list.](/images/patterns/common-actions/[email protected])
+
+    Use secondary or tertiary buttons to give actions less emphasis while making them accessible for as many users as possible.
+
+  </Large>
+
+  <Text>
+
+    Actions in editors need an additional level of emphasis to attract merchant attention and establish hierarchy between elements.
+
+  </Text>
+
+  <Large variant="do">
+
+    ![An image showing add actions in the Online Store Editor.](/images/patterns/common-actions/[email protected])
+
+    Use the emphasis color role for actions in editors.
+
+  </Large>
+
+  <Medium variant="do">
+
+    ![An image showing a card with primary and secondary buttons in the card footer.](/images/patterns/common-actions/[email protected])
+
+    Use buttons with a contained or filled background to help merchants identify which action they’ll most likely want within a given view.
+
+  </Medium>
+
+    <Medium variant="do">
+
+    ![An image showing a table using remove icon only tertiary buttons for each table row.](/images/patterns/common-actions/[email protected])
+
+    Use a tertiary icon button for items and rows in a list or table.
+
+  </Medium>
+
+  <Medium variant="dont">
+
+    ![An image showing a card with ten different actions using the secondary button style.](/images/patterns/common-actions/[email protected])
+
+    Use too many contained or filled buttons within a view as they can degrade hierarchy and cause confusion.
+
+  </Medium>
+
+</LayoutSection>
+
+<LayoutSection card>
+
+  <Text>
+
+    <Stack gap="400">
+
+    ## Interactivity
+
+      Elements that are visually similar behave consistently throughout the interface. Consistency in behavior reduces confusion and cognitive load for merchants.
+
+    </Stack>
+
+  </Text>
+
+  <Large>
+
+    ![An image showing a variety of button styles in different states.](/images/patterns/common-actions/[email protected])
+
+  </Large>
+
+  <Medium variant="do">
+
+    ![An image showing visible focus rings when interacting using the keyboard.](/images/patterns/common-actions/[email protected])
+
+    Make focus rings visible when a merchant is using the keyboard to interact with the UI.
+
+  </Medium>
+
+  <Medium variant="dont">
+
+    <video width="100%" height="auto" controls playsInline muted loop>
+      <source
+        src="/images/patterns/common-actions/common-actions-interactivity-focus-with-cursor.mp4"
+        type="video/mp4"
+      />
+      Don't make focus rings visible when a merchant is using a cursor to interact with elements.
+    </video>
+
+    Make focus rings visible when a merchant is using a cursor to interact with elements.
+
+  </Medium>
+
+  <Medium variant="dont">
+
+    <video width="100%" height="auto" controls playsInline muted loop>
+      <source
+        src="/images/patterns/common-actions/common-actions-interactivity-disabled-styles.mp4"
+        type="video/mp4"
+      />
+      Use disabled styles for elements that the merchant can interact with.
+    </video>
+
+    Use disabled styles for elements that the merchant can interact with.
+
+  </Medium>
+
+  <Medium variant="dont">
+
+    ![An image showing a text button using the emphasis color as the only indicator of interactivity.](/images/patterns/common-actions/[email protected])
+
+    Rely on color alone to indicate interactivity.
+
+  </Medium>
+
+</LayoutSection>