Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Polaris Banner not displaying as per the docs

Polaris Banner not displaying as per the docs

autoBlogger-Oll
Shopify Partner
49 2 8

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

Ollie | Owner & Developer of autoBlogger

autoBlogger — Set it and forget it! SEO optimised and powered by AI for effortless blogging. Start your 14-day free trial today!
Replies 6 (6)

autoBlogger-Oll
Shopify Partner
49 2 8

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

Olllie_0-1698826469792.png

 

Ollie | Owner & Developer of autoBlogger

autoBlogger — Set it and forget it! SEO optimised and powered by AI for effortless blogging. Start your 14-day free trial today!
Charles_Roberts
Shopify Partner
49 0 17

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
49 0 17

@autoBlogger-Oll 

 

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 6

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
29 0 6

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
49 0 17