Polaris Banner not displaying as per the docs

Olllie
Shopify Partner
11 1 2

Hi team

 

I am currently working through my built-for Shopify updates, and for some reason, my Polaris Banner component is not displaying as per the docs

 

Here is the display and code straight from the docs (with the blue banner the reviewer has asked for):

Olllie_0-1698815428187.pngOlllie_1-1698815447976.png

And then here is the same code but in my app (note, no blue banner, despite identical code):

Olllie_2-1698815505692.pngOlllie_3-1698815516360.png

I am using the latest version of Polaris:

Olllie_4-1698815552476.png

Does anyone have any ideas as to what might be going wrong here? I have tried changing the 'tone' prop, but no effect. 

 

Thanks in advance, 

 

Ollie

Replies 6 (6)

Olllie
Shopify Partner
11 1 2

Little update, I've found if I set 'status' to info, it somewhat works:

Olllie_0-1698826469792.png

 

Charles_Roberts
Shopify Partner
47 0 8

This banner is still pretty grim.

 

The banner in the official docs, is very clean:

 

https://polaris.shopify.com/components/feedback-indicators/banner

 

I have forked the official Polaris Banner on Codesandbox:

 

https://codesandbox.io/p/sandbox/hopeful-hypatia-38xhlg?file=%2FApp.tsx%3A13%2C1

 

And set the version to 12.0.0, which matches my version.

And the correct banner is displayed?

 

Charles_Roberts_0-1712228283557.png

 

I really don't understand why this is happening?

 

I am using a Remix App and have added the Polaris stylesheet reference to the root file, at app/root.jsx:

 

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

// @ts-ignore
import polarisStyles from "@shopify/polaris/build/esm/styles.css";

// @ts-ignore
import appStyles from './assets/css/style.css';

export const links = () => [
  {
    rel: "stylesheet",
    href: polarisStyles
  },
  {
    rel: "stylesheet",
    href: appStyles
  }
];

export default function App() {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <LiveReload />
        <Scripts />
      </body>
    </html>
  );
}

 

All the routes, in folders below this file, like the app/routes folder, will now inherit both style sheets.

And the default style.css is certainly working in my other routes.

 

Interestingly, I have noticed that the Banner in my Remix App, is built with the class:

 

<div class="Polaris-Banner Polaris-Banner--withinContentContainer" tabindex="0" role="status" aria-live="polite">

 

polaris-banner-1.png

 

And, the Banner in the Codesandbox App, the class is slightly different:

 

<div class="Polaris-Banner Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite">

 

polaris-banner-2.png

Charles_Roberts
Shopify Partner
47 0 8

@Olllie 

 

Here is the solution: 😊

 

Any Banner placed inside a Card will generate the version that is not displayed in the official Docs:

 

<div class="Polaris-Banner Polaris-Banner--withinContentContainer" tabindex="0" role="status" aria-live="polite">

Any Banner NOT placed inside a Card will generate the version that is displayed in the official Docs:

 

<div class="Polaris-Banner Polaris-Banner--withinPage" tabindex="0" role="status" aria-live="polite"

 

https://codesandbox.io/p/sandbox/hopeful-hypatia-38xhlg?file=%2FApp.tsx%3A16%2C75

 

polaris-banner-3.png

 

 

 

 

 

rhysnhall
Shopify Partner
3 0 5

Polaris is a hot mess. Not sure why they keep it going. Documentation does not match up, and the elements in their own apps don't match what is in Polaris. I would suggest using it only sparingly and extending their components yourself.

 

For anyone looking for an answer to this - you can use the status property instead of tone. Also if you are creating your own alerts using icons - use the color property instead of tone. Don't expect Shopify to maintain their documentation.

kunalwf
Shopify Partner
28 0 4

Probably need to use the new styles.css?
I just use this, which doesn't seem to be documented anywhere: https://unpkg.com/@shopify/polaris/build/esm/styles.css

Charles_Roberts
Shopify Partner
47 0 8