Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NPM package, unpkg and Message page issue

See original GitHub issue

Describe the bug

When I use the npm package (either locally of through unpkg) and try to render fd-message-page, I get an empty page with a missing icon (screenshot 1). However, if I build fundamental-styles locally and copy the dist folder over the dist folder from the npm package, it starts working (screenshot 2). The code I use is 100% identical from the documentation. A quick comparison between the local dist folder and the npm package dist folder reveals that in the local dist folder, all the css widgets also have a specific theme css (for example bar-sap_fiori_3.css) along with the generic one (bar.css). The unpkg link from the “Introduction” documentation page does not work:

<link href='https://unpkg.com/fundamental-styles@0.23.0/dist/fundamental-styles-sap_fiori_3.css' rel='stylesheet'>

It says that the file does not exist. When I install the npm package locally and inspect its contents, I don’t find the theme files either.

This is the html code for the message page:

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test</title>
    <link type="text/css" rel="stylesheet" href="/node_modules/fundamental-styles/dist/fundamental-styles.css" />
    <link type="text/css" rel="stylesheet" href="/node_modules/fundamental-styles/dist/theming/sap_fiori_3.css" />
    <link type="text/css" rel="stylesheet" href="/node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css" />
    <!-- For SAP fonts and icons: -->
    <link type="text/css" rel="stylesheet" href="theme.css" />
  </head>
  <body>
    <div class="fd-message-page">
      <div class="fd-message-page__container">
        <div class="fd-message-page__icon-container">
          <i role="presentation" class="sap-icon--search fd-message-page__icon"></i>
        </div>
        <div role="status" aria-live="polite" class="fd-message-page__content">
          <div class="fd-message-page__title">
            No matching items found.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

This code works when I replace the dist folder from the npm package with the dist folder from my local build. Just adding the *-sap_fiori_3, *-sap_fiori_3_dark, *-sap_fori_3_light_dark, *-sap_fiori_3_hcb, *-sap_fori_3_hcw and *-sap_horizon css files to the dist folder does not work, the generic ones have to be replaced as well, so I think there is something wrong with the general css files found in the npm package.

Is this issue related to a specific component?

I know it affects fd-message-page but it could possibly affect others.

What version of the Fundamental Library Styles are you using?

0.23.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

I’m working on Eclipse Dirigible. It’s not critical but it would be nice to have a fix before April 24th.

What front-end framework are you implementing in, e.g., Angular, React, etc.?

AngularJS

To Reproduce Steps to reproduce the behavior:

Create a project and npm install fundamental-styles@0.23.0 @sap-theming/theming-base-content
Paste the example code into index.html
Start a web server (python3 -m http.server)
Open the localhost page and see the missing icon.
Build fundamental-styles locally
Copy the generated dist folder and replace the dist folder in the fundamental-styles npm package
Reload the localhost page and see the icon

Screenshots: Screenshot 1: Screen Shot 2022-04-07 at 5 22 24 PM

Screenshot 2: Screen Shot 2022-04-07 at 5 22 36 PM

Desktop:

OS: macOS 12.3.1, Fedora Linux 35
Browser: Firefox 98, Chrome 100

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

droshevcommented, Apr 10, 2022

@StanZGenchev you are very right: for some reason the CDN version for message page icon(class fd-message-page__icon) sets the opacity to 1% instead to 50% as it is in the src. We will investigate further and come back to you.

0reactions

g-cheishvilicommented, Apr 12, 2022

Added this