Migration guide patch (#11028)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10995
Fixes #11006

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

### WHAT is this pull request doing?

Fixes the `buttonFrom` util not mapping the action parameter's boolean
variant properties to `variant` and `tone`.

| Before | [After]() |
|--------|--------|
| <img width="665" alt="Screenshot 2023-10-25 at 4 03 52 PM"
src="https://github.com/Shopify/polaris/assets/18447883/a3dfa184-c0ce-465c-97ea-32e5f6cfff86">|
<img width="671" alt="Screenshot 2023-10-25 at 4 02 41 PM"
src="https://github.com/Shopify/polaris/assets/18447883/1b85d1ed-4804-4776-a168-a551ff298102">|

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] 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)
- [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

.changeset/silly-ducks-sit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `buttonFrom` utility function not mapping boolean variant properties to `variant` and `tone`

polaris-react/src/components/Button/utils.tsx

@@ -26,12 +26,22 @@ export function buttonsFrom(
 }
 
 export function buttonFrom(
-  {content, onAction, ...action}: ComplexAction,
+  {content, onAction, plain, destructive, ...action}: ComplexAction,
   overrides?: Partial<ButtonProps>,
   key?: any,
 ) {
+  const variant = !overrides?.variant && plain ? 'plain' : overrides?.variant;
+  const tone = !overrides?.tone && destructive ? 'critical' : overrides?.tone;
+
   return (
-    <Button key={key} onClick={onAction} {...action} {...overrides}>
+    <Button
+      key={key}
+      onClick={onAction}
+      tone={tone}
+      variant={variant}
+      {...action}
+      {...overrides}
+    >
       {content}
     </Button>
   );

polaris-react/src/components/Checkbox/Checkbox.scss

@@ -80,8 +80,7 @@
       // We set the border-color to transparent here
       // in order for the background color to bleed all the way to the edge of the element.
       border-color: transparent;
-      // stylelint-disable-next-line polaris/color/function-disallowed-list -- set background color
-      background-color: rgba(0, 0, 0, 0.08);
+      background-color: var(--p-color-checkbox-bg-surface-disabled);
       box-shadow: none;
 
       &::before {

polaris-react/src/components/Modal/Modal.stories.tsx

@@ -126,6 +126,43 @@ export function WithPrimaryAction() {
   );
 }
 
+export function WithDestructivePrimaryAction() {
+  const [active, setActive] = useState(true);
+
+  const toggleModal = useCallback(() => setActive((active) => !active), []);
+
+  const activator = <Button onClick={toggleModal}>Open</Button>;
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Discard all unsaved changes"
+          primaryAction={{
+            destructive: true,
+            content: 'Discard changes',
+            onAction: toggleModal,
+          }}
+          secondaryActions={[
+            {
+              content: 'Continue editing',
+              onAction: toggleModal,
+            },
+          ]}
+        >
+          <Modal.Section>
+            If you discard changes, you’ll delete any edits you made since you
+            last saved.
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}
+
 export function WithPrimaryAndSecondaryActions() {
   const currentPage = 'current_page';
   const allCustomers = 'all_customers';

polaris.shopify.com/content/components/overlays/modal.md

@@ -32,6 +32,9 @@ examples:
   - fileName: modal-with-primary-action.tsx
     title: With primary action
     description: Use to let merchants take a key action.
+  - fileName: modal-with-destructive-primary-action.tsx
+    title: With destructive primary action
+    description: Use to let merchants take a key action that cannot be undone.
   - fileName: modal-with-primary-and-secondary-actions.tsx
     title: With primary and secondary actions
     description: Use to let merchants take key actions at the bottom of the modal.

polaris.shopify.com/pages/examples/modal-with-destructive-primary-action.tsx

@@ -0,0 +1,42 @@
+import {Button, Modal, Frame} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ModalWithDestructivePrimaryActionExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleModal = useCallback(() => setActive((active) => !active), []);
+
+  const activator = <Button onClick={toggleModal}>Open</Button>;
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Discard all unsaved changes"
+          primaryAction={{
+            destructive: true,
+            content: 'Discard changes',
+            onAction: toggleModal,
+          }}
+          secondaryActions={[
+            {
+              content: 'Continue editing',
+              onAction: toggleModal,
+            },
+          ]}
+        >
+          <Modal.Section>
+            If you discard changes, you’ll delete any edits you made since you
+            last saved.
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}
+
+export default withPolarisExample(ModalWithDestructivePrimaryActionExample);