[Banner] Add hideIcon prop and update mobile web styling (#8349)

### WHY are these changes introduced?

Fixes #6152 <!-- link to issue if one exists -->
[Figma
exploration](https://www.figma.com/file/GmN4pZi5fdSOUfWhE9LYB8/Banner?node-id=0%3A1&t=Cv8L57p4HY0sqZlj-1)

[Storybook](https://5d559397bae39100201eedc1-eipbfirzou.chromatic.com/?path=/story/all-components-banner--default)

### WHAT is this pull request doing?

1. Updates styles for widths less than `490px` and are in page (aren't
in card or in modal)
2. Adds a `hideIcon` prop

> Note: We intentionally did not add a new example to the
styleguide/storybook for the `hideIcon` prop since we want it used as a
last resort for better spacing and we don't want to encourage incorrect
patterns. Using the banner with an icon is still preferred and when
there isn't enough space, there are probably better design solutions
(i.e. tooltips) to use before resorting to a `hideIcon` Banner

In the Admin mobile width:
<img width="481" alt="Screenshot 2023-02-14 at 5 37 28 PM"
src="https://user-images.githubusercontent.com/20652326/218879086-6fe8ff57-407c-4e4c-8dc7-a91ae5341eb0.png">

Banners within content containers (i.e. modals and cards) are not
affected:
<img width="337" alt="Screenshot 2023-02-14 at 5 12 44 PM"
src="https://user-images.githubusercontent.com/20652326/218875124-ef0b2b14-0f5b-4247-aaff-9981f5008998.png">

Hide Icon:
<img width="319" alt="Screenshot 2023-02-14 at 5 34 58 PM"
src="https://user-images.githubusercontent.com/20652326/218878694-c1198a13-acdd-4cd5-8f2e-cfac6e8cac0d.png">

### How to 🎩

Try to create discount without adding collection to get error banner:

https://admin.web.web-9fv7.sophie-schneider.us.spin.dev/store/shop1/discounts/new?type=moneyOffProduct

You can also look at the banner states in
[Storybook](https://5d559397bae39100201eedc1-cuwxzjwkzy.chromatic.com/?path=/story/all-components-banner--with-no-icon)

### 🎩 checklist

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

Author: sophschneider

.changeset/unlucky-stingrays-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add hideIcon prop to Banner and update Banner styles for mobile web

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

@@ -1,67 +1,51 @@
 @import '../../styles/common';
 
 @mixin banner-variants($in-page) {
-  // stylelint-disable -- Polaris component custom properties
-  --pc-banner-background: var(--p-background);
-  --pc-banner-border: var(--p-banner-border-default);
-  // stylelint-enable
-  transition: box-shadow var(--p-duration-200) var(--p-ease);
-  transition-delay: var(--p-duration-100);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  box-shadow: var(--pc-banner-border);
-  outline: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
+  background-color: var(--p-background);
 
   @if $in-page {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring('wide');
     border-radius: var(--p-border-radius-2);
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    background-color: var(--pc-banner-background);
+
+    @media #{$p-breakpoints-sm-down} {
+      border-radius: 0;
+      border-width: var(--p-border-width-1) 0;
+    }
   } @else {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring('base');
     border-radius: var(--p-border-radius-1);
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    background-color: var(--pc-banner-background);
   }
 
   &:focus {
     outline: none;
   }
 
   &.keyFocused {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    box-shadow: var(--pc-banner-border);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring('wide', $style: 'focused');
   }
 
   &.statusSuccess {
-    // stylelint-disable -- Polaris component custom properties
-    --pc-banner-background: var(--p-surface-success-subdued);
-    --pc-banner-border: var(--p-banner-border-success);
-    // stylelint-enable
+    border-color: var(--p-border-success-subdued);
+    background-color: var(--p-surface-success-subdued);
   }
 
   &.statusInfo {
-    // stylelint-disable -- Polaris component custom properties
-    --pc-banner-background: var(--p-surface-highlight-subdued);
-    --pc-banner-border: var(--p-banner-border-highlight);
-    // stylelint-enable
+    border-color: var(--p-border-highlight-subdued);
+    background-color: var(--p-surface-highlight-subdued);
   }
 
   &.statusWarning {
-    // stylelint-disable -- Polaris component custom properties
-    --pc-banner-background: var(--p-surface-warning-subdued);
-    --pc-banner-border: var(--p-banner-border-warning);
-    // stylelint-enable
+    border-color: var(--p-border-warning-subdued);
+    background-color: var(--p-surface-warning-subdued);
   }
 
   &.statusCritical {
-    // stylelint-disable -- Polaris component custom properties
-    --pc-banner-background: var(--p-surface-critical-subdued);
-    --pc-banner-border: var(--p-banner-border-critical);
-    // stylelint-enable
+    border-color: var(--p-border-critical-subdued);
+    background-color: var(--p-surface-critical-subdued);
   }
 }
 

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

@@ -34,8 +34,10 @@ export type BannerStatus = 'success' | 'info' | 'warning' | 'critical';
 export interface BannerProps {
   /** Title content for the banner. */
   title?: string;
-  /** Icon to display in the banner. Use only major, duotone icons */
+  /** Status icon to display in the banner. Use only major icons */
   icon?: IconProps['source'];
+  /** Renders the banner without a status icon. */
+  hideIcon?: boolean;
   /** Sets the status of the banner. */
   status?: BannerStatus;
   /** The child elements to render in the banner. */
@@ -60,6 +62,7 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
     status,
     onDismiss,
     stopAnnouncements,
+    hideIcon,
   }: BannerProps,
   bannerRef,
 ) {
@@ -169,9 +172,11 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
       >
         {dismissButton}
 
-        <Box paddingInlineEnd="4">
-          <Icon source={iconName} color={iconColor} />
-        </Box>
+        {hideIcon ? null : (
+          <Box paddingInlineEnd="4">
+            <Icon source={iconName} color={iconColor} />
+          </Box>
+        )}
 
         <div className={styles.ContentWrapper}>
           {headingMarkup}

polaris.shopify.com/content/components/feedback-indicators/banner.md

@@ -65,7 +65,8 @@ Banners should:
 - Not be used to call attention to what a merchant needs to do in the UI instead of making the action clear in the UI itself.
 - Not be the primary entry point to information or actions merchants need on a regular basis.
 - Be dismissible unless they contain critical information or an important step merchants need to take.
-- Use the default icon for `success`, `info`, `warning` and `critical` statuses. If the icon is changed, use only [major, duotone icons](https://polaris.shopify.com/design/icons#using-icons-in-your-designs).
+- Use the default icon for `success`, `info`, `warning` and `critical` statuses. If the status icon is changed, use only [major icons](https://polaris.shopify.com/design/icons#major-icons-20-20).
+- Remove the status icon only in scenarios where it takes up too much space, such as very small breakpoints or in side navigation cards.
 
 ### Placement