Add warning row style (#10632)

### WHY are these changes introduced?

Follows after #9872 and a similar
motivation as in #9873 but for
"pending suspension"

<img width="1071" alt="image"
src="https://github.com/Shopify/polaris/assets/663329/512a03f1-bce2-4677-bcc8-885e4e91da6d">
Storybook url: http://243.27.6.121:6006/
<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

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

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>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] 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

.changeset/spicy-nails-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added a `warning` `status` to the `IndexTable.Row`

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

@@ -217,6 +217,19 @@ $loading-panel-height: 53px;
     }
   }
 
+  &.statusWarning {
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical status for suspended products
+    &,
+    .TableCell-first,
+    .TableCell-first + .TableCell {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-warning-subdued-experimental);
+      }
+    }
+  }
+
   &.statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
@@ -318,7 +331,7 @@ $loading-panel-height: 53px;
   // stylelint-disable-next-line no-duplicate-selectors -- se23 temporary styles
   #{$se23} & {
     &.TableRow-hovered:not(.TableRow-disabled) {
-      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles
+      // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
@@ -328,7 +341,7 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-hover);
       }
 
-      // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
+      // stylelint-disable max-nesting-depth -- se23 status hover styles
       &.statusCritical {
         &,
         .TableCell-first,
@@ -337,6 +350,14 @@ $loading-panel-height: 53px;
         }
       }
 
+      &.statusWarning {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-warning-subdued-experimental);
+        }
+      }
+
       &.statusSubdued {
         &,
         .TableCell-first,
@@ -821,6 +842,13 @@ $loading-panel-height: 53px;
     }
   }
 
+  .statusWarning {
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products
+    .TableCell:first-child {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+    }
+  }
+
   .statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
@@ -918,6 +946,16 @@ $loading-panel-height: 53px;
     }
   }
 
+  .statusWarning {
+    .TableCell:last-child {
+      background-color: var(--p-color-bg-primary-subdued-selected);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-warning-subdued-experimental);
+      }
+    }
+  }
+
   .statusSubdued {
     .TableCell:last-child {
       background-color: var(--p-color-bg-subdued);

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

@@ -1606,6 +1606,15 @@ export function WithRowStatus() {
       amountSpent: '$40',
       status: 'critical',
     },
+    {
+      id: '3414',
+      url: '#',
+      name: 'Volleyball Player',
+      location: 'Delaware, USA',
+      orders: 50,
+      amountSpent: '$80',
+      status: 'warning',
+    },
   ];
   const resourceName = {
     singular: 'customer',

polaris-react/src/components/IndexTable/components/Row/Row.tsx

@@ -13,7 +13,7 @@ import type {Range} from '../../../../utilities/index-provider/types';
 import styles from '../../IndexTable.scss';
 
 type RowType = 'data' | 'subheader';
-type RowStatus = 'success' | 'subdued' | 'critical';
+type RowStatus = 'success' | 'subdued' | 'critical' | 'warning';
 type TableRowElementType = HTMLTableRowElement & HTMLLIElement;
 
 export interface RowProps {