Merge main at ab9b3d3 into next (#10615)

.changeset/dull-dingos-collect.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Handled `buttonFrom` and `buttonsFrom` functions in `Button` migration

.changeset/lovely-rings-enjoy.md

@@ -0,0 +1,15 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for subheaders and selection of a range of `IndexTable.Rows` -- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure
+- `IndexTable.Row`
+  - Added support for setting the `indeterminate` value on the `selected` prop
+  - Added the `selectionRange` prop to specify a range of other consecutive, related rows selected when the row is selected
+  - Added the `rowType` prop to indicate the relationship or role of the row's contents (defaults to `data`, `subheader` renders the row to look and behave like the table header row)
+Added support for setting accessibility attributes on `IndexTable.Cell`
+- `IndexTable.Cell`
+  - Added the `as` prop to support rendering the cell as a `th` element if it is serving as a subheading cell
+  - Added support for the `headers` attribute to manually associate all headers when the cell is described by more than its column heading
+  - Added support for the `colSpan` attribute to specify the number of the columns that the cell element should extend to
+  - Added support for the `scope` attribute to indicate whether the `th` is a header for a column, row, or group of columns or rows

.changeset/lucky-wombats-push.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add new `IndexFiltersManager` for allowing disabling of Page Header actions when in Filtering or EditingColumns mode

.changeset/silly-years-search.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated logic for rendering `color` custom property previews in `TokenList`

.changeset/ten-snakes-play.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated copy url to change browser url

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.input.tsx

@@ -0,0 +1,28 @@
+import {buttonFrom, buttonsFrom} from '@shopify/polaris';
+
+const myButtonFrom = buttonFrom;
+
+export function App() {
+  const primaryFooterActionMarkup = buttonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const myButtonMarkup = myButtonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const multipleButtonsMarkup = buttonsFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  return primaryFooterActionMarkup;
+}

polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.output.tsx

@@ -0,0 +1,34 @@
+import {buttonFrom} from '@shopify/polaris';
+
+const myButtonFrom =
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  buttonFrom;
+
+export function App() {
+  const primaryFooterActionMarkup =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    buttonFrom(
+      {content: 'Edit', onAction: () => {}},
+      {
+        primary: true,
+      },
+    );
+
+  const myButtonMarkup = myButtonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const multipleButtonsMarkup =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    buttonsFrom(
+      {content: 'Edit', onAction: () => {}},
+      {
+        primary: true,
+      },
+    );
+
+  return primaryFooterActionMarkup;
+}

polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts

@@ -22,17 +22,27 @@ export default function transformer(
 ) {
   const source = j(fileInfo.source);
 
-  // If `Button` component name is not imported, exit
+  // If `Button` component name or `buttonFrom` function is not imported, exit
   if (
     !(
       hasImportDeclaration(j, source, '@shopify/polaris') &&
       (hasImportSpecifier(j, source, 'Button', '@shopify/polaris') ||
-        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris'))
+        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'buttonFrom', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'buttonsFrom', '@shopify/polaris'))
     )
   ) {
     return fileInfo.source;
   }
 
+  const localFunctionName =
+    getImportSpecifierName(j, source, 'buttonFrom', '@shopify/polaris') ||
+    'buttonFrom';
+
+  const localFunctionPluralName =
+    getImportSpecifierName(j, source, 'buttonsFrom', '@shopify/polaris') ||
+    'buttonsFrom';
+
   const localElementName =
     getImportSpecifierName(j, source, 'Button', '@shopify/polaris') || 'Button';
 
@@ -308,7 +318,9 @@ export default function transformer(
     .filter(
       (path) =>
         path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
+        path.node.name === localElementTypeName ||
+        path.node.name === localFunctionName ||
+        path.node.name === localFunctionPluralName,
     )
     .forEach((path) => {
       if (path.node.type !== 'Identifier') return;

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

@@ -16,6 +16,7 @@ import {
   ScrollLockManager,
   ScrollLockManagerContext,
 } from '../../utilities/scroll-lock-manager';
+import {IndexFiltersManager} from '../../utilities/index-filters';
 import {
   StickyManager,
   StickyManagerContext,
@@ -167,7 +168,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
                     <PortalsManager>
                       <FocusManager>
                         <EphemeralPresenceManager>
-                          {children}
+                          <IndexFiltersManager>{children}</IndexFiltersManager>
                         </EphemeralPresenceManager>
                       </FocusManager>
                     </PortalsManager>

polaris-react/src/components/Grid/Grid.tsx

@@ -20,7 +20,9 @@ type Gap = {
 export interface GridProps {
   /**
    * Set grid-template-areas
-   * @deprecated Use nested layout components instead
+   * @deprecated To avoid a11y issues, nest layout components in individual grid
+   * cells instead. See:
+   * https://polaris.shopify.com/components/layout-and-structure
    */
   areas?: Areas;
   /* Number of columns */

polaris-react/src/components/Grid/components/Cell/Cell.tsx

@@ -26,7 +26,9 @@ interface Columns {
 export interface CellProps {
   /**
    * Set grid-template-areas
-   * @deprecated Use nested layout components instead
+   * @deprecated To avoid a11y issues, nest layout components in individual grid
+   * cells instead. See:
+   * https://polaris.shopify.com/components/layout-and-structure
    */
   area?: string;
   column?: Cell;